js子节点遍历以及属性

最新推荐文章于 2024-08-20 22:43:53 发布

陪你看晚霞

最新推荐文章于 2024-08-20 22:43:53 发布

阅读量2.5k

点赞数

分类专栏： javascript 文章标签： javascript childNodes parentNode

本文链接：https://blog.csdn.net/weixin_45270759/article/details/92985970

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

childNodes：该属性获取当前节点包含所有子节点

  //代码示例：
    		var box = document.getElementById("box")
    	  	var arr = getNodes(box);
    	  	console.log(arr);
    
    	  	//定义函数返回格式化后的节点
    	  	function getNodes(dom){
    	  		var arrNode = [];
    	  		var domChildNodes = dom.childNodes;
	  		for (var i = 0; i < domChildNodes.length;i++) {
	  			if(domChildNodes[i].nodeType === 3){
	  				var reg = /^\s+$/;
	  				if(!reg.test(domChildNodes[i].data)){
	  					arrNode.push(domChildNodes[i].data);
	  				}
	  			}else{
	  				arrNode.push(domChildNodes[i]);	
	  			}
	  		}
	  		return arrNode;
	  	}

属性详解：

    node.firstChild;获取第一个子元素
    node.lastChild；获取最后一个子元素
    node.parentNode;获取父元素
    node.childNodes[i];获取某个子节点
    node.nextSibling;获取下一个兄弟节点
    node.previousSibling;获取上一个兄弟节点
    
    node.nodeValue;元素null 
    node.nodeName;元素DIV 注释#content 文本#text 文档null
    node.nodeType; 元素1 注释8 文本3 文档9