本文已参与「新人创作礼」活动，一起开启掘金创作之路。

DOM概述

什么是DOM ？

文档对象模型 (DOM) 是HTML和XML文档的编程接口。

文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。

一个web页面是一个文档。这个文档可以在浏览器窗口或作为HTML源码显示出来。但上述两个情况中都是同一份文档。文档对象模型（DOM）提供了对同一份文档的另一种表现，存储和操作的方式。 DOM是web页面的完全的面向对象表述，它能够使用如 JavaScript等脚本语言进行修改。

通过document 对象获取元素节点

1、 getElementById（）

• 通过id属性获取一个元素节点对象

2、getElementsByTagName()

• 通过标签名获取一组元素节点对象

3、getElementsByName（）

• 通过name 属性获取一组元素节点对象

4、innerHTML用于获取元素内部的HTML代码

• 对于自结束标签这个属性没有意义

5、如果需要读取元素节点属性

• 直接使用元素。属性名

  • 例子：元素。id 元素。name 元素。 value

  注意：class属性不能采用这种方式

  ​ 读取class属性需要用，元素。className

获取元素节点的子节点

• 通过具体的元素节点调用

1、getElementByTagName()

• 方法，返回当前节点的指定标签名后代节点

2、childNodes

• 属性，表示当前节点的所有子节点
• 包括文本节点在内的所有节点，包括标签间的空白会被当成文本节点

3、children

• 属性，获取当前节点的所有子元素节点
• 不包括文本节点 children 属性可以获取当前元素的所有子元素

3、firstChild

• 属性，表示当前节点的第一个子节点
• 可以获取第一个子节点（包括空白文本节点）

firstElmentChild 可以获取第一个子元素

4、lastChild

• 属性，表示当前节点的最后一个子节点

获取父节点合兄弟节点

通过具体的节点调用

1、parentNode

• 属性，表示当前节点的父节点

2、previousSibling

• 属性，表示当前节点的前一个兄弟节点（包括空白节点）

3、nextSibling

• 属性，表示当前节点的后一个兄弟节点

---

获取节点的内容

innerHTML

这个属性可以获取元素内部的HTML代码

innerText

这个属性可以获取元素内部的文本内容

它和innerHTML类似，不过会将里面的html标签去除

注意：文本节点的 nodeValue 就是文本内容

根据class属性查询一组元素节点对象

var box1 = document.getEllementByClassName(" box1 ");

根据css选择器查询元素节点

document.querySelector("")

var box1 = document.querySelector(".box1")

• 需要一个选择器字符串为参数，根据css选择器来查询元素节点
• 只会返回第一个符合条件的节点

document.querySelectorAll()

• 会将多个元素封装到数组返回
• 即使只有一个元素也会返回到数组里

document.body

表示对body的引用

document.documentElement

保存的是html根标签

document.all

表示页面的所有元素

创建元素节点

document.creatElement()

​ 可以用于创建元素节点对象

​ 需要一个标签名作为参数，根据标签名创建元素节点对象

​ 并将创建好的对象作为返回值返回

var li = document.createElement("li"); // 创建li标签元素节点

doucument.creatTextNode()

​ 可以创建一个文本节点对象

​ 需要一个文本内容作为参数，根据该内容创建文本节点，并将新的节点返回

var gzText = document.createTextNode("广州"); // 创建一个广州文本节点

添加子节点

appendChild()

​ 向一个父节点添加一个新的子节点

​ 用法：父节点。appendChild（子节点）；

var li = document.createElement("li") //  创建一个li节点
li.appendChild(document.createTextNode('广州')) // 往li节点里添加一个文本为广州
document.getElementById('box1').appendChild(li) // 在 获取展示ui 的box1节点并将装有广州文本的li节点添加进去

插入节点

insertBefore()

​ 可以在指定的子节点前插入新的子节点

​ 语法:

​ 父节点.insertBefore(新节点,旧节点);

