Web基础(从零开始)——DOM简介（获取元素的四种方法）

文档对象模型（简称DOM）：是W3C组织推荐的处理可扩展标记语言（HTML或XML）的标准编程接口。

DOM树：

1.文档：一个页面就是一个文档，DOM中使用document表示；

2.元素：页面中的所有标签都是元素，DOM中使用element表示；

3.节点：页面中所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示；

DOM把以上内容都看做是对象。

注：因为文档页面从上往下加载，所有得先有标签，所以script标签写到标签下面。

获取元素的几种方法：

1.根据ID获取：返回一个匹配特定ID的元素

var element=document.getElementById(ID);

element是一个Element对象。

ID是大小写敏感的字符串，表示所要查找的元素的唯一的ID。

    
123
    

2.根据标签名获取：getElementsByTagName()：返回带有指定标签名的对象的集合

    
123
    
123
    
123
    

返回的是元素对象的集合，以伪数组的形式存储的

若是想要依次打印里面的元素，我们可以采取遍历的方式

        for (var i = 0; i < divs.length; i++) {
            console.log(divs[i]);
        }

 若想获取指定父元素下的子元素：element.getElementsByTagName('标签名');

注：父元素必须是单个对象（即不能是数组，只能指定某一个元素），获取的时候不包括父元素自己。

例如：想获取ol下的所有li

    

        
111
        
222
    
    

        
333
        
444
    
    

或者

    

        
111
        
222
    
    

        
333
        
444
    
    

3.通过HTML5新增的方法获取（但只有IE 9支持，其他的会存在兼容问题）

（1）document.getElementsByClassName('类名');   //根据类名获取某些元素集合

（2）document.querySelector('选择器');    //根据指定选择器返回第一个元素对象

例：document.querySelector('.box');  //通过类名

       document.querySelector('#box');  //通过ID

       document.querySelector('li');  //通过标签

（3）document.querySelectorAll(); //返回指定选择器的所有元素对象集合，返回的是一个伪数组

例：document.querySelectorAll('.box');  //通过类名

       document.querySelectorAll('#box');  //通过ID

       document.querySelectorAll('li');  //通过标签

4.特殊元素获取（body,html）

获取body元素：document.body;

获取html元素：document.documentElement;