文档对象模型-DOM

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了文档对象模型-DOM相关的知识,希望对你有一定的参考价值。

从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 id="one" class="hot"><em>fresh</em> figs</li>
3         <li id="two" class="hot">pine nuts</li>
4         <li id="three" 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‘;

 

  

以上是关于文档对象模型-DOM的主要内容,如果未能解决你的问题,请参考以下文章

js中,dom元素和节点的区别

js中的类数组对象---NodeList

DOM

html dom中windows对象的4个常用子对象

Javascript:文档对象模型

DOM 文档对象模型