摘要：
从NodeList:item（）方法中选择元素方法1，该方法用于返回单个节点。您需要在方法参数中指定所需元素的索引号。当没有元素时，执行代码就是浪费资源。因此，程序员将在执行代码之前检查NodeList中是否至少有一个节点。您可以使用长度方法执行此操作。
从NodeList中选择元素
方法一：item()方法，用于返回其中的单一节点，需要在方法的参数中指定所需元素的索引编号。
当其中没有任何元素时，执行代码是对资源的浪费。因此程序员会在执行代码之前，先检查一下在NodeList中是否至少包含一个节点。
可以使用length方法来实现。举例如下：
1 var elements = document.getElementsByClassName('hot'); 2 if(elements.length>=0){ 3 var firstItem = elements.item(0); 4 }
方法二：数组语法，可以使用括号语法来访问其中一个元素，就像访问数组中的单一项一样，需要在NodeList后面的中括号里指定所需的索引编号。举例如下：‘
1 var elements = document.getElementsByClassName('hot'); 2 if(elements.length>=0){ 3 var firstItem = elements[0]; 4 }
使用class属性选择元素
1 var elements = document.getElementsByClassName('hot'); // 找到class值为'hot'的所有元素 2 if (elements.length > 2) { 3 var el = elements[2]; // 选择第三个元素并缓存到el 4 el.className = 'cool'; // 将第三个元素的值替换为'cool' 5 }
使用标签名选择元素
getElementsByTagName()方法
1 var elements = document.getElementsByTagName('li'); // 找到<li>标签的多有元素 2 if (elements.length > 0) { 3 var el = elements[0]; 4 el.className = 'cool'; 5 }
使用class选择器选择元素
querySelector() //返回第一个匹配的元素；querySelectorAll() //返回匹配的所有元素
1 var el = document.querySelector('li.hot'); 2 el.className = 'cool';
3 var els = document.querySelectorAll('li.hot'); 4 els[1].className = 'cool';
循环遍历NodeList
1 var hotItem = document.querySelectorAll('li.hot'); 2 for(var i=0;i<hotItems.length;i++){ 3 hotItems[i].className='cool'; 4 }
对前后兄弟节点的操作
html代码：
1 <ul> 2 <li class="hot"><em>fresh</em> figs</li> 3 <li class="hot">pine nuts</li> 4 <li class="hot">honey</li> 5 <li id="four">balsamic vinegar</li> 6 </ul>
js代码：
1 // Select the starting point and find its siblings. 2 var startItem = document.getElementById('two'); 3 var prevItem = startItem.previousSibling; 4 var nextItem = startItem.nextSibling; 5 // Change the values of the siblings' class attributes. 6 prevItem.className = 'complete'; 7 nextItem.className = 'cool';
对子节点操作
html代码同上
js代码：
1 // Select the starting point and find its children. 2 var startItem = document.getElementsByTagName('ul')[0]; 3 var firstItem = startItem.firstChild; 4 var lastItem = startItem.lastChild; 5 // Change the values of the children's class attributes. 6 firstItem.className = 'complete'; 7 lastItem.className = 'cool';