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。当然具体用哪一种你只要了解二者的区别,大胆选用吧~

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

167 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. Fine way of describing, and fastidious paragraph to take facts about my presentation subject, which i am going to present in university.|

  3. What’s up to every one, the contents present at this website are in fact awesome for people experience, well, keep up the nice work fellows.|

  4. 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.|

  5. 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.|

  6. 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.

  7. 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.|

  8. 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.|

  9. 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.|

  10. 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.|

  11. 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.|

  12. 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.|

  13. 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.|

  14. 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.|

  15. 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.|

  16. 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?|

  17. 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?|

  18. It’s really very difficult in this busy life to listen news on TV, thus I just use web for that reason, and take the hottest information.|

  19. Your way of describing everything in this article is really fastidious, all can easily know it, Thanks a lot.|

  20. 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|

  21. Hello, i think that i noticed you visited my weblog so i got here to go back the prefer?.I’m trying to to find issues to enhance my site!I assume its adequate to make use of a few of your ideas!!|

  22. 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!|

  23. 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!|

  24. 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.|

  25. Hi everyone, it’s my first visit at this site, and paragraph is genuinely fruitful in favor of me, keep up posting such content.|

  26. 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!|

  27. 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!|

  28. 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!|

  29. 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!|

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

  31. 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?

  32. Spot on with this write-up, I honestly believe that this amazing site needs a great deal more attention. I’ll probably be returning to see more, thanks for the information!|

  33. I’d like to thank you for the efforts you’ve put in penning this site. I’m hoping to see the same high-grade content by you later on as well. In fact, your creative writing abilities has encouraged me to get my own blog now ;)|

  34. These are truly impressive ideas in on the topic of blogging. You have touched some fastidious points here. Any way keep up wrinting.|

  35. Hi there, constantly i used to check weblog posts here in the early hours in the break of day, because i love to find out more and more.|

  36. I close my browser often for various reasons, and having to repeatedly log into my accounts like Facebook, Yahoo, Gmail, and etc, is very inconvenient and getting gold. Firefox 2 never did this, just my current Firefox 3..

  37. It is perfect time to make some plans for the future and it is time to be happy. I’ve read this post and if I could I want to suggest you some interesting things or suggestions. Maybe you could write next articles referring to this article. I want to read even more things about it!|

  38. This is a topic that’s close to my heart… Take care! Exactly where are your contact details though?|

  39. Woah! I’m really digging the template/theme of this site. It’s simple, yet effective. A lot of times it’s very difficult to get that “perfect balance” between superb usability and visual appeal. I must say you have done a amazing job with this. In addition, the blog loads very quick for me on Chrome. Excellent Blog!|

  40. I know this if off topic but I’m looking into starting my own weblog and was curious what all is required to get setup? I’m assuming having a blog like yours would cost a pretty penny? I’m not very internet smart so I’m not 100 positive. Any tips or advice would be greatly appreciated. Thank you|

  41. It’s very straightforward to find out any topic on web as compared to textbooks, as I found this piece of writing at this website.|

  42. Good day I am so thrilled I found your weblog, I really found you by accident, while I was browsing on Aol for something else, Regardless I am here now and would just like to say many thanks for a fantastic post and a all round interesting blog (I also love the theme/design), I don’t have time to read through it all at the moment but I have book-marked it and also added your RSS feeds, so when I have time I will be back to read a lot more, Please do keep up the great job.|

  43. I will right away seize your rss feed as I can’t find your email subscription link or newsletter service. Do you have any? Please allow me know so that I may just subscribe. Thanks.|

  44. Hello! This is my 1st comment here so I just wanted to give a quick shout out and tell
    you I really enjoy reading your articles. Can you recommend any other blogs/websites/forums that deal with the same subjects?
    Thanks a ton!

  45. Simply desire to say your article is as astonishing. The clarity in your post is just spectacular and i could assume you are an expert on this subject. Fine with your permission let me to grab your RSS feed to keep up to date with forthcoming post. Thanks a million and please keep up the gratifying work.|

  46. Hey! I understand this is somewhat off-topic however I needed to ask. Does running a well-established website such as yours take a massive amount work? I’m brand new to running a blog however I do write in my diary daily. I’d like to start a blog so I can easily share my own experience and thoughts online. Please let me know if you have any kind of ideas or tips for new aspiring bloggers. Appreciate it!|

  47. Hi there! Someone in my Facebook group shared this website with us so I came to take a look. I’m definitely enjoying the information. I’m bookmarking and will be tweeting this to my followers! Outstanding blog and wonderful style and design.|

  48. We are a gaggle of volunteers and starting a brand new scheme in our community. Your site offered us with valuable info to work on. You have performed a formidable activity and our whole group will probably be thankful to you.|

  49. Hi there! Someone in my Myspace group shared this website with us so I came to check it out. I’m definitely loving the information. I’m bookmarking and will be tweeting this to my followers! Wonderful blog and excellent style and design.|

  50. Hey there! I’ve been reading your site for some time now and finally got the bravery to go ahead and give you a shout out from New Caney Texas! Just wanted to say keep up the fantastic work!|

  51. Hi would you mind letting me know which hosting company you’re utilizing? I’ve loaded your blog in 3 completely different browsers and I must say this blog loads a lot quicker then most. Can you recommend a good web hosting provider at a reasonable price? Thank you, I appreciate it!|

  52. Hi would you mind letting me know which hosting company you’re working with? I’ve loaded your blog in 3 different browsers and I must say this blog loads a lot faster then most. Can you suggest a good web hosting provider at a fair price? Thanks a lot, I appreciate it!|

  53. Hello, i believe that i noticed you visited my weblog thus i came to return the want?.I’m attempting to in finding things to improve my web site!I assume its ok to use some of your ideas!!|

  54. I just wanted to construct a note in order to say thanks to you for these fabulous items you are showing on this website. My extended internet investigation has at the end of the day been honored with reasonable know-how to share with my two friends. I would admit that many of us readers actually are truly lucky to live in a wonderful network with so many marvellous people with valuable suggestions. I feel quite grateful to have come across the weblog and look forward to many more exciting minutes reading here. Thanks once more for all the details.

  55. What i do not understood is if truth be told how you are not actually a lot more well-liked than you might be now. You’re very intelligent. You realize thus significantly when it comes to this matter, produced me in my opinion imagine it from a lot of varied angles. Its like men and women don’t seem to be interested unless it is one thing to accomplish with Lady gaga! Your individual stuffs nice. At all times take care of it up!

  56. Spot on with this write-up, I actually believe this web site needs a great deal more attention. I’ll probably be back again to see more, thanks for the info!|

  57. Hey would you mind stating which blog platform you’re using? I’m going to start my own blog soon but I’m having a difficult time deciding between BlogEngine/Wordpress/B2evolution and Drupal. The reason I ask is because your design and style seems different then most blogs and I’m looking for something unique. P.S Sorry for getting off-topic but I had to ask!|

  58. An outstanding share! I’ve just forwarded this onto a colleague who was doing a little research on this.
    And he actually bought me dinner due to the fact that I stumbled upon it
    for him… lol. So let me reword this….
    Thanks for the meal!! But yeah, thanx for spending time to discuss this matter here on your website.

  59. I every time used to study article in news papers but now as I am a user of net so from now I am using net for articles, thanks to web.|

  60. As predicted all space coffins and space funeral homes will blow up in space around the year 2080 to year 3000 due to envy. That’s why we need the 777 immortality smart contracts to remind the living to have faith through time. The 777 immortality smart contract is the trust system that can save someone you love through time.

  61. Everyone loves what you guys tend to be up too. This type of clever work and reporting! Keep up the great works guys I’ve incorporated you guys to blogroll.|

  62. Asking questions are actually good thing if you are not understanding something entirely, but this piece of writing gives good understanding even.|

  63. Woah! I’m really enjoying the template/theme of this blog. It’s simple, yet effective. A lot of times it’s tough to get that “perfect balance” between user friendliness and appearance. I must say you have done a superb job with this. Additionally, the blog loads very quick for me on Firefox. Superb Blog!|

  64. I absolutely love your blog and find the majority of your post’s to be what precisely I’m looking for. Would you offer guest writers to write content to suit your needs? I wouldn’t mind writing a post or elaborating on a few of the subjects you write regarding here. Again, awesome website!|

  65. It is perfect time to make a few plans for the longer term and it’s time to be happy. I have learn this publish and if I may just I want to counsel you few interesting issues or tips. Perhaps you can write subsequent articles referring to this article. I want to read more things approximately it!|

  66. I visited multiple web pages however the audio quality for audio songs present at this site is really fabulous.|

  67. Woah! I’m really loving the template/theme of this blog. It’s simple, yet effective. A lot of times it’s tough to get that “perfect balance” between user friendliness and visual appeal. I must say that you’ve done a very good job with this. Also, the blog loads very fast for me on Safari. Outstanding Blog!|

  68. Hi, i think that i saw you visited my blog thus i came to “return the favor”.I am trying to find things to improve my site!I suppose its ok to use a few of your ideas!!|

  69. Hi there, just become alert to your blog thru Google, and found that it’s really informative. I’m going to be careful for brussels. I’ll appreciate for those who proceed this in future. Numerous other people might be benefited from your writing. Cheers!|

  70. Nice blog! Is your theme custom made or did you download it from somewhere?

    A theme like yours with a few simple adjustements would really make my blog stand out.

    Please let me know where you got your theme. Appreciate
    it

  71. It’s a pity you don’t have a donate button! I’d definitely donate to this excellent blog! I suppose for now i’ll settle for book-marking and adding your RSS feed to my Google account. I look forward to new updates and will share this website with my Facebook group. Talk soon!|

  72. I’m impressed, I must say. Rarely do I encounter a blog that’s equally educative and entertaining, and without a doubt, you’ve hit the nail on the head. The issue is something which too few folks are speaking intelligently about. Now i’m very happy that I came across this in my hunt for something relating to this.

  73. Woah! I’m really loving the template/theme of this blog. It’s simple, yet effective. A lot of times it’s very hard to get that “perfect balance” between superb usability and appearance. I must say that you’ve done a great job with this. Also, the blog loads extremely fast for me on Safari. Excellent Blog!|

  74. Hey would you mind letting me know which web host you’re utilizing? I’ve loaded your blog in 3 different web browsers and I must say this blog loads a lot faster then most. Can you suggest a good hosting provider at a reasonable price? Kudos, I appreciate it!|

  75. Your means of explaining everything in this post is really pleasant, every one be capable of simply be aware of it, Thanks a lot.|

  76. This is the right site for everyone who wants to understand this topic. You realize so much its almost tough to argue with you (not that I really would want to…HaHa). You certainly put a fresh spin on a subject that’s been discussed for a long time. Excellent stuff, just excellent!|

  77. It’s the best time to make a few plans for the long run and it is time to be happy. I have read this put up and if I could I desire to recommend you some attention-grabbing issues or advice. Maybe you could write subsequent articles referring to this article. I wish to read more things approximately it!|

  78. My brother suggested I might like this web site. He was entirely right. This post truly made my day. You cann’t imagine just how much time I had spent for this info! Thanks!|

  79. Hello! I’ve been reading your blog for some time now and finally got the bravery to go ahead and give you a shout out from Austin Texas! Just wanted to mention keep up the great work!|

  80. Hey there would you mind letting me know which hosting company you’re using? I’ve loaded your blog in 3 completely different browsers and I must say this blog loads a lot faster then most. Can you suggest a good hosting provider at a honest price? Many thanks, I appreciate it!|

  81. I’m extremely inspired with your writing skills as smartly as with the layout for your blog. Is that this a paid theme or did you modify it yourself? Either way stay up the nice high quality writing, it’s uncommon to look a great blog like this one these days..|

  82. Hello there, I discovered your web site by means of Google at the same time as looking for a similar matter, your site came up, it appears great. I’ve bookmarked it in my google bookmarks.

  83. Thanks on your marvelous posting! I quite enjoyed reading it, you happen to be a great author. I will remember to bookmark your blog and will eventually come back in the future. I want to encourage yourself to continue your great posts, have a nice evening!|

  84. Having read this I believed it was very enlightening. I appreciate you finding the time and effort to put this information together. I once again find myself personally spending a significant amount of time both reading and commenting. But so what, it was still worth it!|

  85. Hi there, i read your blog from time to time and i own a similar one and i was just curious if you get a lot of spam remarks? If so how do you reduce it, any plugin or anything you can suggest? I get so much lately it’s driving me mad so any support is very much appreciated.|

  86. Hello! I’ve been following your blog for some time now and finally got the bravery to go ahead and give you a shout out from New Caney Texas! Just wanted to say keep up the great job!|

  87. I’m extremely inspired together with your writing abilities as well as with the format in your blog. Is this a paid topic or did you customize it your self? Either way stay up the nice high quality writing, it is uncommon to see a great weblog like this one nowadays..|

  88. Wow that was strange. I just wrote an extremely long comment but after I clicked submit my comment didn’t show up. Grrrr… well I’m not writing all that over again. Anyways, just wanted to say wonderful blog!|

  89. Hey there! This is my first visit to your blog! We are a group of volunteers and starting a new project in a community in the same niche. Your blog provided us useful information to work on. You have done a outstanding job!|

  90. Hello there, You’ve performed an incredible job. I will definitely digg it and in my opinion suggest to my friends. I am sure they will be benefited from this website.|

  91. I’m extremely impressed with your writing skills and also with the layout on your blog. Is this a paid theme or did you modify it yourself? Either way keep up the excellent quality writing, it’s rare to see a great blog like this one nowadays.|

  92. I’m not sure where you’re getting your information, but good topic. I needs to spend some time learning much more or understanding more. Thanks for excellent information I was looking for this info for my mission.|

  93. Hi great blog! Does running a blog such as this take a great deal of work? I’ve no understanding of computer programming however I had been hoping to start my own blog soon. Anyhow, if you have any recommendations or tips for new blog owners please share. I understand this is off topic however I just wanted to ask. Thank you!|

  94. Once I initially commented I clicked the -Notify me when new feedback are added- checkbox and now each time a comment is added I get four emails with the same comment. Is there any way you possibly can take away me from that service? Thanks!

发表评论

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