DOM中Attribute与Property的区别_前端开发者

前端开发者丨JavaScript DOM
DOM中Property与Attribute的区别property和attribute的汉语翻译几乎相同, 都有“ 属性” 的意义( 这里姑且称attribute为“ 特性”, 以方便区分), 而他们的取值也经常相同, 但有时又会踩坑, 发现二者会不相等, 不同步。 0. 奇葩的IE本文开始之前不得不提一下万恶之源IE, 在IE < 9 中, 浏览器会把所有的property和attribute强制映射, 即property = attribute.(class特殊: className = class)。 正因为IE < 9 中的这种映射误导了很多人以为二者完全相同。 1. Property每个DOM节点都是一个object对象, 它可以像其他的js Object一样具有自己的property和method, 所以property的值可以是任何数据类型, 大小写敏感, 原则上property应该仅供js操作, 不会出现在html中( 默认属性除外: id / src / href / className / dir / title / lang等), 和其他js object一样, 自定义的property也会出现在object的for… in遍历中。 eg.var list = [];
for (var key in document.body) {
list.push(key)
}
console.log(list.join(”));
1 2 3 4 5 6 eg.var list = [];
for (var key in document.body) {
list.push(key)
}
console.log(list.join(”));
2. Attributeattribute出现在dom中, js提供了getAttribute / setAttribute等方法来获取和改变它的值, attribute的值只能是字符串且大小写不敏感, 最后作用于html中, 可以影响innerHTML获取的值。 可以通过访问dom节点的attributes属性来获取改节点的所有的attribute。( 在IE < 9 中, attribute获取和改变的实际上是property。) 3. 自定义的Property与Attribute不同步, 不相等html: < input type = ‘text’
id = ‘test’
value / > js: var test = document.getElementById(‘test’);
test.self = ‘selfProperty’;
console.log(test.self) => ‘selfProperty’
test.getAttribute(‘self’) => null conclusion: 自定义的property与自定义的attribute无同步关系 1 2 3 4 5 6 7 html: < input type = ‘text’
id = ‘test’
value / > js: var test = document.getElementById(‘test’);
test.self = ‘selfProperty’;
console.log(test.self) = > ‘selfProperty’
test.getAttribute(‘self’) = > null conclusion: 自定义的 property 与自定义的 attribute 无同步关系4.非自定义的DOM property与 attributes 是有条件同步的非自定义的属性(id / src / href / name / value等), 通过setAttribute修改其特性值可以同步作用到property上, 而通过.property修改属性值有的(value) 时候不会同步到attribute上, 即不会反应到html上(除以下几种情况, 非自定义属性在二者之间是同步的)。 非自定义属性(id / src / href / name / value等) 未显式定义在dom中才会时, 初始的property与attribute不同html: < input type = ‘text’
id = “testvalue” / > 初始值property: testvalue.value => “” 初始值attribute: testvalue.getAttribute(‘value’) => null 1 2 3 html : < input type = ‘text’ id = “ testvalue ” / > 初始值 property : testvalue . value = > “”
初始值 attribute: testvalue.getAttribute(‘ value ’ ) = > nullinput:value/checked的单向同步关系通过setAttribute改变input的value/checked都会同步到property中,但是,一旦改变他们的property值,就打破同步机制html: <input type=’
text ‘ id=“testvalue” value=’
sync ‘ /> property: testvalue.value => ‘
sync ‘ attribute: testvalue.getAttribute(‘
value’) => ‘sync’
testvalue.setAttribute(‘value’, ‘abc’) => ‘abc’
则属性会同步: testvalue.value => ‘abc’
testvalue.value = ‘ddd’;
则同步机制失效: testvalue.getAttribute(‘value’) => ‘
abc ‘ 1 2 3 4 5 6 7 html : < input type = ‘
text ‘ id = “ testvalue ” value = ‘
sync ‘ / > property : testvalue . value = > ‘
sync ‘ attribute : testvalue . getAttribute ( ‘
value’) => ‘ sync ‘
testvalue.setAttribute(‘ value ‘, ‘ abc ‘) => ‘ abc ‘
则属性会同步: testvalue.value => ‘ abc ‘
testvalue.value = ‘ ddd ‘;
则同步机制失效: testvalue.getAttribute(‘ value ’ ) = > ‘
abc ‘通过setAttribute改变input的value/checked都会同步到property中,但是,一旦改变他们的property值,就打破同步机制 同步不是复制,同步机制依旧,值不同(src/href)通过getAttribute获取的是href/src的实际值,而点号(property)获取的是完整的url。html: a(id=”testHr” href=”/test/”) property: testHr.href=”/blog/” => ‘
http: //f2e.souche.com/blog/’ attribute: testHr.getAttribute(‘href’) => ‘/blog/’ 1 2 3 html : a ( id = “testHr” href = “/test/” ) property : testHr . href = “/blog/” = > ‘http://f2e.souche.com/blog/’ attribute : testHr . getAttribute ( ‘href’) => ‘ / blog / ‘通过getAttribute获取的是href/src的实际值,而点号(property)获取的是完整的url。 非直接映射的同步,虽然同步了,但是同步后的属性名字不同,或者取值方式不同:class/data-XX/styleclass映射成classNamedata-XXX映射到 dataset.XXX,通过jquery的attr,prop访问时候不同步。style属性不接受字符串型赋值,只能通过style.XXXhtml: <input type=’text’ class=”abc” data-id=”123″ id=“testvalue” value=’sync’ /> testvalue.getAttribute(‘class’) <=>testvalue.className testvalue.setAttribute(‘style’,’color:red’) <=> testvalue.style.color testvalue.getAttribute(‘data-id’)<=> testvalue.dataset.id 1 2 3 4 html : < input type = ‘text’ class = “abc” data – id = “123” id = “ testvalue ” value = ‘sync’ / > testvalue . getAttribute ( ‘class’ ) <= > testvalue . className testvalue . setAttribute ( ‘style’ , ‘color:red’ ) <= > testvalue . style . color testvalue . getAttribute ( ‘data-id’ ) <= > testvalue . dataset . id小结property与attribute都是dom的核心功能,鉴于有的属性上会出现单项同步的情况似乎attribute貌似更保险一点。
前端开发者丨JavaScript DOM
» 本文来自:前端开发者 » 《DOM中Attribute与Property的区别_前端开发者》
» 本文链接地址:https://www.rokub.com/2268.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!