button.disabled 和 button.getAttribute(‘disabled’) 有什么区别?

button.disabled 和 button.getAttribute(‘disabled’) 有什么区别?
「node.getAttribute(‘someAttribute’)」获取的是「attribute」,而「node.someAttribute」获取的是元素的「property」,二者并不相同,本文将进行详细对介绍。

在大多数情况下「property」和「attribute」是同步的,如场景1。

场景1:

<input id="username" type="text">
<script>
var userInput = document.querySelector('#username');
console.log( userInput.id );                  //"username"
console.log( userInput.getAttribute('id') );  //"username"
</script>

这里 userInput.id 和 userInput.getAttribute(‘id’) 获取的值相等。

当然我们关注的是例外,如场景2、3、4.

场景2:

<input id="username" type="text" sex="male" age=26>
<script>
var userInput = document.querySelector('#username');
console.log( userInput.sex );                  // undefined
console.log( userInput.getAttribute('sex') );  // "male"
console.log( userInput.getAttribute('SEX') );  // "male"
console.log( userInput.getAttribute('age'));   // "26"
</script>

从上面的例子可以得出如下结论:

  • 「node.property」的方式不能获取自定义属性,「node.getAttribute()」的方式可以获取自定义属性
  • 「node. getAttribute()」获取自定义属性忽略属性的大小写
  • 「node.getAttribute()」获取自定义属性得到的值的类型总是字符串

场景3:

<button id="btn" disabled>点我</button>
<script>
var btn = document.querySelector('#btn');
console.log( btn.disabled );                  // true
console.log( btn.getAttribute('disabled') );  // ""
</script>
<button id="btn" disabled=false>点我</button>
<script>
var btn = document.querySelector('#btn');
console.log( btn.disabled );                  // true
console.log( btn.getAttribute('disabled') );  // "false"
</script>

对于上面的例子,HTML中只要出现了disabled 属性,不管值是什么,对于 DOM property结果都是true, 而对于 attribute 获取的则是把 HTML 里对应属性的值拿到转换成字符串。

input标签checked 也有类似的特性。

场景4:

<a href="/" id="logo"></a>
<script>
var a = document.querySelector('logo')
console.log( a.getAttribute('href') )      // "/"
console.log( a.href )                      // "http://jirengu.com"
</script>

对于 a 链接的 href, 使用 a.getAttribute(‘href’) 就是从 HTML 里获取对应属性的值转化成字符串,而 a.href 则获取有意义的真实地址。

场景5:

<input id="username" type="text" sex="male" age=28 value="饥人谷">
<script>
var userInput = document.querySelector('#username');
userInput.value = "若愚";
console.log( userInput.value );                  // "若愚"
console.log( userInput.getAttribute('value'));   // "饥人谷"
userInput.setAttribute('value', 'hunger'); 
console.log( userInput.value );                  // "若愚"
console.log( userInput.getAttribute('value'));   // "hunger"
console.log( document.body.innerHTML ) ;  // <input id="username" type="text" sex="male" age=28 value="hunger">
</script>

对于input 的 value, 改变 property 不会同步到 atttribute 上,改变 attribute也不会同步到 value上, attribute对应 HTML, property 对应 DOM。

那到底用哪一种呢?

如果你只是想获取非自定义的属性,比如 id、name、src、href 、checked… 用 property 的方式比较符合日常习惯,如果需要获取自定义属性那只能使用 getAttribute。当然具体用哪一种你只要了解二者的区别,大胆选用吧~

作者: 若愚,未经许可禁止转载

