一、概述

1.1、什么是DOM

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。

W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

1.2、DOM 树

0082

文档：一个页面就是一个文档，DOM 中使用 document 表示
元素：页面中的所有标签都是元素，DOM 中使用 element 表示
节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示

二、获取元素

2.1、概述

DOM在我们实际开发中主要用来操作元素。我们如何来获取页面中的元素呢？

获取页面中的元素可以使用以下几种方式：

根据 ID 获取
根据标签名获取
根据name名称获取
通过 HTML5 新增的方法获取
特殊元素获取

2.2、根据ID获取

使用 getElementById() 方法可以获取带有 ID 的元素对象。

<body>
    <div id="myDiv">HelloWorld</div>
    <script>
        var divObj = document.getElementById("myDiv");
        console.log(divObj);
        console.log(typeof divObj); // 返回的结果是一个对象

        // 使用 console.dir() 可以打印我们获取的元素对象，更好的查看对象里面的属性和方法
        console.dir(divObj);
    </script>
</body>

2.3、根据标签名获取

使用getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。

<body>
    <ul>
        <li>HTML</li>
        <li>JavaScript</li>
        <li>CSS3</li>
    </ul>

    <script>
        var liObjs = document.getElementsByTagName("li");
        console.log(liObjs); // 返回的是元素对象的集合 以伪数组的形式存储的

        // 遍历
        for (var i = 0; i < liObjs.length; i++) {
            console.log(liObjs[i]);
        }
    </script>
</body>

<body>
    <ul>
        <li>HTML</li>
        <li>JavaScript</li>
        <li>CSS3</li>
    </ul>
    <ol>
        <li>Vue</li>
        <li>React</li>
    </ol>
    <script>
        // 需求：我想获取ol标签里面的li

        // >> 第一步: 先获取ol, 注意返回过来的是一个数组
        var olObjs = document.getElementsByTagName("ol");

        // >> 第二步：再根据获取的olObjs[0]获取里面的所有的li
        var liObjs = olObjs[0].getElementsByTagName("li");

        // 遍历
        for (var i = 0; i < liObjs.length; i++) {
            console.log(liObjs[i]);
        }
    </script>
</body>

2.4、根据name名称获取

<body>
    跳舞: <input type="checkbox" name="hobby"> 
    唱歌: <input type="checkbox" name="hobby"> 
    学习: <input type="checkbox" name="hobby">

    <script>
        var hobbyObjs = document.getElementsByName("hobby");

        // 遍历
        for (var i = 0; i < hobbyObjs.length; i++) {
            console.log(hobbyObjs[i]);
        }
    </script>
</body>

2.5、通过 HTML5 新增的方法获取

2.5.1、根据类名获得某些元素集合

方法：getElementsByClassName

<body>
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <script>
        var boxObjs = document.getElementsByClassName("box");
        console.log(boxObjs);
    </script>
</body>

2.5.2、根据指定选择器返回第一个元素对象

方法：querySelector

<body>
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <script>
        // 页面上有两个类为box的div元素，但是只会获取第一个
        var boxObj = document.querySelector(".box");
        console.log(boxObj);

        // 页面上有两个标签名为li的元素，但是只会获取第一个
        var liObj = document.querySelector("li");
        console.log(liObj);
    </script>
</body>

2.5.3、根据指定选择器返回所有元素

<body>
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <script>
        // 获取页面上所有的类名为box的div元素
        var boxObjs = document.querySelectorAll(".box");
        console.log(boxObjs);

        // 获取页面上所有的标签为li的元素
        var liObjs = document.querySelectorAll("li");
        console.log(liObjs);
    </script>
</body>

2.6、特殊元素获取

2.6.1、获取body 元素

<body>
    <script>
        // 获取body元素

        // >> 方式一, 简单
        var bodyObj1 = document.body;
        console.log(bodyObj1);

        // >> 方式二
        var bodyObj2 = document.getElementsByTagName("body")[0];
        console.log(bodyObj2);
    </script>
</body>

2.6.2、获取html 元素

