DOM(Document Object Model/文档对象模型)是针对HTML和XML文档的一个API。
DOM节点树:在文档中出现的空格、回车、标签、注释、文本、doctype、标签等都属于DOM节点。
操作DOM节点的方式无非就是:创建、添加(插入)、移除、替换、查找(获取)、克隆DOM节点。
操作 | 语法 |
---|---|
创建文本节点 | var newText = document.createTextNode(‘文本节点’); |
创建标签节点 | var newNode = document.createElement(‘div’); |
添加(插入)子节点至末尾 | 父节点.appendChild(子节点); |
添加(插入)子节点至某节点前 | 父节点.insertBefore(子节点, 某节点); |
移除子节点 | 父节点.removeChild(子节点); |
替换节点 | 父节点.replaceChild(替换后的节点, 替换前的节点); |
查找(获取)所有子节点 | 父节点.childNodes |
查找(获取)所有是标签类型的子节点 | 父节点.children |
查找(获取)下一个兄弟节点 | 某节点.nextSibling |
查找(获取)上一个兄弟节点 | 某节点.previousSibling |
查找(获取)父节点 | 子节点.parentNode |
查找(获取)第一个子节点 | 父节点.firstChild |
查找(获取)最后一个子节点 | 父节点.lastChild |
也可以使用document.get…的方法来获取,详细请看:JavaScript获取标签方法及兼容处理