节点和节点操作

节点:
一般的,节点拥有nodeType(节点类型). nodeName(节点名称)和nodeValue(节点值)这三个基本属性.

页面中所有元素都是节点

元素节点 nodeType 为1
属性节点 nodeType 为2
文本节点 nodeType 为3 (文本节点包括文字. 空格. 换行等)

利用dom树可以把节点划分为不同的层级关系,常见的是父子兄层级关系
1.父级节点 node.parentNode
返回的是最近的一个父节点; 如果没有父节点则返回 null
2.子节点
(1)parentNode.childNodes (标准)
parentNode.childNodes 返回包含指定节点的子节点的集合,该集合为即时更新的集合.
注意: 返回值里面包含了所有的子节点, 包括元素节点, 文本节点等.
如果只想获取里面的元素节点,则需专门处理,不提倡使用childNodes.
var ul=document.querySelector('ul');
console.log(ul.childNodes);
console.log(ul.childNodes[0].nodeType)// 返回节点类型,值为3 因为ul的子节点还有空格,它的nodeType是3
console.log(ul.childNodes[1].nodeType)// 返回节点类型,值为1 ul的子节点li是元素节点, 它的nodeType是1
for (var i=0; i< ul.childNodes.length; i++){
if (ul.childNodes[i].nodeType==1){
// ul.childNodes[i]就是元素节点
console.log(ul.childNodes[i]); //这样获取到了所有的元素节点
}
}
(2) node.children 获取所有的子元素节点 也是实际开发常用的. 得到的是一个伪数组
var ul=document.querySelector('ul');
var li= ul.children;
console.log(li[0]); // 打印第一个ul的第一个子元素

代码实例:

    //兄弟节点    (不常用)
    var div = document.querySelector('div')
    //nextSibling  下一个兄弟节点  包括文本节点和元素节点 
    console.log(div.nextSibling);
    console.log(div.previousSibling)

    //2. nextElementSibling 和previousElementSibling  返回下一个和上一个元素节点  如不存在就返回null
    console.log(div.nextElementSibling);
    console.log(div.previousElementSibling);
    //这个方法依旧存在兼容性问题
    //解决办法:  需要自己封装一个兼容性函数 

应用: 新浪下拉菜单
css部分: