Javascript：DOM的概念理解，以及相关要点

一、DOM概念描述

1、DOM，全名为Document Object Model。意思是，当网页加载时候，浏览器会创建文档对象模型。

2、大家看一下关于DOM的模型树状图：

3、通过上面的对象模型，Javascript有以下几个功能
（1）Javascript能够改变页面中所有HTML元素与属性；
（2）Javascript能够改变页面中的CSS样式；
（3）Javascript能够删除已有的HTML的元素与属性；
（4）Javascript能够添加新的HTML的元素与属性；
总结：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

二、DOM文档节点

2.1节点概述

1、节点（node），是构成网页的最基本部分，网页中每一个部分都是被称为节点（Node）——构成HTML文档最基本的单元。。

2、这里需要大家注意，虽然说，都叫做节点，但是节点的类型有所区别（标签我们称为元素节点、属性称为属性节点、文本称为 文本节点、文档称为文档节点），这也就导致了属性与方法不同。

3、常用的四个节点：

• 文档节点：整个HTML文档
• 元素节点：HTML文档中的HTML标签
• 属性节点：元素的属性
• 文本节点：HTML标签中的文本内容
  

2.2文档节点

1、文档节点（Document）代表的是整个HTML文 档，网页中的所有节点都是它的子节点。

2、document对象作为window对象的属性存在的，我们不用获取可以直接使用。

3、通过该对象我们可以在整个文档访问内查找节点对象，并可以通过该对象创建各种节点对象。

2.3元素节点

1、HTML中的各种标签都是元素节点（Element），这也是我们最常用的一个节点。

2、浏览器会将页面中所有的标签都转换为一个元素节点， 我们可以通过document的方法来获取元素节点。

例如：document.getElementById()，根据id属性值获取一个元素节点对象。

2.4属性节点

属性节点（Attribute）表示的是标签中的一个一个的属 性，这里要注意的是，属性节点并非是元素节点的子节点，而是元素节点的一部分。可以通过元素节点来获取指定的属性节点。

例如：元素节点.getAttributeNode("属性名")，根据元素节点的属性名获取一个属性节点对象。

2.5文本节点

文本节点（Text）表示的是HTML标签以外的文本内容，任意非HTML的文本都是文本节点，它包括可以字面解释的纯文本内容。文本节点一般是作为元素节点的子节点存在的。获取文本节点时，一般先要获取元素节点，在通过元素节点获取文本节点。

例如：元素节点.firstChild;，获取元素节点的第一个子节点，一般为文本节点。

三、DOM文档操作

3.1查找HTML元素

方法	描述
document.getElementById(id)	通过元素 id 来查找元素。
document.getElementsByTagName(name)	通过标签名来查找元素。
document.getElementsByClassName(name)	通过类名来查找元素。
document.querySelector(CSS选择器)	通过CSS选择器选择一个元素。
document.querySelectorAll(CSS选择器)	通过CSS选择器选择多个元素。

3.2获取HTML元素

1.获取 HTML 元素的 inner Text

元素节点.innerText

2.获取 HTML 元素的 inner HTML

元素节点.innerHTML

3.获取 HTML 元素的属性值

元素节点.属性

4.获取 HTML 元素的属性值

元素节点.getAttribute(attribute)

5.获取 HTML 元素的行内样式值

元素节点.style.样式

3.3改变 HTML 的值

1.改变元素的 inner Text

元素节点.innerText = new text content

2.改变元素的 inner HTML

元素节点.innerHTML = new html content

3.改变 HTML 元素的属性值

元素节点.属性 = new value

4.改变 HTML 元素的属性值

元素节点.setAttribute(attribute, value)

5.改变 HTML 元素的行内样式值

元素节点.style.样式 = new style

3.4修改 HTML 元素

document.createElement(element)	   //创建 HTML 元素节点。
document.createAttribute(attribute)	//创建 HTML 属性节点。
document.createTextNode(text)	//创建 HTML 文本节点。
元素节点.removeChild(element)	//删除 HTML 元素。
元素节点.appendChild(element)	//添加 HTML 元素。
元素节点.replaceChild(element)	//替换 HTML 元素。
元素节点.insertBefore(element)	//在指定的子节点前面插入新的子节点。

3.5查找HTML父子

元素节点.parentNode	//返回元素的父节点。
元素节点.parentElement	//返回元素的父元素。
元素节点.childNodes	//返回元素的一个子节点的数组（包含空白文本Text节点）。
元素节点.children	//返回元素的一个子元素的集合（不包含空白文本Text节点）。
元素节点.firstChild	//返回元素的第一个子节点（包含空白文本Text节点）。
元素节点.firstElementChild	//返回元素的第一个子元素（不包含空白文本Text节点）。
元素节点.lastChild	//返回元素的最后一个子节点（包含空白文本Text节点）。
元素节点.lastElementChild	//返回元素的最后一个子元素（不包含空白文本Text节点）。
元素节点.previousSibling	//返回某个元素紧接之前节点（包含空白文本Text节点）。
元素节点.previousElementSibling	//返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点）。
元素节点.nextSibling	//返回某个元素紧接之后节点（包含空白文本Text节点）。
元素节点.nextElementSibling	//返回指定元素的后一个兄弟元素（相同节点树层中的下一个元素节点）。