68 thoughts on “button.disabled 和 button.getAttribute(‘disabled’) 有什么区别?”

  1. I absolutely love your site.. Excellent colors & theme. Did you build this web site yourself? Please reply back as I’m looking to create my own blog and would like to know where you got this from or just what the theme is named. Cheers!|

  2. I’m now not certain where you’re getting your information, but great topic. I needs to spend some time finding out more or working out more. Thanks for great information I was on the lookout for this information for my mission.|

  3. Its like you read my mind! You appear to know so much about this, like you wrote the book in it or something. I think that you could do with some pics to drive the message home a little bit, but instead of that, this is wonderful blog. A great read. I will definitely be back.|

  4. Hello there, I discovered your site by way of Google even as searching for a similar matter, your site got here up, it appears to be like good. I’ve bookmarked it in my google bookmarks.

  5. After going over a number of the articles on your web page, I honestly appreciate your way of writing a blog. I saved as a favorite it to my bookmark site list and will be checking back in the near future. Take a look at my web site too and let me know what you think.|

  6. Does your website have a contact page? I’m having problems locating it but, I’d like to shoot you an email. I’ve got some suggestions for your blog you might be interested in hearing. Either way, great site and I look forward to seeing it improve over time.|

  7. I have been surfing online more than 3 hours today, yet I never found any interesting article like yours. It is pretty worth enough for me. In my view, if all webmasters and bloggers made good content as you did, the internet will be a lot more useful than ever before.|

  8. Admiring the persistence you put into your blog and detailed information you present. It’s great to come across a blog every once in a while that isn’t the same old rehashed information. Wonderful read! I’ve saved your site and I’m adding your RSS feeds to my Google account.|

  9. Heya i’m for the first time here. I came across this board and I find It really useful & it helped me out much. I hope to give something back and help others like you helped me.|

  10. Hey there, You’ve performed an excellent job. I’ll certainly digg it and in my opinion recommend to my friends. I am sure they’ll be benefited from this site.|

  11. Magnificent goods from you, man. I have understand your stuff prior to and you’re simply too fantastic. I really like what you have obtained here, really like what you are stating and the way by which you say it. You are making it entertaining and you continue to take care of to keep it sensible. I cant wait to learn much more from you. That is really a tremendous website.|

  12. Hi, I do think this is a great web site. I stumbledupon it 😉 I’m going to return yet again since i have bookmarked it. Money and freedom is the best way to change, may you be rich and continue to help others.|

  13. Hello, Neat post. There is a problem together with your website in internet explorer, might check this? IE still is the market chief and a big portion of other folks will leave out your wonderful writing because of this problem.|

  14. Howdy! Do you know if they make any plugins to safeguard against hackers? I’m kinda paranoid about losing everything I’ve worked hard on. Any suggestions?|

  15. Hey! I just wanted to ask if you ever have any issues with hackers? My last blog (wordpress) was hacked and I ended up losing months of hard work due to no backup. Do you have any methods to stop hackers?|

  16. Hi there just wanted to give you a quick heads up. The words in your post seem to be running off the screen in Ie. I’m not sure if this is a format issue or something to do with web browser compatibility but I figured I’d post to let you know. The style and design look great though! Hope you get the problem resolved soon. Kudos|

  17. Hello! I know this is kind of off topic but I was wondering if you knew where I could get a captcha plugin for my comment form? I’m using the same blog platform as yours and I’m having trouble finding one? Thanks a lot!|

  18. Thanks for the marvelous posting! I truly enjoyed reading it, you can be a great author.I will always bookmark your blog and definitely will come back later in life. I want to encourage you to definitely continue your great writing, have a nice afternoon!|

  19. Just wish to say your article is as amazing. The clarity in your post is simply spectacular and i could assume you’re an expert on this subject. Well with your permission let me to grab your RSS feed to keep up to date with forthcoming post. Thanks a million and please continue the enjoyable work.|

  20. A person essentially help to make critically posts I might state. This is the first time I frequented your web page and to this point? I amazed with the research you made to make this actual submit extraordinary. Fantastic process!|

  21. First of all I would like to say excellent blog! I had a quick question in which I’d like to ask if you don’t mind. I was curious to know how you center yourself and clear your thoughts prior to writing. I have had a difficult time clearing my thoughts in getting my thoughts out. I truly do take pleasure in writing but it just seems like the first 10 to 15 minutes are usually wasted just trying to figure out how to begin. Any ideas or tips? Kudos!|

  22. Howdy are using WordPress for your site platform? I’m new to the blog world but I’m trying to get started and create my own. Do you require any coding knowledge to make your own blog? Any help would be greatly appreciated!|

  23. It’s appropriate time to make some plans for the long run and it is time to be happy. I have read this submit and if I could I want to counsel you few attention-grabbing issues or advice. Perhaps you can write subsequent articles referring to this article. I want to learn even more issues approximately it!|

  24. Asking questions are genuinely fastidious thing if you are not understanding something entirely, however this paragraph presents fastidious understanding even.|

  25. Thank you, I’ve recently been looking for information approximately this topic for a long time and yours is the best I’ve discovered so far. However, what in regards to the conclusion? Are you positive concerning the source?

发表评论

电子邮件地址不会被公开。