<body>
    <script>
        // 获取html元素

        // >> 方式一, 简单
        var htmlObj1 = document.documentElement;
        console.log(htmlObj1);

        // >> 方式二
        var htmlObj2 = document.getElementsByTagName("html")[0];
        console.log(htmlObj2);
    </script>
</body>

三、事件基础

3.1、概述

网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

3.2、事件三要素

事件源（谁，指的是事件被触发的对象）
事件类型（什么事件，指的是鼠标点击、还是鼠标经过、还是键盘按下）
事件处理程序（做啥，通过一个函数赋值的方式完成一个功能）

<body>
    <button id="btn">点我</button>
    <script>
        // 需求: 点击一个按钮,弹出一个对话框

        // >> 第一步: 获取事件源
        var btnObj = document.getElementById("btn");
        // >> 第二步: 绑定事件
        // btnObj.onclick
        // >> 第三步：添加事件处理程序
        btnObj.onclick = function() {
            alert("按钮被点击了...");
        }
    </script>
</body>

3.3、常见的鼠标事件

0083

四、操作元素

4.1、概述

JavaScript 的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内

容、属性等。注意以下都是属性。

4.2、改变/获取元素内容

innerHTML
innerText

<body>
    <div id="myDiv">HelloWorld</div>
    <script>
        // 获取div的内容
        var divObj = document.getElementById("myDiv");
        console.log(divObj.innerHTML);
        console.log(divObj.innerText);
    </script>
</body>

<body>
    <button id="btn1">通过innertHTML改变div内容</button>
    <button id="btn2">通过innertText改变div内容</button>

    <div id="myDiv">HelloWorld</div>
    <script>
        // 获取div元素对象
        var divObj = document.getElementById("myDiv");

        // 获取两个按钮
        var btn1Obj = document.getElementById("btn1");
        var btn2Obj = document.getElementById("btn2");

        btn1Obj.onclick = function() {
            divObj.innerHTML = "<h1>JavaScript</h1>"
        }

        btn2Obj.onclick = function() {
            divObj.innerText = "<h1>JavaScript</h1>"
        }
    </script>
</body>

4.3、常用元素的属性操作

0084

<body>
    <button id="ldh">刘德华</button>
    <button id="zxy">张学友</button> <br>
    <img src="images/ldh.jpg" alt="" title="刘德华">
    <script>
        // 获取两个按钮
        var btn1Obj = document.getElementById("ldh");
        var btn2Obj = document.getElementById("zxy");

        // 获取img标签对象
        var imgObj = document.querySelector("img");

        btn1Obj.onclick = function() {
            imgObj.src = "images/ldh.jpg";
        }

        btn2Obj.onclick = function() {
            imgObj.src = "images/zxy.jpg";
        }
    </script>
</body>

4.4、表单元素的属性操作

<body>
    <button>按钮</button>
    <input type="text" value="用户名">
    <script>
        // 点击按钮,修改输入框的值，并且将按钮禁用

        // >> 获取按钮元素对象
        var btnObj = document.querySelector("button");
        // >> 获取input元素对象
        var inputObj = document.querySelector("input");
        // >> 按钮绑定事件
        btnObj.onclick = function() {
            // 修改文本框的内容
            inputObj.value = '张三';
            // 按钮禁用
            this.disabled = true;
        }
    </script>
</body>

4.5、样式属性操作

4.5.1、说明

我们可以通过 JS 修改元素的大小、颜色、位置等样式。

0085

注意：

JS 里面的样式采取驼峰命名法比如 fontSize、 backgroundColor
JS 修改 style 样式操作，产生的是行内样式，CSS 权重比较高

4.5.2、行内样式操作

<head>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        // 点击div元素，背景颜色变为红色，宽度变大

        // >> 1、获取div元素对象
        var divObj = document.querySelector("div");
        // >> 2、绑定事件处理程序
        divObj.onclick = function() {
            this.style.backgroundColor = 'red';  // 采用驼峰命名法
            this.style.width = '500px';
        }
    </script>
</body>

<head>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <button>隐藏</button>
    <script>
        // 点击按钮让div能够显示或者隐藏

        // >> 1、获取div元素
        var divObj = document.querySelector("div");
        // >> 2、获取button元素对象
        var buttonObj = document.querySelector("button");
        // >> 3、绑定事件处理程序
        var flag = true; // 表示div显示
        buttonObj.onclick = function() {
            if (flag) {
                // true表示显示则隐藏
                divObj.style.display = 'none';
                flag = false;
                this.innerHTML = '显示'
            } else {
                divObj.style.display = 'block';
                flag = true;
                this.innerHTML = '隐藏'
            }
        }
    </script>
</body>

<body>
    <input type="text" value="搜索你想要的内容呗">
    <script>
        // 当鼠标点击文本框时，里面的默认文字隐藏，当鼠标离开文本框时，里面的文字显示。

        // >> 1、获取input元素
        var inputObj = document.querySelector("input");
        // >> 2、绑定事件处理程序
        // >>>> 获得焦点事件 onfocus 
        inputObj.onfocus = function() {
            if (this.value === '搜索你想要的内容呗') {
                this.value = '';
            }
        };
        // >>>> 失去焦点事件 onblur
        inputObj.onblur = function() {
            if (this.value === '') {
                this.value = '搜索你想要的内容呗';
            }
        };
    </script>
</body>

4.5.3、类名样式操作

# 使用场景
	1. 如果样式修改较多，可以采取操作类名方式更改元素样式。
	2. class因为是个保留字，需要使用className来操作元素类名属性
	3. className会直接更改元素的类名，会覆盖原先的类名。

<head>
    <style>
        .first {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-top: 100px;
        }
        
        .newChangeStyle {
            width: 300px;
            height: 300px;
            background-color: red;
            color: blue;
        }
    </style>
</head>
<body>
    <div class="first">HelloWorld</div>
    <script>
        // 点击div,设置背景颜色,高度,宽度,字体颜色

        // 1、获取div元素
        var divObj = document.querySelector("div");
        // 2、注册事件
        divObj.onclick = function() {
            // 通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况
            // this.className = 'newChangeStyle';

            // 注: 这种方式把原先的类名也给覆盖了,如果想保留，可以这样
            this.className = 'first newChangeStyle';
        };
    </script>
</body>

4.6、总结

1	# 操作元素是DOM的核心内容

0086

4.7、排他思想

4.7.1、需求

0087

如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：

所有元素全部清除样式（干掉其他人）
给当前元素设置样式（留下我自己）
注意顺序不能颠倒，首先干掉其他人，再设置自己

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        // 点击某个button,设置被点击button的背景颜色

        // 1、获取所有的button元素对象
        var buttonObjs = document.querySelectorAll("button");
        // 2、循环遍历注册事件
        for (var i = 0; i < buttonObjs.length; i++) {
            buttonObjs[i].onclick = function() {
                // 第一步：我们先把所有的按钮背景颜色去掉  干掉所有人
                for (var j = 0; j < buttonObjs.length; j++) {
                    buttonObjs[j].style.backgroundColor = '';
                }
                // 第二步：设置当前的元素背景颜色为红色 留下我自己
                this.style.backgroundColor = 'red';
            }
        }
    </script>
</body>

4.7.2、案例1

<body>
    <table border="1px">
        <thead>
            <tr>
                <th>代码</th>
                <th>名称</th>
                <th>最新公布净值</th>
                <th>累计净值</th>
                <th>前单位净值</th>
                <th>净值增长率</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
        </tbody>
    </table>
    <script>
        // 鼠标移动到表格的某一行，修改该行的背景颜色

        // 1、获取tbody里面所有的tr行
        var trObjs = document.querySelector("tbody").querySelectorAll("tr");
        // 2、为每一个行绑定事件
        for (var i = 0; i < trObjs.length; i++) {
            trObjs[i].onmouseover = function() {
                // 第一步：我们先把所有的按钮背景颜色去掉  干掉所有人
                for (var j = 0; j < trObjs.length; j++) {
                    trObjs[j].style.backgroundColor = '';
                }
                // 第二步：设置当前的元素背景颜色为红色 留下我自己
                this.style.backgroundColor = 'red';
            }
        }
    </script>
</body>