var box1 = document.getElementById('box1')
    box1.appendChild(li)
    box1.insertBefore( document.createTextNode('北京'), li);
// 在 旧的li节点前添加一个北京文本节点

替换节点

replaceChild()

​ 可以使用指定的子节点替换已有的子节点

​ 语法.父节点.replaceChild(新节点,旧节点)

var box1 = document.getElementById('box1')
    box1.appendChild(li)
    box1.replaceChild( document.createTextNode('北京'), li);
// 将li节点换成北京

删除节点

removerChild()

​ - 可以删除一个子节点

​ - 语法:父节点.removeChild(子节点);

​ 不知道父节点的情况下可以用下面的方法：

​ 子节点.parentNode.removeChild(子节点);

li.parentNode.removeChild(li); // 将自身节点删除

快捷的添加节点

 box1.innerHTML += "<li>广州</li>";
 // 一般不会用这种方法这一种方法一次修改整个ul父节点

// 用节点的方式添加比较麻烦
 var li = document.createElement("li");
li.innerHTML = "广州"
box1.appendChild(li); 

使用示例：

//index.html
<div id="holder">
        <table>
            <tr>
                <td class="color">Name</td>
                <td class="color">Email</td>
                <td class="color">Salary</td>
                <td></td>
            </tr>
            <tr>
                <td>Tom</td>
                <td>tom@tom.com</td>
                <td>5000</td>
                <td><a href=#>Delete</a></td>
            </tr>
            <tr>
                <td>Jerry</td>
                <td>Jerryjerry@souhu.com</td>
                <td>8000</td>
                <td><a href=#>Delete</a></td>
            </tr>
            <tr>
                <td>Bob</td>
                <td>Bob@ton.com</td>
                <td>10000</td>
                <td><a href=#>Delete</a></td>
            </tr>
        </table>
        <div id="inf">
            <p class="color">添加新员工</p>
            name:<input type="text" id="name">
            <br>
            email:<input type="text" id="email">
            <br>
            salary:<input type="text" id="salary">
            <br>
            <button>submit</button>
        </div>
    </div>

//index.js
function del() {
        // 获取对应的表单对象
        var td = this.parentNode.parentNode;
        // 获取删除员工的名字
        var name = td.firstElementChild.innerText;
        // var name = td.getElmentByTagName("td")[0].innerHTML;
        // var name = td.children[0].innerHTML;
        // 删除前弹出一个提示框
        var flag = confirm("确定删除" + name + "吗");
        // remove删除语法
        if (flag) { td.parentNode.removeChild(td); }
    }
    window.onload = function () {
        // 点击Delete删除对应的表单
        //获取所有的超链接
        var Alla = document.getElementsByTagName("a");
        // 遍历所有的a绑定单击响应函数
        for (var i = 0; i < Alla.length; i++) {
            Alla[i].onclick = del;
        }

        // 添加员工的功能
        // 获取submit的按钮
        var btn = document.getElementsByTagName("button")[0];
        btn.onclick = function () {
            // 获取name 的信息
            var name = document.getElementById("name").value;

            // 获取email的信息
            var email = document.getElementById("email").value;

            // 获取salary的信息
            var salary = document.getElementById("salary").value;

            /*
                优化的改动用innerHTML来添加
            */
            //    先创建一个tr
            var tr = document.createElement("tr");
            tr.innerHTML = "<td>" + name + "</td>" +
                "<td>" + email + "</td>" +
                "<td>" + salary + "</td>" +
                "<td><a href='#'>Delete</a></td>";
            // 给新添加的a标签绑定函数
            // tr下获取的a标签
                var a = tr.getElementsByTagName("a")[0];
                a.onclick = del;
                // 将tr加入表单中
            var table = document.getElementsByTagName("table")[0];
            table = table.children[0];
            table.appendChild(tr);
        }
    }

添加新员工

删除员工