DOM方法操作HTML属性

2022-06-14 12:20:28

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

码农公寓

相关文章