13.DOM(文档对象模型)-获取dom元素方法

目录

一、什么是DOM

1. DOM定义：

2. DOM作用

二、DOM树

三、DOM中获取网页元素的方法

1. 通过id获取  getElementById('')

2. 通过标签名获取  getElementsByTagName('')  

3. h5新增的方法获取

1. getElementsByClassName('类名');

2. querySelector 返回指定选择器的第一个元素对象

3. querySelectorAll 返回指定选择器的所有的元素对象集合

4. 特殊元素获取

1.  body 获取: document.body

2. html 获取: documentElement

---

一、什么是DOM

1. DOM定义：

文档对象模型，w3c组织推荐的处理可扩展标记语言（html）的标准编程接口。

2. DOM作用

可以改变网页的内容、结构和样式

---

二、DOM树

1）文档：一个页面就是一个文档，用document表示

2）元素：页面中的所标签都是元素，用element表示

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

DOM把以上内容都看作对象

---

三、DOM中获取网页元素的方法

1. 通过id获取  getElementById('')

var times = document.getElementById('time');

        console.log(times);

        console.log(typeof times); // 返回的是对象  object

        console.dir(times); // 可以打印返回的元素对象，便于查看里面的属性和方法

注意：参数id是大小写敏感的字符串

2. 通过标签名获取  getElementsByTagName('')  

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

        var lis = document.getElementsByTagName('li');

        console.log(lis);

        console.log(lis[0]);

        // 想要依次打印里面的元素对象，可以采用遍历的方法

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

            console.log(lis[i]);

        }

注意：如果页面中只有一个li，返回的还是伪数组的形式

如果页面中没有这个元素，返回的是空的伪数组

element.getElementsByTagName('标签名')  获取某个元素（父元素）内部所有指定标签名的子元素 

        var ol = document.getElementById('ol');

        console.log(ol.getElementsByTagName('li'));

 注意：父元素必须是单个对象，获取的时候不包括父元素自己

3. h5新增的方法获取

1. getElementsByClassName('类名');

        var boxs = document.getElementsByClassName('box');

        console.log(boxs);

2. querySelector 返回指定选择器的第一个元素对象

        var firstBox = document.querySelector('.box');

        console.log(firstBox);

        var time = document.querySelector('#time');

        console.log(time);

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

        console.log(li);

3. querySelectorAll 返回指定选择器的所有的元素对象集合

        var allbox = document.querySelectorAll('.box');

        console.log(allbox);

4. 特殊元素获取

1.  body 获取: document.body

        var body = document.body;

        console.log(body);

2. html 获取: documentElement

        var html = document.documentElement;

        console.log(html);