文档对象模型-DOM(二)

从NodeList中选择元素

方法一：item()方法，用于返回其中的单一节点，需要在方法的参数中指定所需元素的索引编号。

当其中没有任何元素时，执行代码是对资源的浪费。因此程序员会在执行代码之前，先检查一下在NodeList中是否至少包含一个节点。

可以使用length方法来实现。举例如下：

             var elements = document.getElementsByClassName('hot');

             if(elements.length>=0){

                 var firstItem = elements.item(0);

             }

方法二：数组语法，可以使用括号语法来访问其中一个元素，就像访问数组中的单一项一样，需要在NodeList后面的中括号里指定所需的索引编号。举例如下：‘

             var elements = document.getElementsByClassName('hot');

             if(elements.length>=0){

                 var firstItem = elements[0];

             }

使用class属性选择元素

 var elements = document.getElementsByClassName('hot'); // 找到class值为'hot'的所有元素

 if (elements.length > 2) {

   var el = elements[2];    // 选择第三个元素并缓存到el

   el.className = 'cool';   // 将第三个元素的值替换为'cool'

 5 }

使用标签名选择元素

getElementsByTagName()方法

 var elements = document.getElementsByTagName('li'); // 找到<li>标签的多有元素

 if (elements.length > 0) {

   var el = elements[0];

   el.className = 'cool';

 }

使用class选择器选择元素

querySelector()  //返回第一个匹配的元素；querySelectorAll() //返回匹配的所有元素

 var el = document.querySelector('li.hot');

 el.className = 'cool';

 var els = document.querySelectorAll('li.hot');

 els[1].className = 'cool';

循环遍历NodeList

 var hotItem = document.querySelectorAll('li.hot');

 for(var i=0;i<hotItems.length;i++){

     hotItems[i].className='cool';

 }

 对前后兄弟节点的操作

html代码：

       <ul>

         <li id="one" class="hot"><em>fresh</em> figs</li>

         <li id="two" class="hot">pine nuts</li>

         <li id="three" class="hot">honey</li>

         <li id="four">balsamic vinegar</li>

       </ul>

js代码：

 // Select the starting point and find its siblings.

 var startItem = document.getElementById('two');

 var prevItem = startItem.previousSibling;

 var nextItem = startItem.nextSibling;

 // Change the values of the siblings' class attributes.

 prevItem.className = 'complete';

 nextItem.className = 'cool';

对子节点操作

html代码同上

js代码：

 // Select the starting point and find its children.

 var startItem = document.getElementsByTagName('ul')[0];

 var firstItem = startItem.firstChild;

 var lastItem = startItem.lastChild;

 // Change the values of the children's class attributes.

 firstItem.className = 'complete';

 lastItem.className = 'cool';