JavaScript DOM

DOM对象简介

1、什么是DOM

DOM：Document Object Model，文档对象模型。

作用：是一套规范文档内容的通用型标准。

2、什么是HTML DOM

DOM HTML指的是DOM中为操作HTML文档提供的属性和方法。

• 文档（Document）表示HTML文件。
• 文档中的标签称为元素（Element）。
• 文档中的所有内容称为节点（Node）。

因此，一个HTML文件可以看作是所有元素组成的一个节点树，各元素节点之间有级别的划分。

DOM HTML节点树

DOM对象的继承关系

HTML元素操作

1、获取操作的元素

document对象的方法和属性

HTML5中为更方便获取操作的元素，为document对象新增了两个方法，分别为querySelector()和querySelectorAll()。

• querySelector()方法用于返回文档中匹配到指定的元素或CSS选择器的第1个对象的引用。
• querySelectorAll()方法用于返回文档中匹配到指定的元素或CSS选择器的对象集合。

console.log(document.querySelector('div')); 
       // 获取匹配到的第1个div

console.log(document.querySelector('#box'));
    // 获取id为box的第1个div

console.log(document.querySelector('.bar')); 
     // 获取class为bar的第1个div

console.log(document.querySelector('div[name]'));
//获取含有name属性的第1个div

console.log(document.querySelector('div.bar'));
//获取文档中class为bar的第1个div

console.log(document.querySelector('div#box'));
//获取文档中id为box的第1个div

Element对象的方法和属性

在DOM操作中，元素对象也提供了获取某个元素内指定元素的方法，常用的两个方法分别为getElementsByClassName()和getElementsByTagName()。它们的使用方式与document对象中同名方法相同。

HTML Collection对象

HTMLCollection对象：通过document对象或Element对象调用getElementsByClassName()方法、getElementsByTagName()方法、children属性等返回的对象集。

NodeList对象：document对象调用getElementsByName()方法在Chrome和FireFox浏览器中返回的是NodeList对象，IE11返回的是HTMLCollection对象。

HTMLCollection与NodeList对象的区别：

• HTMLCollection对象用于元素操作。
• NodeList对象用于节点操作。

<li id="test" name="test">test</li>
<script>  
var lis1 = document.getElementsByTagName('li');
 // 获取标签名为li的对象集合
 
var test = document.getElementById('test');   
        // 获取id为test的li元素对象

lis1.test === test;       
    // 比较结果：true

var lis2 = document.getElementsByName('test');
   // 获取name名为test的对象集合
 
lis1.test === lis2[0];                                      // 比较结果：true
</script>

2、元素内容

JavaScript中，若要对获取的元素内容进行操作，则可以利用DOM提供的属性和方法实现。

3、元素属性

在DOM中，为了方便JavaScript获取、修改和遍历指定HTML元素的相关属性，提供了操作的属性和方法。

4、元素样式

classList属性还提供了许多其他相关操作的方法和属性。

DOM节点操作

1、获取节点

2、节点追加

create系列的方法是由document对象提供的，与Node对象无关。

3、节点删除

语法：removeChild()和removeAttributeNode()方法实现。

返回值：是被移出的元素节点或属性节点。