DOM - attribute / 开普饭

Attribute方法

attribute方法一共包含三个：

1.setAttribute( );

2.getAttribute( );

3.removeAttribute( );

功能：都是操作当前元素节点中某个属性。

举个例子：

我们先来看我们之前学的访问和修改的方法：

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script> window.onload = function(){ var oDiv = document.getElementById("div1"); //访问 alert(oDiv.title); alert(oDiv.className); //修改 oDiv.title="xxx"; oDiv.className="box666" alert(oDiv.title); alert(oDiv.className); //以上的访问和修改是我们之前学的 }</script> </head> <body> <div id="div1" title="hello" name="world" class="box"></div> </body></html>

运行结果如下：

以上是我们之前学的访问和修改的方法

我们的访问和修改方法也可以用attribute来操作：

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script> window.onload = function(){ var oDiv = document.getElementById("div1"); //我们可以通过下面的方法来进行访问和修改 //访问 alert(oDiv.getAttribute("id")); alert(oDiv.getAttribute("title")); alert(oDiv.getAttribute("name")); alert(oDiv.getAttribute("class")); //修改 oDiv.setAttribute("id","div666"); oDiv.setAttribute("title","xxx666"); oDiv.setAttribute("name","world666"); oDiv.setAttribute("class","box666"); //查看修改后的 alert(oDiv.getAttribute("id")); alert(oDiv.getAttribute("title")); alert(oDiv.getAttribute("name")); alert(oDiv.getAttribute("class")); }</script> </head> <body> <div id="div1" title="hello" name="world" class="box"></div> </body></html>

运行效果如下：

前面四个是没修改的，后面四个是修改完的

这种方法语句这么长，没有我们直接用 . 来进行访问和修改方便，那么这种方法有什么好处呢？

这就要说一下这两种方法的区别了：

1.对于class属性范围区别，点操作是通过className去访问和修改的；但是对于attribute来说直接传入class就可以访问到，如getAttribute( “class” ); 修改也是直接写上class进行修改

2.如果想设置用户自定义的属性，例如我们想给没有写的属性bbb赋予属性值为aaa

如oDiv.bbb=”aaa”; 浏览器并没有添加bbb这个属性

但是如果我们这样设置属性：

oDiv.setAttribute( “xxx”,”yyy” ); 此时浏览器就会添加一个xxx的属性

3.如果我们在写div的时候真的给它赋予一个自定义的属性bbb=”aaa”;时，此时用oDiv.bbb是访问不到的；但是如果我们用oDiv.getAttribute(“bbb”); 此时它就会获取到bbb属性

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script> window.onload = function(){ var oDiv = document.getElementById("div1"); alert(oDiv.bbb); alert(oDiv.getAttribute("bbb")); }</script> </head> <body> <div id="div1" title="hello" name="world" class="box" bbb="aaa" ></div> </body></html>

运行结果如下：

可以看出，第一次获取不到，第二次获取到了

4.当然还有最明显的一点就是removeAttribte删除

例如上面的例子中，我们想要删除掉title这个属性可以这样写：

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script> window.onload = function(){ var oDiv = document.getElementById("div1"); oDiv.removeAttribte( “title” ); //删除该属性 }</script> </head> <body> <div id="div1" title="hello" name="world" class="box"></div> </body></html>

运行效果如下：

- 写作不易，大家多多关注，谢谢啦-

---web分享，分享的不只是web

DOM - attribute

相关推荐