在Web应用尤其是Web2.0程序的开发中,经常需要获取页面中的一个元素,然后更新该元素的样式和内容。
如何让元素得到更新是首先要解决的问题。幸运的是,使用JavaScript有很多方法可以获得节点。这里简单总结一下(以下方法在IE7和Firefox2.0.0.11中测试通过):
1. 通过顶层document节点获取:
(1)document.getElementById(elementId)
:这种方法可以通过节点的ID准确的得到所需的元素,是一种比较简单快捷的方法。如果页面包含多个具有相同id的节点,则只返回第一个节点。现在出现了prototype、Mootools等很多JavaScript库,提供了更简单的方法:$(id),参数还是节点的id。这个方法可以看作是document.getElementById()的另一种写法,但是$()更强大。具体用法请参考各自的API文档。(2)document.getElementsByName(elementName)
:该方法通过名称获取节点。从名字可以看出,这个方法返回的不是一个节点元素,而是一个同名节点的数组。那么我们就可以通过获取节点的某个属性来循环判断它是否是所需要的节点。例如,在HTML中,checkbox和radio通过相同的name属性值来标识组中的元素。如果我们现在要获取选中的元素,先获取重组元素,然后循环判断节点检查的属性值是否为真。(3)document.getElementsByTagName(tagName)
:这个方法是通过节点的标签来获取节点。同样,此方法也返回一个数组。例如,document . getelementsbytagname( a )将返回页面上的所有超链接节点。在得到一个节点之前,节点的类型一般是已知的,所以使用这种方法比较简单。但是缺点也很明显,就是返回的数组可能会很大,会浪费很多时间。那么,这个方法没用吗?不会,当然这个方法和上面两个不一样。它不是文档节点的专有方法,也可以应用于其他节点,下面会提到。2、通过父节点获取:
(1)parentObj.firstChild
:如果该节点是已知节点(parentObj)的第一个子节点,则可以使用此方法。这个属性可以递归使用,也就是说,它支持parentobj的形式。第一胎。第一个孩子.从而可以获得更深的节点。(2)parentObj.lastChild
:显然,这个属性是已知节点(parentObj)的最后一个子节点。像firstChild一样,可以递归使用。在使用中,如果我们把两者结合起来,就会达到一个更刺激的效果,即:parentobj。第一胎。最后一个孩子.(3)parentObj.childNodes
:获取已知节点的子节点数组,然后可以通过循环或索引找到需要的节点。注意
:经过测试,发现直接子节点的数组是在IE7上获取的,而所有子节点,即包含子节点的子节点是在Firefox2.0.0.11上获取的,(4)parentObj.children
:获取已知节点的直接子节点数组。注意
:经过测试,在IE7上,和childNodes效果一样,但是Firefox2.0.0.11不支持。这就是为什么我想用不同于其他方法的风格。所以不建议。(5)parentObj.getElementsByTagName(tagName)
:使用方法此处不再赘述。它返回已知节点的所有子节点中指定值的子节点数组。例如:parent obj . getelementsbytagname( a )返回已知子节点中的所有超链接。3、通过临近节点获取:
(1)neighbourNode.previousSibling
:获取已知节点的上一个节点(neighbourNode)。这个属性似乎可以像前面的firstChild和lastChild一样递归使用。(2)neighbourNode.nextSibling
:获取已知节点(neighbourNode)的下一个节点,同样支持递归。4、通过子节点获取:
(1)childNode.parentNode
:获取已知节点的父节点。上面说的方法只是一些基本的方法。如果使用Prototype等JavaScript库,可能还会得到其他不同的方法,比如节点的类获取等等。但如果能灵活运用以上方法,相信大部分手续是可以办理的。