js操作节点的DOM方法

JavaScript012

js操作节点的DOM方法,第1张

js操作节点的DOM方法

一、创建节点

createElement

createTextNode

二、添加、删除、替换、克隆元素

1、appendChild

2、insertBefore

3、如果appendChild、insertBefore追加的是已经存在的子元素，实际上就会将子元素位置移动

4、删除节点removeremoveChild

remove()

removeChild

5.替换节点

replaceChild

6、克隆节点

cloneNode()

三、操作元素属性的方法

1.获取属性 元素.属性名

2.设置属性 元素.属性名 = 属性值

1、2方法只能获取和设置元素自带的属性

3.操作属性的万能方法

getAttribute()

setAttribute()

方法一：

使用DOM.setAttribute("class","类名")

方法二：

DOM.classList.add("类名")

方法一给DOM元素添加类名会覆盖原有的类名

方法二 可以给DOM元素添加一个类名后 还可以在继续给DOM元素添加新的类名 并且不会覆盖已有的类名

概念：把要添加的节点添加到指定父级里面的最后面，所以也叫追加。

使用方式：fatherdom.appendChild( insertdom )。

兼容性：所有浏览器都支持此方法。

概念：把要插入的节点添加到指定父级里面的指定节点之前。

使用方式：fatherdom.insertBefore( insertdom，chosendom )。

兼容性：所有浏览器都支持此方法，但是值得注意的是，如果第二个参数节点不存在，在IE和Safari下会把要添加的节点使用appendChild()方法追加到指定父级中，而其他主流浏览器（Firefox、Chrome、Opera等）下会报错，所以在插入节点的时候，需要先判断第二个参数节点是否存在

效果

注意：很多人都认为设置disabled="true"是为启用，设置为“false”时为禁用，这是错的。