JavaScript中DOM获取元素对象详解

DOM: 文档对象模型( Document Object Model ,简称DOM) .

DOM树

文档:一个页面就是一个文档，在DOM中使用document表示
元素:页面中的所有标签都是元素，DOM中使用element表示
节点:网页中的所有内容都是节点(标签、属性、文本、注释等) , DOM中使用node表示
DOM以上内容都看做对象。

如何获取元素：

1根据ID获取

.getElementById()
	<div id="name">hellow world</div>
    <script>
        var name_div=document.getElementById('name');
        console.log(name_div);
    </script>

2通过标签名获取

.getElementsByTagName()

 <ul>
       <li>A1</li>
       <li>A2</li>
       <li>A3</li>
       <li>A4</li>
</ul>
    <script>
        var lis=document.getElementsByTagName('li');
        console.log(lis);     
    </script>

注意 ： 返回的值是以伪数组的形式来存储的，可以通过遍历的方式 来取出所有的元素对象

<ul>
       <li>A1</li>
       <li>A2</li>
       <li>A3</li>
       <li>A4</li>
   </ul>

    <script>
        var lis=document.getElementsByTagName('li');
        console.log(lis);
        for(var i = 0;i<lis.length;i++){
            console.log(lis[i]);
        }

3 通过类名获取

.getElementsByClassName()

getElementsByClassName	<div class="box">A1</div>
   <div class="box">A2</div>

    <script>
        var boxs=document.getElementsByClassName('box')
        console.log(boxs);

4 根据指定的选择器返回第一个元素对象

.querySelector() 填入选择器

<div class="box">A1</div>
   <div class="box">A2</div>

    <script>
        var firstbox=document.querySelector('.box');
        console.log(firstbox);

这是选择了 类名为box的第一个元素对象

<ul id="nav">
       <li>A1</li>
       <li>A2</li>
       <li>A3</li>
   </ul>
    <script>
        var firstli=document.querySelector('#nav');
        console.log(firstli);

选择了 id为 nav的第一个元素对象

5根据指定选择器返回

.querySelectorAll（）

<div class="box">A1</div>
   <div class="box">A2</div>

    <script>
        var boxs=document.querySelectorAll('.box');
        console.log(boxs);

获取特殊元素

1获取body元素

document.body
   var aa=document.body;
       console.log(aa);

2获取HTML元素

.documentElement

       var aa=document.documentElement;
       console.log(aa);

我们可以写一个小案例 如何实现页面中表格的隔行变色

    var tr=document.querySelectorAll('tr');
        for(var i=0;i<tr.length;i++){
            if(i%2==0){
            tr[i].style.backgroundColor="pink";
            console.log("2");                      
            }
        }

其中 div的布局就是普通的表格布局

<table>
        <tr>
            <td>B1</td>
            <td>B2</td>
            <td>B3</td>
            <td>B4</td>
        </tr>
</table>

我们通过

var tr=document.querySelectorAll('tr');

获取到所有的 tr元素，因为存储在一个伪数组里 所以 通过遍历，

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

当i的值可以被2整除后就使这个对应的tr元素的背景变色

tr[i].style.backgroundColor="pink";