专栏首页WindCoder从li看html标签属性(attribute)和dom元素的属性(property)

从li看html标签属性(attribute)和dom元素的属性(property)

先上实例代码:

li实例

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
  </head>

  <body>
  	<ul>
  		<li id="fk" value="1">反恐</li>
  		<li id="fk" value="fankong">反恐</li>
  		<li id="ms" value="moshou">魔兽</li>
  		<li id="xj" value="xj" ss="dd">星际</li>
  	</ul>

  <script>
    var fkNode = document.getElementById("fk");
    console.log(fkNode);                                     //1
	var xjNode = document.getElementById("xj");
	console.log(xjNode);                                    //<li id="xj" value="xj" ss="dd">星际</li>
	console.log(xjNode.getAttribute("value"));               //xj
	console.log(xjNode.getAttributeNode("value").nodeValue); //xj
	console.log(xjNode.value);                               //0
  </script>
  </body>
</html>

最后打印出来为0是由于:

元素的属性有attribute 和 property 两种。

li 元素的 value属性(property) 有特殊的作用,其值只能是数字

如果设置的值不是数字将会只反应到元素的 value属性(attribute).

HTML <li> 标签的 value 属性 定义和用法 value 属性规定规定列表项目的数字。接下来的列表项目会从该数字开始进行升序排列。 浏览器支持 尽管不赞成使用 value 属性,不过所有浏览器都支持 value 属性。 兼容性注释 在 HTML 4.01 中,不赞成使用 li 元素的 value 属性;在 XHTML 1.0 Strict DTD 中,不支持 li 元素的 value 属性。 注释:目前,还没有可替代 value 属性的 CSS 解决方案。

来源:http://www.w3school.com.cn/tags/att_li_value.asp

当为有序排列时可以清楚看到value的作用

部分区别

从对象来说,attribute是html文档上标签属性,而property则是对应dom元素的自身属性。

从操作方法上来看,attribute可以通过dom core规范的接口 getAttribute和setAttribute.

详细区别与联系可以看上一篇JavaScript 中 Property 和 Attribute 的区别详解

参考资料

不知道为何用value取值拿到的是0,getAttribute方法拿到的就是value属性的值。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • GSAP动画效果总结页

    汐楓
  • Windows 7下硬盘安装Ubuntu 13.10图文教程

    之前一直在虚拟机里玩Linux了,昨天忽然兴起想往真机里装一个,昨天找到的方法,今天折腾了半天终于装好啦。

    汐楓
  • Gravatar头像注册使用图文教程

    看到新来的小伙伴们好多都没自己的个性头像,有时想从活跃读者/读者墙这里分辨下都好难,现在分享一篇设置头像的文章留给需要的人。由于懒的截那么多图了,就想去窃用下其...

    汐楓
  • jdk源码系列:String为啥是不能有子类?以及内内部实现

    版权声明:欢迎关注博主公众号:矿洞程序员 https://blog.csdn.net/qq_...

    爱明依
  • 解决js url传值中文乱码问题

    KenTalk
  • 一个有意思的方案:不借助后台和 JS ,只用 CSS 让一个列表编号倒序,你会怎么做?

    我正在做一个项目,其中有一个倒序的列表。列表创建时间降序排序的,这里我想在语义和视觉上都能体现出来(让列表显示对应的编号,编号越大表示是最新的)。网上做了一些研...

    前端小智@大迁世界
  • 开发这样一个复杂的表单你需要用多久

    工具人
  • Log4Net ,.net和SQL Server的完美结合

    用户1258909
  • 符合标准的有序列表分页源码示例

    一个符合标准的有序列表分页源码示例。 你可以根据你所应用的不同程序语言,打包生成一个符合标准的分页控件。 DOM结构: <ul class="paginatio...

    练小习
  • Hands-on Machine Learning with Scikit-Learn, Keras, and TensorFlow 第二版

    [https://get.oreilly.com/ind_hands-on-machine-learning_confirm.html](https://lin...

    iOSDevLog

扫码关注云+社区

领取腾讯云代金券