DOM基础及应用（二）

    访问并更新DOM树需要两个步骤：

        1、定位到与需要操作的对象所对应的节点。

        2、使用它的文本内容、子元素或属性。

    访问元素：

        选择单个元素节点：有三种方法可用来选择单独的元素。

        

        选择多个元素：有三种方法可以用来选择多个元素。

        

        在元素节点之间遍历：可以从一个元素节点移到另一个相关的元素节点。

        

    操作元素：

        更新文本节点

            为了访问上篇博客DOM树中最右下方的文本节点，我们需要

            

        操作HTML内容

        

        访问或更新属性值

        

    DEMO1      

<span style="font-size:18px;"><strong>//得到<ul>元素var list = document.getElementsByTagName('ul')[0];//创建元素节点var newItemLast = document.createElement('li');//创建文本节点var newTextLast = document.createTextNode('cream');//把文本节点添加到元素节点上newItemLast.appendChild(newTextLast);//把元素节点添加到list中list.appendChild(newItemLast);</strong></span>

    DEMO2

<span style="font-size:18px;"><strong>//选择所有的<li>元素var listItems = document.querySelectorAll('li');//声明变量ivar i;//遍历选中的所有元素将className改为coolfor (i = 0; i < listItems.length; i++) {    listItems[i].className = 'cool';}//选择h2元素var heading = document.querySelector('h2');//将h2第一个子元素的内容放入变量中var headingText = heading.firstChild.nodeValue;//得到列表项的数量var totalItems = listItems.length;//创建新的页面标题内容，并保存到变量中var newHeading = headingText + '<span>' + totalItems + '</span>';//更新页面标头heading.textContent = newHeading;</strong></span>

    两篇博客结合实例对DOM树进行了一个简单的总结，有不太合理的地方欢迎大牛们提出宝贵的意见。