jsDOM节点操作

DOM节点操作(都是函数)

  1. 创建节点

createElement("p")

var createDiv = document.createElement("p")
jsDOM节点操作_第1张图片
image.png

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

jsDOM节点操作_第2张图片
image.png

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

jsDOM节点操作_第3张图片
image.png

2、添加节点(使用节点)

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

父节点.appendChild(新节点); 父节点的最后添加一个新节点
jsDOM节点操作_第4张图片
image.png

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

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

jsDOM节点操作_第5张图片
image.png

使用方法:父节点.insertBefore(要添加的节点,参考节点);

父节点.insertBefore(新节点,参考节点);在参考节点前添加;
jsDOM节点操作_第6张图片
image.png
jsDOM节点操作_第7张图片
image.png

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

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

jsDOM节点操作_第8张图片
image.png

3、删除节点

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

父节点.removeChild(子节点);必须制定要删除的子节点
jsDOM节点操作_第9张图片
image.png
jsDOM节点操作_第10张图片
image.png

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

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

jsDOM节点操作_第11张图片
image.png

节点自己删除自己:

不知道父级的情况下,可以这么写:

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

使用的方法是,用

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

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

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

jsDOM节点操作_第12张图片
image.png

控制台输出 ↓

jsDOM节点操作_第13张图片
image.png

4、复制节点( oldNode.cloneNode(true))

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

新节点=要复制的节点.cloneNode(参数) ; 参数可选复制节点
jsDOM节点操作_第14张图片
image.png
jsDOM节点操作_第15张图片
image.png

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

jsDOM节点操作_第16张图片
image.png

控制台输出 ↓

jsDOM节点操作_第17张图片
image.png

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

节点属性

jsDOM节点操作_第18张图片
image.png

注意:IE6、7不支持。

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

每一个方法意义不同。

获取:getAttribute(名称)

jsDOM节点操作_第19张图片
image.png

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

jsDOM节点操作_第20张图片
image.png

设置:setAttribute(名称, 值)

jsDOM节点操作_第21张图片
image.png

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

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

jsDOM节点操作_第22张图片
image.png

删除:removeAttribute(名称)

jsDOM节点操作_第23张图片
image.png

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

jsDOM节点操作_第24张图片
image.png

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

jsDOM节点操作_第25张图片
image.png

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

jsDOM节点操作_第26张图片
image.png

页面效果 ↓ 没设置前

jsDOM节点操作_第27张图片
image.png

设置以后 ↓ 默认选中的了

jsDOM节点操作_第28张图片
image.png

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

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

jsDOM节点操作_第29张图片
image.png

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

jsDOM节点操作_第30张图片
image.png

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

jsDOM节点操作_第31张图片
image.png

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

jsDOM节点操作_第32张图片
image.png

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

jsDOM节点操作_第33张图片
image.png

你可能感兴趣的:(jsDOM节点操作)