DOM节点说明

<h3>我喜欢的明星</h3>
<ul class="list">
    <li><img src="images/1.jpg"  width="100" alt="">花野真衣</li>
    <li><img src="images/2.jpg"  width="100" alt="">铃木千夏</li>
    <li><img src="images/3.jpg" width="100" alt="">井上合香</li>
    <li><img src="images/4.jpg" width="100" alt="">酒井美黛</li>
</ul>
<script>
    //页面中最重要的三个节点类型: 元素,属性,文本,
    //分别对应的整数是1,2,3
    //主要涉及四个: childNodes, nodeType,nodeName,nodeValue

    //每个节点都有一个childNodes属性,它是一个NodeList数组对象,保存着该节点下面的甩的子节点
    var list = document.getElementsByTagName('ul')[0]
    //list就是一个节点,查看一下它的childNodes属性
    console.log(list.hasChildNodes()) //查询该节点下面是否有子节点
    console.log(list.childNodes.length)  //查看有多少个节点
    console.log(list.childNodes)

    //你会发现他把回车换行符也当成了一个节点
    //每个节点对象还有一个nodeType属性,可以查看节点的类型
    console.log(list.childNodes[0].nodeType)  //3: 文本节点
    console.log(list.childNodes[1].nodeType)  //1: 元素节点
    //使用childNodes上的一个方法item(index)也可以获取到子节点
    console.log(list.childNodes.item(1).nodeType)  //1: 元素节点
    //通常我们只对元素节点感兴趣,所以需要对节点做一个判断
    var childs = list.childNodes
    var element = []  //创建一个空的数组容器,用来接收新数据
    for (var i=0; i< childs.length; i++) {
        if (childs[i].nodeType == 1) {
            element.push(childs[i])  //用入栈方式给数组添加数据
        }
    }
    console.log(element)  //现在就把所有的元素节点选了出来
    //因为选择父节点下面的元素节点很重要也很常用,所以提供一个快捷方法
    console.log(element[0].nodeName) //返回大写字母的标签名/元素对象名


    var h3 = document.getElementsByTagName('h3')[0]
    console.log(h3.firstChild.nodeType)
    //查看节点的值,只有文本节点也可以查看nodeValue
    console.log(h3.firstChild.nodeValue) //我喜欢的明星

   //之前还学习创建一个节点
    var li = document.createElement('li')
    li.innerHTML = '我爱PHP中文网'
    list.appendChild(li)
     //li的第一个子节点才是img
    element[0].childNodes[0].setAttribute('class','item')
    element[0].firstChild.setAttribute('class','item')
    //最后一个列表的第一个子节点img，设置样式
    element[element.length-1].firstChild.setAttribute('class','item')

    //全部设置,用循环来实现
    for (var i=0; i<element.length; i++){
        element[i].firstChild.setAttribute('class','item')
        //将li元素的文本设置为红色,选择当前li的第一个子节点的父元素
        element[i].firstChild.parentNode.setAttribute('class','red')
        element[i].setAttribute('class','red')  //这样写是一样的，上面是故意绕你学新东西
    }

</script>