body代码

    <ul text="我是 UL 的一个属性">
        <li>你好</li>
    </ul>

0. 获取元素

    var oUl = document.querySelector('ul')

1. 元素节点

    var eleNode = oUl.firstElementChild

2. 属性节点

    var attrNode = oUl.attributes[0]

3. 文本节点

    var textNode = oUl.firstChild

1.节点属性

1. nodeType 节点类型

节点中的一个属性 nodeType 能够区分当前节点是什么类型

 1 -> 元素节点
 console.log('元素节点: ', eleNode.nodeType)
 2 -> 属性节点
 console.log('属性节点: ', attrNode.nodeType)
 3 -> 文本节点
 console.log('文本节点: ', textNode.nodeType)
    
    
    

2. nodeName 节点名称

元素节点 -> 大写的标签名    (LI / UL / DIV)
console.log('元素节点: ', eleNode.nodeName)
属性节点 -> text    (属性名)
console.log('属性节点: ', attrNode.nodeName)
文本节点 -> #text
console.log('文本节点: ', textNode.nodeName)

3. nodeValue 节点的值

元素节点 -> 没有 nodeValue 也就会输出 null
console.log('元素节点: ', eleNode.nodeValue)
属性节点 -> 对应的属性值
console.log('属性节点: ', attrNode.nodeValue)
文本节点 -> 对应的文本内容
console.log('文本节点: ', textNode.nodeValue)