DOM方法操作HTML属性-阿里云开发者社区

DOM方法操作HTML属性

2017-11-08 992

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

1.getAttribute(属性名)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title >DOM操作 </title>
< style type ="text/css" >

</style>
</head>
< body >
< p > < a id ="netease" href ="http://www.163.com" title ="网易首页" >网易 </a> </p>
< script type ="text/javascript" >
  var elem=document.getElementById("netease");

  alert(elem.getAttribute('title'));
</script>
</body>
</html>

2.setAttribute(属性名，属性值)

3.removeAttribute(属性)

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title >DOM操作 </title>
< style type ="text/css" >
/*实际中可以使用CSS实现鼠标滑过效果，这里只是演示js使用*/
</style>
</head>
< body >
< p > < a id ="netease" href ="http://www.163.com" title ="网易首页"     style ="color:#668;text-decoration:none;" >网易 </a> </p>
< script type ="text/javascript" >
  var elem=document.getElementById("netease");
  elem.onmouseover=function()
  {
      this.innerHTML="163";
      this.removeAttribute("style");
  }
  elem.onmouseout=function()
  {
      this.innerHTML="网易";
  }
</script>
</body>
</html>

*4.元素还有个attributes数组属性

几个浏览器实现不是很相同

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title >DOM操作 </title>
< style type ="text/css" >

</style>
</head>
< body >
< p > < a id ="netease" href ="http://www.163.com" title ="网易首页"     myAttr ="hello" >网易 </a> </p>
< script type ="text/javascript" >
  var elem=document.getElementById("netease");
  var str="";
  for(i=0;i<elem.attributes.length;i++)
  str+=" < span style ='color:red' >"+elem.attributes[i].nodeName+" </span>:"+elem.attributes[i].nodeValue+" < br />";
  document.write(str);
</script>
</body>
</html>

火狐3:

网易
myattr:hello
title:网易首页
href:[url]http://www.163.com[/url]
id:netease

Opera 9.51:

网易
id:netease
href:[url]http://www.163.com[/url]
title:网易首页
myAttr:hello

IE6:

网易

language:
dataFld:
onmouseup:null
class:
oncontextmenu:null
onrowexit:null
onbeforepaste:null
onactivate:null
lang:
onmousemove:null
onmove:null
onselectstart:null
oncontrolselect:null
onkeypress:null
oncut:null
onrowenter:null
onmousedown:null
onpaste:null
id:netease
onreadystatechange:null
onbeforedeactivate:null
hideFocus:false
dir:
onkeydown:null
onlosecapture:null
ondrag:null
ondragstart:null
oncellchange:null
onfilterchange:null
onrowsinserted:null
ondatasetcomplete:null
onmousewheel:null
ondragenter:null
onblur:null
onresizeend:null
onerrorupdate:null
onbeforecopy:null
ondblclick:null
onkeyup:null
onresizestart:null
onmouseover:null
onmouseleave:null
onmoveend:null
title:网易首页
onresize:null
contentEditable:inherit
dataFormatAs:
ondrop:null
onpage:null
onrowsdelete:null
style:null
onfocusout:null
ondatasetchanged:null
ondeactivate:null
onpropertychange:null
ondragover:null
onhelp:null
ondragend:null
onbeforeeditfocus:null
disabled:false
onfocus:null
accessKey:
onscroll:null
onbeforeactivate:null
onbeforecut:null
dataSrc:
onclick:null
oncopy:null
onfocusin:null
tabIndex:0
onbeforeupdate:null
ondataavailable:null
onmovestart:null
onmouseout:null
onmouseenter:null
onlayoutcomplete:null
implementation:null
onafterupdate:null
ondragleave:null
href:[url]http://www.163.com/[/url]
target:
urn:
rev:
hreflang:
shape:
type:
coords:
methods:
rel:
charset:
name:
myAttr:hello

IE把所有的属性都列出来了，不管你明确指定没有。

当然我们可以通过一个属性specified来过滤出我们指定的那些属性:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title >DOM操作 </title>
< style type ="text/css" >

</style>
</head>
< body >
< p > < a id ="netease" href ="http://www.163.com" title ="网易首页"     myAttr ="hello" >网易 </a> </p>
< script type ="text/javascript" >
  var elem=document.getElementById("netease");
  var str="";
  for(i=0;i<elem.attributes.length;i++)
  if(elem.attributes[i].specified)
  str+=" < span style ='color:red' >"+elem.attributes[i].nodeName+" </span>:"+elem.attributes[i].nodeValue+" < br />";
  document.write(str);
</script>
</body>
</html>

这样IE6的结果如下:

网易

id:netease
title:网易首页
href:[url]http://www.163.com/[/url]
myAttr:hello

DOM方法操作HTML属性

热门文章

最新文章

相关课程

相关电子书

相关实验场景