原生js操作DOM元素的一些使用

JavaScript08

原生js操作DOM元素的一些使用,第1张

方法一:

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

js中有四种获取dom的方法:

根据ID获取对象:document.getElementById(ID)

根据class获取对象数组:document.getElementsByClassName("box")

根据tag获取对象数组:document.getElementsByTagName("p")

根据name获取对象数组:document.getElementsByName(NAME)

用jquery选择器就多得去了,一般都用jquery,js一大串代码用jquery几个符号搞定。

根据ID获取对象:$('#ID')

根据class获取对象数组:$(".box")

根据tag获取对象数组:$("p")

根据name获取对象数组:$('input[name="nw"]')