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

实际上,

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

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

举个栗子:
HTML代码:
```

妙音天女

```
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](http://www.cnblogs.com/xuehaoyue/p/6638196.html)

区分 点操作符+属性名 和 getAttribute()的更多相关文章

  1. HTMLParser获取属性名

    HTMLParser获取属性名方式: 原始网页文本: <a title="美军被曝虐尸" href="http://www.sogou.com/web?query= ...

  2. 【Js】创建对象的6种方式总结、(底部包含属性名为动态的形式)

    一.new 操作符 + Object 创建对象 1 var person = new Object(); 2 person.name = "lisi"; 3 person.age ...

  3. js 把对象按照属性名的字母顺序进行排列

    var obj = {name: "zhangsan", age: 8, ace: 5, nbme: "lisi"};//要排序的对象function objK ...

  4. MyBatis学习总结(四)——解决字段名与实体类属性名不相同的冲突(转载)

    本文转载自:http://www.cnblogs.com/jpf-java/p/6013307.html 在平时的开发中,我们表中的字段名和表对应实体类的属性名称不一定都是完全相同的,下面来演示一下这 ...

  5. MyBatis入门学习教程-解决字段名与实体类属性名不相同的冲突

    在平时的开发中,我们表中的字段名和表对应实体类的属性名称不一定都是完全相同的,下面来演示一下这种情况下的如何解决字段名与实体类属性名不相同的冲突. 一.准备演示需要使用的表和数据 CREATE TAB ...

  6. MyBatis学习总结(四)——解决字段名与实体类属性名不相同的冲突

    在平时的开发中,我们表中的字段名和表对应实体类的属性名称不一定都是完全相同的,下面来演示一下这种情况下的如何解决字段名与实体类属性名不相同的冲突. 一.准备演示需要使用的表和数据 CREATE TAB ...

  7. php : 获取对象的属性名

    方案有多种: 一. 使用 get_object_vars() 方法 缺点: 只能显示 public 的 //只显示public的 var_dump(get_object_vars($test)); 处 ...

  8. C#基础系列:开发自己的窗体设计器(PropertyGrid显示中文属性名)

    既然是一个窗体设计器,那就应该能够设置控件的属性,设置属性最好的当然是PropertyGrid了,我们仅仅需要使用一个PropertyGrid.SelectedObject = Control就可以搞 ...

  9. [Effective JavaScript 笔记]第39条:不要重用父类的属性名

    假设想给上节讲的场景图库添加收集诊断信息的功能.这对于调试和性能分析很有用. 38条示例续 给每个Actor实例一个唯一的标识数. 添加标识数 function Actor(scene,x,y){ t ...

随机推荐

  1. Omi教程-通讯通讯攻略大全

    组件通讯 Omi框架组建间的通讯非常遍历灵活,因为有许多可选方案进行通讯: 通过在组件上声明 data-* 传递给子节点 通过在组件上声明 data 传递给子节点 (支持复杂数据类型的映射) 父容器设 ...

  2. SUI Mobile

    <header class="bar bar-nav"> <h1 class='title'>只有图标的表单</h1> </header& ...

  3. POJ 3356 AGTC(DP求字符串编辑距离)

    给出两个长度小于1000的字符串,有三种操作,插入一个字符,删除一个字符,替换一个字符. 问A变成B所需的最少操作数(即编辑距离) 考虑DP,可以用反证法证明依次从头到尾对A,B进行匹配是不会影响答案 ...

  4. js移动端向左滑动出现删除按钮

    最近在做移动端项目时,需要实现一个列表页面的每一项item向左滑动时出现相应的删除按钮,本来想着直接使用zepto的touch.js插件,因为之前实现相同的功能时用过这个插件,当时还挺好用的,直接使用 ...

  5. shell-2

    环境变量配置文件: cd ~  直接回到根目录 位置变量:$0 代表当前执行的文件名$1-$9 代表输入的参数分别一次${10} 注意:双引号和单引号双引号是弱引用,会解析里面的特殊字符所代表的含义单 ...

  6. Windows Form线程同步

    .Net多线程开发中,经常需要启动工作线程Worker thread处理某些事情,而工作线程中又需要更新主线程UI thread的界面状态.我们只能在主线程中操作界面控件,否则.Net会抛出异常. 那 ...

  7. ABP Zero 单部署,单数据库,多租户架构

    首先,我们应该定义多租户系统中的两个条目: 租主(Host):租主是单例的(只有一个租主).租主会对创建和管理租户负责.因此,一个“租主用户”比所有的租户等级更高,并独立于所有租户,同时还能控制他们. ...

  8. 每天一个linux命令(41)--ping命令

    Linux系统的 ping 命令是常用的网络命令,它通常用来测试与目标主机的连通性,它通过发送 ICMP ECHO_REQUEST数据包到网络主机(send  ICMP  ECHO_REQUEST t ...

  9. Struts2学习第二天——动态方法调用

    method属性 在前面的例子里,Action默认使用execute()方法来处理请求.但是,如果有多个不同的请求需要同一个Action进行不同处理,怎么办?在Struts.xml文件中,需要指定Ac ...

  10. 2017-3-2 C# WindowsForm 中label标签居中显示

    有时候label标签要输出 label.text=""; 的语句,那么要把这个语句居中显示 1.要取消他的Autosize的值 2.拉大这个框,设置里面的文本的TextAlign ...