JavaScript DOM查找节点

最新推荐文章于 2024-06-25 17:54:49 发布

aceyaya

最新推荐文章于 2024-06-25 17:54:49 发布

阅读量1.1k

点赞数

本文链接：https://blog.youkuaiyun.com/aceyaya/article/details/116642281

版权

(一)通过getElement系列方法：

document.getElementById();//id
document.getElementsByTagName();//标签名；Elements加了S，选出来是类数组；
document.getElementsByName();//name属性，部分标签可以；Elements加了S，选出来是类数组；
document.getElementsByClassName();//class；Elements加了S，选出来是类数组；IE9以下不支持；

document代表整个文档
ById是获取一个元素节点；
ByTagName,ByName,ByClassName 获取的是类数组；

(二)遍历节点树

parentNode //父级元素，顶级父级元素为document；
childNodes //子节点们
firstChild //第一个子节点
lastChild //最后一个子节点
nextSibling //后一个兄弟节点
previousSiling //前一个兄弟节点

注意子节点，不仅仅包括元素节点，文本、注释等都属于节点；

(三)基于元素遍历节点树

parentElement (IE9及以下版本不支持)
children
nextElementSibling (IE9及以下版本不支持)
previousElementSibling (IE9及以下版本不支持)
firstElementChild (IE9及以下版本不支持)
lastElementChild (IE9及以下版本不支持)

除了children，其他几个IE9以下版本不支持；
下面展示一些 内联代码片。

 1 <body>
 2     <div class="div1">
 3         <!-- This is comment -->
 4         <strong></strong>
 5         <p>
 6             <span></span>
 7         </p>
 8         <em></em>
 9     </div>
10 
11 <script type="text/javascript">
12     var div = document.getElementsByTagName('div')[0];
13 </script>
14 </body>

补充节点知识：

在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性：

nodeName : 节点的名称
nodeValue ：节点的值
nodeType ：节点的类型（重点属性，重点学习）

一、nodeName 属性: 节点的名称，是只读的。

元素节点的 nodeName 与标签名相同
属性节点的 nodeName 是属性的名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document

二、nodeValue 属性：节点的值

元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本自身
属性节点的 nodeValue 是属性的值

三、nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:
在这里插入图片描述

举例练下：

如下程序片段实现功能：返回某个节点所有元素子节点（不使用children方法）

 1  <body>
 2     <div class="div1">
 3         <!-- This is comment -->
 4         <strong></strong>
 5         <p>
 6             <span></span>
 7         </p>
 8         <em></em>
 9     </div>
10 
11 <script type="text/javascript">
12     var div = document.getElementsByTagName('div')[0];
13 
14     function returnElementChild(){
15         var arr = [],
16         child = div.childNodes;
17         for(var i = 0; i < child.length; i++){
18             if(child[i].nodeType == 1)
19                 arr.push(child[i]);
20         }
21         return arr;
22     }
23 
24     console.log(returnElementChild(div));
25 </script>
26 </body>