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

文章目录

• 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中查看的

举个例子

<div id="div1" class="divClass" title="divTitle" title1="divTitle1"></div>
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对象

1. attr与attribute很相像,也就是自己设置的属性，要用这个attr来获取
2. 用attr()获取的属性，必须是你在DOM节点上可以看见的属性，看不见则会返回undefined
3. 针对DOM节点上自己定义的属性的，prop()是不能获取的，而attr()是可以的，如果是标签自带的那便都能获取。
4. 原因就在于我们前面总结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这个属性便失效了，除非你再刷新一次页面。

总结：

attr和prop的使用场景：

1.添加属性名称该属性就会生效应该使用prop();

2.是有true,false两个属性使用prop();（如’checked’,‘selected’,'disabled’等）

3.其他则使用attr();