HTML DOM（文档对象模型）
当浏览器被加载时，浏览器会创建页面的文档对象模型。
HTML DOM模型对象树：
文档节点
文档节点是每个文档的根节点，同理文档元素即文档最外层的元素
node类型
常见类型：
| 节点 | 类型 | 例子 |
|---|---|---|
| ELEMENT_NODE | 1 | <h1 class="heading">W3School</h1> |
| ATTRIBUTE_NODE | 2 | class = "heading" （HTML DOM中弃用，XML DOM可用） |
| TEXT_NODE | 3 | ABCD |
| COMMENT_NODE | 8 | <!-- 这是注释 --> |
| DOCUMENT_NODE | 9 | HTML文档本身(<html>的父) |
| DOCUMENT_TYPE_NODE | 10 | <!Doctype html> |
nodeName和nodeValue属性
nodeName属性规定节点的名称：
nodeName只读- 元素节点的
nodeName等同于标签名 - 属性节点的
nodeName是属性名称 - 文本节点的
nodeName是#text - 文档节点的
nodeName是#document
nodeValue属性规定节点的值：
- 元素节点的
nodeValue是undefined - 文本节点的
nodeValue是文本文本 - 属性节点的
nodeValue是属性值
查找HTML元素
| 方法 | 描述 |
|---|---|
| document.getElementById(id) | 通过元素id来查找元素 |
| document.getElementsByTagName(name) | 通过标签名来查找元素 |
| document.getElementsByClassName(name) | 通过类名来查找元素 |
| document.querySelectorAll() | 查找匹配指定CSS选择器(id、类名、类型、属性值)的所有HTML元素 |
改变HTML元素
| 方法 | 描述 |
|---|---|
| element.innerHTML = new html content | 改变元素的inner HTML |
| element.attribute = new value | 改变HTML元素的属性值 |
| element.setAttribute(attribute,value) | 改变HTML元素的属性值 |
| element.style.property = new style | 改变HTML元素样式 |
添加和删除元素
| 方法 | 描述 |
|---|---|
| document.createElement(element) | 创建HTML元素 |
| document.removeChild(element) | 删除HTML元素 |
| document.appendChild(element) | 添加HTML元素，作为父父节点的最后一个子节点 |
| document.insertBefore(element) | 添加HTML元素，作为父节点的第一个子节点 |
| document.replaceChild(element) | 替换HTML元素 |
| document.write(text) | 写入HTML输出流 |
HTMLCollection与NodeList
HTMLCollection(DOM集合)：
使用getElementsByTagName()方法返回HTMLCollection对象。
注：HTMLCollection并非数组，因此不可以使用valueOf()、pop()、push()、join()等方法，但是可以通过length获取集合中元素的个数,也可以使用slice()方法将其转换为数组(除IE8及更早的版本都可以使用)
NodeList(DOM节点列表)：
使用getElementsByClassName()，某些老的浏览器会返回NodeList对象。
所有浏览器都会为childNodes属性返回NodeList对象。
大多数浏览器会为querySelectorAll()方法返回NodeList对象。
HTMLCollection与NodeList的异同
- 都是类似数组的对象列表
- 都可以通过索引(0,1,2)想数组那样访问每个项目
- 访问HTMLCollection项目可以通过名称、id或索引号
- 访问NodeList项目，只可通过索引号。
1858
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
