AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

DOM方法操作HTML属性

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

< !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>      


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



文章标签：
JavaScript
前端开发
关键词：
HTML属性
dom方法
HTML DOM
dom属性
dom html
技术小胖子
目录
相关文章
WK
|
26天前
|
存储 移动开发 前端开发
HTML5新增了哪些其他元素和属性
这段文字介绍了HTML5中新增的多种元素和属性，包括页面布局元素如header、nav等，表单元素如email、tel输入框等，以及其他元素如canvas、svg等。此外，还介绍了全局及表单属性，例如contenteditable、placeholder等，这些新功能显著增强了HTML5在现代网页设计与开发中的实用性与灵活性。
WK
46 1
光明顶阳顶天
|
4天前
|
缓存 编解码 JavaScript
DOM 和 BOM 在项目中应用时的性能优化方法
【10月更文挑战第19天】总之，优化 DOM 和 BOM 的性能需要综合考虑多个方面，通过合理的设计和技术手段，提升项目的运行效率和用户体验。在实际开发中，要不断地进行性能优化实践，以适应不断变化的需求和技术发展。
光明顶阳顶天
19 7
游客44yag4ft7nckq
|
3天前
HTML 属性参考手册
HTML属性参考手册提供了常用的HTML属性列表，包括`class`、`id`、`style`、`title`等，用于定义元素的样式、唯一标识、额外信息等。此外，还包括`href`、`src`、`alt`、`name`、`value`、`target`、`type`和`placeholder`等，分别用于链接、资源路径、替代文本、表单元素名称和值、链接打开方式、表单元素类型及占位符文本的定义。
游客44yag4ft7nckq
13 6
游客44yag4ft7nckq
|
5天前
|
JavaScript
HTML DOM 节点树
HTML DOM 节点是指在 HTML 文档对象模型中，文档中的所有内容都被视为节点。整个文档是一个文档节点，每个 HTML 元素是元素节点，元素内的文本是文本节点，属性是属性节点，注释是注释节点。DOM 将文档表示为节点树，节点之间有父子和同胞关系。
游客44yag4ft7nckq
12 3
游客44yag4ft7nckq
|
5天前
|
JavaScript
HTML DOM 节点
HTML DOM（文档对象模型）将HTML文档视为节点树，其中每个部分都是节点：文档本身是文档节点，HTML元素是元素节点，元素内的文本是文本节点，属性是属性节点，注释是注释节点。节点间存在父子及同胞关系，形成层次结构。
游客44yag4ft7nckq
18 3
游客44yag4ft7nckq
|
5天前
HTML 属性
HTML属性为元素提供额外信息，格式为name=&quot;value&quot;，置于开始标签内。如&lt;a href=&quot;http://www.runoob.com&quot;&gt;，其中href为属性名，URL为值。属性值应加引号，推荐使用小写。
游客44yag4ft7nckq
15 1
神明木佑
|
16天前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
神明木佑
33 4
html的七十二变
|
1月前
|
移动开发 JavaScript 前端开发
HTML5 表单属性详解
HTML5引入了多种新的表单属性，使表单创建与验证更加便捷高效。新增的输入类型包括`email`、`url`、`tel`等，常用属性有`placeholder`、`required`等。表单元素如`&lt;form&gt;`可设置提交方法和目标URL，`&lt;button&gt;`及`&lt;input type=&quot;submit&quot;&gt;`用于提交。新元素`&lt;datalist&gt;`和`&lt;output&gt;`提供更多功能。HTML5还提供了内置表单验证机制，增强用户体验。
html的七十二变
60 16
Li370234940
|
22天前
|
XML JavaScript 数据格式
jquery中html()方法的使用
jquery中html()方法的使用
Li370234940
16 1
WK
|
26天前
|
移动开发 UED HTML5
HTML5新增了哪些表单属性
HTML5新增的表单属性包括：autocomplete（启用或禁用自动完成建议）、autofocus（自动聚焦）、form（关联表单外的表单元素）、formaction等重写版本（自定义提交行为）、height/width（设置图像输入尺寸）、list（指定可选列表）、min/max/step（设置数值范围）、multiple（多选文件/选项）、pattern（正则表达式验证）、placeholder（占位符提示）和required（必填校验）。这些新功能显著提升了表单的灵活性和用户体验，使数据输入更加准确有效。
WK
18 1