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

JavaScript09

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

您好,HTML5规范文档中指出:如果一个元素符合下面两条规则中的任一条,则window对象中必须要有与之对应的一个属性,属性值就是这个对象.

如果一个元素拥有ID属性,那么ID属性的属性值就会成为window对象的属性名.

如果一个元素拥有name属性,那么name属性的属性值就会成为window对象的属性名.但这个元素的标签名必须是: a, applet, area, embed, form, frame, frameset, iframe, img, object,其中的一个。

>"foo" in window

false

>typeof foo // 这个全局变量到底有木有?

object

//错误控制台输出了下面的警告.//Element referenced by ID/NAME in the global scope.

//Use W3C standard document.getElementById() instead.

>foo

[object HTMLDivElement]

//错误控制台输出了下面的警告.//Element referenced by ID/NAME in the global scope.

//Use W3C standard document.getElementById() instead.>"foo" in window true