<body>
    <table border="1px">
        <thead>
            <tr>
                <th>代码</th>
                <th>名称</th>
                <th>最新公布净值</th>
                <th>累计净值</th>
                <th>前单位净值</th>
                <th>净值增长率</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
        </tbody>
    </table>
    <script>
        // 鼠标移动到表格的某一行，修改该行的背景颜色

        // 1、获取tbody里面所有的tr行
        var trObjs = document.querySelector("tbody").querySelectorAll("tr");
        // 2、为每一个行绑定事件
        for (var i = 0; i < trObjs.length; i++) {
            trObjs[i].onmouseover = function() {
                this.style.backgroundColor = 'red';
            }
            trObjs[i].onmouseout = function() {
                this.style.backgroundColor = '';
            }
        }
    </script>
</body>

4.7.3、案例2

<body>
    全选：<input type="checkbox" id="checkAll" /> <br/> 
    唱歌: <input type="checkbox" name="hobby" /> <br/> 
    跳舞: <input type="checkbox" name="hobby" /> <br/> 
    学习: <input type="checkbox" name="hobby" /> <br/> 
    打游戏: <input type="checkbox" name="hobby" /> <br/>

    <script>
        // >> 获取全选按钮
        var checkAllObj = document.getElementById("checkAll");
        // >> 获取所有的爱好复选框
        var hobbyObjs = document.getElementsByName("hobby");

        // 全选和取消全选做法：让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可
        checkAllObj.onclick = function() {
            for (var i = 0; i < hobbyObjs.length; i++) {
                hobbyObjs[i].checked = this.checked;
            }
        }

        // 下面复选框需要全部选中， 上面全选才能选中做法： 给下面所有复选框绑定点击事件，每次点击，都要循环		   查看下面所有的复选框是否有没选中的，如果有一个没选中的， 上面全选就不选中。
        for (var i = 0; i < hobbyObjs.length; i++) {
            hobbyObjs[i].onclick = function() {
                var flag = true; // 表示都选中了
                // 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
                for (var j = 0; j < hobbyObjs.length; j++) {
                    if (!hobbyObjs[j].checked) {
                        flag = false; // 一旦发现有没有选中的,则标记为false
                        break;
                    }
                }
                checkAllObj.checked = flag;
            }
        }
    </script>
</body>

4.8、自定义属性的操作

4.8.1、获取属性值

<body>
    <div id="myDiv"></div>
    <script>
        // 获取div元素对象
        var divObj = document.querySelector("div");

        // >> 获取属性方式一: element.属性
        console.log(divObj.id);

        // >> 获取属性方式二: element.getAttribute('属性')
        console.log(divObj.getAttribute("id"));
    </script>
</body>

<body>
    <div index="1"></div>
    <script>
        // 获取div元素对象
        var divObj = document.querySelector("div");

        // >> 获取属性方式一: element.属性
        console.log(divObj.index); // undefined

        // >> 获取属性方式二: element.getAttribute('属性')
        console.log(divObj.getAttribute("index"));
    </script>
</body>

1
2
3

# 总结
	1. element.属性 获取内置属性值（元素本身自带的属性）
	2. element.getAttribute(‘属性’); 主要获得自定义的属性 （标准） 我们程序员自定义的属性

4.8.2、设置属性值

<body>
    <div></div>
    <script>
        // 获取div元素对象
        var divObj = document.querySelector("div");

        // >> 设置属性方式一: element.属性 = 值
        divObj.id = 'myDiv';
        divObj.className = 'content';

        // >> 设置属性方式二: element.setAttribute('属性',值)
        divObj.setAttribute('style', 'width:200px');
    </script>
</body>

<body>
    <div></div>
    <script>
        // 获取div元素对象
        var divObj = document.querySelector("div");

        // >> 设置属性方式一: element.属性 = 值
        divObj.index = 1; // 不能添加index属性

        // >> 设置属性方式二: element.setAttribute('属性',值)
        divObj.setAttribute('index2', 2);
    </script>
</body>

1
2
3

# 总结
	1、element.属性 设置内置属性值 
	2、element.setAttribute(‘属性’); 主要设置自定义的属性 （标准）

4.8.3、移除属性

