DOM(节点)

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

DOM（节点）

一、DOM节点的含义

在编程中，DOM（Document Object Model）是一种用于HTML和XML文档的编程接口。它提供了一种方法，使得你可以用编程的方式来访问和操作一个页面的标签。

二、获取标签节点

-获取操作
- 创建标签节点
var obj = document.createElement(‘标签名称’);
例：
var div = document.createElement(‘div’);
div.className = “box”
console.log(div)

		- 使用标签节点
			A. 
				标签对象.appendChild(标签对象);
				追加一个标签到另一个标签的末尾！
				当你给一个元素追加子元素的时候，不是仅仅只可以追加新																		   创建的元素，已经存在html中的元素也是可以被追加
			B. 
				父标签对象.insertBefore(新节点, 目标节点);
				将新节点插入到目标节点之前

			C.
				标签对象.cloneNode(false/true)
					克隆当前的标签对象
					false 默认值，表示只克隆当前的节点
					true, 克隆当前节点以及其子节点

			D. 
				父容器标签对象.removeChild(子节点对象); 
					删除父容器的某个子节点

			E. 
				父容器对象.replaceChild(newNode, oldNode);
					用新节点替换掉旧节点

三、DOM节点树!

该处使用的url网络请求的数据。

节点树

一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是树。它有一个顶层节点的子节点，然后子节点又有自己的子节点，就这样层层衍生出一个金字塔结构，倒过来就像一棵树

四、DOM节点方法

1.创建新的DOM节点

代码如下（示例）：

var newNode = document.createElement('div');
newNode.innerHTML = 'Hello, world!';
document.body.appendChild(newNode);

2.删除DOM节点

代码如下（示例）：

var parent = document.getElementById('parent');
var child = document.getElementById('child');
parent.removeChild(child);

3.替换DOM节点

代码如下（示例）：

var parent = document.getElementById('parent');
var newNode = document.createElement('div');
var oldNode = document.getElementById('old');
newNode.innerHTML = 'New node';
parent.replaceChild(newNode, oldNode);

4.克隆DOM节点

代码如（示例）：

var parent = document.getElementById('parent');
var child = document.getElementById('child');
var clone = child.cloneNode(true);
parent.appendChild(clone);

5.插入DOM节点

代码如下（示例）：

var referenceNode = document.getElementById('referenceNode');
var newNode = document.createElement('div');
newNode.innerHTML = 'New node';
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);

6.改变DOM节点属性

代码如下（示例）：

var img = document.getElementById('myImage');
img.src = 'images/pic2.jpg';

7.改变DOM节点样式

代码如下（示例）：

var element = document.getElementById('myElement');
element.style.color = 'blue';

8.改变DOM节点内容

代码如下（示例）：

var element = document.getElementById('myElement');
element.innerHTML = 'Hello, world!';

---

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了DOM的使用，而且这篇文章主要介绍了js常用节点操作,结合实例形式总结分析了JavaScript针对dom节点的遍历、查找、创建、删除、克隆等相关实现技巧