Web笔记··By/蜜汁炒酸奶

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

先上实例代码: [toggle hide=“no” title=“li实例” color=“”]

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

[/toggle] 最后打印出来为0是由于:

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

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

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

HTML

  • 标签的 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

    从li看html标签属性(attribute)和dom元素的属性(property) 当为有序排列时可以清楚看到value的作用 部分区别 从对象来说,attribute是html文档上标签属性,而property则是对应dom元素的自身属性。 从操作方法上来看,attribute可以通过dom core规范的接口 getAttribute和setAttribute. 详细区别与联系可以看上一篇JavaScript 中 Property 和 Attribute 的区别详解

    参考资料

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

    预览
    Loading comments...
    0 条评论

    暂无数据

    example
    预览