<body>
    <div index="1">ss</div>
    <script>
        // 获取div元素对象
        var divObj = document.querySelector("div");

        // >> 移除属性
        divObj.removeAttribute("index");
    </script>
</body>

4.9、H5自定义属性

4.9.1、说明

1. 自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
2. 自定义属性获取是通过getAttribute(‘属性’) 获取。
3. 但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。
4. H5给我们新增了自定义属性：

4.9.2、设置H5自定义属性

H5规定自定义属性是这样的：data-开头做为属性名并且赋值。

比如 <div data-index="1"></div> ，或者使用 JS 设置 element.setAttribute(‘data-index’, 2)

<body>
    <div></div>
    <script>
        // 获取div元素对象
        var divObj = document.querySelector("div");

        // >> 设置属性
        divObj.setAttribute("data-index", 1);
    </script>
</body>

4.9.3、获取H5自定义属性

1
2
3

# 两种方式
	1. 兼容性获取 element.getAttribute(‘data-index’);
	2. H5新增 element.dataset.index 或者 element.dataset[‘index’] ie 11才开始支持

<body>
    <div></div>
    <script>
        // 获取div元素对象
        var divObj = document.querySelector("div");

        // >> 设置属性
        divObj.setAttribute("data-index", 1);

        // >> 获取属性值方式一
        console.log(divObj.getAttribute("data-index"));

        // >> 获取属性方式二
        console.log(divObj.dataset.index);
        console.log(divObj.dataset['index']);
    </script>
</body>

五、节点操作

5.1、说明

其实对于获取元素节点，一般来说有两种方式：

0088

5.2、概述

网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。

HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以

创建或删除。

0089

一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个

基本属性。

元素节点 nodeType 为 1
属性节点 nodeType 为 2
文本节点 nodeType 为 3 （文本节点包含文字、空格、换行等）

我们在实际开发中，节点操作主要操作的是元素节点

1	1. 利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。

5.3、节点层级

5.3.1、父级节点

# 获取方式
	 node.parentNode
# 说明
	1. parentNode 属性可返回某节点的父节点，注意是最近的一个父节点
	2. 如果指定的节点没有父节点则返回 null

<body>
    <div>
        <div id="parent">
            <div id="child">HelloWorld</div>
        </div>
    </div>
    <script>
        // 得到子节点
        var childObj = document.querySelector("#child");
        // 获取父节点
        console.log(childObj.parentNode.id);
    </script>
</body>

5.3.2、子级节点

5.3.2.1、方式一

# 方式
	parentNode.childNodes（标准）
# 说明
	1. 返回包含指定节点的子节点的集合
	2. 返回值里面包含了所有的子节点，包括元素节点，【文本节点】等
	3. 如果只想要获得里面的元素节点，则需要专门处理。 所以我们一般不提倡使用childNodes

<body>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>

    </ul>
    <script>
        // 得到父元素节点
        var ulObj = document.querySelector("ul");
        // 获取ul节点下面所有的子节点li
        console.log(ulObj.childNodes); // NodeList(9)
    </script>
</body>

<body>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>

    </ul>
    <script>
        // 得到父元素节点
        var ulObj = document.querySelector("ul");
        // 获取ul节点下面所有的子节点li
        for (var i = 0; i < ulObj.childNodes.length; i++) {
            if (ulObj.childNodes[i].nodeType == 1) {
                // 表示的是元素节点
                console.log(ulObj.childNodes[i]);
            }
        }
    </script>
</body>

5.3.2.2、方式二

# 方式
	parentNode.children（非标准）
# 说明
	1. parentNode.children是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回。
	2. 虽然children 是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用

<body>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>

    </ul>
    <script>
        // 得到父元素节点
        var ulObj = document.querySelector("ul");
        // 获取ul节点下面所有的子节点li
        console.log(ulObj.children);
    </script>
</body>

5.3.3、获取第一个和最后一个子节点

<body>
    <ol>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
        <li>我是li5</li>
    </ol>
    <script>
        // 得到父元素节点
        var olObj = document.querySelector("ol");
        // 获取ol节点的第一个子节点
        console.log(olObj.firstChild); // #text
        // 获取ol节点的最后一个子节点
        console.log(olObj.lastChild); // #text
        
        /*
        	说明
        		firstChild、lastChild 第一个子节点、最后一个节点 不管是文本节点还是元素节点
        */
    </script>
