1:概述
一般，节点至少拥有nodeType（节点类型)、nodeName(节点名称）和nodeValue(节点值）这三个基本属性。
元素节点nodeType为1
属性节点nodeType为2
文本节点 nodeType为3（文本节点包含文字、空格、换行等)
这三个节点会返回不同的值，在后期会用来获取相关属性，我实际开发中,节点操作主要操作的是元索节点，nodetype==1的值，HTML所有标签都可以看为一个节点
2、获取方法
A:利用dom树可以把节点分为不同的层级关系，常见的是父子兄层级关系
B:父级节点
语法：node（获取过来的一个元素）. parentNode，parentNode属性可返回某节点的父节点，注意是最近的一个父节点 如果指定的节点没有父节点则返回null
C：子节点
A:获取方法一（麻烦会返回所有节点）
语法：parentNode.childNodes（标准）
对于子节点是一个集合来说返回的是一个伪数组，假如ul里面有4个li就会返回9个节点，因为里面还存在5个txet节点（空格也算是节点），集合里面包含了所有的节点，包括元素节点、文本节点，如果只想要获得里面的元素节点，就需要处理
var ul = document.querySelector("ul");
for( var i=0;i<ul.childNodes.length; i++){
if(ul.childe[i].nodeyType==1){
console.log（ul. childNodes[i]）;
}
} 过程繁琐不提倡
推荐方法：parentNode.children（parentNode父节点名）
parentNode.children是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回(这个是我们重点掌握的）。 虽然children是一个非标准，但是得到了各个浏览器的支持，因此我们可以使用
我们想要获得第几个li可以采用如下方法
ul.children[0]、ul.children[1]、ul.children[2]
B：获取方法二（麻烦会返回第一个节点包含文字节点）
语法一：parentNode .firstChild 返回第一个子节点，找不到结果返回null。同样也是包含所有的节点。 语法：parentNode. lastChild
返回第一个子节点，找不到结果返回null。同样也是包含所有的节点。
我们只需要获取元素节点就可以了为此出现方法三：
C：获取方法三（IE9以上支持此语法）
语法：parentNode .firstElementChild firstElementchild返回第一个子元素节点，找不到则返回null。
语法：parentNode . lastElementChild lastElementchild返回最后一个子元素节点，找不到则返回null。
下拉菜单利用parentNode.children元素节点制作
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<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;
}
.nav ul li {
border-bottom: 1px solid #FECC5B;
}
.bg {
background-color: red;
}
</style>
<ul class="nav">
<li>
<a href="#">微博</a>
<ul class="nae">
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul class="nae">
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul class="nae">
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul class="nae">
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
</ul>
<script>
var nav = document.querySelector(".nav");
var lis = nav.children;
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function() {
this.children[1].style.display = "block";
}
lis[i].onmouseout = function() {
this.children[1].style.display = "none";
}
}
</script>
</body>
</html>