JavaScript의 속성과 속성의 차이점에 대한 자세한 설명
- 黄舟원래의
- 2017-03-11 15:23:401284검색
속성과 속성은 혼동하기 매우 쉽고 두 단어의 중국어 번역도 매우 유사하지만(속성:속성, 속성:특성) 실제로는 서로 다른 사물이고 서로 다른 범주에 속합니다.
속성은 DOM의 속성이고 JavaScript의 개체입니다.
속성은 HTML 태그의 기능이며 해당 값은 다음과 같습니다. be는 문자열입니다.
JavaScript를 기반으로 속성과 속성을 분석합니다
html에 다음과 같은 코드가 있습니다.
<input id="in_1" value="1" sth="whatever">
간단히 생성 html 페이지 입력 입력 필드에 하나(DOM에 존재하지 않는 "sth" 속성이 이 태그에 추가되어 있음에 유의) JS
var in1 = document.getElementById('in_1');
에서 다음 명령문을 실행합니다.
console.log(in1);
콘솔에서 인쇄 결과적으로 in1에는 "attributes"라는 속성이 포함되어 있고 해당 유형은 NamedNodeMap이며 두 가지 기본 속성인 "id"와 "value"가 있음을 알 수 있습니다. 사용자 정의 속성 "sth"가 없습니다.
attributes: NamedNodeMap value: "1" id: "in_1"
일부 콘솔에서는 in1의 속성을 인쇄하지 못할 수 있습니다. 그러면 다음 명령을 실행하여 관찰할 속성을 인쇄할 수 있습니다.
console.log(in1.id); // 'in_1' console.log(in1.value); // 1 console.log(in1.sth); // undefined
레이블의 세 가지 속성 중에서 이를 찾을 수 있습니다. , in1에는 "id"와 "value"만 생성되고 "sth"는 생성되지 않습니다. 이는 각 DOM 객체가 기본 기본 속성을 가지며, 객체가 생성될 때 이러한 기본 속성만 생성되기 때문입니다. TAG 태그에서 사용자 정의한 속성은 DOM에 직접 배치되지 않습니다.
추가 테스트를 수행하고 또 다른 입력 태그를 생성한 후 다음과 같이 해보겠습니다.
html:
<input id="in_2">
JS:
var in2 = document.getElementById('in_2'); console.log(in2);
from 볼 수 있습니다. 인쇄 정보:
id: "in_2" value: null
TAG에 "value"를 정의하지 않았지만 DOM의 기본 기본 속성이므로 DOM이 초기화되면 계속 생성됩니다. 이것으로부터 우리는 결론을 내릴 수 있습니다:
DOM에는 기본 기본 속성이 있으며 이러한 속성은 소위 "속성" 입니다. in 초기화 중에 DOM 객체에 생성됩니다.
이러한 속성이 TAG에 할당되면 해당 값은 DOM에서 동일한 이름의 속성에 초기 값으로 할당됩니다.
이제 첫 번째 입력("#in_1")으로 돌아가서 "sth"가 어디로 갔는지 물어보겠습니다. 걱정하지 마십시오. 속성 속성을 인쇄하여
console.log(in2);
에 여러 속성이 있는지 살펴보겠습니다.
0: id 1: value 2: sth length: 3 __proto__: NamedNodeMap
"sth"가 속성 개체에 배치되어 있는 것으로 나타났습니다. 객체는 TAG에 정의한 속성과 속성의 개수를 순서대로 기록합니다. 이때 두 번째 입력태그의 속성을 출력해 보면 "id" 속성은 1개만 있고 "length"는 1인 것을 알 수 있다.
여기에서 볼 수 있듯이 속성은 HTML 태그에 정의된 속성을 저장하는 속성의 하위 집합입니다. 태도의 각 속성을 더 자세히 살펴보면 단순한 객체가 아니라는 것을 알 수 있습니다. 이는 NodeType, NodeName 및 기타 속성을 가진 Attr 유형 객체입니다. 이에 대해서는 나중에 자세히 설명합니다. 참고 속성 속성을 인쇄하면 객체의 값을 직접 가져오는 것이 아니라 속성 이름과 값이 포함된 문자열을 가져옵니다(예:
console.log(in1.attibutes.sth); // 'sth="whatever"'
). 이를 통해 다음을 얻을 수 있습니다.
HTML 태그에 정의된 속성과 값은 DOM 객체의 속성 속성에 저장됩니다.
이러한 속성 속성의 JavaScript는 속성 이름과 값을 저장하는 것만큼 간단하지 않고 유형이 Attr입니다.
그럼, 속성과 속성의 가치? 다음 명령문을 실행합니다:
in1.value = 'new value of prop'; console.log(in1.value); // 'new value of prop' console.log(in1.attributes.value); // 'value="1"'
이 때 페이지의 입력 필드 값은 "prop의 새 값"이 되고 속성의 값도 새 값이 되지만 속성은 여전히 " 1 ". 여기에서 속성과 속성의 이름이 같은 속성의 값은 양방향으로 바인딩되지 않는다는 것을 유추할 수 있습니다.
반면 태도에서 가치를 정한다면 어떤 효과가 있을까요?
in1.attributes.value.value = 'new value of attr'; console.log(in1.value); // 'new value of attr' console.log(in1.attributes.value); // 'new value of attr'
이때 페이지의 입력 필드가 업데이트되고 속성의 값도 변경됩니다. 또한 다음 명령문을 실행하면 동일한 결과를 얻을 수 있습니다
in1.attributes.value.nodeValue = 'new value of attr';
이로부터 결론을 내릴 수 있습니다.
속성은 속성에서 동기화될 수 있습니다;
속성은 속성의 값을 동기화하지 않습니다;
속성과 속성 간의 데이터 바인딩입니다. 단방향, attribute->property;
속성 및 속성의 값을 변경하면 HTML 페이지에 대한 업데이트가 반영됩니다. jQuery 기반의 속성 및 속성 분석
그렇다면 jQuery의 attr 및 prop 메소드는 무엇일까요?
먼저 jQuery.prop를 사용하여
$(in1).prop('value', 'new prop form $'); console.log(in1.value); // 'new prop form $' console.log(in1.attributes.value); // '1'
를 테스트하세요. 입력 필드의 값은 업데이트되지만 속성은 업데이트되지 않습니다.
그런 다음 jQuery.attr을 사용하여
$(in1).attr('value', 'new attr form $'); console.log(in1.value); // 'new attr form $' console.log(in1.attributes.value); // 'new attr form $'
를 테스트합니다. 입력 필드의 값이 업데이트되고 속성과 속성이 모두 업데이트됩니다.
위의 테스트 현상에서 jQuery.attr과 jQuery.prop는 기본적으로 기본 작업 방법과 동일하지만 속성은 속성에서 동기화되지 않는다는 것을 추론할 수 있습니다. 재산. 그렇다면 jQuery는 이를 어떻게 구현하는가?
下面，我们来看看jQuery.attr和jQuery.prop的源码。
jQuery源码
$().prop源码
jQuery.fn.extend({
prop: function( name, value ) {
return access( this, jQuery.prop, name, value, arguments.length > 1 );
},
... // removeProp方法
});$().attr源码
jQuery.fn.extend({
attr: function( name, value ) {
return access( this, jQuery.attr, name, value, arguments.length > 1 );
},
... // removeAttr方法
});无论是attr还是prop，都会调用access方法来对DOM对象的元素进行访问，因此要研究出更多内容，就必须去阅读access的实现源码。
jQuery.access
// 这是一个多功能的函数，能够用来获取或设置一个集合的值
// 如果这个“值”是一个函数，那么这个函数会被执行
// @param elems, 元素集合
// @param fn, 对元素进行处理的方法
// @param key, 元素名
// @param value, 新的值
// @param chainable, 是否进行链式调用
// @param emptyGet,
// @param raw, 元素是否一个非function对象
var access = jQuery.access = function( elems, fn, key, value, chainable, emptyGet, raw ) {
var i = 0, // 迭代计数
length = elems.length, // 元素长度
bulk = key == null; // 判断是否有特定的键（属性名）
// 如果存在多个属性，递归调用来逐个访问这些值
if ( jQuery.type( key ) === "object" ) {
chainable = true;
for ( i in key ) {
jQuery.access( elems, fn, i, key[i], true, emptyGet, raw );
}
// 设置一个值
} else if ( value !== undefined ) {
chainable = true;
if ( !jQuery.isFunction( value ) ) { // 如果值不是一个function
raw = true;
}
if ( bulk ) {
// Bulk operations run against the entire set
// 如果属性名为空且属性名不是一个function，则利用外部处理方法fn和value来执行操作
if ( raw ) {
fn.call( elems, value );
fn = null;
// ...except when executing function values
// 如果value是一个function,那么就重新构造处理方法fn
// 这个新的fn会将value function作为回调函数传递给到老的处理方法
} else {
bulk = fn;
fn = function( elem, key, value ) {
return bulk.call( jQuery( elem ), value );
};
}
}
if ( fn ) { // 利用处理方法fn对元素集合中每个元素进行处理
for ( ; i < length; i++ ) {
fn( elems[i], key, raw ? value : value.call( elems[i], i, fn( elems[i], key ) ) );
// 如果value是一个funciton,那么首先利用这个函数返回一个值并传入fn
}
}
}
return chainable ?
elems : // 如果是链式调用,就返回元素集合
// Gets
bulk ?
fn.call( elems ) :
length ? fn( elems[0], key ) : emptyGet;
};access方法虽然不长，但是非常绕,要完全读懂并不简单，因此可以针对jQuery.fn.attr的调用来简化access。
jQuery.fn.attr/ jQuery.fn.prop 中的access调用
$().attr的调用方式：
$().attr( propertyName ) // 获取单个属性
$().attr( propertyName, value ) // 设置单个属性
$().attr( properties ) // 设置多个属性
$().attr( propertyName, function ) // 对属性调用回调函数
prop的调用方式与attr是一样的，在此就不重复列举。为了简单起见，在这里只对第一和第二种调用方式进行研究。
调用语句：
access( this, jQuery.attr, name, value, arguments.length > 1 );
简化的access：
// elems 当前的jQuery对象,可能包含多个DOM对象
// fn jQuery.attr方法
// name 属性名
// value 属性的值
// chainable 如果value为空,则chainable为false,否则chainable为true
var access = jQuery.access = function( elems, fn, key, value, chainable, emptyGet, raw ) {
var i = 0, // 迭代计数
length = elems.length, // 属性数量
bulk = false； // key != null
if ( value !== undefined ) { // 如果value不为空,则为设置新值,否则返回该属性的值
chainable = true;
raw = true; // value不是function
if ( fn ) { // fn为jQuery.attr
for ( ; i < length; i++ ) {
fn( elems[i], key, value); // jQuery.attr(elems, key, value);
}
}
}
if(chainable) { // value不为空,表示是get
return elems； // 返回元素实现链式调用
} else {
if(length) { // 如果元素集合长度不为零，则返回第一个元素的属性值
return fn(elems[0], key); // jQuery.attr(elems[0], key);
} else {
return emptyGet； // 返回一个默认值，在这里是undefined
}
}
};通过简化代码，可以知道，access的作用就是遍历上一个$调用得到的元素集合，对其调用fn函数。在jQuery.attr和jQuery.prop里面，就是利用access来遍历元素集合并对其实现对attribute和property的控制。access的源码里面有多段条件转移代码，看起来眼花缭乱，其最终目的就是能够实现对元素集合的变量并完成不同的操作，复杂的代码让jQuery的接口变得更加简单，能极大提高代码重用性，意味着减少了代码量，提高代码的密度从而使JS文件大小得到减少。
这些都是题外话了，现在回到$().attr和$().prop的实现。总的说,这两个原型方法都利用access对元素集进行变量，并对每个元素调用jQuery.prop和jQuery.attr方法。要注意，这里的jQuery.prop和jQuery.attr并不是原型链上的方法，而是jQuery这个对象本身的方法，它是使用jQuery.extend进行方法扩展的（jQuery.fn.prop和jQuery.fn.attr是使用jQuery.fn.extend进行方法扩展的）。
下面看看这两个方法的源码。
jQury.attr
jQuery.extend({
attr: function( elem, name, value ) {
var hooks, ret,
nType = elem.nodeType; // 获取Node类型
// 如果 elem是空或者NodeType是以下类型
// 2: Attr, 属性, 子节点有Text, EntityReference
// 3: Text, 元素或属性中的文本内容
// 8: Comment, 注释
// 不执行任何操作
if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {
return;
}
// 如果支持attitude方法, 则调用property方法
if ( typeof elem.getAttribute === strundefined ) {
return jQuery.prop( elem, name, value );
}
// 如果elem的Node类型不是元素(1)
if ( nType !== 1 || !jQuery.isXMLDoc( elem ) ) {
name = name.toLowerCase();
// 针对浏览器的兼容性，获取钩子函数，处理一些特殊的元素
hooks = jQuery.attrHooks[ name ] ||
( jQuery.expr.match.bool.test( name ) ? boolHook : nodeHook );
}
if ( value !== undefined ) { // 如果value不为undefined，执行"SET"
if ( value === null ) { // 如果value为null，则移除attribute
jQuery.removeAttr( elem, name );
} else if ( hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) {
return ret; // 使用钩子函数
} else { // 使用Dom的setAttribute方法
elem.setAttribute( name, value + "" ); // 注意，要将value转换为string，因为所有attribute的值都是string
return value;
}
// 如果value为undefined，就执行"GET"
} else if ( hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== null ) {
return ret; // 使用钩子函数
} else {
ret = jQuery.find.attr( elem, name ); // 实际上调用了Sizzle.attr，这个方法中针对兼容性问题作出处理来获取attribute的值
// 返回获得的值
return ret == null ?
undefined :
ret;
}
},
...
});从代码可以发现，jQuery.attr调用的是getAttribute和setAttribute方法。
jQeury.prop
jQuery.extend({
...
prop: function( elem, name, value ) {
var ret, hooks, notxml,
nType = elem.nodeType;
// 过滤注释、Attr、元素文本内容
if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {
return;
}
notxml = nType !== 1 || !jQuery.isXMLDoc( elem );
if ( notxml ) { // 如果不是元素
name = jQuery.propFix[ name ] || name; // 修正属性名
hooks = jQuery.propHooks[ name ]; // 获取钩子函数
}
if ( value !== undefined ) { // 执行"SET"
return hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ?
ret : // 调用钩子函数
( elem[ name ] = value ); // 直接对elem[name]赋值
} else { // 执行"GET"
return hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== null ?
ret : // 调用钩子函数
elem[ name ]; // 直接返回elem[name]
}
},
...
});jQuery.prop则是直接对DOM对象上的property进行操作。
通过对比jQuery.prop和jQuery.attr可以发现，前者直接对DOM对象的property进行操作，而后者会调用setAttribute和getAttribute方法。setAttribute和getAttribute方法又是什么方法呢？有什么效果？
setAttribute和getAttribute
基于之前测试使用的输入框，执行如下代码：
in1.setAttribute('value', 'new attr from setAttribute'); console.log(in1.getAttribute('value')); // 'new attr from setAttribute' console.log(in1.value); // 'new attr from setAttribute' console.log(in1.attributes.value); // 'value="new attr from setAttribute"',实际是一个Attr对象
执行完setAttribute以后，就如同直接更改attributes中的同名属性；
而getAttribute的结果与访问property的结果一模一样，而不会像直接访问attritudes那样返回一个Attr对象。
特殊的例子
href
然而，是不是所有标签，所有属性都维持保持这样的特性呢？下面我们看看href这个属性/特性。
首先在html中创建一个标签：
<a href='page_1.html' id='a_1'></a>
在JS脚本中执行如下代码：
console.log(a1.href); // 'file:///D:/GitHub/JS/html/test_01/page_1.html' console.log(a1.getAttribute('href')); // 'page_1.html'
可以看到，property中保存的是绝对路径，而attribute中保存的是相对路径。那么，如果更改了这些值会发生什么情况呢？
更改attribute：
a1.setAttribute('href', 'page_2.html'); // 相对路径 console.log(a1.href); // 'file:///D:/GitHub/JS/html/test_01/page_2.html' console.log(a1.getAttribute('href')); // 'page_2.html' a1.setAttribute('href', '/page_3.html'); // 根目录路径 console.log(a1.href); // 'file:///D:/page_3.html' console.log(a1.getAttribute('href')); // '/page_3.html'
更改property：
a1.href = 'home.html'; // 相对路径 console.log(a1.href); // 'file:///D:/GitHub/JS/html/test_01/home.html' console.log(a1.getAttribute('href')); // 'home.html' a1.href = '/home.html'; // 根目录路径 console.log(a1.href); // 'file:///D:/home.html' console.log(a1.getAttribute('href')); // '/home.html'
从这里可以发现，href是特殊的属性/特性，二者是双向绑定的，更改任意一方，都会导致另一方的的值发生改变。而且，这并不是简单的双向绑定，property中的href永远保存绝对路径，而attribute中的href则是保存相对路径。
看到这里，attribute和property的区别又多了一点，然而，这又让人变得更加疑惑了。是否还有其他类似的特殊例子呢？
id
尝试改变property中的id：
a1.id = 'new_id'; console.log(a1.id); // 'new_id' console.log(a1.getAttribute('id')); // 'new_id'
天呀,现在attribute中的id从property中的id发生了同步，数据方向变成了property attribute；
disabled
再来看看disabled这个属性，我们往第一个添加“disabled”特性：
<input id="in_1" value="1" sth="whatever" disabled='disabled'> // 此时input已经被禁用了
然后执行下面的代码：
console.log(in1.disabled); // true in1.setAttribute('disabled', false); // 设置attribute中的disabled，无论是false还是null都不会取消禁用 console.log(in1); // true console.log(in1.getAttribute('disabled')); // 'false'
改变attributes中的disabled不会改变更改property，也不会取消输入栏的禁用效果。
如果改成下面的代码：
console.log(in1.disabled); // true in1.disabled = false; // 取消禁用 console.log(in1.disabled); // false console.log(in1.getAttribute('disabled')); // null，attribute中的disabled已经被移除了
又或者：
console.log(in1.disabled); // true in1.removeAttribute（'disabled'); // 移除attribute上的disabled来取消禁用 console.log(in1.disabled); // false console.log(in1.getAttribute('disabled')); // null，attribute中的disabled已经被移除了
可以发现，将property中的disabled设置为false，会移除attributes中的disabled。这样数据绑定又变成了，propertyattribute;
所以property和attritude之间的数据绑定问题并不能单纯地以“property”来说明。
总结
分析了这么多，对property和attribute的区别理解也更深了，在这里总结一下：
생성
DOM 객체가 초기화되면 기본 기본 속성이 생성됩니다.
HTML 태그에 정의된 속성만 생성됩니다. 속성의 attributes 속성에 저장되면
속성이 속성에서 동일한 이름으로 초기화되지만 사용자 정의된 속성은 표시되지 않습니다. 속성에서
속성 값은 모두 문자열입니다.
데이터 바인딩
속성 데이터는 속성에 동기화되지만 속성을 변경해도 속성은 변경되지 않습니다.
값 및 클래스와 같은 속성/기능의 경우 데이터 바인딩 방향은 단방향, attribute->property;
id의 경우 데이터 바인딩은 양방향입니다. attribute;
disable의 경우 속성이 false인 경우 해당 속성의 비활성화는 이때 데이터 바인딩이 확실히 존재하게 됩니다. 양방향 으로 간주할 수 있습니다.
setAttribute 메소드를 사용하여 속성을 동시에 변경하려면
을 사용하세요. DOM;
속성 값에 직접 액세스하면 Attr 객체를 가져오고, getAttribute 메서드를 통해 액세스하면
-
대부분의 경우(브라우저 호환성 문제가 없는 한) jQuery.attr은 setAttribute를 통해 구현되는 반면 jQuery.prop는 DOM 개체의 속성에 직접 액세스합니다.
지금까지 속성은 DOM 객체 자체라는 결론을 내릴 수 있었습니다. 속성을 갖고 있으며, 속성은 HTML 태그를 설정하여 제공하는 속성입니다. 동일한 이름의 속성과 속성 간에는 특별한 데이터 연결이 있습니다. 이러한 연결은 속성/기능 차이에 따라 다릅니다.
사실 여기서 속성과 속성의 차이와 연관성은 단순한 기술적 특성으로는 설명하기 어렵습니다. StackFlow에서 다음과 같은 답변을 찾았는데, 실제 답변에 더 가까울 수도 있습니다.
이 단어는 컴퓨터 과학이 등장하기 훨씬 전부터 존재했습니다.
속성은 품질 또는 우리가 누군가 또는 사물에 부여하는 대상.예를 들어 홀은 권력과 국가의 속성입니다. 마찬가지로, 누군가가 남성적 특성을 가지고 있다고 말하는 것은 자명합니다. 사실상, 재산이 누군가 또는 무언가의 소유라고 말할 수 있습니다.
공정하게 말하면. 하지만 컴퓨터 과학에서는 이 두 단어가 적어도 대부분은 같은 의미로 사용될 수 있습니다. 하지만 프로그래머는 일반적으로 영문학 학위를 소지하지도 않고 문법 책을 쓰거나 글을 쓰지도 않습니다.가장 비판적인 두 문장:
속성(characteristic)은 우리가 무언가에 부여하는 품질이나 대상입니다.속성은 이미 존재하는 특성이므로 외부에서 부여할 필요가 없습니다.
위 내용은 JavaScript의 속성과 속성의 차이점에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!