从li看html标签属性（attribute）和dom元素的属性（property）

WindCoder

发布于 2018-09-20 16:19:30

2.6K0

发布于 2018-09-20 16:19:30

文章被收录于专栏：WindCoderWindCoder

先上实例代码：

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