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

DOM方法操作HTML属性

2017-11-08 1021
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
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
技术小胖子
目录
相关文章
我是快乐的嘟嘟
|
3月前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具，通过它们可以动态地改变页面的内容、样式和行为，为用户提供丰富的交互体验。
我是快乐的嘟嘟
120 49
游客44yag4ft7nckq
|
3月前
|
移动开发 HTML5
HTML5 表单属性3
`&lt;input&gt;` 标签的 `formaction`、`formenctype` 和 `formmethod` 属性分别用于指定表单提交的 URL 地址、数据编码类型和提交方法，这些属性可覆盖 `&lt;form&gt;` 标签中的相应属性，并且主要适用于 `type=&quot;submit&quot;` 和 `type=&quot;image&quot;` 的输入类型。
游客44yag4ft7nckq
42 10
游客44yag4ft7nckq
|
2月前
|
移动开发 JavaScript 前端开发
HTML5 表单属性7
`pattern` 属性使用正则表达式验证 `&lt;input&gt;` 元素的值，适用于 `text`, `search`, `url`, `tel`, `email`, 和 `password` 类型。
游客44yag4ft7nckq
48 7
游客44yag4ft7nckq
|
2月前
|
移动开发 UED HTML5
HTML5 表单属性6
`min`、`max` 和 `step` 属性用于限制 `&lt;input&gt;` 标签中的数值或日期范围。例如，可以设置日期选择器的最早和最晚日期，或限制数字输入框的值范围。`multiple` 属性允许在 `&lt;input&gt;` 中选择多个值，适用于邮箱和文件类型。这些属性增强了表单控件的功能性和用户体验。
游客44yag4ft7nckq
46 7
游客44yag4ft7nckq
|
2月前
|
移动开发 HTML5
HTML5 表单属性5
`height` 和 `width` 属性用于 `&lt;input&gt;` 标签中的 `image` 类型，定义图像的高度和宽度。
游客44yag4ft7nckq
40 6
游客44yag4ft7nckq
|
3月前
|
移动开发 HTML5
HTML5 表单属性4
`formnovalidate` 属性是一个布尔属性，用于 `&lt;input&gt;` 元素，指示该输入在表单提交时不需验证，可覆盖 `&lt;form&gt;` 元素的 `novalidate` 属性，常与 `type=&quot;submit&quot;` 一起使用。示例中展示了如何通过两个提交按钮（一个使用验证，另一个不使用）实现不同的表单提交方式。
游客44yag4ft7nckq
43 7
游客44yag4ft7nckq
|
3月前
|
移动开发 JavaScript 前端开发
HTML5 表单属性2
`novalidate` 是 HTML `&lt;form&gt;` 元素的布尔属性，用于禁用浏览器的默认表单验证功能。当此属性存在时，浏览器不会检查表单字段是否符合预设的验证规则，允许开发者通过 JavaScript 等手段自定义验证逻辑。
游客44yag4ft7nckq
37 6
游客44yag4ft7nckq
|
2月前
|
移动开发 数据安全/隐私保护 HTML5
HTML5 表单属性8
`required`属性确保表单提交前输入框不能为空，适用于多种类型的 `&lt;input&gt;` 标签，如文本、邮箱、密码等。`step`属性则用于指定输入域中合法数值的间隔，常与`max`和`min`属性配合使用，适用于数字、日期等类型。例如，设置`&lt;input type=&quot;number&quot; step=&quot;3&quot;&gt;`可使输入值以3为单位递增或递减。
游客44yag4ft7nckq
34 1
游客44yag4ft7nckq
|
3月前
|
移动开发 UED HTML5
HTML5 表单属性1
HTML5为&lt;form&gt;和&lt;input&gt;标签引入了多个新属性，增强了表单的功能性和用户体验。其中，&lt;form&gt;新增了autocomplete和novalidate属性；&lt;input&gt;则增加了如autofocus、formaction、placeholder等13个新属性，支持更精细的表单控制和数据验证。例如，autocomplete属性允许表单或输入字段提供自动完成功能，提高用户填写效率。
游客44yag4ft7nckq
37 3
龙大吉
|
3月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧，涵盖 DOM 获取、修改、创建、删除元素的方法，事件处理，性能优化及与其他前端技术的结合，助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧，涵盖 DOM 获取、修改、创建、删除元素的方法，事件处理，性能优化及与其他前端技术的结合，助你构建动态交互的网页应用。
龙大吉
88 5

热门文章

最新文章

  • 1
    超好看的404提示页面HTML源码
  • 2
    可爱狗狗的404动画HTML源码
  • 3
    css3 svg制作404页面动画效果HTML源码
  • 4
    （html在线预览cad图纸插件）网页CAD绘制条形码、二维码的教程
  • 5
    【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
  • 6
    SurfGen爬虫：解析HTML与提取关键数据
  • 7
    网页 HTML 自动播放下一首音乐
  • 8
    html5+svg太空人404动画模板源码
  • 9
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
  • 10
    阿里云CDN边缘脚本示例实现/?p123重定向/p/123.html
  • 1
    JavaScript 与 DOM 交互的基础及进阶技巧，涵盖 DOM 获取、修改、创建、删除元素的方法，事件处理，性能优化及与其他前端技术的结合，助你构建动态交互的网页应用
    88
  • 2
    虚拟 DOM 如何提高应用的性能？
    59
  • 3
    虚拟 DOM 是如何避免频繁重绘的？
    47
  • 4
    判断哪些数据的变化需要触发虚拟 DOM 的更新
    102
  • 5
    js中DOM的基础方法
    120
  • 6
    .js的dom元素操作
    83
  • 7
    除了事件委托，还有哪些处理大量 DOM 元素的方法？
    57
  • 8
    写一个使用事件委托处理大量 DOM 元素的案例
    57
  • 9
    在跨平台虚拟 DOM 框架中处理动画效果
    123
  • 10
    跨平台的虚拟 DOM 实现方式
    75

    • 相关课程

    更多
  • HTML 入门与实战
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS

    • 相关电子书

    更多
  • 《零基础HTML入门教程》
  • 天猫 HTML5 互动技术实践
  • 天猫HTML5互动技术实践

    • 相关实验场景

    更多
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • HTML及前端框架
    • 下一篇
    阿里云oss简介和如何对接使用