</body>

<body>
    <ol>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
        <li>我是li5</li>
    </ol>
    <script>
        // 得到父元素节点
        var olObj = document.querySelector("ol");
        // 获取ol节点的第一个元素子节点
        console.log(olObj.firstElementChild); // <li>
        // 获取ol节点的最后一个元素子节点
        console.log(olObj.lastElementChild); // <li>
        
        // 有兼容性问题，IE9+ 以上才支持。
    </script>
</body>

实际开发中，firstChild 和 lastChild 包含其他节点，操作不方便，而 firstElementChild 和 lastElementChild 又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢？

解决方案：

如果想要第一个子元素节点，可以使用 parentNode.chilren[0]
如果想要最后一个子元素节点，可以使用 parentNode.chilren[parentNode.chilren.length - 1]

<body>
    <ol>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
        <li>我是li5</li>
    </ol>
    <script>
        // 得到父元素节点
        var olObj = document.querySelector("ol");
        // 获取ol节点的第一个元素子节点
        console.log(olObj.children[0]);
        // 获取ol节点的最后一个元素子节点
        console.log(olObj.children[olObj.children.length - 1]);
    </script>
</body>

5.3.4、兄弟节点

<body>
    <div>我是div1</div>
    <div class="div2">我是div2</div>
    <span>我是span</span>
    <script>
        var divObj = document.querySelector(".div2");

        // 获取上一个兄弟节点
        var preObj1 = divObj.previousSibling; // 包含文本节点
        console.log(preObj1);
        var preObj2 = divObj.previousElementSibling; // 兄弟元素节点
        console.log(preObj2);

        // 获取下一个兄弟节点
        var nextObj1 = divObj.nextSibling;
        console.log(nextObj1);

        var nextObj2 = divObj.nextElementSibling;
        console.log(nextObj2);
    </script>
</body>

5.4、创建节点及添加节点

5.4.1、语法

# 1、创建节点
	document.createElement('标签名')
	创建由 标签名 指定的 HTML 元素，这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。

# 2、添加节点
	a. node.appendChild(child)
		该方法将一个节点添加到指定父节点的子节点列表末尾。
		
	b. node.insertBefore(child, 指定元素)
		 该方法将一个节点添加到父节点的指定子节点前面。

<body>
    <ul>
        <li>高圆圆</li>
    </ul>
    <script>
        // 1、创建元素节点
        var liObj = document.createElement("li");
        liObj.innerHTML = '贾静雯';

        // >> 添加li节点到ul节点的末尾
        var ulObj = document.querySelector("ul");
        ulObj.appendChild(liObj);

        // 2、创建元素节点
        var liObj2 = document.createElement("li");
        liObj2.innerHTML = '赵敏';

        // >> 添加li节点到ul节点中的高圆圆节点的前面
        ulObj.insertBefore(liObj2, ulObj.children[0])
    </script>
</body>

5.4.2、留言板案例

<body>
    <textarea name="" id=""></textarea>
    <button>发布</button>
    <ul>
    </ul>
    <script>
        // 1、获取元素
        var textAreaObj = document.querySelector("textarea");
        var btnObj = document.querySelector("button");
        var ulObj = document.querySelector("ul");

        // 2、绑定按钮事件
        btnObj.onclick = function() {
            // >> 获取内容
            var content = textAreaObj.value;
            if (content == null || content == '') {
                alert("请输入内容");
                return false;
            }
            // >> 创建li节点
            var liObj = document.createElement("li");
            liObj.innerHTML = content;

            // >> 追加
            ulObj.insertBefore(liObj, ulObj.children[0]);
        }
    </script>
</body>

5.5、删除节点

5.5.1、语法

1 2	# 语法 node.removeChild(child)

