文章目录
- 一、DOM概念描述
- 二、DOM文档节点
- 2.1节点概述
- 2.2文档节点
- 2.3元素节点
- 2.4属性节点
- 2.5文本节点
- 三、DOM文档操作
- 3.1查找HTML元素
- 3.2获取HTML元素
- 3.3改变 HTML 的值
- 3.4修改 HTML 元素
- 3.5查找HTML父子
一、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
元素节点.innerText2.获取 HTML 元素的 inner HTML
元素节点.innerHTML3.获取 HTML 元素的属性值
元素节点.属性4.获取 HTML 元素的属性值
元素节点.getAttribute(attribute)5.获取 HTML 元素的行内样式值
元素节点.style.样式3.3改变 HTML 的值
1.改变元素的 inner Text
元素节点.innerText = new text content2.改变元素的 inner HTML
元素节点.innerHTML = new html content3.改变 HTML 元素的属性值
元素节点.属性 = new value4.改变 HTML 元素的属性值
元素节点.setAttribute(attribute, value)5.改变 HTML 元素的行内样式值
元素节点.style.样式 = new style3.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 //返回指定元素的后一个兄弟元素（相同节点树层中的下一个元素节点）。
