[关闭]
@panhonhang 2018-06-08T01:42:03.000000Z 字数 1255 阅读 664

DOM节点的获取


主要有四种方法:

1. 通过顶层document节点获取
2. 通过父节点获取
3. 通过临近节点获取
4. 通过子节点获取
  1. 通过顶层document节点获取
    document.getElementById(elementId) :该要领 通过节点的ID,可以准确获得须要 的元素,是比较基本快捷的要领 。如果页面上含有多个相同id的节点,那么只返回第一个节点。

    document.getElementsByName(elementName) :该要领 是通过节点的name获取节点,从名字可以看出,这个要领返回的不是一个节点元素,而是具有同样名称的节点数组。然后,我们可以通过要获取节点的某个属性来循环判断能不能为须要的节点。

    document.getElementsByTagName(tagName) :该要领 是通过节点的Tag获取节点,同样该要领 也是返回一个数组(类数组)

2、通过父节点获取
parentObj.firstChild :如果节点为已知节点(parentObj)的第一个子节点就可以运用 这个要领 。这个属性是可以递归运用的,也就是支持parentObj.firstChild.firstChild.firstChild...的形式,如此就可以获得更深层次的节点。

parentObj.lastChild :很显然,这个属性是获取已知节点(parentObj)的最后一个子节点。与firstChild一样,它也可以递归运用。在运用中,如果我们把二者结合起来,那么将会达到更加令人兴奋的效果,即:parentObj.firstChild.lastChild.lastChild。

parentObj.childNodes :获取已知节点的子节点数组,然后可以通过循环或者索引找到须要的节点。留心:经测试发觉,在IE7上获取的是直接子节点的数组,而在Firefox2.0.0.11上获取的是所有子节点即包括子节点的子节点。

parentObj.children :获取已知节点的直接子节点数组。留心:经测试,在IE7上,和childNodes效果一样,而Firefox2.0.0.11不支持。这也是为什么我要运用和其他要领不同样式的原由,因此不建议运用。

parentObj.getElementsByTagName(tagName) :运用要领不再赘述,它返回已知节点的所有子节点中类型为指定值的子节点数组。例如:parentObj.getElementsByTagName('A')返回已知的子节点中的所有超链接。

3、通过临近节点获取

neighbourNode.previousSibling :获取已知节点(neighbourNode)的前一个节点,这个属性和前面的firstChild、lastChild一样都似乎可以递归运用的。

neighbourNode.nextSibling :获取已知节点(neighbourNode)的下一个节点,同样支持递归。

4、通过子节点获取

childNode.parentNode :获取已知节点的父节点

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注