DOM节点操作（都是函数）

1. 创建节点

createElement("p")

var createDiv = document.createElement("p")

image.png

控制台输出 ↓ 这个h1只是创建了但是没有被使用

image.png

文档结构里面也没有h1这个标签

image.png

2、添加节点（使用节点）

使用方法： 父节点.appendChild();

父节点.appendChild(新节点); 父节点的最后添加一个新节点

image.png

ddiv是我获取到的父节点，把h2标签添加到ddiv元素的最后面。

控制台输出 ↓ h2标签在span标签的下面

image.png

使用方法：父节点.insertBefore(要添加的节点，参考节点)；

父节点.insertBefore(新节点,参考节点);在参考节点前添加;

image.png image.png

创建h1标签通过createH1变量名来使用它，作为要添加的节点。

参考节点：ddiv.firstElementChild选择父节点第一个子节点，就是span标签，它会在在参考节点前添加。控制台输出 ↓

image.png

3、删除节点

用法：用父节点删除子节点。

父节点.removeChild（子节点）；必须制定要删除的子节点

image.png image.png

获取到的ddiv ID作为父节点，通过removeChild这个方法来删除div的lastElementChild（最后一个子节点）的方法。

控制台输出 ↓ ，h2标签已经被删除了，只剩h1标签。

image.png

节点自己删除自己：

不知道父级的情况下，可以这么写：

node.parentNode.removeChild(node)，和上面的效果一样。

使用的方法是，用

删除节点.parentNode（父节点）.removeChild(删除节点)

这个方法，找到需要删除的节点父节点，括号里面写入删除节点自己的变量名。

我需要删除的节点通过点parentNode找到父节点，然后删除我自己。

image.png

控制台输出 ↓

image.png

4、复制节点（ oldNode.cloneNode（true））

想要复制的节点调用这个函数cloneNode()，得到一个新节点。

新节点=要复制的节点.cloneNode(参数) ; 参数可选复制节点

image.png image.png

方法内部可以传参，如果是true，深层复制，如果是false，只复制节点本身。

image.png

控制台输出 ↓

image.png

用于复制节点， 接受一个布尔值参数， true 表示深复制（复制节点及其所有子节点）， false 表示浅复制（复制节点本身，不复制子节点），这个在复制比较多的元素时候，尽量不要使用js操作。对于页面效果不友好，可能会卡顿。

节点属性

image.png

注意：IE6、7不支持。

调用者：节点。 有参数。 没有返回值。

每一个方法意义不同。

获取：getAttribute(名称)

image.png

控制台输出 ↓ 用来获取某个属性的属性值

image.png

设置：setAttribute(名称, 值)

image.png

控制台输出 ↓ 用来设置元素的属性（class,id,type,value……）

给ID为dDiv的元素设置了一个自定义属性。

image.png

删除：removeAttribute(名称)

image.png

控制台输出 ↓ 刚才自定义的属性"dage"已经被删除了

image.png

案例试验:给input设置默认选中

image.png

获取到input标签，给它设置上 checked的属性，值设置为true

image.png

页面效果 ↓ 没设置前

image.png

设置以后 ↓ 默认选中的了

image.png

案例试验:添加图片标签设置图片路径属性

创建一个img标签，把它添加到父节点的最后面。

image.png

控制台输出 ↓ img标签被添加到ID为dDiv的父节点最后面

image.png

给img标签设置上节点属性 ↓

image.png

控制台输出 ↓ img标签设置上了src这个样式属性

image.png

页面效果 ↓ 图片在span的后面展示出来了

image.png