JavaScript进阶笔记——DOM概念，获取元素的四种方法，创建元素的效率对比

DOM：（Document Object Model ），文档对象模型，是W3C组织推荐的处理可拓展标记语言（HTML、XML）的标准编程接口。

通过DOM接口可以改变网页的内容、结构和样式。

• 在DOM中：
• 文档：一个页面就是一个文档
• 元素：页面中所有标签都是元素
• 节点：网页中的所有内容都是节点

DOM把以上内容都看作是对象

获取元素：

 

1、根据ID获取

使用getElementById()可以获取带有id的元素对象。

参数id是大小写敏感的字符串，console.dir()打印我们返回的元素对象，更好的查看里面的属性和方法

 

2、根据标签名获取

使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合。

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

还可以获取某个元素内部所有指定标签名的子元素，形式为：element.getElementsByTagName('标签名')

父元素必须是一个对象，不能是伪数组

比如只要获取ol里边的li，那么就需要这么操作：

var ol = document.getElementById('ol');
console.log(ol.getElementsByTagName('li'));

3、通过（类）选择器获取

（1）使用document.getElementByClassName('类名')，根据类名返回元素对象集合

（2）使用document.querySelector('选择器')，,注意选择器要加符号！比如.box,#nav,根据指定选择器返回第一个元素对象

（3）使用document.querySelectorAll('选择器')，返回指定选择器的所有元素对象集合

 

比如要获取一个class名为box的元素，有以下几种方法

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

var firstBox = document.querySelector('.box');//注意要加.   因为括号内是选择器

 

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

因为是选择器所以我们还可以获取ID获取，比如

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

4、获取特殊元素

获取body：document.body     返回body元素对象

获取html：document.documentElement   返回html元素对象

 

创建元素效率对比：

innerHTML创建多个元素效率更高，前提是不要使用字符串拼接，而是使用数组形式拼接，不过结构稍微复杂些

createElement()创建多个元素效率稍稍低一点，但是结构更清晰一些

总之innerHTML要比createElement效率高