DOM的概念
DOM是Document Object Model(文档对象模型)的缩写,是针对HTML和XML文档的一个API。DOM描绘了一个层次化的节点树,通过DOM,我们可以访问所有的HTML元素,连同它们所包含的文本和属性。可以对其中的内容进行修改和删除,同时也可以创建新的元素
DOM节点树
节点类型
- 每个节点都有一个nodeType属性,用于表明节点的类型。
- 常用节点类型与对应nodeType值:
用于判断获取到的元素属于什么类型节点
- 元素节点 <==> 1
- 属性节点 <==> 2
- 文本节点 <==> 3
获取节点
- document.getElementById()通过id名获取
- getElementsByTagName()通过标签名获取,返回的是一个类数组
- getElementsByClassName()通过类名获取,返回的是一个类数组
- document.getElementsByName()通过属性名获取,返回的是一个类数组
如果确认元素存在, 但是返回null或[],一定是代码执行顺序的问题
节点之间的关系
- 获取父级节点 ele.parentNode
- 获取子节点
- ele.childNodes 得到ele元素的全部子节点列表(类数组)
- ele.firstChild 获得ele元素的第一个子节点
- ele.lastChild 获得ele元素的最后一个子节点
- 获取兄弟节点
- ele.nextSibling 获得ele元素的下一个兄弟节点
- ele.previousSibling 得到ele元素的上一个兄弟节点
- 获取属性节点 ele.attributes 获取ele元素节点的所有属性节点,返回一个只读的类数组
操作节点的一些方法
创建节点
- document.createElement() 创建一个元素节点
- document.createTextNode() 创建一个文本节点
- document.createAttribute() 创建一个属性节点
删除节点
- parent.removeChild(ele) 删除(并返回)当前节点parent的指定子节点ele。
插入节点
- parent.appendChild() 向节点的子节点列表的结尾添加新的子节点
- parent.insertBefore(new,node) 在指定的子节点node前插入新的子节点new。
克隆节点
- cloneNode(boolean) 复制节点,为true是深复制。
- 判断节点
- ele.hasAttribute(attr) 判断当前元素是否拥有attr属性,返回布尔值
- parent.hasChildNodes() 判断当前节点是否拥有子节点,返回布尔值
- 替换节点
- replaceChild(new,old) 将old节点替换为new节点