04JS第三天----- js核心第一天---元素(标签)节点查询操作 --- 相互关系查询

4.2、相互关系查询

相互关系查询可以分为下面三种情况：

• 根据父节点查找子节点
• 根据子节点查父节点
• 查询兄弟节点

单词：

• child -- 孩子
• children -- 很多孩子
• Node -- 节点
• nodes -- 很多节点
• first -- 第一个
• last -- 最后一个
• Element -- 元素
• Sibling -- 兄弟，姐妹
• Siblings -- 所有的兄弟，姐妹
• previous -- 上一个
• next -- 下一个

具体属性/方法见下表：

演示的HTML代码：

<ul id="u"><li>泽拉斯</li><li>蚂蚱</li><li>拉克丝</li><li>安妮</li><li>维克托</li>
</ul>

测试的JS代码：

/******************* 根据父节点查找子节点 ************************/
//先找到父节点
//var ul = document.getElementsByTagName('ul')[0];
//var ul = document.getElementById('u');
var ul = document.querySelector('#u');// ------------- 查询所有ul的子节点 -- children
//var lis = ul.children; // 返回数组。 查询ul的所有子节点
//console.log(lis);// ------------- 查询所有ul的子节点 -- childNodes
//var lis = ul.childNodes; //
//console.log(lis);//---------------查询所有ul的子节点 ---
//var lis = ul.getElementsByTagName('li'); //在ul中查找所有ul后代中的li
//console.log(lis);//---------------查询ul的第一个子节点 --- firstChild
//var li1 = ul.firstChild;
//console.log(li1); //不好用，会把第一个空白当做第一个子元素//---------------查询ul的第一个子节点 --- firstElementChild
//var li1 = ul.firstElementChild;
//console.log(li1); //好用，但是IE8+才支持//---------------查询ul的最后一个子节点 --- lastChild
//---------------查询ul的最后一个子节点 --- lastElementChild/******************* 根据子点查找父节点 ************************/
//随便找一个子节点
//var mazha = document.getElementsByTagName('li')[1];
//var ul2 = mazha.parentNode;
//console.log(ul2);/******************* 兄弟关系查询 ************************/
//随便找一个子节点
var mazha = document.getElementsByTagName('li')[1];
//查询上一个兄弟
//var zelasi = mazha.previousSibling;
//console.log(zelasi); //不好使，会认为空白是上一个兄弟//var zelasi = mazha.previousElementSibling;
//console.log(zelasi); //好使，但是IE8+支持//查询下一个兄弟  --  nextSibling
//查询下一个兄弟  --  nextElementSibling效果：打开注释，依次查看即可。