区分点操作符+属性名和 getAttribute()

在用DOM操作控制HTML时，很多初学者会把点操作符+属性名与getAttribute("属性名") 混淆，误以为这两种方法是等价的。

实际上，

通过getAttribute("属性名")和setAttribute("属性名","属性值") 可以获取或修改标签上的属性值
通过点操作符+属性名可以获取或修改元素对应的DOM对象的属性值

这两种方法并不相同，不可混为一谈

举个栗子：
HTML代码：

<p id="name" align="left" title="名字" test="测试">妙音天女</p>

JS代码：

    var myname=document.getElementById("name");//myname是HTMLParagraphElement类型的DOM对象console.log(myname.title);//名字 //HTMLParagraphElement具有title属性（继承自父类HTMLElement）console.log(myname.getAttribute("title"));//名字 //p标签具有title属性（html标签的全局属性）console.log(myname.align);//left //HTMLParagraphElement具有align属性console.log(myname.getAttribute("align"));//left //p标签具有align属性console.log(myname.test);//undefined//HTMLParagraphElement类型的myname对象没有test属性console.log(myname.getAttribute("test"));//测试 //此处的p标签具有自定义的test属性console.log(myname.innerHTML);//妙音天女 //HTMLParagraphElement具有innerHTML属性（继承自祖父类Element)console.log(myname.getAttribute("innerHTML"));//null //p标签没有innerHTML属性myname.hi="hello";console.log(myname.hi);//hello //myname对象具有hi属性console.log(myname.getAttribute("hi"));//null //p标签没有hi属性

我们可以清晰地看到，

对于HTML标签和相应的DOM对象都具有的属性（如例子中的title属性和align属性），两种方法取得的值是相同的
对于HTML标签具有而DOM对象不具有的属性（通常是标签上的自定义属性，如例子中的test属性，或data-* 属性），getAttribute()可以取得相应的属性值，但点操作符返回undefined
对于DOM对象具有而HTML标签不具有的属性（如例子中的innerHTML和对象上自定义的hi属性），点操作符可以取得相应的属性值，但getAttribute()返回null

注：p标签对应的DOM类型是HTMLParagraphElement，其父类型是HTMLElement，详见我的另一篇博客：HTMLElement

转载于:https://www.cnblogs.com/xuehaoyue/p/6638202.html

区分点操作符+属性名和 getAttribute()相关推荐

SpringMVC自动将请求参数和入参对象的属性进行一一绑定；要求请求参数的名字和javaBean入参的对象里面的属性名是一样的||员工的增删改查案例
SpringMVC自动将请求参数和入参对象的属性进行一一绑定:要求请求参数的名字和javaBean入参的对象里面的属性名是一样的 1.SpringMVC中配置HiddenHttpMethodFilte ...
如何区分m的属性_测试属性＃5 –区分
如何区分m的属性这是关于测试属性的第五篇文章,从名人级别的" 如何测试您的测试 "开始. 差异不是单个测试的属性. 区分并不孤单,因为它需要多次测试. 测试使我们能够(a)知道某 ...
java 类大写_记java实体类属性名为全部为大写踩的坑（基础）
1.今天后台使用实体类接收参数,然后有个参数发现明明前后都是对应的,但是那个属性偏偏的不到数据后面百度才知道(写前端太久java基础都给忘了,该补补了) spring默认的命名方式为,首字母转小写, ...
java 实体类返回大写_记java实体类属性名为全部为大写踩的坑（基础）
1.今天后台使用实体类接收参数,然后有个参数发现明明前后都是对应的,但是那个属性偏偏的不到数据后面百度才知道(写前端太久java基础都给忘了,该补补了) spring默认的命名方式为,首字母转小写, ...
【JS】js给对象动态添加、设置、删除属性名和属性值
1. 访问对象属性 js中访问对象属性一共有两种方法:点获取法和方括号获取法. let user = { // 一个对象name: "John", // 键 "name& ...
【转】MyBatis学习总结(四)——解决字段名与实体类属性名不相同的冲突
[转]MyBatis学习总结(四)--解决字段名与实体类属性名不相同的冲突在平时的开发中,我们表中的字段名和表对应实体类的属性名称不一定都是完全相同的,下面来演示一下这种情况下的如何解决字段名与实体 ...
java根据属性获取对象_java反射工具类--通过指定属性名,获取/设置对象属性值
java对象通过点运算符操作对象属性的方式没法使用for,while等循环,此工具主要解决这一问题. 例如:有一对象包含属性有一定规律 obj1: { name1: "张三", a ...
mabatisplus怎么给实体类自定义属性_吊打面试官之：当实体类中的属性名和表中的字段名不一样，怎么办？...
第1种: 通过在查询的sql语句中定义字段名的别名,让字段名的别名和实体类的属性名一致. <select id="selectorder" parametertype=&qu ...
java 反射机制--根据属性名获取属性值
1.考虑安全访问范围内的属性,没有权限访问到的属性不读取 [java] view plaincopy /** * 根据属性名获取属性值 * * @param fieldName * @param ob ...
MyBatis学习总结(四)——解决字段名与实体类属性名不相同的冲突
2019独角兽企业重金招聘Python工程师标准>>> 一.准备演示需要使用的表和数据 CREATE TABLE orders(order_id INT PRIMARY KEY AU ...

区分点操作符+属性名和 getAttribute()

区分点操作符+属性名和 getAttribute()相关推荐

最新文章

热门文章

区分 点操作符+属性名 和 getAttribute()

区分 点操作符+属性名 和 getAttribute()相关推荐

最新文章

热门文章

区分点操作符+属性名和 getAttribute()

区分点操作符+属性名和 getAttribute()相关推荐