1.什么是DOM
1.DOM 是 JavaScript 操作网页的接口,全称为“文档对象模型”(Document Object Model)。它的作用是将网页转为一个 JavaScript 对象,从而可以用脚本进行各种操作(增删改查)。
2.DOM树
3.节点:
DOM的最小组成单位就是node。档的树形结构(DOM 树),就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。
4.节点的7种类型
1.Document:整个文档树的顶层节点
2.DocumentType:doctype标签(比如)
3.Element:网页的各种HTML标签(比如、等)
4.Attribute:网页元素的属性(比如class="a" src='img/a.png')
5.Text:标签之间或标签包含的文本
6.Comment:注释
7.DocumentFragment:文档的片段 //不常用
5.节点的属性
1.nodeType属性返回一个整数值,表示节点的类型
2.nodeName 返回节点的名称
3.nodeValue 返回节点的文本值,可读可写
4.textContent 返回当前节点和他所有后代节点的文本。忽略标签。
5.nextSibling 返回当前节点的下一个兄弟节点
6.extSibling 返回当前节点的下一个兄弟节点
7.parentNode 返回当前节点的父级节点。只可能是document文档节点或元素节点
8.parentElement 返回当前节点的父级元素节点。没有返回null
9.firstChild返回当前节点中的第一个子节点。
10.lastChild 返回当前节点中的最后一个子节点。
没有则返回null
6.node的方法
1.appendChild() 用来插入节点
2.hasChildNodes() 用来判断一个节点是否有子节点
3.cloneNode() 用来克隆一个节点
4.insertBefore() 用来将一个节点插入到指定位置,,
insertBefore()要传入两个值。第一个值为要添加的节点。第二个值为讲新节点插入到此值的前面。
如果第二个值为null,就会插入到当前元素的最后。
5.removeChild() 表示从父元素中移除该子节点。
6.replaceChild() 表示替换当前节点的某一个子节点
replaceChild() 传入两个值。第一个值是新节点。第二个值是要替换的节点。
7.父节点
1.children 返回当前节点的所有元素子节点。返回的是一组nodelist数据。
2.append 向当前元素最后添加一个或多个子节点
3.prepend 向当前元素最前面添加一个或多个子节点
4.before() 向当前节点前面添加一个或多个节点。
5.after() 向当前节点后面添加一个或多个节点。
6.replaceWith() 替换当前节点。