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 排版