1.父级节点：node.parentNode
node.parentNode,返回某节点的父节点，返回最近一个父节点,如果没有父节点返回null。
<!-- 父级节点：node.parentNode -->
<div class="demo">
<div class="box">
<span class="erweima"></span>
</div>
</div>
// 1.父级节点：node.parentNode
// node.parentNode,返回某节点的父节点，返回最近一个父节点,如果没有父节点返回null。
// 这里的node 在书写的时候就是写声明之后获取到的一个元素
// 之前获取节点的方式
var erweima = document.querySelector('.erweima');
// var box = document.querySelector('.box');
erweima.parentNode; //这样子书写就已经获得erweima的父节点了
console.log(erweima.parentNode);
// 得到的是离元素最近的父节点（亲爸爸），如果找不到父节点就返回null
// erweima.parentNode 这么写就可以直接得到二维码的父节点了
// 相比之前的document.querySelector()这种方式获取更加的方便2.子节点 childNodes
childNodes返回包含指定节点的子节点的集合，返回所有子节点，包括文本节点，元素节点。
<ul>
<li><a href="#">滚球兽</a></li>
<li><a href="#">亚古兽</a></li>
<li><a href="#">暴龙兽</a></li>
<li><a href="#">机械暴龙兽</a></li>
<li><a href="#">战斗暴龙兽</a></li>
</ul>
// 2.子节点 childNodes
// childNodes返回包含指定节点的子节点的集合，返回所有子节点，包括文本节点，元素节点。
var ul = document.querySelector('ul')
// var lis = ul.querySelectorAll('li')
// console.log('lis');
ul.childNodes //这样子书写就已经获得ul的所有子节点了
console.log(ul.childNodes);
// 这里面打印输出的第一个元素是text ，因为ul后面跟着的是一个换行，因为换行是属于文本节点，所以第一个就是text 然后后面跟着li 然后li后面跟着的又是一个换行的文本，所以就又是text 依次类推，就可以跟获取的值相匹配了
// 判断节点类型：nodeType
// 元素节点：nodeType 为1;
// 属性节点：nodeType 为2；
// 文本节点：nodeType 为3；文本节点包含文字，空格，换行等
console.log(ul.childNodes[0].nodeType);
// 这里的返回值为3，所以他不是一个元素节点，是一个文本节点
console.log(ul.childNodes[1].nodeType)
// 这个的返回值是1，所以他是一个元素节点3.children 子元素节点 只返回所有的子元素节点，其余节点不返回。
这个虽然是非标准的，但是所有的浏览器都是兼容的，可以放心大胆的使用，而且后面获取子节点的时候也是强烈推荐使用该种方法
ul.children //这个是只获取ul底下的所有的li元素节点，不获取其他类型的节点
console.log(ul.children);4. firstChild 返回第一个子节点
返回第一个子节点，找不到返回null，包含所有节点。它返回的节点不管是文本节点还是元素节点
5.lastChild 返回最后一个子节点，找不到返回null，包含所有节点。
返回最后一个子节点，找不到返回null，包含所有节点。它返回的节点不管是文本节点还是元素节点
6.firstElementChild 返回第一个子元素节点，找不到返回null。Ie9以上支持。
7.lastElementChild 返回最后一个子元素节点，找不到返回null。Ie9以上支持。
<ol>
<li><a href="#">滚球兽</a></li>
<li><a href="#">亚古兽</a></li>
<li><a href="#">暴龙兽</a></li>
<li><a href="#">机械暴龙兽</a></li>
<li><a href="#">战斗暴龙兽</a></li>
</ol>
var ol = document.querySelector('ol');
// 4. firstChild 返回第一个子节点
// 返回第一个子节点，找不到返回null，包含所有节点。它返回的节点不管是文本节点还是元素节点
console.log(ol.firstChild);
// 所以该方式打印输出的第一个节点是文本节点，不是我们想要获取的元素节点
// 5.lastChild 返回最后一个子节点，找不到返回null，包含所有节点。
// 返回最后一个子节点，找不到返回null，包含所有节点。它返回的节点不管是文本节点还是元素节点
console.log(ol.lastChild);
// 所以该方式打印输出的最后一个节点是文本节点，不是我们想要获取的元素节点
// 6.firstElementChild 返回第一个子元素节点，找不到返回null。Ie9以上支持。
console.log(ol.firstElementChild);
// 7.lastElementChild 返回最后一个子元素节点，找不到返回null。Ie9以上支持。
console.log(ol.lastElementChild);8.在实际开发中的写法，既没有兼容性的问题又返回第一个子元素（下面的这种写法一定要重点掌握
// children获取到的元素组成的是一个伪数组的形式，我们在调用里面某一个元素的时候，直接使用索引的方式进行调用就可以了
console.log(ol.children[0]);
//这是获取第一个子节点
// 这里返回的是索引为0的子元素
console.log(ol.children[3]);
//返回索引号为3的子元素
// 返回最后一个子元素（我们可以先获取li的长度，然后在这个长度的基础上，进行减一的操作
console.log(ol.children[ol.children.length-1]);
//这是获取最后一个子节点案例：下拉菜单
案例分析：
1）导航栏里面的li都要有鼠标经过的效果，所以需要循环注册事件。
2）核心原理：当鼠标经过li里面的第二个孩子ul显示 ，当鼠标离开，则ul隐藏 。
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 14px;
}
.nav {
margin: 100px;
}
.nav>li {
position: relative;
float: left;
width: 80px;
height: 41px;
text-align: center;
}
.nav li a {
display: block;
width: 100%;
height: 100%;
line-height: 41px;
color: #333;
}
.nav>li>a:hover {
background-color: #eee;
}
.nav ul {
display: none;
position: absolute;
top: 41px;
left: 0;
width: 100%;
border-left: 1px solid #FECC5B;
border-right: 1px solid #FECC5B;
border-top:1px solid #FECC5B;
}
.nav ul li {
border-bottom: 1px solid #FECC5B;
}
.nav ul li a:hover {
background-color: #FFF5DA;
}
</style>
</head>
<body>
<ul class="nav">
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
</ul><script>
// 1）获取元素
var nav = document.querySelector('.nav');
var lis = nav.children; // 得到nav下面的四个小li
//循环注册事件
for(var i=0;i<lis.length; i++){
// 当鼠标经过里面的的li的时候，让他们底下的ul得以显现出来
lis[i].onmouseover = function(){
this.children[1].style.display='block';
}
// 当鼠标离开里面的的li的时候，让他们底下的ul隐藏起来
lis[i].onmouseout = function(){
this.children[1].style.display='none';
}
}
</script>案例：左拉菜单
<style>
* {
margin: 0;
padding: 0;
}
.cebianlan {
width: 80px;
/* height: 300px; */
position: fixed;
right: 0px;
top: 100px;
background-color: pink;
}
.cebianlan>a {
display: block;
width: 80px;
height: 50px;
line-height: 50px;
font-size: 12px;
padding-top: 10px;
padding-bottom: 10px;
cursor: pointer;
color: #757575;
text-decoration: none;
position: relative;
/* margin-top: -1px; */
background-color: #fff;
border: 1px solid #f5f5f5;
text-align: center;
}
/* .cebianlan>a>p {
opacity: 0.6;
} */
.pop-content {
width: 150px;
height: 150px;
position: absolute;
display: none;
left: -180px;
top: 0;
padding: 14px;
background: #fff;
border: 1px solid #f5f5f5;
opacity: 0.7;
background-color: pink;
}
.pop-content>img {
width: 100px;
height: 100px;
margin: 0 auto;
}
.pop-content>p {
width: 130px;
margin: 0 auto;
color: #757575;
text-align: center;
}
</style>
</head>
<body>
<div class="cebianlan">
<a href="">
<span class="iconfont icon-shouji"></span>
<p>手机APP</p>
<div class="pop-content">
<img src="14.png" alt="">
<p>扫码领取新人百元礼包</p>
</div>
</a>
<a href="">
<span class="iconfont icon-geren"></span>
<p>个人中心</p>
<div class="pop-content">
<img src="14.png" alt="">
<p>
扫码领取新人百元礼包
</p>
</div>
</a>
<a href="">
<span class="iconfont icon-wodeshouhou"></span>
<p>售后服务</p>
<div class="pop-content">
<img src="14.png" alt="">
<p>
扫码领取新人百元礼包
</p>
</div>
</a>
<a href="">
<span class="iconfont icon-kefu"></span>
<p>人工客服</p>
<div class="pop-content">
<img src="14.png" alt="">
<p>
扫码领取新人百元礼包
</p>
</div>
</a>
<a href="">
<span class="iconfont icon-shangjiantou"></span>
<p>回到顶部</p>
</a>
</div><script>
var a = document.querySelectorAll('a');
// console.log(a)
// console.log(a[1].children[2])
for (var i = 0; i < a.length; i++) {
a[i].addEventListener('mouseenter', function() {
// 主要是对点击的元素里面是否含有左拉菜单
if (this.children[2]) {
this.children[2].style.display = 'block';
}
})
a[i].addEventListener('mouseleave', function() {
if (this.children[2]) {
this.children[2].style.display = 'none';
}
})
}
</script>
本文含有隐藏内容，请 开通VIP 后查看