DOM操作

最新推荐文章于 2022-07-14 14:06:38 发布

weiweiweb888

最新推荐文章于 2022-07-14 14:06:38 发布

阅读量133

点赞数

CC 4.0 BY-SA版权

文章标签： html javascript html5

本文链接：https://blog.csdn.net/weiweiweb888/article/details/120557002

这篇博客介绍了HTML页面的DOM树结构，讲解了如何获取和操作DOM节点，包括节点的类型、名称、内容以及子节点、父节点的关系。内容涵盖节点的基本属性如nodeType、nodeName、nodeValue，以及如何通过appendChild、insertBefore等方法创建、插入、删除和替换节点。此外，还涉及了表单和表格的操作，如表单元素的获取、事件处理以及表单提交和重置的方法。

1、获取节点

1、节点

加载 HTML 页面时，web 浏览器生成一个树型结构，用来表示页面内部结构，称之为 DOM树，DOM 将这种树型结构理解为由节点组成。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 家谱树 -->
    <p>11111111</p>
    <ul id="ul1">
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
    </ul>
</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JM8C6Phf-1632922906026)(C:\Users\Administrator\Desktop\课堂笔记\第二阶段\笔记\image\图片1.png)]

2、子节点

父级.children：返回元素节点(没有兼容问题)
父级.childNodes：除了返回元素节点，有可能还包含文本节点（IE8及以下，只返回元素节点）

返回的是一个对象（类数组、伪数组），有长度，可以通过下标获取某一个

var ul = document.getElementById('ul1');

console.log(ul.children); // 4  只有元素节点
console.log(ul.childNodes); // 在IE8及以下，只返回元素节点，在标准浏览器下，还有可能返回换行文本节点（IE8及以下4个，标准浏览器9个）

3、节点基本属性

节点.nodeType
节点.nodeName
节点.nodeValue

var p = document.querySelector('p');
var ul = document.getElementById('ul1');
var li = ul.childNodes;


// 节点.nodeType    节点类型
// 返回1--12有数字
// 1：元素节点     2：属性节点      3：文本节点     9：文档节点
console.log(p.nodeType); // 1
console.log(ul.nodeType); // 1
for (var i = 0; i < li.length; i++) {
    console.log(li[i].nodeType);
}


// --------------------------------
// 节点.nodeName    节点名称
// 元素节点返回的是大写的标签名(字符串)，文本节点返回的是#text
console.log(p.nodeName); // P
console.log(ul.nodeName); // UL
for (var i = 0; i < li.length; i++) {
    console.log(li[i].nodeName);
}


// ------------------------------
// 节点.nodeValue   节点内容
// 节点内容：认为只有文本节点才有内容
console.log(p.nodeValue); // null

// 取得p的第一个孩子，并找到它的内容
console.log(p.childNodes[0].nodeValue); // 11111111
// 推荐：innerHTML   innerText

4、父节点

元素.parentNode 返回父级
元素.offsetParent 返回离它最近的有定位属性的父级，如果没有定位的父级，则返回body

<div id="box1">
    <div id="box2">
        <div id="box3"></div>
    </div>
</div>

var box3 = document.getElementById('box3');

console.log(box3.parentNode); // box2
console.log(box3.offsetParent);

5、其它节点

<ul>
    <li>11111111</li>
    <li>22222222</li>
    <li>3333333</li>
    <li>4444444</li>
</ul>

<script>
    var ul = document.querySelector('ul');

    // 父级.firstChild      在标准浏览器中返回的有可能是第一个文本节点，IE8及以下返回的是第一个元素节点
    // 父级.firstElementChild   在标准浏览器下返回的是第一个元素节点，在IE8及以下，返回undefined

    // 第一个子节点
    // console.log(ul.firstChild);
    // console.log(ul.firstElementChild);
    var first = ul.firstElementChild || ul.firstChild;
    first.style.backgroundColor = 'green';

    // 最后一个子节点
    var last = ul.lastElementChild || ul.lastChild;
    last.style.backgroundColor = 'pink';

    // 下一个兄弟节点
    var next = first.nextElementSibling || first.nextSibling;
    next.style.backgroundColor = 'yellow';

    // 上一个兄弟节点
    var prev = last.previousElementSibling || last.previousSibling;
    prev.style.backgroundColor = 'red';

</script>

2、操作节点

1、创建节点

创建标签：document.createElement(标签名);
创建文本：document.createTextNode(文本);

2、追加节点

父元素.appendChild(子元素);

子元素添加到父元素中，放到最后

3、插入节点

