什么是 DOM？
DOM 是 W3C（万维网联盟）的标准，又称文档对象模型。
DOM 定义了访问 HTML 和 XML 文档的标准。
什么是 HTML DOM？
HTML DOM 是：
- HTML 的标准对象模型
- HTML 的标准编程接口
DOM节点
HTML 文档中的所有内容都是节点：
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
节点类型
节点类型: nodeType nodeName nodeValue
元素节点 1 元素名 null
文本节点 3 #test 文本值
属性节点 2 属性名 属性值
注释节点 8 #comment 注释的文本
节点方法
节点属性
innerHTML
获取元素内容的最简单方法是使用 innerHTML 属性
innerHTML 属性对于获取或替换 HTML 元素的内容很有用
下面的代码获取 id="info" 的 <p> 元素的 innerHTML：
<html>
<body>
<p id="info">Hello qimuz</p>
<script>
var txt=document.getElementById("info").innerHTML;
document.write(txt);
</script>
</body>
</html>
nodeName
nodeName 属性规定节点的名称
-
nodeName 是只读的
-
元素节点的 nodeName 与标签名相同
-
属性节点的 nodeName 与属性名相同
-
文本节点的 nodeName 始终是 #text
-
文档节点的 nodeName 始终是 #document
nodevalue
nodeValue 属性规定节点的值
-
元素节点的 nodeValue 是 undefined 或 null
-
文本节点的 nodeValue 是文本本身
-
属性节点的 nodeValue 是属性值
nodeType
nodeType 属性返回节点的类型,它是只读的
访问节点
- 通过使用 getElementById() 方法
- 通过使用 getElementsByTagName() 方法
- 通过使用 getElementsByClassName() 方法
- 通过使用querySelector() 方法
querySelector() 方法仅仅返回匹配指定选择器的第一个元素,如果你需要返回所有的元素,请使用 querySelectorAll() 方法替代
创建节点、添加节点
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para = document.createElement("p"); //创建了一个新的 <p> 元素
var node = document.createTextNode("这是新文本。"); //这段代码创建了一个文本节点
para.appendChild(node); //向 <p> 元素追加这个文本节点
var element = document.getElementById("div1"); //查找一个已有的元素div1
element.appendChild(para); //向这个div1元素追加新元素
</script>
appendChild() 方法可追加新元素作为父亲的最后一个子元素，除此之外还可以使用 insertBefore() 方法
//父节点.insertBefore(新节点，指定节点)
删除节点
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child); //从父元素删除子元素
</script>
parentNode 属性可以找到父元素
var child = document.getElementById("p1");
child.parentNode.removeChild(child);
修改节点
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是新文本。");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child); //从父元素删除子元素
</script>
明天介绍DOM事件吧~~~
