使用querySelector添加移除style和class

使用这个方法可以对dom节点添加和移除style样式，其中的styleName可以为css样式的任何值，如：display、color

对dom节点添加一个class

对dom节点移除一个class

dom 结构 *** 作怎样添加、移除、移动、复制、创建和查找节点？（必会）

1、创建新节点

createDocumentFragment( ) //创建一个 DOM 片段

createElement( ) //创建一个具体的元素

createTextnode( ) //创建一个文本节点

2、添加、移除、替换、插入

appendChild( )

removeChild( )

replaceChild( )

insertBefore( ) //并没有 insertAfter()

3、查找

getElementsByTagName( ) //通过标签名称

getElementsByName( ) //通过元素的 Name 属性的值(IE 容错能力较强，会得到一个数组，其中包括 id 等于 name 值的)

getElementById( ) //通过元素 Id，唯一性

方法一：

使用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”时为禁用，这是错的。

---