JavaScript DOM

操作DOM对象
加强版

JavaScript个人整理

操作DOM对象

获得DOM节点

浏览器网页就是一个DOM树形结构
+ 更新: 更新DOM节点
+ 遍历DOM节点: 得到DOM节点
+ 删除: 删除一个DOM节点
+ 添加: 添加一个新的节点

// 要操作一个DOM节点就必须先获得这个DOM节点
// 获得DOM节点
<div id="Syp">
    <h1>实验品</h1>
    <p id="Reuben">鲁本</p>
    <p class="Angel">安琪</p>
    <p id="Stitch">史迪奇</p>
</div>

<script>
    // 对应 css选择器
    var h1 = document.getElementsByTagName("h1")
    var Reuben = document.getElementById("Reuben")
    var Angel = document.getElementByclassName("Angel")
    var Stitch = document.getElementById("Stitch")
    // 获取父节点下的所有子节点
    var childrens = Syp.hildrens;
    // Syp.firstChild
    // Syp.LastChild
</script>

更新DOM节点

// 要操作一个DOM节点就必须先获得这个DOM节点
// 获得DOM节点
<div id="Syp">
    <h1>实验品</h1>
    <p id="Reuben">鲁本</p>
    <p class="Angel">安琪</p>
    <p id="Stitch">史迪奇</p>
</div>

<script>
    var Syp = document.getElementById("Syp")
</script>

操作文本

// 修改文本的值
Syp.innerText = '我叫史迪奇';
// 可以解析HTML文本标签
Syp.innerHTML = '<strong>我叫史迪奇</strong>';

操作css

// 属性使用 字符串 包起来
Syp.style.color = 'blue';
// fontSize是驼峰命名
Syp.style.fontSize = '333px';
Syp.style.padding = '3em';

删除节点

步骤: 先获取父节点, 再获取子节点, 然后通过父节点删除子节点

<div id="Syp">
    <h1>实验品</h1>
    <p id="Reuben">鲁本</p>
    <p class="Angel">安琪</p>
    <p id="Stitch">史迪奇</p>
</div>

<script>
    // 先获取父节点
    var Syp = Reuben.parentElement;
    // 再获取子节点
    var Reuben = document.getElementById("Reuben")
    // 然后通过父节点删除子节点
    Syp.removeChild(Reuben)

    // 删除是一个动态过程 一删除其余的也跟着删除
    Syp.removeChild(Syp.children[0])
</script>

插入DOM节点

<p id="Syp">实验品</p>
<div id="list">
    <p id="Reuben">鲁本</p>
    <p id="Angel">安琪</p>
    <p id="Stitch">史迪奇</p>
</div>

<script>
    var Syp = document.getElementById("Syp")
    var list = document.getElementById("list")
</script>

然后浏览器输入来实现追加效果

// 追加
list.appendChild(Stitch);

创建DOM新节点

<p id="Syp">实验品</p>
<div id="list">
    <p id="Reuben">鲁本</p>
    <p id="Angel">安琪</p>
    <p id="Stitch">史迪奇</p>
</div>

<script>
    var Syp = document.getElementById("Syp")
    var list = document.getElementById("list")

    // 通过 JS 创建新的p节点
    var sdq = document.createRlement("p")
    // 给它创建id
    sdq.id = "sdq"
    // 内容
    sdq.innerText = "我叫史迪奇"

    list.appendChild

</script>

然后浏览器输入来实现创建效果

// 创建
list.appendChild(sdq);

创建一个script标签节点

<p id="Syp">实验品</p>
<div id="list">
    <p id="Reuben">鲁本</p>
    <p id="Angel">安琪</p>
    <p id="Stitch">史迪奇</p>
</div>

<script>
    var Syp = document.getElementById("Syp")
    var list = document.getElementById("list")
    var sdq = document.createRlement("p")
    sdq.id = "sdq"
    sdq.innerText = "我叫史迪奇"

    // 通过这个属性, 可以设置任意的值
    var script = document.createRlement("script");
    script.setAttribute('type','text/javascript')
</script>

然后浏览器输入来实现创建效果

// 创建
list.appendChild(script);

创建一个script标签节点

<p id="Syp">实验品</p>
<div id="list">
    <p id="Reuben">鲁本</p>
    <p id="Angel">安琪</p>
    <p id="Stitch">史迪奇</p>
</div>

<script>
    var Syp = document.getElementById("Syp")
    var list = document.getElementById("list")
    var sdq = document.createRlement("p")
    sdq.id = "sdq"
    sdq.innerText = "我叫史迪奇"

    // 创建空style标签
    var style = document.createRlement("style");
    style.setAttribute('type','text/css');
    // 标签内容
    style.innerHTML = 'body{background-color: chartreuse;}'
    // document.getElementsByTagName('head')[0].appendChild(style)
</script>

然后浏览器输入来实现创建效果

// 创建style
document.getElementsByTagName('head')[0].appendChild(style)

操作表单 (验证)

文本框 text
下拉框

实验品编号: 有看过没看过

提交表单

<!-- MD5 工具类 -->
<script src="https:cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<form action="#" method="post">
<p>
    <span>实验品编号: </span><input type="text" id="name">
</p>
<p>
    <span>密&emsp;&emsp;&emsp;码: </span><input type="password" id="input-pwd">
</p>
    <input type="hidden" id="md5-pwd" name="password">
    <!-- 绑定事件 onclick 被点击 -->
    <button type="submit" onclick="dianji()">登陆</button>

<script>
    function dianji()
        var name = document.getElementById("name");
        var pwd = document.getElementById("pwd");
        var md5pwd = document.getElementById("md5-pwd");
        console.log(name.value);
        console.log(pwd.value);

        // MD5 算法
        pwd.value = md5(pwd.value)
        console.log(pwd.value);
</script>

以下为效果

实验品编号:

密码:

加强版

<!-- MD5 工具类 -->
<script src="https:cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

<!-- 表单绑定提交事件onsubmit= 绑定应该提交检查的函数 trur和false将结果返回给表单用 -->
<form action="http://www.baidu.com/" method="post" onsubit="dianji()">
<p>
    <span>实验品编号: </span><input type="text" id="name">
</p>
<p>
    <span>密&emsp;&emsp;&emsp;码: </span><input type="password" id="input-pwd">
</p>
    <input type="hidden" id="md5-pwd" name="password">
    <!-- 绑定事件 onclick 被点击 -->
    <button type="submit">登陆</button>

<script>
    function dianji(){
        alert(1);
        var name = document.getElementById("name");
        var pwd = document.getElementById("pwd");
        var md5pwd = document.getElementById("md5-pwd");
        // MD5 算法
        md5pwd.value = md5(pwd.value);
        // 可以判断表单内容 true 通过提交 false 阻止提交
        return true;
    }
</script>

以下为效果

实验品编号:

密码: