js子节点遍历以及属性

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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值