DOM

1、什么是DOM

DOM 的全称是 Document Object Model，译为文档对象模型。DOM 就是为 HTML 文档提供的一个API（接口）。

2、DOM 的组成

Core DOM：也称核心DOM编程，定义了一套标准针对任何结构化文档的对象，包括HTML。
XML DOM：定义了一套标准的针对 XML 文档的对象。
HTML DOM:定义了一套标准的针对 HTML 文档的对象。

3、节点

节点 node 是个网络术语，表示网络中的连接点。一个网络是由各种不同的节点构成的集合。

文档节点：表示整个 HTML 页面（相当于 document 对象）。当需要访问任何标签、属性或文本时，
都可以通过文档节点进行导航。
元素节点：表示 HTML 页面中的标签（即 HTML 页面的结构）。当访问 DOM 树时，需要从查找元素节
点（标签）开始。
文本节点：表示 HTML 页面中的标签所包含的文本内容。
属性节点：表示 HTML 页面中的开始标签包含的属性。

 

二、Document 对象

Document 对象表示浏览器加载的 HTML 页面，并作为查找 HTML 页面内容的入口。

1、DOM 查询（获取元素节点）

（1）通过标签的 id 属性值获取

语法结构：

document.getElementById( id属性值 ) 

<div id="box"></div> 

let box = document.getElementById("box");
console.log( box );

（2）通过标签的 class 属性值获取

语法结构：

document.getElementsByClassName( class属性值 ) 

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

let box = document.getElementsByClassName("box");
console.log( box ); 
console.log( box[0] );

（3）通过标签名获取

语法结构：

document.getElementsByTagName( 标签名 ) 

<div></div> 

let divEle = document.getElementsByTagName("div");
console.log( divEle ); 
console.log( divEle[0] );

（4）通过标签的 name 属性值获取

语法结构：

document.getElementsByName( name属性值 ) 

例：

<input type="text" name="username">

let divEle = document.getElementsByName("username");
console.log( divEle ); 
console.log( divEle[0] );

（5）通过 CSS 选择器方式获取

querySelector()

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

var boxEle = document.querySelector(".box");
console.log( boxEle );

DOM 查询方法我们大致可以分为以下两类：

传统方
式： getElementById 、 getElementsByClassName 、 getElementsByTagName 、 getElementsByName
优点：性能好、查询速度快
缺点：使用麻烦

HTML5 新增： querySelector 、 querySelectorAll
优点：使用便便捷
缺点：性能差、查询速度慢