Js获取设置属性值以及jquery中的attr与prop区别-白红宇

Js获取设置属性值以及jquery中的attr与prop区别

阅读量：319 次

发布时间：2019-03-04

本文共 3466 字，大约阅读时间需要 11 分钟。

文章目录

setAttribute

getAttribute

jq-attr（）

jq-prop（）

getAttribute

元素.setAttribute（‘属性名’）

获取元素的行间属性对应的属性值，不能获取css样式对应的属性值

如果获取的属性不存在返回null

setAttribute

元素.setAttribute(‘属性名’,属性值)

设置元素的行间属性，如果原来有这个行间属性会覆盖原来的行间属性

可以通过该方法给元素新增自定义行间属性

以上两个获取的就是行间属性对应的属性值，也就是你能看见的属性，那么自然来说，你用setAttribute(‘style’,‘border : 3px solid yellow; background : red’)时,它会在DOM中的attributes属性中新增加一个Attr对象

从上面的图中,我们很明显可以看到的就是attributes是DOM元素中的一个属性,这个属性其实是个对象,更加确切的说，是个类数组,类数组的每一位是个Attr对象,那么每次你去setAttribute(属性名,属性值)，会在这个类数组中新增加属性名,然后在对应的元素行内就可以看到了！那么你去setAttribute(‘style’,‘border : 3px solid yellow; background : red’) 自然的行间样式里面多了这个语句。

css样式表现的形式有三种，其中的一种就是内嵌样式（inline Style）：是写在 HTML 标签里面的，内嵌样式只对该标签有效 内嵌样式的书写，会导致这个DOM元素中的style属性发生去更新,然后最后去作用这个元素去渲染css样式。

attr()与prop()区别

要说区别的话，我们可以先看看这个attribute跟property,搞懂了它们两的话,自然而然jQuery中attr()与prop()也就理解了。

property是DOM中的属性，是JavaScript里的对象；

attribute是HTML标签上的特性，它的值只能够是字符串；

简单理解，Attribute就是dom节点自带的属性，例如html中常用的id、class、title、align等，而Property是这个DOM元素作为对象，其附加的内容，例如childNodes、firstChild等。

1.Dom节点自带的属性既是attribute也是property，修改attribute或者property都可以使属性变化
2.attribute和property自定义的属性，相互之间是不能访问的
3.attribute只支持string类型，而property是可以支持string、number以及boolean的
4.attribute的自定义属性可以在innerHTML中查看的，而property的自定义属性却是不可以在innerHTML中查看的

举个例子


   
var in1=document.getElementById("div1");console.log(in1);

对于id为div1的div，它的property内容如下：（部分）

可以发现有一个名为“attributes”的属性，类型是NamedNodeMap，同时有“id”和“className”、”title“等基本的属性，但没有“titles”这个自定义的属性。

console.log(in1.id);          //div1    console.log(in1.className);        //divClass    console.log(in1.title);          //divTitle    console.log(in1.title1);       //undefined

可以发现，标签中的属性，“id”和“className”、”title“会在in1上创建，而“titles”不会被创建。这是由于，每一个DOM对象都会有它默认的基本属性，而在创建的时候，它只会创建这些基本属性，我们在TAG标签中自定义的属性是不会直接放到DOM中的。

那自定义的”title1“去哪里了呢？在attributes属性里可以看到如下：

“title1”被放在了attributes这个对象里，这个对象按顺序记录了我们在TAG中定义的属性和属性的数量。

从这里就可以看出，attributes是属于property的一个子集，它保存了HTML标签上定义属性。如果再进一步探索attitudes中的每一个属性，会发现它们并不是简单的对象，它是一个Attr类型的对象，拥有NodeType、NodeName等属性。关于这一点，稍后再研究。注意，打印attribute属性不会直接得到对象的值，而是获取一个包含属性名和值的字符串，如：

console.log(in1.attibutes.title1);        // divTitle1

由此可以得出：

HTML标签中定义的属性和值会保存该DOM对象的attributes属性里面

这些attribute属性的JavaScript中的类型是Attr，而不仅仅是保存属性名和值这么简单；

DOM有其默认的基本属性，而这些属性就是所谓的“property”，无论如何，它们都会在初始化的时候再DOM对象上创建。

如果在行间样式对这些属性进行赋值，那么这些值就会作为初始值赋给DOM的同名property

还有一些通过setAttribute或者是通过DOM对象设置的属性，它们根本就是不相通的。比如说你通过setAttribute设置了一个新属性,其在DOM对象中是取不到的。反之亦然

再聊attr()跟prop()

$(’’).attr()返回的是html对象

$(’’).prop()返回的是DOM对象

attr与attribute很相像,也就是自己设置的属性，要用这个attr来获取

用attr()获取的属性，必须是你在DOM节点上可以看见的属性，看不见则会返回undefined

针对DOM节点上自己定义的属性的，prop()是不能获取的，而attr()是可以的，如果是标签自带的那便都能获取。

原因就在于我们前面总结attribute和property时，所提到的Dom节点自带的属性既是attribute也是property。

具体应用

1. 当复选框被勾选之后，用attr(“checked”)来获取其状态时却返回undefined

这里我们注意的是，用attr()获取的属性，必须是你在DOM节点上可以看见的属性，看不见则会返回undefined。这里我们可以验证一下，当你使用attr(“checked”,true)之后，你会发现与之相对应的DOM节点会添加一个checked="checked"这么一条属性，你再用attr(“checked”)去获取它的checked属性的时候便会返回“checked”字符串，这也就验证了这句话。

2. 当你还未对复选框进行任何勾选操作时，attr(“checked”,true)或者attr(“checked”,false)是有效的，但是进行完勾选操作之后，attr(“checked”,true)或者attr(“checked”,false)失效了

在这里我们需要弄清楚的一件事是attr(“checked”,true)和attr(“checked”,false)其实设置的不是checked属性，而是defaultChecked属性。而我们勾选和取消勾选这两个操作才是改变checked属性，这个相当于执行了prop(“checked”,true)或者prop(“checked”,false)这两条语句。当我们未修改checked属性时,复选框的勾选情况就是被defaultChecked这个属性所控制，在我们修改了checked属性之后，复选框的勾选情况将由checked属性接管，defaultChecked这个属性便失效了，除非你再刷新一次页面。

总结：