DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。
通过 DOM,可访问 HTML 文档中的每个节点
1、
getElementById() 和 getElementsByTagName() 这两种方法,可查找整个 HTML 文档中的任何 HTML 元素。
这两种方法会忽略文档的结构。假如您希望查找文档中所有的 <p> 元素,getElementsByTagName() 会把它们全部找到,不管 <p> 元素处于文档中的哪个层次。同时,getElementById() 方法也会返回正确的元素,不论它被隐藏在文档结构中的什么位置。
这两种方法会向您提供任何你所需要的 HTML 元素,不论它们在文档中所处的位置!
2、
parentNode、firstChild 以及 lastChild 可遵循文档的结构,在文档中进行“短距离的旅行”。
对 firstChild 最普遍的用法是访问某个元素的文本
parentNode 属性常被用来改变文档的结构。
3、
有两种特殊的文档属性可用来访问根节点:
- document.documentElement
- document.body
第一个属性可返回存在于 XML 以及 HTML 文档中的文档根节点。
第二个属性是对 HTML 页面的特殊扩展,提供了对 <body> 标签的直接访问。
4、
每个节点都拥有包含着关于节点某些信息的属性。这些属性是:
- nodeName(节点名称)
- nodeValue(节点值)
- nodeType(节点类型)
(1)
nodeName 属性含有某个节点的名称。
- 元素节点的 nodeName 是标签名称
- 属性节点的 nodeName 是属性名称
- 文本节点的 nodeName 永远是 #text
- 文档节点的 nodeName 永远是 #document
注释:nodeName 所包含的 XML 元素的标签名称永远是大写的
(2)
nodeValue
对于文本节点,nodeValue 属性包含文本。
对于属性节点,nodeValue 属性包含属性值。
nodeValue 属性对于文档节点和元素节点是不可用的。
(3)
nodeType
nodeType 属性可返回节点的类型。
小例子:
js 隔行变色
<table id="tb">
<tr>
<td>第1行</td>
</tr>
<tr>
<td>第2行</td>
</tr>
<tr>
<td>第3行</td>
</tr>
<tr>
<td>第4行</td>
</tr>
<tr>
<td>第5行</td>
</tr>
<tr>
<td>第6行</td>
</tr>
</table>
<script type="text/javascript">
function chang(){
var item1 = document.getElementById("tb");
var tds = item1.getElementsByTagName("td");
for(var i=0;i < tds.length;i++){
if(i%2==0){
tds[i].style.backgroundColor = "#0FF";
}
if(i%2!=0){
tds[i].style.backgroundColor = "#FF0";
}
}
}
chang();
</script>