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>