什么是 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"); //查找一个已有的元素div1element.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事件吧~~~