DOM方法操作HTML属性
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>
<!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(属性名，属性值)
< !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");
elem.setAttribute('title','163主页');
</script>
</body>
</html>
< 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");
elem.setAttribute('title','163主页');
</script>
</body>
</html>
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>
< 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>
< 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
myattr:hello
title:网易首页
href:[url]http://www.163.com[/url]
id:netease
网易
id:netease
href:[url]http://www.163.com[/url]
title:网易首页
myAttr:hello
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
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
当然我们可以通过一个属性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>
< 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
id:netease
title:网易首页
href:[url]http://www.163.com/[/url]
myAttr:hello