<body>
    <button>删除</button>
    <ul>
        <li>高圆圆</li>
        <li>贾静雯</li>
        <li>赵敏</li>
    </ul>
    <script>
        // 1、获取元素
        var btnObj = document.querySelector("button");
        var ulObj = document.querySelector("ul");

        // 2、绑定按钮事件
        btnObj.onclick = function() {
            // 依次删除每一个li孩子
            if (ulObj.children.length == 0) {
                btnObj.disabled = true;
            } else {
                ulObj.removeChild(ulObj.children[0]);
            }
        }
    </script>
</body>

5.5.2、留言板案例

<body>
    <textarea name="" id=""></textarea>
    <button>发布</button>
    <ul>
    </ul>
    <script>
        // 1、获取元素
        var textAreaObj = document.querySelector("textarea");
        var btnObj = document.querySelector("button");
        var ulObj = document.querySelector("ul");

        // 2、绑定按钮事件
        btnObj.onclick = function() {
            // >> 获取内容
            var content = textAreaObj.value;
            if (content == null || content == '') {
                alert("请输入内容");
                return false;
            }
            // >> 创建li节点
            var liObj = document.createElement("li");
            liObj.innerHTML = content;
            // >> 创建a标签
            var aObj = document.createElement("a");
            aObj.innerHTML = '删除';
            aObj.setAttribute("href", "javascript:void(0)");

            // 绑定事件
            aObj.onclick = function() {
                this.parentNode.parentNode.removeChild(this.parentNode);
            }

            // >> 追加a节点
            liObj.appendChild(aObj);

            // >> 追加li节点
            ulObj.insertBefore(liObj, ulObj.children[0]);
        }
    </script>
</body>

5.6、复制节点/克隆节点

5.6.1、语法

# 语法
	 node.cloneNode()
	 该方法返回调用该方法的节点的一个副本。 也称为克隆节点/拷贝节点
	 
# 注意点
	1. 如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。
	2. 如果括号参数为 true ，则是深度拷贝，会复制节点本身以及里面所有的子节点

<body>
    <ul>
        <li>高圆圆</li>
        <li>贾静雯</li>
        <li>赵敏</li>
    </ul>
    <script>
        // 1、获取元素
        var ulObj = document.querySelector("ul");

        // 2、>> node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
        var liObj1 = ulObj.children[0].cloneNode();
        ulObj.appendChild(liObj1);

        // 3、>> node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容
        var liObj2 = ulObj.children[0].cloneNode(true);
        ulObj.appendChild(liObj2);
    </script>
</body>

5.6.2、动态生成表格

<body>
    <table border="1px">
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script>
        // 1.先去准备好学生的数据
        var datas = [{
            name: '贾静雯',
            subject: 'JavaScript',
            score: 100
        }, {
            name: '赵敏',
            subject: 'HTML',
            score: 98
        }, {
            name: '贾静雯',
            subject: 'CSS',
            score: 99
        }];
        // 2、获取tbody元素节点对象
        var tbodyObj = document.querySelector("tbody");

        // 3、数组中有多少个元素,就意味着有多少人,就意味着表格中有多少行
        for (var i = 0; i < datas.length; i++) {
            // >> 3.1 每循环一次就是创建一个tr
            var trObj = document.createElement("tr");
            // >> 3.2 有几个单元格,是取决于数组中的元素对象中有几个属性
            for (var key in datas[i]) {
                // >> 3.3 创建单元格
                var tdObj = document.createElement("td");
                // >> 3.4 向td单元格中添加内容
                tdObj.innerHTML = datas[i][key];
                // >> 3.5 将td追加到tr中
                trObj.appendChild(tdObj);
            }
            // >> 3.6、创建由删除超链接的td
            var delTdObj = document.createElement("td");
            delTdObj.innerHTML = '<a href="javascript:;">删除 </a>';
            trObj.appendChild(delTdObj);
            // >> 3.7 追加到tbodyObj中
            tbodyObj.appendChild(trObj);
        }
        // 超链接点击事件
        var aObjs = document.querySelectorAll("a");
        for (var i = 0; i < aObjs.length; i++) {
            aObjs[i].onclick = function() {
                // 此处不能使用aObjs[i].parentNode.parentNode , i 有作用域的问题
            	tbodyObj.removeChild(this.parentNode.parentNode);
            }
        }
    </script>
</body>