JavaScript---DOM元素

什么是 HTML DOM？

HTML DOM是W3C （万维网联盟）制订的一套标准，标准中定义了所有 HTML 元素的对象和属性，以及访问它们的方法。换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

注意：DOM 是Document Object Model（文档对象模型）的缩写。

DOM 节点

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 标签属性是属性节点
注释是注释节点

DOM 节点树

HTML DOM 将 HTML 文档视为树形结构。这种结构被称为节点树：

通过 HTML DOM，树中的所有节点均可通过JavaScript进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

DOM的方法和属性

HTML DOM 对象 - 方法和属性

一些常用的 HTML DOM 方法：

getElementById(id)- 获取带有指定 id 的节点（元素）
appendChild(node) - 插入新的子节点（元素）
removeChild(node) - 删除子节点（元素）

一些常用的 HTML DOM 属性：

innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点

节点之间的关系

节点树中的节点彼此拥有层级关系，我们可以使用父（parent）、子（child）和同胞（sibling）等术语来描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

在节点树中，顶端节点被称为根（root）
每个节点都有父节点、除了根（它没有父节点）
一个节点可拥有任意数量的子节点
同胞是拥有相同父节点的节点

获取节点

假设页面中包含如下代码，我们怎样使用 DOM 提供的方法获取这些节点呢？

<div id="main"> 
<div class="box"> <p>段落内容</p> </div> 
<div class="box"> <p>段落内容</p> </div> 
<div class="box"> <p>段落内容</p> </div> 
</div>

根据id 获取节点

document.getElementById('main'); // 获取 id 属性值为 main 的节点

根据标签名获取节点

document.getElementsByTagName('p');  // 获取标签名为 p 的节点

根据 class 获取节点

document.getElementsByClassName('box');  // 获取 class 属性值包含 box 类名的节点

修改节点

<p class="box">段落内容</p> 
<p class="box">段落内容</p> 
<p class="box">段落内容</p>

改变 HTML 内容

改变元素内容的最简答的方法是使用innerHTML 属性。

var boxes = document.getElementsByClassName('box');
boxes.innerHTML = 'Hello DOM';    // 修改段落中文本

除了修改文本以外，还可以将文本变成 HTML 标签

boxes.innerHTML = '<a href="#">链接</a>';      // 将段落中的文本修改成<a>元素

改变 CSS 样式

通过 HTML DOM，我们能够访问HTML 元素的样式对象。

boxes.style.color = '#f00';     // 字体颜色修改成红色
boxes.style.fontSize = '12px';  // 字体大小修改成 12px

改变HTML属性

获取元素的属性值

boxes.getAttribute('class');  // 获取 class 属性的值

给元素添加一个属性

boxes.setAttribute('title', '段落的title属性内容');  // 设置 title 属性

操作元素

<div id="main"> 
<p id="box1">段落内容</p> 
<p id="box2">段落内容</p> 
<p id="box3">段落内容</p> 
</div>

新建节点

方法：document.createElement(tagName)

作用：根据标签名（tagName）创建新的 DOM 对象。

这个方法只接受一个参数，要创建元素的标签名。例如，下面的代码创建了一个<p>元素：

var newElement = document.createElement('p');  // 创建新元素 p

追加节点

方法：parentElement.appendChild(newElement);

作用：追加到父元素内容的后面

var parentElement = document.getElementById('main');  // 获取父元素
parentElement.appendChild(newElement);                // 将新元素追加到父元素内容之后

插入节点

方法：parentElement.insertBefore(newElement, targetElement)

作用：将新创建的元素（newElement）添加到目标元素（targetElement）前面

var parentElement = document.getElementById('main');  // 获取父元素
var targetElement = document.getElementById('box2');  // 获取目标元素
var newElement     = document.createElement('p');     // 创建新元素
parentElement.insertBefore(newElement, targetElement);// 将新元素插入到目标元素之前

注意：如果参照节点是null，则insertBefore()和appendChild()执行的结果一样。

替换节点

方法：parentElement.replaceChild(newElement, targetElement)

作用：使用新元素替换目标元素

被替换的节点将从文档树种移除，同时要插入的节点占据其位置。

var parentElement = document.getElementById('main');  // 获取父元素
var targetElement = document.getElementById('box2');  // 获取目标元素
var newElement     = document.createElement('p');     // 创建新元素
parentElement.replaceChild(newElement, targetElement); // 使用新元素替换目标元素

删除节点

方法：parentElement.removeChild(childElement);

作用：从父元素（parentElement）中删除一个子元素（childElement）

var parentElement = document.getElementById('main');  // 获取父元素
var childElement  = document.getElementById('box2');  // 获取子元素
parentElement.removeChild(childElement);              // 将子元素从父元素中删除

注意：以上4个方法操作的都是某个节点的子节点，也就是说，要使用这几个方法必须先取得父节点。另外，并不是所有节点都有子节点，如果在没有子节点的节点上调用这些方法，将会出错。

克隆节点

方法：currentElement.cloneNode(true/false);

作用：复制 DOM 元素。

该方法只接受一个布尔值的参数，true代表深度拷贝，false代表浅拷贝，不传参的话，默认为false。

var currentElement = document.getElementById('main');  // 获取需要复制的元素
currentElement.cloneNode(false);                      // 只复制元素本身，忽略其子元素
currentElement.cloneNode(true);                       // 复制元素本身，及其子元素

注意：这个方法是所有节点都有的。如果不传递任何参数，默认只拷贝当前元素节点，如果传递的参数为true，就会进行深度拷贝，也就是被拷贝元素内的所有后代元素都会被复制。

DOM元素的访问关系

访问父节点

	div3.parentNode();

访问下一个`兄弟节点

	div3.nextSibling
	div3.nextElementSibling

访问上一个兄弟节点

	div3.previousSibling
	div3.previousElementSibling

访问第一个孩子节点

	console.log(div3.firstChild)
	console.log(div3.firstElementChild)

访问最后一个孩子节点

	console.log(div3.lastChild);
	console.log(div3.lastElementChild);

访问

	console.log(div3.childNodes);
	console.log(div3.children[1]);