DOM 全称是 Document Object Model(文档对象模型),是W3C制定的标准接口规范,是一种处理HTML和XML文件的标准API。DOM提供了对整个文档的访问模型,将文档作为一个树形结构,树的每个结点表示了一个HTML标签或标签内的文本项。DOM树结构精确地描述了HTML文档中标签间的相互关联性。将HTML或XML文档转化为DOM树的过程称为解析(parse)。HTML文档被解析后,转化为DOM树,因此对HTML文档的处理可以通过对DOM树的操作实现。DOM模型不仅描述了文档的结构,还定义了结点对象的行为,利用对象的方法和属性,可以方便地访问、修改、添加和删除DOM树的结点和内容
DOM将网页表示为一颗树,该树的节点类型有多种。
元素节点——html标签
文本节点——文本
属性节点——属性总是被包含在标签里,所以属性节点总是被包含在元素节点当中。(元素节点(属性节点,文本节点))
通常可以通过开发者工具(如firebug)查看dom结构,但是要说明一点,开发者工具中的DOM并不完整,因为有些元素存在于DOM中,但是不会被开发者工具显示。比如回车会被当做一个文本节点。
1、元素节点操作
// 获取节点
document.getElementById():根据id获取节点
document.getElementsByClassName():根据class获取节点
document.getElementsByName():根据name属性获取节点
document.getElementsByTagName():根据元素标签获取节点
document.querySelector():返回文档中匹配指定 CSS 选择器的一个元素
document.querySelectorAll():返回文档中匹配指定 CSS 选择器的所有元素
document.firstChild:获取元素的首个子节点
document.lastChild:获取元素的最后一个子节点
document.childNodes:获取元素的子节点列表(childNodes 属性返回所有的节点,包括文本节点、注释节点)
document.children:获取元素的子节点列表(children 属性只返回元素节点)
document.previousSibling:获取当前节点的前一个节点
document.nextSibling:获取当前节点的后一个节点
document.parentElement:获取元素的父节点
document.parentNode:获取元素的父节点
// 创建节点
document.createElement():创建元素节点
document.createAttribute():创建属性节点
document.createTextNode():创建文本节点
// 插入节点
document.appendChild():向节点的子节点列表末尾添加一个新的子节点
document.insertBefore():向节点的子节点列表最前面加一个新的子节点
// 替换节点
document.replaceChild():将某个子节点替换成另一个
// 复制节点
document.cloneNode():复制某个节点
// 删除节点
document.removeChild():删除指定节点
2、属性节点操作
getAttribute():获取元素节点中指定属性的属性值
setAttribute():创建或改变元素节点的属性
removeChild():删除元素中指定的属性
3、文本节点操作
insertData(offset,String):从offset指定的位置插入string
appendData(String):将文本插入到文本节点的末尾处
deleteData(offset,count):从offset起删除count个字符
replaceData(offset,count,data):从offset将count个字符用data替换
splitText(offset):按照指定的 offset 把文本节点分割为两个节点
substringData(start,length):返回一个字符串,包含 Text 或 Comment 节点中从 start 开始的 length 个字符
除了上面,下面还有一些属性让我们更加方便的操作dom元素.
nodeType
DOM本质就是一堆节点的集合,由于包含不同类型的信息,所以就有不同类型的节点。接下来看nodeType。
元素节点,nodeType为1
属性节点,nodeType为2
文本节点,nodeType为3
文档节点,nodeType为9
nodeName
对于元素节点,nodeName就是标签名。元素节点也可以通过tagName获取标签名。
对于文本节点,nodeName永远是#text
对于属性节点,nodeName是属性名称
对于文档节点,nodeName永远是#document
nodeValue
对于元素节点,因为本身不直接包含文本,所以nodeValue是不可用的。
对于文本节点,值为文本值
对于属性节点,nodeValue值为属性值
innerHTML
innerHTML只对元素节点有用,获取元素节点内容,也就是元素节点包含的文本节点的值。其他节点使用nodeValue。
value
尽管innerHTML只对元素节点有用,但不是所有的元素节点都能使用innerHTML,比如像<input> 这样的替换元素。