jsDOM节点操作
DOM节点操作（都是函数）
-
创建节点
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
