前端js——获取元素的各级节点、子节点、父级节点

获得元素的各级节点

对象.parentNode 获得父节点
对象.childNodes 获得子节点集合
对象.firstChild 获得第一个节点的引用
对象.lastChild 获得最后一个节点的引用
对象.nextSibling 获得上一个兄弟节点的引用
对象.previousSibling 获得上一个兄弟节点的引用

HTML：添加需要的id名

<div id="box1">
			<p>文字</p>
			<p id=“two”>文字</p>
			<p>文字</p>
			<p>文字</p>
			<p>文字</p>
			<p>文字</p>
			<p>文字</p>
			<p>文字</p>
		</div>

js获得box中的所有子节点
(元素节点 属性节点 文本节点 注释节点 文档节点)

  var box=document.getElementById('box');
  var p=box.childNodes;
            document.write(p.length); 
            //输出为17（换行和空白也属于节点）文本节点没有0，从1开始
            p[1].style.color='red';

获得节点个数与实际不符，应清除所有换行，保持所有节点标签在一行

js获得box中的父级节点

two.parentNode.style.color='blue';

输出样式