父元素.insertBefore(要插入的节点, 参考的节点);

要插入的节点放在参考元素的前面

4、删除节点

父元素.removeChild(被删除的元素)

返回被删除的元素

5、替换节点

父元素.replaceChild(新的节点，被替换的节点);

6、克隆节点

被克隆的元素.cloneNode(布尔);

返回克隆出来的新节点，如果参数为true，则克隆子孙节点，如果为false，则只克隆当前这个标签

7.模板

tr.innerHTML = `<td><input type="checkbox"></td>
                <td>${uname.value}</td>
                <td>${sex.checked ? '男' : '女'}</td>
                <td>${age.value}</td>`;

3、表格操作

DOM提供了可以简便快速获取表格元素的属性，先获取到表格table对象(oTab)，再通过table获取里面的元素

再通过 table 获取里面的元素

thead-----oTab.tHead 一个
tfoot------oTab.tFoot 一个
Tbody----oTab.tBodies 一堆
tr----------oTab.rows 一堆
td----------oTab.tr.cells 一堆(必须通过tr来获取)

4、表单操作

1、获取表单元素

通过form.name属性，获取到对应的元素

<form action="" id="form">
    <input type="text" name="uname">
    <input type="password" name="pass">

    <input type="checkbox" name="aihao">
    <input type="checkbox" name="aihao">
    <input type="checkbox" name="aihao">
</form>

<script>
    // 通过 form.name 可以获取到相对应的表单元素

    var form = document.getElementById('form');

    var uname = form.uname;
    var pass = form.pass;
    var ah = form.aihao;


    console.log(uname, pass);
    console.log(ah);

</script>

2、表单事件

form.onsubmit = function(){} // 提交事件
form.onreset = function(){} // 重置事件

<form action="" id="form">
    <input type="text" name="uname">
    <input type="password" name="pass">

    <br>
    <br>
    <input type="submit" value="提交">
    <input type="reset" value="重置">
</form>

<script>
    var form = document.getElementById('form');

    var uname = form.uname;
    var pass = form.pass;

    // 提交事件
    // 点击提交按钮，会触发这个提交事件，如果在这个事件中，返回false，则可以阻止提交
    // 可以对表单进行验证
    form.onsubmit = function () {
        if (!uname.value || !pass.value) {
            alert('用户名和密码必须填写')
            return false;
        }
    }

    // 重置事件
    // 点击重置按钮时，会触发这个重置事件，如果在这个事件中，返回false，则可以阻止重置
    form.onreset = function () {
        // var tag = confirm('是否真的重置？');
        // if (tag) {
        //     return true;
        // } else {
        //     return false;
        // }

        return confirm('是否真的重置？');
    }

</script>

3、表单方法

form.submit() // 提交方法
form.reset() // 重置方法

<form action="" id="form">
    <input type="text" name="uname">
    <input type="password" name="pass">
</form>

<span>提交</span>
<span>重置</span>

<script>
    var form = document.getElementById('form');
    var span = document.querySelectorAll('span');

    // 提交方法
    span[0].onclick = function () {
        form.submit();
    }

    // 重置方法
    span[1].onclick = function () {
        form.reset();
    }
</script>

4、得焦失焦

<input type="text">

<script>
    var input = document.querySelector('input');

    // 得焦事件
    input.onfocus = function () {
        this.style.backgroundColor = 'red';
    }

    // 失焦事件
    input.onblur = function () {
        this.style.backgroundColor = '';
    }


    // -----------------------------
    // 3s钟得到焦点，接着3s以后又失去焦点
    setTimeout(function () {
        input.focus();
        setTimeout(function () {
            input.blur();
        }, 3000);
    }, 3000);
</script>

5、input事件

<input type="text">

<script>
    var input = document.querySelector('input');

    // 内容只要发生变化时触发的事件
    // IE8及以下不支持
    input.oninput = function () {
        console.log(this.value);
    }

    // IE8及以下支持
    input.onpropertychange = function () {
        console.log(this.value);
    }
</script>

6、change事件

<input type="text">

<script>
    var input = document.querySelector('input');

    // 失去焦点时内容发生变化时触发的事件
    input.onchange = function () {
        console.log(this.value);
    }
</script>

   console.log(this.value);
}

// IE8及以下支持
input.onpropertychange = function () {
    console.log(this.value);
}

```

6、change事件

<input type="text">

<script>
    var input = document.querySelector('input');

    // 失去焦点时内容发生变化时触发的事件
    input.onchange = function () {
        console.log(this.value);
    }
</script>