用Javascript获取DOM元素的11种方法综述

在Web应用程序中,特别是在web2.0程序的开发中,经常会在页面中获取一个元素,然后更新元素的样式、内容等。如何使要更新的元素是第一个需要解决的问题。这里是一个简短的摘要。以下的方法是由IE7和firefox2.0.0.11测试。

1。通过顶层文档节点访问:

(1)document.getelementbyid(elementid):这种方法能够准确地通过该节点的ID获取所需的元素。这是一种简单快速的方法。如果页面上有多个具有相同ID的节点,则只返回第一个节点。

现在,已经有多个Javascript库,如原型,Mootools,等等,提供了一个更方便的方法:$(ID),和参数仍然ID的节点。这种方法可以被视为一种书写方式document.getelementbyid(),但功能$()更功能强大,其具体用法可参考各自的API文档。

(2)document.getelementsbyname(ElementName):该方法是通过节点的名称得到节点。从名称中,我们可以看到该方法返回一个具有相同名称而不是节点元素的节点数组。然后,我们可以通过获取节点的某个属性来确定是否需要一个节点。

例如,在HTML中,复选框和广播都用相同的name属性值来标识一组元素。如果我们现在要得到选中的元素,首先获取重组元素,然后循环判断节点的选中属性值是否正确。

(3)document.getelementsbytagname(TagName):这种方法是通过节点到节点的标签。同样,这种方法也返回一个数组,例如:document.getelementsbytagname('a')将网页上的所有链接的节点,在节点上,众所周知的节点类型,所以它是简单的使用这个方法,但缺点是明显的,即返回数组可能非常大的,这会浪费很多时间。所以,这个方法没用当然不是,这种方法不同于上面的两种方法。它不是文档节点的专有方法,可以应用其他节点,如下所述。

2。通过父节点获得:

(1)parentobj.firstchild:这种方法可以如果节点是一个已知的节点的第一个孩子用(parentobj)。这个属性可以使用递归,也就是说,它支持parentobj形式。第一个孩子,第一个孩子,第一个孩子…这样我们可以得到更深的节点。

(2)parentobj.lastchild:很明显,这个性质是已知节点的最后一个子节点(parentobj)。喜欢第一个孩子,它可以使用递归。

在使用中,如果我们将两者结合起来,将实现更令人兴奋的效果,即parentobj。第一个孩子。lastchild。lastchild…

(3)parentobj.childnodes:得到的已知节点的子节点的数组,然后找到需要的节点通过环路或指数。

注意:经过测试,发现直接子节点阵列获得IE7,和所有子节点,包括子节点,也得到了firefox2.0.0.11。

(4)parentobj.children:获得一个已知节点的直接子节点数组。

注:在IE7的测试,如子一样,和firefox2.0.0.11不支持它。这就是为什么我想用其他方法不同的风格。因此,不推荐。

(5)parentobj.getelementsbytagname(TagName):使用方法不再是多余的。它返回一个数组中的子节点的节点的所有子节点,例如,parentobj.getelementsbytagname('a')返回一个已知的子节点的所有超链接。

三.穿过相邻节点:

(1)neighbournode.previoussibling:获得已知节点的第一个节点(neighbournode)是类似于前面的第一个孩子,lastchild,这似乎是递归的应用。

(2)neighbournode.nextsibling:得到的已知节点的下一个节点(neighbournode),还支持递归。

4。获得子节点:

(1)childnode.parentnode:得到的已知节点的父节点。

上述方法只是一些基本方法。如果您使用原型和其他Javascript库,您可能会获得其他不同的方法,例如节点的类获取等。然而,如果您可以灵活地使用上述所有方法,我们相信您应该能够处理大多数程序。