js dom操作获取节点的一些方法

Posted 2020-08-27 芒果酱-Jessie

在复习javascript基础的时候，整理了一下js中获取节点的一些常用的方法，见代码：

 1 //js获取下一个兄弟节点
 2     function getNextSibling(eleObj){
 3         var next = eleObj.nextSibling;
 4         if(next.nodeType == 3){ // 文本节点
 5             return next.nextSibling;
 6         }
 7         return next;
 8     }
 9     //js获取上一个兄弟节点
10     function getPreviousSibling(eleObj){
11         var pre = eleObj.previousSibling;
12         if(pre.nodeType == 3){
13             return pre.previousSibling;
14         }
15         return pre;
16     }
17     //js获取所有子节点
18     function getChildNodes(parentNode){
19         var childs = [];
20         for(var i=0; i<parentNode.childNodes.length; i++){
21             if(parentNode.childNodes[i].nodeType == 1){ // 元素节点
22                 childs.push(parentNode.childNodes[i]);
23             }
24         }
25         return childs;
26     }
27 
28     //js获取第一个子节点
29     function getFirstChildNode(parentNode){
30         var first = parentNode.firstChild;
31         if(first.nodeType == 3){ // 文本节点
32             return first.nextSibling;
33         }
34         return first;
35         /*return parentNode.firstElementChild;*/
36     }
37     //js获取最后一个子节点
38     function getLastChildNode(parentNode){
39         var last = parentNode.lastChild;
40         if(last.nodeType == 3){
41             return last.nextSibling;
42         }
43         return last;
44     }