JavaScript 中 Property 和 Attribute 的区别详解
发布时间:2025-05-19 21:43:56 发布人:远客网络
一、JavaScript 中 Property 和 Attribute 的区别详解
Property：属性，所有的HTML元素都由HTMLElement类型表示，HTMLElement类型直接继承自Element并添加了一些属性，添加的这些属性分别对应于每个HTML元素都有下面的这5个标准特性: id,title,lang,dir,className。DOM节点是一个对象，因此，他可以和其他的JavaScript对象一样添加自定义的属性以及方法。property的值可以是任何的数据类型，对大小写敏感，自定义的property不会出现在html代码中，只存在js中。
Attribute：特性，区别于property，attribute只能是字符串，大小写不敏感，出现在innerHTML中，通过类数组attributes可以罗列所有的attribute。
标准的 DOM properties与 attributes是同步的。公认的（非自定义的）特性会被以属性的形式添加到DOM对象中。如，id，align，style等，这时候操作property或者使用操作特性的DOM方法如getAttribute()都可以操作属性。不过传递给getAttribute()的特性名与实际的特性名相同。因此对于class的特性值获取的时候要传入“class”。
1).对于有些标准的特性的操作，getAttribute与点号(.)获取的值存在差异性。如href，src，value，style，onclick等事件处理程序。
2).href：getAttribute获取的是href的实际值，而点号获取的是完整的url，存在浏览器差异。
src的值的获取类似href，不过IE也会返回full URL；
value值同样存在一些‘one-way'（单向）同步的内置属性。
例如，input.value从 attribute中同步（即 property从 attribute中获得同步）
但是 attribute不能从 property中获得同步：
getAttribute获取的是初始值，而点号获取的是初始值或者.value修改后的值,例如当访问者输入了某些字符后，'value' attribute在 property更新后维持了原始值。原始值可以用来检验 input是否变化，或者重置它。
对于style和onclick等事件处理程序，getAttribute方法访问时会返回字符串，而点号返回的是相应的对象和事件处理函数。
getAttribute获取的是你是实际设置的值。而点号返回的是布尔值。
1.在IE<9的浏览器中，可以用点号和getAttribute在相互之间访问自定义属性。
2.IE<8（包括IE8种的IE7兼容模式），property和attribute相同。因为attribute对大小写不敏感，在这种情况下，用getAttribute访问特性的时候，浏览器会选择第一次出现的值。
二、JS中attr和prop属性的区别
JS中attr和prop属性的区别如下：
1、attr是attribute的缩写，是一个特性节点，每个DOM元素都有一个对应的attributes属性来存放所有的attribute节点，attributes是一个类数组的容器，说得准确点就是NameNodeMap，总之就是一个类似数组但又和数组不太一样的容器。attributes的每个数字索引以名值对(name=”value”)的形式存放了一个attribute节点。
<div class="box" id="box" gameid="880">hello</div>
上面的div元素的HTML代码中有class、id还有自定义的gameid，这些特性都存放在attributes中，类似下面的形式：
[ class="box", id="box", gameid="880" ]
var elem= document.getElementById('box');
console.log( elem.attributes[0].name);// class
console.log( elem.attributes[0].value);// box
2、与之对应的property属性，比较特殊的是一些值为Boolean类型的property，如一些表单元素：
<input type="radio" checked="checked" id="raido">
var radio= document.getElementById('radio');
console.log( radio.getAttribute('checked'));// checked
console.log( radio.checked);// true
对于这些特殊的attribute节点，只有存在该节点，对应的property的值就为true，如：
<input type="radio" checked="anything" id="raido">
var radio= document.getElementById('radio');
console.log( radio.getAttribute('checked'));// anything
console.log( radio.checked);// true
3、了更好的区分attribute和property，基本可以总结为attribute节点都是在HTML代码中可见的，而property只是一个普通的名值对属性。
三、js 怎么循环获得很多 name 相同的input 的ID 值
putArr=document.getElementsByClassName()()("input的class名称");
putArr=document.getElementById()("input的id");
putArr=document.getElementsByName("input的名称");
for(var i=0;i<inputArr.length;i++){
1、onactivate，当对象设置为活动元素时触发。
2、onbeforeactivate，对象要被设置为当前元素前立即触发。
3、onbeforecut，当选中区从文档中删除之前在源对象触发。
4、onbeforedeactivate，在 activeElement从当前对象变为父文档其它对象之前立即触发。
5、onbeforeeditfocus，在包含于可编辑元素内的对象进入用户界面激活状态前或可编辑容器变成控件选中区前触发。
6、onbeforepaste，在选中区从系统剪贴板粘贴到文档前在目标对象上触发。
7、onclick，在用户用鼠标左键单击对象时触发。
8、onmouseover，鼠标指针移到对象时触发
9、onmouseout，鼠标指针移出对象时触发
1、attachEvent，将指定函数绑定到事件，以便每当该事件在对象上触发时都调用该函数。
3、close，关闭输出流并强制将数据发送到显示。
4、createAttribute，以指定名称创建attribute对象。
5、createComment，以指定数据创建comment对象。
6、createDocumentFragment，创建一个新文档。
7、createElement，为指定标签创建一个元素的实例。
8、createEventObject，生成当使用 fireEvent方法时用于传递事件相关信息的event对象。
9、createStyleSheet，为文档创建样式表。
10、createTextNode，从指定值中创建文本字符串。
11、detachEvent，从事件中取消指定函数的绑定，这样当事件触发时函数就不会收到通知了
12、write()，动态向页面写入内容
13、createElement(Tag)，创建一个html标签对象
14、getElementById(ID)，获得指定ID值的对象
15、getElementsByName(Name)，获得指定Name值的对象
下面的例子使用了 document对象检查文档标题并在消息框中显示该标题(如果非空)。
if(document.title!="") alert("标题为"+ document.title)下面的例子演示了在浏览器的状态栏上显示鼠标当前位置的事件句柄函数，所得位置相对于文档的左上角。
<TITLE>报告鼠标移动</TITLE>
<SCRIPT LANGUAGE="JScript">
window.status="X="+ window.event.x+" Y="+ window.event.y;
<BODY onmousemove="reportMove()">
参考资料：百度百科：document对象
