{"id":1460,"date":"2020-12-28T12:50:27","date_gmt":"2020-12-28T04:50:27","guid":{"rendered":"https:\/\/jimmyswebnote.com\/?p=1460"},"modified":"2021-05-05T20:56:31","modified_gmt":"2021-05-05T12:56:31","slug":"html-attributes-and-dom-properties","status":"publish","type":"post","link":"https:\/\/jimmyswebnote.com\/html-attributes-and-dom-properties\/","title":{"rendered":"HTML Attributes \u8207 DOM Properties \u7684\u5340\u5225"},"content":{"rendered":"\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_65 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<p class=\"ez-toc-title\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-662f79e67aa64\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-662f79e67aa64\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/jimmyswebnote.com\/html-attributes-and-dom-properties\/#1_HTML_attributes\" title=\"1. HTML attributes\">1. HTML attributes<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/jimmyswebnote.com\/html-attributes-and-dom-properties\/#11_attributes_%E7%94%B1_HTML_%E5%AE%9A%E7%BE%A9%EF%BC%8C%E6%89%80%E6%9C%89%E5%87%BA%E7%8F%BE%E5%9C%A8_HTML_%E6%A8%99%E7%B1%A4%E5%85%A7%E7%9A%84%E6%8F%8F%E8%BF%B0%E7%9A%86%E7%82%BA_attributes\" title=\"1.1 attributes \u7531 HTML \u5b9a\u7fa9\uff0c\u6240\u6709\u51fa\u73fe\u5728 HTML \u6a19\u7c64\u5167\u7684\u63cf\u8ff0\u7686\u70ba attributes\">1.1 attributes \u7531 HTML \u5b9a\u7fa9\uff0c\u6240\u6709\u51fa\u73fe\u5728 HTML \u6a19\u7c64\u5167\u7684\u63cf\u8ff0\u7686\u70ba attributes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/jimmyswebnote.com\/html-attributes-and-dom-properties\/#12_HTML_%E4%B8%AD%E7%9A%84%E6%A8%99%E7%B1%A4%E6%9C%89%E6%A8%99%E6%BA%96%E7%9A%84_attributes_%EF%BC%8C%E8%87%AA%E5%B7%B1%E4%B9%9F%E5%8F%AF%E4%BB%A5%E5%8F%A6%E5%A4%96%E5%AE%9A%E7%BE%A9_attributes\" title=\"1.2 HTML \u4e2d\u7684\u6a19\u7c64\u6709\u6a19\u6e96\u7684 attributes \uff0c\u81ea\u5df1\u4e5f\u53ef\u4ee5\u53e6\u5916\u5b9a\u7fa9 attributes\">1.2 HTML \u4e2d\u7684\u6a19\u7c64\u6709\u6a19\u6e96\u7684 attributes \uff0c\u81ea\u5df1\u4e5f\u53ef\u4ee5\u53e6\u5916\u5b9a\u7fa9 attributes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/jimmyswebnote.com\/html-attributes-and-dom-properties\/#13_%E5%9C%A8_JavaScript_%E4%B8%AD_%E5%A6%82%E4%BD%95%E6%93%8D%E4%BD%9C_HTML_attributes\" title=\"1.3 \u5728 JavaScript \u4e2d \u5982\u4f55\u64cd\u4f5c HTML attributes \">1.3 \u5728 JavaScript \u4e2d \u5982\u4f55\u64cd\u4f5c HTML attributes <\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/jimmyswebnote.com\/html-attributes-and-dom-properties\/#14_%E6%89%80%E6%9C%89%E7%9A%84_attributes_type_%E7%9A%86%E7%82%BA_string\" title=\"1.4 \u6240\u6709\u7684 attributes type \u7686\u70ba string\">1.4 \u6240\u6709\u7684 attributes type \u7686\u70ba string<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/jimmyswebnote.com\/html-attributes-and-dom-properties\/#2_DOM_properties\" title=\"2. DOM properties\">2. DOM properties<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/jimmyswebnote.com\/html-attributes-and-dom-properties\/#21_%E6%A8%99%E6%BA%96%E7%9A%84_HTML_attributes_%E7%B6%93%E9%81%8E%E7%80%8F%E8%A6%BD%E5%99%A8%E8%A7%A3%E6%9E%90%E5%BE%8C%E6%9C%83%E7%94%A2%E7%94%9F%E7%9B%B8%E5%B0%8D%E6%87%89%E7%9A%84_DOM_properties\" title=\"2.1 \u6a19\u6e96\u7684 HTML attributes \u7d93\u904e\u700f\u89bd\u5668\u89e3\u6790\u5f8c\u6703\u7522\u751f\u76f8\u5c0d\u61c9\u7684 DOM properties\">2.1 \u6a19\u6e96\u7684 HTML attributes \u7d93\u904e\u700f\u89bd\u5668\u89e3\u6790\u5f8c\u6703\u7522\u751f\u76f8\u5c0d\u61c9\u7684 DOM properties<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/jimmyswebnote.com\/html-attributes-and-dom-properties\/#22_%E8%87%AA%E5%AE%9A%E7%BE%A9%E7%9A%84_HTML_attributes_%E4%B8%A6%E4%B8%8D%E6%9C%83%E7%94%A2%E7%94%9F%E7%9B%B8%E5%B0%8D%E6%87%89%E7%9A%84_DOM_properties\" title=\"2.2 \u81ea\u5b9a\u7fa9\u7684 HTML attributes \u4e26\u4e0d\u6703\u7522\u751f\u76f8\u5c0d\u61c9\u7684 DOM properties\">2.2 \u81ea\u5b9a\u7fa9\u7684 HTML attributes \u4e26\u4e0d\u6703\u7522\u751f\u76f8\u5c0d\u61c9\u7684 DOM properties<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/jimmyswebnote.com\/html-attributes-and-dom-properties\/#23_DOM_properties_%E7%9A%84_type_%E4%B8%8D%E4%B8%80%E5%AE%9A%E6%98%AF_string\" title=\"2.3 DOM properties \u7684 type \u4e0d\u4e00\u5b9a\u662f string\">2.3 DOM properties \u7684 type \u4e0d\u4e00\u5b9a\u662f string<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/jimmyswebnote.com\/html-attributes-and-dom-properties\/#24_%E7%95%B6_attributes_%E6%88%96_properties_%E6%94%B9%E8%AE%8A%E6%99%82%EF%BC%8C%E5%85%B6%E5%B0%8D%E6%87%89%E7%9A%84_properties_%E6%88%96_attributes_%E4%B9%9F%E6%9C%83%E8%B7%9F%E8%91%97%E6%94%B9%E8%AE%8A%EF%BC%8C%E4%BD%86%E6%9C%89%E4%BE%8B%E5%A4%96\" title=\"2.4 \u7576 attributes \u6216 properties \u6539\u8b8a\u6642\uff0c\u5176\u5c0d\u61c9\u7684 properties \u6216 attributes \u4e5f\u6703\u8ddf\u8457\u6539\u8b8a\uff0c\u4f46\u6709\u4f8b\u5916\">2.4 \u7576 attributes \u6216 properties \u6539\u8b8a\u6642\uff0c\u5176\u5c0d\u61c9\u7684 properties \u6216 attributes \u4e5f\u6703\u8ddf\u8457\u6539\u8b8a\uff0c\u4f46\u6709\u4f8b\u5916<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/jimmyswebnote.com\/html-attributes-and-dom-properties\/#3_%E5%8F%83%E8%80%83%E8%B3%87%E6%96%99\" title=\"3. \u53c3\u8003\u8cc7\u6599\">3. \u53c3\u8003\u8cc7\u6599<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"1_HTML_attributes\"><\/span>1. HTML attributes<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u9996\u5148\u4f86\u7406\u89e3 HTML attributes (\u7279\u6027) \u6307\u7684\u5230\u5e95\u662f\u4ec0\u9ebc\u6771\u897f\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup line-numbers\">&lt;div id=\"root\" class=\"hello\">\n&lt;!-- id, class \u70ba div \u7684 attributes -->\n  &lt;img src=\"https:\/\/i.imgur.com\/AK2FguR.jpeg\" alt=\"\u5716\u7247\">\n  &lt;!-- src, alt \u70ba img \u7684 attributes -->\n&lt;\/div><\/code><\/pre>\n\n\n\n<p>\u7c21\u800c\u8a00\u4e4b\uff0c\u5728 HTML \u6a19\u7c64\u88e1\u7684\uff0c\u7a31\u4e4b\u70ba attributes \u3002<\/p>\n\n\n\n<p>\u63a5\u8457\u4f86\u4e86\u89e3\u4e00\u4e0b\uff0cHTML attributes \u6709\u4ec0\u9ebc\u7279\u6027\u3002<\/p>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"11_attributes_%E7%94%B1_HTML_%E5%AE%9A%E7%BE%A9%EF%BC%8C%E6%89%80%E6%9C%89%E5%87%BA%E7%8F%BE%E5%9C%A8_HTML_%E6%A8%99%E7%B1%A4%E5%85%A7%E7%9A%84%E6%8F%8F%E8%BF%B0%E7%9A%86%E7%82%BA_attributes\"><\/span>1.1 attributes \u7531 HTML \u5b9a\u7fa9\uff0c\u6240\u6709\u51fa\u73fe\u5728 HTML \u6a19\u7c64\u5167\u7684\u63cf\u8ff0\u7686\u70ba attributes<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"12_HTML_%E4%B8%AD%E7%9A%84%E6%A8%99%E7%B1%A4%E6%9C%89%E6%A8%99%E6%BA%96%E7%9A%84_attributes_%EF%BC%8C%E8%87%AA%E5%B7%B1%E4%B9%9F%E5%8F%AF%E4%BB%A5%E5%8F%A6%E5%A4%96%E5%AE%9A%E7%BE%A9_attributes\"><\/span>1.2 HTML \u4e2d\u7684\u6a19\u7c64\u6709\u6a19\u6e96\u7684 attributes \uff0c\u81ea\u5df1\u4e5f\u53ef\u4ee5\u53e6\u5916\u5b9a\u7fa9 attributes<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\u7576\u4f60\u5728 w3schools \u67e5\u8a62\u67d0\u500b HTML \u6a19\u7c64\u6642\uff0c\u901a\u5e38\u6703\u986f\u793a\u9019\u500b\u6a19\u7c64\u6709\u4ec0\u9ebc\u6a19\u6e96\u7684 attributes \uff0c\u4ee5\u53ca\u6bcf\u500b attribute \u7684\u4f5c\u7528\u662f\u4ec0\u9ebc\uff0c\u5982\u4e0b\u5716\u70ba<a href=\"https:\/\/www.w3schools.com\/tags\/tag_img.asp\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"rank-math-link\"> &lt;img&gt; \u7684\u6a19\u6e96 attributes<\/a>\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2020\/12\/html-attributes.png\"><img loading=\"lazy\" width=\"1024\" height=\"572\" src=\"https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2020\/12\/html-attributes-1024x572.png\" alt=\"HTML attributes\" class=\"wp-image-1462\" srcset=\"https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2020\/12\/html-attributes-1024x572.png 1024w, https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2020\/12\/html-attributes-300x168.png 300w, https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2020\/12\/html-attributes-768x429.png 768w, https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2020\/12\/html-attributes.png 1302w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"13_%E5%9C%A8_JavaScript_%E4%B8%AD_%E5%A6%82%E4%BD%95%E6%93%8D%E4%BD%9C_HTML_attributes\"><\/span>1.3 \u5728 JavaScript \u4e2d \u5982\u4f55\u64cd\u4f5c HTML attributes <span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>elem.hasAttribute(name) \u2014 \u6aa2\u67e5\u662f\u5426\u6709\u8a72 attribute\u3002<br>elem.getAttribute(name) \u2014 \u5b58\u53d6\u8a72 attribute\u3002<br>elem.setAttribute(name, value) \u2014 \u65b0\u589e attribute\u3002<br>elem.removeAttribute(name) \u2014 \u79fb\u9664\u8a72 attribute\u3002<br>elem.attributes \u2014\u5b58\u53d6\u6240\u6709 attributes\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup line-numbers\">&lt;div id=\"root\" class=\"hello\">\n  &lt;img id=\"image\" src=\"https:\/\/i.imgur.com\/AK2FguR.jpeg\" alt=\"\u5716\u7247\">\n&lt;\/div>\n&lt;script>\n  console.log(document.getElementById(\"root\").getAttribute(\"class\"))\n  \/\/ hello\n  console.log(document.getElementById(\"image\").getAttribute(\"src\"))\n  \/\/ https:\/\/i.imgur.com\/AK2FguR.jpeg\n&lt;\/script><\/code><\/pre>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"14_%E6%89%80%E6%9C%89%E7%9A%84_attributes_type_%E7%9A%86%E7%82%BA_string\"><\/span>1.4 \u6240\u6709\u7684 attributes type \u7686\u70ba string<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup line-numbers\">&lt;div id=\"root\" class=\"hello\" data-key=\"1\">\n  &lt;img id=\"image\" src=\"https:\/\/i.imgur.com\/AK2FguR.jpeg\" alt=\"\u5716\u7247\" >\n&lt;\/div>\n&lt;script>\n  console.log(typeof document.getElementById(\"root\").getAttribute(\"data-key\"))\n  \/\/ string\n  console.log(typeof document.getElementById(\"image\").getAttribute(\"src\"))\n  \/\/ string\n&lt;\/script><\/code><\/pre>\n\n\n\n<h2><span class=\"ez-toc-section\" id=\"2_DOM_properties\"><\/span>2. DOM properties<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u5728\u8ac7 DOM properties \u4e4b\u524d\u6211\u5011\u5f97\u5148\u4e86\u89e3\u4e00\u4e0b DOM \u662f\u4ec0\u9ebc\u3002<br>DOM \u662f document object model \uff0c\u662f\u700f\u89bd\u5668\u89e3\u6790\u5b8c\u5f8c\u6703\u7522\u751f\u7684\u4e00\u500b modal \uff0c\u5b83\u63d0\u4f9b\u4e86\u4e00\u500b\u6587\u4ef6\uff08\u6a39\uff09\u7684\u7d50\u69cb\u5316\u8868\u793a\u6cd5\uff0c\u4e26\u5b9a\u7fa9\u8b93\u7a0b\u5f0f\u53ef\u4ee5\u5b58\u53d6\u4e26\u6539\u8b8a\u6587\u4ef6\u67b6\u69cb\u3001\u98a8\u683c\u548c\u5167\u5bb9\u7684\u65b9\u6cd5\u3002<\/p>\n\n\n\n<p>\u7c21\u800c\u8a00\u4e4b\uff0c\u700f\u89bd\u5668\u6703\u5c07 HTML \u6a94\u89e3\u6790\u70ba DOM tree \uff0c\u65b9\u4fbf\u4f7f\u7528 JavaScript \u4f86\u9078\u53d6\u4e26\u8b8a\u66f4 HTML \u7684\u67b6\u69cb\u3001\u5167\u5bb9\u7b49\u7b49\u3002<\/p>\n\n\n\n<p>\u88dc\u500b\u700f\u89bd\u5668\u7684\u6e32\u67d3\u6a5f\u5236\u793a\u610f\u5716\uff1a<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2020\/12\/DOM-properties.png\"><img loading=\"lazy\" width=\"717\" height=\"190\" src=\"https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2020\/12\/DOM-properties.png\" alt=\"\" class=\"wp-image-1463\" srcset=\"https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2020\/12\/DOM-properties.png 717w, https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2020\/12\/DOM-properties-300x79.png 300w\" sizes=\"(max-width: 717px) 100vw, 717px\" \/><\/a><figcaption>image by <a href=\"https:\/\/github.com\/faressoft\" class=\"rank-math-link\" target=\"_blank\" rel=\"noopener\">faressoft<\/a><\/figcaption><\/figure><\/div>\n\n\n\n<p>\u4e5f\u5c31\u662f\u8aaa\uff0c\u57fa\u672c\u4e0a HTML attributes \u7d93\u904e\u89e3\u6790\u5f8c\uff0c\u5c31\u6703\u7522\u751f\u76f8\u5c0d\u61c9\u7684 DOM properties \u3002\u800c DOM \u5be6\u8cea\u4e0a\u5176\u5be6\u662f JavaScript object \uff0c\u56e0\u6b64\u5b58\u53d6 DOM properties \u7684\u65b9\u6cd5\u5c31\u548c\u5b58\u53d6 JavaScript \u4e2d\u7684 object \u4e00\u6a23\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup line-numbers\">&lt;div id=\"root\" class=\"hello\" data-key=\"1\">\n  &lt;img id=\"image\" src=\"https:\/\/i.imgur.com\/AK2FguR.jpeg\" alt=\"\u5716\u7247\" >\n&lt;\/div>\n&lt;script>\n  console.log(document.getElementById(\"root\").className)\n  \/\/ hello\n  \/\/ id, className \u5c31\u662f div \u7684 DOM properties\n  console.log(document.getElementById(\"image\").src)\n  \/\/ https:\/\/i.imgur.com\/AK2FguR.jpeg\n  \/\/ id, src, alt \u5c31\u662f img \u7684 DOM properties\n&lt;\/script><\/code><\/pre>\n\n\n\n<p>DOM properties \u7684\u7279\u6027\u5982\u4e0b :<\/p>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"21_%E6%A8%99%E6%BA%96%E7%9A%84_HTML_attributes_%E7%B6%93%E9%81%8E%E7%80%8F%E8%A6%BD%E5%99%A8%E8%A7%A3%E6%9E%90%E5%BE%8C%E6%9C%83%E7%94%A2%E7%94%9F%E7%9B%B8%E5%B0%8D%E6%87%89%E7%9A%84_DOM_properties\"><\/span>2.1 \u6a19\u6e96\u7684 HTML attributes \u7d93\u904e\u700f\u89bd\u5668\u89e3\u6790\u5f8c\u6703\u7522\u751f\u76f8\u5c0d\u61c9\u7684 DOM properties<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup line-numbers\">&lt;div id=\"root\" class=\"hello\" data-key=\"1\">\n  &lt;img id=\"image\" src=\"https:\/\/i.imgur.com\/AK2FguR.jpeg\" alt=\"\u5716\u7247\" >\n&lt;\/div>\n&lt;script>\n  console.log(document.getElementById(\"root\").className)\n  \/\/ hello\n  console.log(document.getElementById(\"image\").src)\n  \/\/ https:\/\/i.imgur.com\/AK2FguR.jpeg\n&lt;\/script><\/code><\/pre>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"22_%E8%87%AA%E5%AE%9A%E7%BE%A9%E7%9A%84_HTML_attributes_%E4%B8%A6%E4%B8%8D%E6%9C%83%E7%94%A2%E7%94%9F%E7%9B%B8%E5%B0%8D%E6%87%89%E7%9A%84_DOM_properties\"><\/span>2.2 \u81ea\u5b9a\u7fa9\u7684 HTML attributes \u4e26\u4e0d\u6703\u7522\u751f\u76f8\u5c0d\u61c9\u7684 DOM properties<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup line-numbers\">&lt;div id=\"root\" class=\"hello\" test=\"1\">\n  &lt;img id=\"image\" src=\"https:\/\/i.imgur.com\/AK2FguR.jpeg\" alt=\"\u5716\u7247\" >\n&lt;\/div>\n&lt;script>\n  console.log(document.getElementById(\"root\").test)\n  \/\/ undefined\n  console.log(document.getElementById(\"image\").src)\n  \/\/ https:\/\/i.imgur.com\/AK2FguR.jpeg\n&lt;\/script><\/code><\/pre>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"23_DOM_properties_%E7%9A%84_type_%E4%B8%8D%E4%B8%80%E5%AE%9A%E6%98%AF_string\"><\/span>2.3 DOM properties \u7684 type \u4e0d\u4e00\u5b9a\u662f string<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup line-numbers\">&lt;div id=\"root\" class=\"hello\" test=\"1\">\n  &lt;img id=\"image\" src=\"https:\/\/i.imgur.com\/AK2FguR.jpeg\" alt=\"\u5716\u7247\" >\n  &lt;input id=\"input\" type=\"text\" disabled>\n&lt;\/div>\n&lt;script>\n  console.log(typeof document.getElementById(\"root\").test)\n  \/\/ undefined\n  console.log(typeof document.getElementById(\"image\").src)\n  \/\/ string\n  console.log(typeof document.getElementById(\"input\").disabled)\n  \/\/ boolean\n&lt;\/script><\/code><\/pre>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"24_%E7%95%B6_attributes_%E6%88%96_properties_%E6%94%B9%E8%AE%8A%E6%99%82%EF%BC%8C%E5%85%B6%E5%B0%8D%E6%87%89%E7%9A%84_properties_%E6%88%96_attributes_%E4%B9%9F%E6%9C%83%E8%B7%9F%E8%91%97%E6%94%B9%E8%AE%8A%EF%BC%8C%E4%BD%86%E6%9C%89%E4%BE%8B%E5%A4%96\"><\/span>2.4 \u7576 attributes \u6216 properties \u6539\u8b8a\u6642\uff0c\u5176\u5c0d\u61c9\u7684 properties \u6216 attributes \u4e5f\u6703\u8ddf\u8457\u6539\u8b8a\uff0c\u4f46\u6709\u4f8b\u5916<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup line-numbers\">&lt;input id=\"input\" type=\"text\" class=\"test1\" value=\"20\">\n&lt;script>\n  const input = document.getElementById(\"input\")\n\n  console.log(input.getAttribute(\"class\"))\n  \/\/ test1\n  console.log(input.className)\n  \/\/ test1\n  input.className = \"test2\"\n  \/\/ \u6539\u8b8a property \u7684 value\n  console.log(input.getAttribute(\"class\"))\n  \/\/ test2\n  console.log(input.className)\n  \/\/ test2\n\n  console.log(input.getAttribute(\"value\"))\n  \/\/ 20\n  console.log(input.value)\n  \/\/ 20\n  input.value = 50\n  \/\/ \u6539\u8b8a property \u7684 value\n  console.log(input.getAttribute(\"value\"))\n  \/\/ 20\n  console.log(input.value)\n  \/\/ 50\n\n&lt;\/script><\/code><\/pre>\n\n\n\n<h2><span class=\"ez-toc-section\" id=\"3_%E5%8F%83%E8%80%83%E8%B3%87%E6%96%99\"><\/span>3. \u53c3\u8003\u8cc7\u6599<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><a aria-label=\"HTML attribute\u8207DOM property\u4e4b\u9593\u7684\u5340\u5225\uff1f (opens in a new tab)\" href=\"https:\/\/codertw.com\/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC\/26913\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"rank-math-link\">HTML attribute\u8207DOM property\u4e4b\u9593\u7684\u5340\u5225\uff1f<\/a><br><a aria-label=\"\u7279\u6027\u548c\u5c5e\u6027\uff08Attributes and properties\uff09 (opens in a new tab)\" href=\"https:\/\/zh.javascript.info\/dom-attributes-and-properties\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"rank-math-link\">\u7279\u6027\u548c\u5c5e\u6027\uff08Attributes and properties\uff09<\/a><br><a href=\"https:\/\/www.w3schools.com\/tags\/tag_img.asp\" class=\"rank-math-link\" target=\"_blank\" rel=\"noopener\">HTML&nbsp;&lt;img&gt;&nbsp;Tag<\/a><br><a aria-label=\"HTML&nbsp;Attribute&nbsp;Reference (opens in a new tab)\" href=\"https:\/\/www.w3schools.com\/tags\/ref_attributes.asp\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"rank-math-link\">HTML&nbsp;Attribute&nbsp;Reference<\/a><br><a href=\"https:\/\/developer.mozilla.org\/zh-TW\/docs\/Web\/API\/Document_Object_Model\" target=\"_blank\" aria-label=\"\u6587\u4ef6\u7269\u4ef6\u6a21\u578b(DOM) - Web APIs | MDN (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"rank-math-link\">\u6587\u4ef6\u7269\u4ef6\u6a21\u578b(DOM) &#8211; Web APIs | MDN<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>1. HTML attributes \u9996\u5148\u4f86\u7406\u89e3 HTML attributes (\u7279\u6027) \u6307\u7684\u5230\u5e95\u662f\u4ec0\u9ebc\u6771\u897f\u3002 \u7c21\u800c\u8a00\u4e4b\uff0c\u5728 HTML &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/jimmyswebnote.com\/html-attributes-and-dom-properties\/\"> <span class=\"screen-reader-text\">HTML Attributes \u8207 DOM Properties \u7684\u5340\u5225<\/span> Read More \u00bb<\/a><\/p>\n","protected":false},"author":1,"featured_media":1848,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[87,19],"tags":[89,88],"_links":{"self":[{"href":"https:\/\/jimmyswebnote.com\/wp-json\/wp\/v2\/posts\/1460"}],"collection":[{"href":"https:\/\/jimmyswebnote.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jimmyswebnote.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jimmyswebnote.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jimmyswebnote.com\/wp-json\/wp\/v2\/comments?post=1460"}],"version-history":[{"count":0,"href":"https:\/\/jimmyswebnote.com\/wp-json\/wp\/v2\/posts\/1460\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jimmyswebnote.com\/wp-json\/wp\/v2\/media\/1848"}],"wp:attachment":[{"href":"https:\/\/jimmyswebnote.com\/wp-json\/wp\/v2\/media?parent=1460"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jimmyswebnote.com\/wp-json\/wp\/v2\/categories?post=1460"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jimmyswebnote.com\/wp-json\/wp\/v2\/tags?post=1460"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}