DOM查找并访问节点
时间：2022-02-16 22:34:01 | 来源：信息时代
时间：2022-02-16 22:34:01 来源：信息时代
你可通过若干种方法来查找您希望操作的元素：
通过使用getElementById()和getElementsByTagName()方法
通过使用一个元素节点的parentNode、firstChild以及lastChild属性
getElementById()和getElementsByTagName()这两种方法，可查找整个HTML文档中的任何HTML元素。
这两种方法会忽略文档的结构。假如您希望查找文档中所有的元素，getElementsByTagName()会把它们全部找到，不管元素处于文档中的哪个层次。同时，getElementById()方法也会返回正确的元素，不论它被隐藏在文档结构中的什么位置。
这两种方法会向您提供任何你所需要的HTML元素，不论它们在文档中所处的位置！
getElementById()可通过指定的ID来返回元素：
getElementById()语法
document.getElementById('ID');注释：getElementById()无法工作在XML中。在XML文档中，您必须通过拥有类型id的属性来进行搜索，而此类型必须在XMLDTD中进行声明。
getElementsByTagName()方法会使用指定的标签名返回所有的元素（作为一个节点列表），这些元素是您在使用此方法时所处的元素的后代。
getElementsByTagName()可被用于任何的HTML元素：
getElementsByTagName()语法
document.getElementsByTagName('标签名称');或者：
document.getElementById('ID').getElementsByTagName('标签名称');
实例1
下面这个例子会返回文档中所有元素的一个节点列表：
document.getElementsByTagName('p');
实例2
下面这个例子会返回所有元素的一个节点列表，且这些元素必须是id为'maindiv'的元素的后代：
document.getElementById('maindiv').getElementsByTagName('p');
节点列表（nodeList）
当我们使用节点列表时，通常要把此列表保存在一个变量中，就像这样：
varx=document.getElementsByTagName('p');现在，变量x包含着页面中所有元素的一个列表，并且我们可以通过它们的索引号来访问这些元素。
注释：索引号从0开始。
您可以通过使用length属性来循环遍历节点列表：
varx=document.getElementsByTagName('p');for(vari=0;i
要访问第三个元素，您可以这么写：
vary=x;
parentNode、firstChild以及lastChild
这三个属性parentNode、firstChild以及lastChild可遵循文档的结构，在文档中进行'短距离的旅行'。
请看下面这个HTML片段：
在上面的HTML代码中，第一个是 | 元素的首个子元素（firstChild），而最后一个| 是 |
元素的最后一个子元素（lastChild）。
此外，
是每个元素的父节点（parentNode）。
对firstChild最普遍的用法是访问某个元素的文本：
varx=;vartext=x.firstChild.nodeValue;parentNode属性常被用来改变文档的结构。假设您希望从文档中删除带有id为'maindiv'的节点：
varx=document.getElementById('maindiv');x.parentNode.removeChild(x);首先，您需要找到带有指定id的节点，然后移至其父节点并执行removeChild()方法。
-
网站
-
营销
-
设计
-
运营
-
优化
-
效率
-
专注
-
电商
-
方案
-
推广
微信公众号
版权所有© 亿企邦 1997-2025 保留一切法律许可权利。
|
在线咨询