9.1 获取节点
document
getElementById 语法 document.getElementById(元素ID) ；
功能 通过元素ID获取节点；
getElementsByName
语法 document.getElementsByName (元素name属性) ；
功能 通过元素name属性获取节点；
getElementsByTagName
语法 document.getElementsByTagName(元素标签) ；
功能 通过元素标签获取节点；
节点指针
firstChild 语法 父节点.firstChild；
功能 获取元素的首个子节点；
lastChild 语法 父节点.lastChild；
功能 获取元素的最后一个子节点；
childNodes 语法 父节点.childNodes；
功能 获取元素的子节点列表；
previousSibling
语法 兄弟节点.previousSibling；
功能 获取已知节点的前一个节点；
nextSibling
语法 兄弟节点.nextSibling；
功能 获取已知节点的后一个节点；
parentNode
语法 子节点.parentNode；
功能 获取已知节点的父节点；
9.2 节点操作
创建节点
createElement
语法 document.createElement(元素标签)；
功能 创建元素节点；
createAttribute
语法 document.createAttribute(元素属性)；
功能 创建属性节点；
createTextNode
语法 document.createTextNode(文本内容)；
功能 创建文本节点；
插入节点
appendChild
语法 appendChild(所添加的新节点)；
功能 向节点的子节点列表的末尾添加新的子节点；
insertBefore
语法 insertBefore(所要添加的新节点，已知子节点)；
功能 在已知的子节点前插入一个新的子节点；
替换节点
replaceChild
语法 replaceChild(要插入的新元素，将被替换的老元素)；
功能 将某个子节点替换为另一个；
复制节点
cloneNode
语法 需要被复制的节点.cloneNode(true/false)；
功能 创建指定结点的副本；
替换节点
replaceChild
语法 replaceChild(要插入的新元素，将被替换的老元素)；
功能 将某个子节点替换为另一个；
复制节点
cloneNode
语法 需要被复制的节点.cloneNode(true/false)；
功能 创建指定结点的副本；
9.3 HTML DOM 树
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
9.4 示例代码
<!DOCTYPE html>
<html>
<body>
<p>Hello World!</p>
<div id="main">
<p>The DOM is very useful.</p>
<p>本例演示 <b>getElementsByTagName</b> 方法。</p>
</div>
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id 为 "main" 的 div 中的第一段文本是：' + y[0].innerHTML);
</script>
</body>
</html>
查看结果:
Hello World!
The DOM is very useful.
本例演示 getElementsByTagName 方法。
id 为 "main" 的 div 中的第一段文本是：The DOM is very useful.
联系客服
