HTML文档中的所有节点组成了一个文档树模型,HTML文档中的每个元素、属性、文本等都代表着树中的一个节点。这些节点相互联系,相互影响,构成一个完整的页面,我们称之为模型。
一、节点分类
HTML文档中的每个成分都是一个节点:
整个文档都是一个文档节点 document
每个HTML标签是一个元素节点
包含在HTML元素中的文本是文本节点
每一个HTML属性是一个属性节点
注释属于注释节点
二、节点的属性
1.通过节点的属性我们能够获得每个节点的详细信息(包括节点类型、节点名字、节点值)
获得节点信息的属性
| 节点类型 nodeType(数值) | 节点名字 nodeName | 节点值 nodeValue |
元素节点 | 1 | 标签名 | null |
属性节点 | 2 | 属性名 | 属性值 |
文本节点 | 3 | #text | 文本 |
注释节点 | 8 | #comment | 注释的文本 |
文档节点 | 9 | #document | null |
2.通过节点的属性,能够获取到每个节点之间的关系,并且通过这种关系,准确快速的获取到相应节点的对象
获得节点关系的属性
obj.parentNode 获得父节点的引用
obj.childNodes 获得子节点的集合
obj.firstChild 获得第一个子节点的引用
obj.lastChild 获得最后一个子节点的引用
obj.nextSibling 获得下一个兄弟节点的引用
obj.previousSibling 获得上一个兄弟节点的引用
<div class="aa">
5 <!--sdc-->
</div>
以上述文档节点为例,测试节点属性
var obj1=document.querySelector(".aa");
console.log(obj1) //文档节点
var obj=obj1.childNodes[0]; //文本节点
var obj=obj1.childNodes[1]; //注释节点
//获取节点的属性
console.log(obj.nodeName)
console.log(obj.nodeType)
console.log(obj.nodeValue)
三、节点的创建
var obj=document.createElement("i") //元素节点的创建
obj.setAttribute("str","aa") //属性节点的创建
obj.innerHTML="我是创建的文档节点" //文本节点的创建
document.body.appendChild(obj) //将创建的文档元素追加到页面上
1.创建元素节点
document.createElement("元素标签名") //创建出的对象属于DOM对象,只存在于内存中,不在页面显示
2.创建属性节点
a.对象.属性=“属性值”
b.对象.setAttribute(属性名,属性值)
c.var arrt=document.createAttribute("属性名")
arrt.nodeValue="属性值";
obj.setAttributeNode(arrt);
3.创建文本节点
对象.innerHTML="";
document.createTextNode("文本")
4.创建注释节点
document.createComment("注释内容")
四、节点的方法
- 节点追加
- 父节点.appendChild(要添加的对象) //添加在父节点的最后
- 父节点.insertBefore(要插入的对象,要插入的某个对象之前)
- 节点操作的是现有的元素,元素原有的位置改变
- 节点的删除
- 父节点.removeChild(要删除的元素)
- 节点的替换
- 父对象.replaceChild(要替换的节点,被替换的节点)
- 节点的复制
- obj.cloneNode([boolean]):参数可传可不传 不传值或传False,只会拷贝当前的节点,事件和数据不会被拷贝
如果传true,将这个节点的所有后代节点全部拷贝,同样不会拷贝事件和数据