第4章 文档对象模型（DOM） ·9·
在这个例子中，我们获取了name为myInput的input元素节点数组，并将该数组的长度输出，输出的结果为3。
getElementById() 和 getElementsByTagName() 这两种方法，可查找整个 HTML 文档中的任何 HTML 元素。但这两种方法会忽略文档的结构，假如需要查找文档中所有的 p 元素，getElementsByTagName() 会把它们全部找到，不管 p元素处于文档中的哪个层次。同时，getElementById() 方法也会返回正确的元素节点，不论它被隐藏在文档结构中的什么位置。例如：document.getElementsByTagName(\会返回文档中所有p元素的一个节点数组，而document.getElementById('maindiv').getElementsByTagName(\会返回所有 p元素的一个节点列表，且这些 p元素必须是 id 为 maindiv的元素的后代。
（3）document.getElementsByTagName()：该方法是通过元素的标记名获取节点，同样该方法也是返回一个数组。在获取元素节点之前，一般都是知道元素的类型的，所以使用该方法比较简单。但是缺点也是显而易见，那就是返回的数组可能十分庞大，这样就会浪费很多时间。它不是document对象的专有方法，还可以应用到其它的节点对象。其语法为：
document.getElementsByTagName(\标签名称\
或document.getElementById('ID').getElementsByTagName(\标签名称\获取节点数组时，通常要把此数组保存在一个变量中，就像这样：
·10· JavaScript语言与Ajax应用
var x=document.getElementsByTagName(\
变量 x 就是包含着页面中所有 p 元素节点的数组，可通过它们的索引号来访问这些 p元素节点，索引号从 0 开始，可以使用数组的 length 属性来循环遍历节点列表。
var x=document.getElementsByTagName(\for (var i=0;i 要访问第三个p元素节点，可以这么写：var y=x[2]; 4.2 在DOM元素间移动 获取一个元素节点以后，常常需要以该元素节点为基点上下左右地移动获取其它的元素节点，childNodes前面已经介绍过了，下面我们介绍其他的几种方式。 1．通过父节点获取 parentObj.firstChild：如果节点为已知节点（parentObj）的第一个子节点就可以使用这个方法。这个属性是可以递归使用的，也就是支持parentObj.firstChild.firstChild.firstChild...的形式。 parentObj.lastChild：这个属性是获取已知节点（parentObj）的最后一个子节点。与firstChild一样，它也可以递归使用。 parentObj.childNodes：获取已知节点的子节点数组，然后可以通过循环或者索引找到需要的节点。 注意：在IE上获取的是直接子节点的数组，而在Firefox上获取的是所有子节点即包括子节点的子节点。 parentObj.children：获取已知节点的直接子节点数组。 注意：在IE上，和childNodes效果一样，而Firefox不支持。 parentObj.getElementsByTagName()：它返回已知节点的所有子节点中类型为指定值的子节点数组。 不同的浏览器在处理DOM节点上是有差异的。 Some more text.Some text.
在IE浏览器中搜索上面代码div的子节点应该为2个，但是在其他浏览器中，一共是5个节点（空格和回车换行也被看作节点）。因此必须把所有的情况都考虑在内，检查节点的
第4章 文档对象模型（DOM） ·11·
情况。例如下面的代码：
var el = document.getElementById('node'); var firstElement = el.childNodes[0]; if(firstElement.nodeType != 1) firstElement = el.childNodes[1];
如果第一个子节点不是元素类型，就转到下一个节点，下面的这个函数就是用来处理这类情况的：
function getElement(node){
while(node && node.nodeType !=1){ node = node.nextSibling; }
return node; }
如果处理的是元素节点，则跳过while循环，否则就执行循环体直到找到一个元素节点为止，如果最后也找不到就退出并返回null。
上面的代码可以改写成如下：
var el = document.getElementById('node');
var actualFirstElement = getElement(el.childNodes[0]); 2．通过兄弟节点获取
neighbourNode.previousSibling：获取已知节点（neighbourNode）同一级别的前一个节点，这个属性和前面的firstChild、lastChild一样都似乎可以递归使用的。
neighbourNode.nextSibling：获取已知节点（neighbourNode）同一级别的下一个节点，同样支持递归。
3．通过子节点获取
childNode.parentNode：获取已知节点的父节点。 例如下面的这个例子：
| John | Doe | Alaska |
在上面的HTML代码中，第一个 td是tr元素的首个子元素（firstChild），而最后一个td
·12· JavaScript语言与Ajax应用
是tr元素的最后一个子元素（lastChild）。此外，tr是每个td元素的父节点（parentNode）。对 firstChild 最普遍的用法是访问某个元素的文本：
var text=x.firstChild.nodeValue; //x为某个包含子元素的节点
parentNode 属性常被用来改变文档的结构。如从文档中删除带有 id 为maindiv的节点： var x=document.getElementById(\为某个需要删除的节点 x.parentNode.removeChild(x);
详细的节点操作方法在后面几节中将会讲到。
4.3 处理元素属性
除了获取元素内容，获取和设置元素的属性值也是经常进行的操作。一般来说，浏览器在解析HTML页面时元素具有的属性列表是与收集自元素本身表示的信息一起预载入的，并存储在一个关联数组中供稍后访问。比如下面的HTML片段：
相关推荐：
loading