HTML DOM(文档对象模型)
当网页被加载时,浏览器会创建页面的文档对象模型DOM(Document Object Model)。通过HTML DOM,JavaScript 能够访问和改变 HTML 文档的所有元素(内容,结构和样式)。
HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了:
- 作为对象的 HTML 元素
- 所有 HTML 元素的属性
- 访问所有 HTML 元素的方法
- 所有 HTML 元素的事件
HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。
通过这个对象模型,JavaScript 获得创建动态 HTML 的所有力量:
- JavaScript 能改变页面中的所有 HTML 元素
- JavaScript 能改变页面中的所有 HTML 属性
- JavaScript 能改变页面中的所有 CSS 样式
- JavaScript 能删除已有的 HTML 元素和属性
- JavaScript 能添加新的 HTML 元素和属性
- JavaScript 能对页面中所有已有的 HTML 事件作出反应
- JavaScript 能在页面中创建新的 HTML 事件
DOM节点
W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
nodeName 属性
nodeName 属性规定节点的名称。
- nodeName 是只读的
- 元素节点的 nodeName 与标签名相同
- 属性节点的 nodeName 与属性名相同
- 文本节点的 nodeName 始终是 #text
- 文档节点的 nodeName 始终是 #document
注意:nodeName 始终包含 HTML 元素的大写字母标签名。
nodeValue 属性
nodeValue 属性规定节点的值。
- 元素节点的 nodeValue 是 undefined 或 null
- 文本节点的 nodeValue 是文本本身
- 属性节点的 nodeValue 是属性值
nodeType 属性
nodeType 属性返回节点的类型。nodeType 是只读的。
比较重要的节点类型有:
元素类型 | nodeType |
---|---|
元素 | 1 |
属性 | 2 |
文本 | 3 |
注释 | 8 |
文档 | 9 |
DOM 对象 - 常用方法和属性
一些常用的 HTML DOM 方法:
- getElementById(id) - 获取带有指定 id 的节点(元素)
- appendChild(node) - 插入新的子节点(元素)
- removeChild(node) - 删除子节点(元素)
一些常用的 HTML DOM 属性:
- innerHTML - 节点(元素)的文本值
- parentNode - 节点(元素)的父节点
- childNodes - 节点(元素)的子节点
- attributes - 节点(元素)的属性节点
DOM 节点(node)对象 - 实例
<div id="rootDiv">
<ul id="items">
<li id="item1">item1</li>
<li id="item2">item2</li>
<li id="item3">item3</li>
</ul>
</div>
在Chrome浏览器控制台使用下面命令
var rootDiv = document.getElementById('rootDiv');
// 这里如果用console.log()不能输出DOM节点对象结构
console.dir(rootDiv);
看下面输出结果可以获知DOM节点对象包含了哪些属性。
下面还有
把rootDiv
DOM节点的childNodes
属性的详细展开如下
从上图中我们可以获知HTML文件中除了正常的标签,一些“换行”符被解析成了DOM节点,类型为text
。
总结
这篇文章的内容很基础,主要介绍了DOM领域一些比较重要的概念,我们需要重点了解的是DOM节点对象都有哪些属性比如nodeName
,nodeValue
,nodeType
,childNodes
等和方法尤其是appendChild(node)
。