- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <title>JavaScript!</title>
- </head>
- <body>
- <p id="intro">My first paragraph...</p>
- <ul>
- <li>List item 1</li>
- <li>List item 1</li>
- <li>List item 1</li>
- <li>List item 1</li>
- <li>List item 1</li>
- </ul>
- <script type="text/javascript">
- // <![CDATA[
- // ]]>
- </script>
- </body>
- </html>
在第一个例子中我们将使用’getElementById’这个DOM方法访问我们的段落。
- var introParagraph = document.getElementById('intro');
- / 我们现在访问了一个DOM节点，这个DOM节点代表intro段落。
变量’introParagraph’现在指向DOM节点，我们现在可以在这个节点上做很多事情，我们可以读取它的内容和属性，也可以控制它的任何方面。我们可以删除它、克隆它或将它移到DOM树的其它位置。
我们可以使用JavaScript和DOM接口访问现在文档中的任何东西。所以，我们可能希望用类似的方式访问文档中的那个无序列表，但唯一的问题就在于它并没有ID。你可以给它一个ID属性并使用同样的方法访问它或者使用’getElementsByTagName’方法访问它。
- var allUnorderedLists = document.getElementsByTagName('ul');
- // 'getElementsByTagName' 返回当前存在的节点集合/列表
- // 它除了那一点微小的差别外其实和数组很相似。
getElementsByTagName
getElementsByTagName方法返回当前存在的节点集合/列表，它和数组的相似之处是它也有length属性。需注意的重要一点是这些集合是’即时’的，如果你在DOM中添加了一个新元素那么这个集合将自动自我更新。由于它和数组类似，所以我们可以使用索引来访问其中的每个节点，从0到这个集合的总长度(减1)。
- // 访问单个无序列表: [0] index
- var unorderedList = document.getElementsByTagName('ul')[0];
- // 将UL中的列表项创建为节点列表:
- var allListItems = unorderedList.getElementsByTagName('li');
- // 现在我们可以使用for循环遍历列表项:
- for (var i = 0, length = allListItems.length; i < length; i++) {
- // 提取其文本节点并alert它的内容:
- alert( allListItems[i].firstChild.data );
- }
遍历DOM
术语”遍历”就是用来描述访问整个DOM寻找节点的行为。DOM接口为我们提供了大量的节点属性以便我们在文档中的所有节点自由访问。
这些节点属性可以方便我们访问关联的/挨着的节点:
Node.childNodes:你可以使用它访问某个元素的所有直属子元素。它将返回一个类似数组的对象，你可以循环遍历它。数组中的节点可以包含所有不同类型的节点，如文本节点和其它类型的元素节点。
◆Node.firstChild:这个属性等同于访问’childNodes’数组的首项(‘Element.childNodes[0]‘)。它是个捷径。
◆Node.lastChild:这个属性等同于访问’childNodes’数组的末项(‘Element.childNodes[Element.childNodes.length-1]‘)。它也是个捷径。
◆Node.parentNode:这个属性可以让你访问当前节点的父节点，仅会有唯一一个父节点，如果想访问’祖父’级节点，可以使用’Node.parentNode.parentNode’，以此类推。
◆Node.nextSibling:这个属性可以让你访问DOM树同级下的下一个节点。
◆Node.previousSibling:这个属性可以让你访问DOM树同级下的上一个节点。
所以就想你看到的一样，遍历DOM就是如此简单，只要你熟练运用了他的那些节点属性。
列表项只能在他们之间没有空格的情况下检索。因为在文档中你能得到文本节点和元素节点，而’<ul>’和’<li>’之间的空格也会被当做是一个节点(文本节点)。同样，无序列表严格意义上讲并不是段落的下一个兄弟节点，因为在他俩之间有空格，也就是另一个节点。通常在这种情况下，你可以遍历’childNodes’数组并测试它们的’nodeType’,'nodeType’值为1就是元素节点，2为属性，3为文本节点。
这就是JavaScript基本运行方式，你可以使用本地DOM方法和属性漂亮的访问并提取文档中的元素。现在你可以脱离那些繁琐的框架而独立进行基本的DOM操作了。