从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 条评论
登录 后参与评论

相关文章

来自专栏JavaEdge

全面入门jQuery最佳实践(二)-jQuery的属性与样式1 .attr()与.removeAttr()2 html()及.text()

每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息。如:在img元素中,src就是元素的特性,用来标记图片的地址。

1093
来自专栏liulun

riot.js教程【六】循环、HTML元素标签

前文回顾 riot.js教程【五】标签嵌套、命名元素、事件、标签条件 riot.js教程【四】Mixins、HTML内嵌表达式 riot.js教程【三】...

2988
来自专栏xingoo, 一个梦想做发明家的程序员

【web必知必会】—— DOM:四个常用的方法

 终于开始复习DOM的知识了,这一阵忙乎论文,基本都没好好看技术的书。   记得去年实习的时候,才开始真正的接触前端,发现原来JS可以使用的如此灵活。 ...

1965
来自专栏十月梦想

CSS基础语法

属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

794
来自专栏小壮和前端

js写2048游戏代码

3722
来自专栏黑泽君的专栏

day03_js学习笔记_03_js的事件、js的BOM、js的DOM

1581
来自专栏JavaEE

jQuery入门前言

上次说到了JavaScript,对其有一定了解,本文就来说说jQuery。jQuery就是一个由JavaScript编写的轻量库,简单的说就是封装了一些Java...

1003
来自专栏小狼的世界

CSS3 Transition介绍

CSS3提供了一种全新的方式来定义CSS属性改变时的过渡效果,通常在:hover、:focus的条件下触发。过去,为了实现这种平滑的过渡效果,我们需要借助于Fl...

1012
来自专栏云端架构

【云端架构】前端必备常用CSS语法

属性(property)是你希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

3658
来自专栏前端大白专栏

关于css选择器的问题 + * ~这三个有什么区别

1774

扫码关注云+社区

领取腾讯云代金券