html选择器⽗节点,【JavaScript】JS获取⼦节点、⽗节点和兄
弟节点的⼏种⽅式，。。。
【⼀】、JS获取⼦节点的⽅式
1，通过获取dom⽅式直接获取⼦节点
1) ElementById("ID");
2) ElementsByTagName("tagName")
3) ElementsByClassName("className")
4) ElementsByName("Name")
5) document.documentElement //获取HTML元素
document.body//获取body元素
6) document.querySelector(CSS selectors)获取⼀个
document.querySelectorAll()获取多个
2，通过childNodes集合，获取⼦节点
使⽤childNodes获取⼦节点的时候，childNodes返回的是⼦节点的集合，是⼀个数组的格式。他会把换⾏和空格也当成是节点信息。【需要进⾏过滤，通过正则表达式】
var b =ElementById("test").childNodes;
3，通过children数组，来获取⼦节点
利⽤children来获取⼦元素是最⽅便的，他也会返回出⼀个数组。对其获取⼦元素的访问只需按数组的访问形式即可。
var getFirstChild = ElementById("test").children[0];
4，直接获取第⼀个⼦节点：firstChild
firstChild来获取第⼀个⼦元素，但是在有些情况下我们打印的时候会显⽰undefined，这是什么情况呢？？其实firstChild和childNodes 是⼀样的，在浏览器解析的时候会把他当换⾏和空格⼀起解析，其
实你获取的是第⼀个⼦节点，只是这个⼦节点是⼀个换⾏或者是⼀个空格⽽已。那么不要忘记和childNodes⼀样处理呀。
var getFirstChild = ElementById("test").firstChild;
5，通过firstElementChild，获取第⼀个⼦节点
使⽤firstElementChild来获取第⼀个⼦元素的时候，这就没有firstChild的那种情况了。会获取到⽗元素第⼀个⼦元素的节点 这样就能直接显⽰出来⽂本信息了。他并不会匹配换⾏和空格信息。
var getFirstChild = ElementById("test").firstElementChild;
6，直接获取最后⼀个⼦节点：lastChild，lastElementChild
lastChild获取最后⼀个⼦节点的⽅式其实和firstChild是类似的。同样的lastElementChild和firstElementChild也是⼀样的。不再赘余。
var getLastChildA = ElementById("test").lastChild;
var getLastChildB = ElementById("test").lastElementChild;
【⼆】、JS获取⽗节点的⽅式
1，parentNode，获取⽗节点
获取的是当前元素的直接⽗元素。parentNode是w3c的标准。
var p  = ElementById("test").parentNode;
2，parentElement，获取⽗节点
parentElement和parentNode⼀样，只是parentElement是ie的标准。
var p1 = ElementById("test").parentElement;
3，offsetParent，获取所有⽗节点
⼀看offset我们就知道是偏移量 其实这个是于位置有关的上下级 ，直接能够获取到所有⽗亲节点， 这个对应的值是body下的所有节点信息。
var p2 = ElementById("test").offsetParent;
【三】、JS获取兄弟节点的⽅式
1，通过获取⽗亲节点再获取⼦节点来获取兄弟节点
var brother1 = ElementById("test").parentNode.children[1];
2，获取上⼀个兄弟节点：previousSibling，previousElementSibling
在获取前⼀个兄弟节点的时候可以使⽤previousSibling和previousElementSibling。他们的区别是previousSibling会匹配字符，包括换⾏和空格，⽽不是节点。previousElementSibling则直接匹配节点。
var brother2 = ElementById("test").previousSibling;
var brother3 = ElementById("test").previousElementSibling;
3，获取下⼀个兄弟节点：nextSibling，nextElementSibling
html document是什么同previousSibling和previousElementSibling，nextSibling和nextElementSibling也是类似的。
var brother4 = ElementById("test").nextSibling;
var brother5 = ElementById("test").nextElementSibling;
【四】补充：CSS组合选择器：
(1)后代选择器(以空格分隔)：
div p{ .... }  选取
元素中所有
元素
(2)⼦元素选择器(以⼤于号分隔):
div > p{ .... }  选取
元素中所有直接⼦元素
(3)相邻兄弟选择器(以加号分隔)
div + p{ .... }  选取所有位于
元素后的第⼀个
元素
(4)普通兄弟选择器(以破折号分隔)
div ~ p{ .... }    选取所有
元素之后的所有相邻兄弟元素

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。