最直白的DOM探讨（未完待续）

DOM

首先我们要理解dom：

• dom就是「文档对象模型」，是html和xml文档的编程接口，表示多层节点构成的文档，
• 通过dom它开发者可以「添加，删除，修改」页面的各个部分，简单说：就是你的页面想要实现增删改查，以及各种交互效果，都需要通过dom来操作，
• dom就是你「操作页面的中介」，可以把你的想法「精准」的传达给页面文档，让他们按照你的想法来实现动作，那么如何精准传达呢，dom是一个由节点构成的层级结构，「每个标记都是一个节点」，所以可以通过节点，精准的控制想要实现功能的区域

节点层级

• 上面说了，节点是精准操作页面的东西，那么节点也分为很多类型，分别拥有自己不同的标记，特性和方法，

  • document节点：代表每个文档的根节点，他有唯一的子节点元素，我们称为documentElement，这是最外层的文档元素，其他所有元素都存在这个元素之内，每个文档只能有一个文档元素，xml任何元素都可能称为文档元素

• DOM中总共有「12种节点类型」，这些类型「都继承一种基本类型」。

  node 类型节点

• 我们可以通过常量和节点做比较，如果相等，说明是同一类型节点

if (someNode.nodeType == Node.ELEMENT_NODE){ 
alert("Node is an element."); 
}

小结：这个例子把常量和node的element节点做对比，如果相等，说明常量是元素节点

• 文档中的节点都与其他节点有关系，这些关系类似家族关系，html>body>页面属性标签，每个节点都有一个childNodes属性和一个NodeList的实例，

  • NodeList是一个「类数组」对象，他有长度，用于储存可以按照位子存取的有序节点，就是说，一个元素内的子节点，都在这个里面排列，按照顺序可以取到相应的节点，

    例子1：用中括号和对象的方法访问NodeList中的元素

let firstChild = someNode.childNodes[0];//第一个子元素
let secondChild = someNode.childNodes.item(1);//第二个子元素
let count = someNode.childNodes.length;

• parentNode属性指向Dom树中的父元素，

• childNodes：firstChild 和 lastChild 分别指向 childNodes 中的第一个和最后一个子节点。 someNode.firstChild 的值始终等于 someNode.childNodes[0]

• hasChildNodes()，如果返回true。说明节点有一个或者多个子节点

操作节点

• 因为所有关系指针都是只读的，所以DOM又提供了一些操纵节点的方法。

• appendChild()：用于在 childNodes 列表末尾添加节点。

• insertBefore() 方法。 这个方法接收两个参数：要插入的节点和参照节点

//添加节点
let returnedNode = someNode.appendChild(newNode);
alert(returnedNode == newNode); // true 
alert(someNode.lastChild == newNode); // true
 // 作为新的第一个子节点插入
returnedNode = someNode.insertBefore(newNode, someNode.firstChild);
alert(returnedNode == newNode); // true 
alert(newNode == someNode.firstChild); // true

• replaceChild() 方法接收两个参数：要插入的节点和要替换的节点。
• 是 cloneNode() ，会返回与调用它的节点一模一样的节 点。 cloneNode() 方法接收一个布尔值参数，表示是否深复制。在传入 true 参数时，会进行深复制，即复制节点及其整个子DOM树

本文使用 mdnice 排版