HTML DOM(Document Object Model)就是HTML文档对象模型。大致就是用来描述HTML文档的结构，下面的图来自w3cschool。
粗略地理解一下，就是文档的HTML元素是根节点，如果<head><title></title></head>那title就是head的子元素。
1. 先了解一下如何得到元素对象。
getElementById() —— 通过ID来获取元素
getElementsByTagName() —— 通过Tag来获取元素
getElementsByClassName() —— 通过Class来获取元素
做个测试：
<html>
<head>
<title>Testing Page</title>
</head>
<body>
This is a page for testing!
<p id="p1">This is a paragraph.</p>
</body>
</html>
先试了id，效果良好。
document.getElementById("p1").style.color = "red";
但是这个得到的元素到底是个什么东西呢？
console.log(typeof(p));for (var i in p) {
console.log(i+‘:‘+p[i]);
}
得到如下结果，得到的元素是个Object，成员都是<p>的各项属性。
2. 元素节点和文档节点、属性节点间的关系
<div id="p1" style="color: red">
This is a paragraph.
<p>This is a inner paragraph.</p>
This is a second paragraph.
</div>
使用e.childNodes可以获取子节点的列表
可以看出有三个子元素，两个文本节点一个元素节点。
可以用e.getAttributeNode(属性名）来获得对应属性的Attr对象。
3. 每个元素的各项属性
innerHTML
- 元素节点的innerHTML为标签内的所有东西
- 文本节点的innerHTML为undefined
nodeName
- 元素节点的 nodeName 与标签名相同
- 属性节点的 nodeName 与属性名相同
- 文本节点的 nodeName 始终是 #text
- 文档节点的 nodeName 始终是 #document
nodeValue
- 元素节点的 nodeValue 是 undefined 或 null
- 文本节点的 nodeValue 是文本本身
- 属性节点的 nodeValue 是属性值
时间： 2024-09-28 19:05:57