{"id":598,"date":"2024-05-21T16:12:22","date_gmt":"2024-05-21T08:12:22","guid":{"rendered":"https:\/\/levin.ink\/?p=598"},"modified":"2024-06-17T23:34:46","modified_gmt":"2024-06-17T15:34:46","slug":"js-3-1-dom","status":"publish","type":"post","link":"https:\/\/levin.ink\/?p=598","title":{"rendered":"JS &#8211; 3-1 DOM"},"content":{"rendered":"<h1>\u6d4f\u89c8\u5668\u73af\u5883\uff0c\u89c4\u683c<\/h1>\n<p>JavaScript \u8bed\u8a00\u6700\u521d\u662f\u4e3a Web \u6d4f\u89c8\u5668\u521b\u5efa\u7684\u3002\u6b64\u540e\uff0c\u5b83\u5df2\u7ecf\u6f14\u53d8\u6210\u4e86\u4e00\u79cd\u5177\u6709\u591a\u79cd\u7528\u9014\u548c\u5e73\u53f0\u7684\u8bed\u8a00\u3002<br \/>\n\u5e73\u53f0\u53ef\u4ee5\u662f\u4e00\u4e2a\u6d4f\u89c8\u5668\uff0c\u4e00\u4e2a Web \u670d\u52a1\u5668\uff0c\u6216\u5176\u4ed6\u00a0<strong>\u4e3b\u673a\uff08host\uff09<\/strong>\uff0c\u751a\u81f3\u53ef\u4ee5\u662f\u4e00\u4e2a\u201c\u667a\u80fd\u201d\u5496\u5561\u673a\uff0c\u5982\u679c\u5b83\u80fd\u8fd0\u884c JavaScript \u7684\u8bdd\u3002\u5b83\u4eec\u6bcf\u4e2a\u90fd\u63d0\u4f9b\u4e86\u7279\u5b9a\u4e8e\u5e73\u53f0\u7684\u529f\u80fd\u3002JavaScript \u89c4\u8303\u5c06\u5176\u79f0\u4e3a\u00a0<strong>\u4e3b\u673a\u73af\u5883<\/strong>\u3002<br \/>\n\u4e3b\u673a\u73af\u5883\u63d0\u4f9b\u4e86\u81ea\u5df1\u7684\u5bf9\u8c61\u548c\u8bed\u8a00\u6838\u5fc3\u4ee5\u5916\u7684\u51fd\u6570\u3002Web \u6d4f\u89c8\u5668\u63d0\u4f9b\u4e86\u4e00\u79cd\u63a7\u5236\u7f51\u9875\u7684\u65b9\u6cd5\u3002Node.JS \u63d0\u4f9b\u4e86\u670d\u52a1\u5668\u7aef\u529f\u80fd\uff0c\u7b49\u7b49\u3002<br \/>\n\u4e0b\u9762\u662f JavaScript \u5728\u6d4f\u89c8\u5668\u4e2d\u8fd0\u884c\u65f6\u7684\u9e1f\u77b0\u793a\u610f\u56fe<br \/>\n<div class='fancybox-wrapper lazyload-container-unload' data-fancybox='post-images' href='https:\/\/levin.ink\/wp-content\/uploads\/2024\/05\/Pasted-image-20240508143601.png'><img class=\"lazyload lazyload-style-1\" src=\"data:image\/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPgo8c3ZnIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjZmZmZmZmMDAiPjxnPjwvZz4KPC9zdmc+\"  decoding=\"async\" data-original=\"https:\/\/levin.ink\/wp-content\/uploads\/2024\/05\/Pasted-image-20240508143601.png\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB\/AAffA0nNPuCLAAAAAElFTkSuQmCC\" alt=\"Pasted image 20240508143601.png\"><\/div><br \/>\n\u6709\u4e00\u4e2a\u53eb\u505a\u00a0<code>window<\/code>\u00a0\u7684\u201c\u6839\u201d\u5bf9\u8c61\u3002\u5b83\u6709\u4e24\u4e2a\u89d2\u8272\uff1a<\/p>\n<ol>\n<li>\u9996\u5148\uff0c\u5b83\u662f JavaScript \u4ee3\u7801\u7684\u5168\u5c40\u5bf9\u8c61\uff0c\u5982\u00a0<a href=\"https:\/\/zh.javascript.info\/global-object\">\u5168\u5c40\u5bf9\u8c61<\/a>\u00a0\u4e00\u7ae0\u6240\u8ff0\u3002<\/li>\n<li>\u5176\u6b21\uff0c\u5b83\u4ee3\u8868\u201c\u6d4f\u89c8\u5668\u7a97\u53e3\u201d\uff0c\u5e76\u63d0\u4f9b\u4e86\u63a7\u5236\u5b83\u7684\u65b9\u6cd5\u3002<\/li>\n<\/ol>\n<h2>\u6587\u6863\u5bf9\u8c61\u6a21\u578b DOM<\/h2>\n<p>\u6587\u6863\u5bf9\u8c61\u6a21\u578b\uff08Document Object Model\uff09\uff0c\u7b80\u79f0 DOM\uff0c\u5c06\u6240\u6709\u9875\u9762\u5185\u5bb9\u8868\u793a\u4e3a\u53ef\u4ee5\u4fee\u6539\u7684\u5bf9\u8c61\u3002<br \/>\n<code>document<\/code>\u00a0\u5bf9\u8c61\u662f\u9875\u9762\u7684\u4e3b\u8981\u201c\u5165\u53e3\u70b9\u201d\u3002\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u5b83\u6765\u66f4\u6539\u6216\u521b\u5efa\u9875\u9762\u4e0a\u7684\u4efb\u4f55\u5185\u5bb9\u3002<\/p>\n<pre><code class=\"language-js\">\/\/ \u5c06\u80cc\u666f\u989c\u8272\u4fee\u6539\u4e3a\u7ea2\u8272\ndocument.body.style.background = &quot;red&quot;;\n\n\/\/ \u5728 1 \u79d2\u540e\u5c06\u5176\u4fee\u6539\u56de\u6765\nsetTimeout(() =&gt; document.body.style.background = &quot;&quot;, 1000);\n<\/code><\/pre>\n<p>\u5728\u8fd9\u91cc\uff0c\u6211\u4eec\u4f7f\u7528\u4e86\u00a0<code>document.body.style<\/code>\uff0c\u4f46\u8fd8\u6709\u5f88\u591a\u5f88\u591a\u5176\u4ed6\u7684\u4e1c\u897f\u3002\u89c4\u8303\u4e2d\u6709\u5c5e\u6027\u548c\u65b9\u6cd5\u7684\u8be6\u7ec6\u63cf\u8ff0\uff1a<a href=\"https:\/\/dom.spec.whatwg.org\/\">DOM Living Standard<\/a>\u3002<\/p>\n<blockquote>\n<p>DOM \u4e0d\u4ec5\u4ec5\u7528\u4e8e\u6d4f\u89c8\u5668<br \/>\nDOM \u89c4\u8303\u89e3\u91ca\u4e86\u6587\u6863\u7684\u7ed3\u6784\uff0c\u5e76\u63d0\u4f9b\u4e86\u64cd\u4f5c\u6587\u6863\u7684\u5bf9\u8c61\u3002\u6709\u7684\u975e\u6d4f\u89c8\u5668\u8bbe\u5907\u4e5f\u4f7f\u7528 DOM\u3002<br \/>\n\u4f8b\u5982\uff0c\u4e0b\u8f7d HTML \u6587\u4ef6\u5e76\u5bf9\u5176\u8fdb\u884c\u5904\u7406\u7684\u670d\u52a1\u5668\u7aef\u811a\u672c\u4e5f\u53ef\u4ee5\u4f7f\u7528 DOM\u3002\u4f46\u5b83\u4eec\u53ef\u80fd\u4ec5\u652f\u6301\u90e8\u5206\u89c4\u8303\u4e2d\u7684\u5185\u5bb9\u3002<\/p>\n<\/blockquote>\n<blockquote>\n<p>\u7528\u4e8e\u6837\u5f0f\u7684 CSSOM<br \/>\n\u53e6\u5916\u4e5f\u6709\u4e00\u4efd\u9488\u5bf9 CSS \u89c4\u5219\u548c\u6837\u5f0f\u8868\u7684\u3001\u5355\u72ec\u7684\u89c4\u8303\u00a0<a href=\"https:\/\/www.w3.org\/TR\/cssom-1\/\">CSS Object Model (CSSOM)<\/a>\uff0c\u8fd9\u4efd\u89c4\u8303\u89e3\u91ca\u4e86\u5982\u4f55\u5c06 CSS \u8868\u793a\u4e3a\u5bf9\u8c61\uff0c\u4ee5\u53ca\u5982\u4f55\u8bfb\u5199\u8fd9\u4e9b\u5bf9\u8c61\u3002<br \/>\n\u5f53\u6211\u4eec\u4fee\u6539\u6587\u6863\u7684\u6837\u5f0f\u89c4\u5219\u65f6\uff0cCSSOM \u4e0e DOM \u662f\u4e00\u8d77\u4f7f\u7528\u7684\u3002\u4f46\u5b9e\u9645\u4e0a\uff0c\u5f88\u5c11\u9700\u8981 CSSOM\uff0c\u56e0\u4e3a\u6211\u4eec\u5f88\u5c11\u9700\u8981\u4ece JavaScript \u4e2d\u4fee\u6539 CSS \u89c4\u5219\uff08\u6211\u4eec\u901a\u5e38\u53ea\u662f\u6dfb\u52a0\/\u79fb\u9664\u4e00\u4e9b CSS \u7c7b\uff0c\u800c\u4e0d\u662f\u76f4\u63a5\u4fee\u6539\u5176\u4e2d\u7684 CSS \u89c4\u5219\uff09\uff0c\u4f46\u8fd9\u4e5f\u662f\u53ef\u884c\u7684\u3002<\/p>\n<\/blockquote>\n<h2>\u6d4f\u89c8\u5668\u5bf9\u8c61\u6a21\u578b BOM<\/h2>\n<p>\u6d4f\u89c8\u5668\u5bf9\u8c61\u6a21\u578b\uff08Browser Object Model\uff09\uff0c\u7b80\u79f0 BOM\uff0c\u8868\u793a\u7531\u6d4f\u89c8\u5668\uff08\u4e3b\u673a\u73af\u5883\uff09\u63d0\u4f9b\u7684\u7528\u4e8e\u5904\u7406\u6587\u6863\uff08document\uff09\u4e4b\u5916\u7684\u6240\u6709\u5185\u5bb9\u7684\u5176\u4ed6\u5bf9\u8c61\u3002<br \/>\n\u4f8b\u5982\uff1a<\/p>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/zh\/docs\/Web\/API\/Window\/navigator\">navigator<\/a>\u00a0\u5bf9\u8c61\u63d0\u4f9b\u4e86\u6709\u5173\u6d4f\u89c8\u5668\u548c\u64cd\u4f5c\u7cfb\u7edf\u7684\u80cc\u666f\u4fe1\u606f\u3002navigator \u6709\u8bb8\u591a\u5c5e\u6027\uff0c\u4f46\u662f\u6700\u5e7f\u4e3a\u4eba\u77e5\u7684\u4e24\u4e2a\u5c5e\u6027\u662f\uff1a<code>navigator.userAgent<\/code>\u00a0\u2014\u2014 \u5173\u4e8e\u5f53\u524d\u6d4f\u89c8\u5668\uff0c<code>navigator.platform<\/code>\u00a0\u2014\u2014 \u5173\u4e8e\u5e73\u53f0\uff08\u6709\u52a9\u4e8e\u533a\u5206 Windows\/Linux\/Mac \u7b49\uff09\u3002<\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/zh\/docs\/Web\/API\/Window\/location\">location<\/a>\u00a0\u5bf9\u8c61\u5141\u8bb8\u6211\u4eec\u8bfb\u53d6\u5f53\u524d URL\uff0c\u5e76\u4e14\u53ef\u4ee5\u5c06\u6d4f\u89c8\u5668\u91cd\u5b9a\u5411\u5230\u65b0\u7684 URL\u3002<\/li>\n<\/ul>\n<pre><code class=\"language-js\">alert(location.href); \/\/ \u663e\u793a\u5f53\u524d URL\nif (confirm(&quot;Go to Wikipedia?&quot;)) {\n  location.href = &quot;https:\/\/wikipedia.org&quot;; \/\/ \u5c06\u6d4f\u89c8\u5668\u91cd\u5b9a\u5411\u5230\u53e6\u4e00\u4e2a URL\n}\n<\/code><\/pre>\n<p>\u51fd\u6570\u00a0<code>alert\/confirm\/prompt<\/code>\u00a0\u4e5f\u662f BOM \u7684\u4e00\u90e8\u5206\uff1a\u5b83\u4eec\u4e0e\u6587\u6863\uff08document\uff09\u6ca1\u6709\u76f4\u63a5\u5173\u7cfb\uff0c\u4f46\u5b83\u4ee3\u8868\u4e86\u4e0e\u7528\u6237\u901a\u4fe1\u7684\u7eaf\u6d4f\u89c8\u5668\u65b9\u6cd5\u3002<\/p>\n<blockquote>\n<p>\u89c4\u8303<br \/>\nBOM \u662f\u901a\u7528\u00a0<a href=\"https:\/\/html.spec.whatwg.org\/\">HTML \u89c4\u8303<\/a>\u00a0\u7684\u4e00\u90e8\u5206\u3002<br \/>\n\u662f\u7684\uff0c\u4f60\u6ca1\u542c\u9519\u3002\u5728\u00a0<a href=\"https:\/\/html.spec.whatwg.org\/\">https:\/\/html.spec.whatwg.org<\/a>\u00a0\u4e2d\u7684 HTML \u89c4\u8303\u4e0d\u4ec5\u662f\u5173\u4e8e\u201cHTML \u8bed\u8a00\u201d\uff08\u6807\u7b7e\uff0c\u7279\u6027\uff09\u7684\uff0c\u8fd8\u6db5\u76d6\u4e86\u4e00\u5806\u5bf9\u8c61\u3001\u65b9\u6cd5\u548c\u6d4f\u89c8\u5668\u7279\u5b9a\u7684 DOM \u6269\u5c55\u3002\u8fd9\u5c31\u662f\u201c\u5e7f\u4e49\u7684 HTML\u201d\u3002\u6b64\u5916\uff0c\u67d0\u4e9b\u90e8\u5206\u4e5f\u6709\u5176\u4ed6\u7684\u89c4\u8303\uff0c\u5b83\u4eec\u88ab\u5217\u5728\u00a0<a href=\"https:\/\/spec.whatwg.org\/\">https:\/\/spec.whatwg.org<\/a>\u00a0\u4e2d\u3002<\/p>\n<\/blockquote>\n<h1>DOM \u6811<\/h1>\n<p>HTML \u6587\u6863\u7684\u4e3b\u5e72\u662f\u6807\u7b7e\uff08tag\uff09\u3002<br \/>\n\u6839\u636e\u6587\u6863\u5bf9\u8c61\u6a21\u578b\uff08DOM\uff09\uff0c\u6bcf\u4e2a HTML \u6807\u7b7e\u90fd\u662f\u4e00\u4e2a\u5bf9\u8c61\u3002\u5d4c\u5957\u7684\u6807\u7b7e\u662f\u95ed\u5408\u6807\u7b7e\u7684\u201c\u5b50\u6807\u7b7e\uff08children\uff09\u201d\u3002\u6807\u7b7e\u5185\u7684\u6587\u672c\u4e5f\u662f\u4e00\u4e2a\u5bf9\u8c61\u3002<br \/>\n\u6240\u6709\u8fd9\u4e9b\u5bf9\u8c61\u90fd\u53ef\u4ee5\u901a\u8fc7 JavaScript \u6765\u8bbf\u95ee\uff0c\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u5b83\u4eec\u6765\u4fee\u6539\u9875\u9762\u3002<br \/>\n\u4f8b\u5982\uff0c<code>document.body<\/code>\u00a0\u662f\u8868\u793a\u00a0<code>&lt;body&gt;<\/code>\u00a0\u6807\u7b7e\u7684\u5bf9\u8c61\u3002<br \/>\n\u5728\u8fd9\uff0c\u6211\u4eec\u4f7f\u7528\u4e86\u00a0<code>style.background<\/code>\u00a0\u6765\u4fee\u6539\u00a0<code>document.body<\/code>\u00a0\u7684\u80cc\u666f\u989c\u8272\uff0c\u4f46\u662f\u8fd8\u6709\u5f88\u591a\u5176\u4ed6\u7684\u5c5e\u6027\uff0c\u4f8b\u5982\uff1a<\/p>\n<ul>\n<li><code>innerHTML<\/code>\u00a0\u2014\u2014 \u8282\u70b9\u7684 HTML \u5185\u5bb9\u3002<\/li>\n<li><code>offsetWidth<\/code>\u00a0\u2014\u2014 \u8282\u70b9\u5bbd\u5ea6\uff08\u4ee5\u50cf\u7d20\u5ea6\u91cf\uff09<\/li>\n<li>\u2026\u2026\u7b49\u3002<br \/>\n\u5f88\u5feb\uff0c\u6211\u4eec\u5c06\u5b66\u4e60\u66f4\u591a\u64cd\u4f5c DOM \u7684\u65b9\u6cd5\uff0c\u4f46\u9996\u5148\u6211\u4eec\u9700\u8981\u4e86\u89e3 DOM \u7684\u7ed3\u6784\u3002<\/li>\n<\/ul>\n<h2>DOM\u4f8b\u5b50<\/h2>\n<pre><code class=\"language-html\">&lt;!DOCTYPE HTML&gt;\n&lt;html&gt;\n&lt;head&gt;\n  &lt;title&gt;About elk&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  The truth about elk.\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<p>DOM \u5c06 HTML \u8868\u793a\u4e3a\u6807\u7b7e\u7684\u6811\u5f62\u7ed3\u6784\u3002<br \/>\n&lt;svg width=&quot;690&quot; height=&quot;320&quot;&gt;&lt;g transform=&quot;translate(20,30)&quot;&gt;&lt;path class=&quot;link&quot; d=&quot;M7,0L7,30L40.333333333333336,30&quot; style=&quot;fill: none; stroke: rgb(190, 195, 199); stroke-width: 1px;&quot;&gt;&lt;\/path&gt;&lt;path class=&quot;link&quot; d=&quot;M7,0L7,180L40.333333333333336,180&quot; style=&quot;fill: none; stroke: rgb(190, 195, 199); stroke-width: 1px;&quot;&gt;&lt;\/path&gt;&lt;path class=&quot;link&quot; d=&quot;M7,0L7,210L40.333333333333336,210&quot; style=&quot;fill: none; stroke: rgb(190, 195, 199); stroke-width: 1px;&quot;&gt;&lt;\/path&gt;&lt;path class=&quot;link&quot; d=&quot;M40.333333333333336,210L40.333333333333336,240L73.66666666666667,240&quot; style=&quot;fill: none; stroke: rgb(190, 195, 199); stroke-width: 1px;&quot;&gt;&lt;\/path&gt;&lt;path class=&quot;link&quot; d=&quot;M40.333333333333336,30L40.333333333333336,60L73.66666666666667,60&quot; style=&quot;fill: none; stroke: rgb(190, 195, 199); stroke-width: 1px;&quot;&gt;&lt;\/path&gt;&lt;path class=&quot;link&quot; d=&quot;M40.333333333333336,30L40.333333333333336,90L73.66666666666667,90&quot; style=&quot;fill: none; stroke: rgb(190, 195, 199); stroke-width: 1px;&quot;&gt;&lt;\/path&gt;&lt;path class=&quot;link&quot; d=&quot;M40.333333333333336,30L40.333333333333336,150L73.66666666666667,150&quot; style=&quot;fill: none; stroke: rgb(190, 195, 199); stroke-width: 1px;&quot;&gt;&lt;\/path&gt;&lt;path class=&quot;link&quot; d=&quot;M73.66666666666667,90L73.66666666666667,120L107,120&quot; style=&quot;fill: none; stroke: rgb(190, 195, 199); stroke-width: 1px;&quot;&gt;&lt;\/path&gt;&lt;g class=&quot;node&quot; transform=&quot;translate(0,0)&quot; style=&quot;opacity: 1;&quot;&gt;&lt;rect y=&quot;-12.5&quot; x=&quot;-5&quot; rx=&quot;4&quot; ry=&quot;4&quot; height=&quot;25&quot; width=&quot;280&quot; style=&quot;fill: rgb(206, 224, 244); cursor: pointer;&quot;&gt;&lt;\/rect&gt;&lt;text dy=&quot;4.5&quot; dx=&quot;3.5&quot; style=&quot;fill: black; pointer-events: none;&quot;&gt;\u25be &lt;\/text&gt;&lt;text dy=&quot;4.5&quot; dx=&quot;16.5&quot; style=&quot;font: 14px Consolas, &quot;Lucida Console&quot;, Menlo, Monaco, monospace; fill: rgb(51, 51, 51); pointer-events: none;&quot;&gt;HTML&lt;\/text&gt;&lt;\/g&gt;&lt;g class=&quot;node&quot; transform=&quot;translate(33.33333206176758,30)&quot; style=&quot;opacity: 1;&quot;&gt;&lt;rect y=&quot;-12.5&quot; x=&quot;-5&quot; rx=&quot;4&quot; ry=&quot;4&quot; height=&quot;25&quot; width=&quot;280&quot; style=&quot;fill: rgb(206, 224, 244); cursor: pointer;&quot;&gt;&lt;\/rect&gt;&lt;text dy=&quot;4.5&quot; dx=&quot;3.5&quot; style=&quot;fill: black; pointer-events: none;&quot;&gt;\u25be &lt;\/text&gt;&lt;text dy=&quot;4.5&quot; dx=&quot;16.5&quot; style=&quot;font: 14px Consolas, &quot;Lucida Console&quot;, Menlo, Monaco, monospace; fill: rgb(51, 51, 51); pointer-events: none;&quot;&gt;HEAD&lt;\/text&gt;&lt;\/g&gt;&lt;g class=&quot;node&quot; transform=&quot;translate(33.33333206176758,180)&quot; style=&quot;opacity: 1;&quot;&gt;&lt;rect y=&quot;-12.5&quot; x=&quot;-5&quot; rx=&quot;4&quot; ry=&quot;4&quot; height=&quot;25&quot; width=&quot;280&quot; style=&quot;fill: rgb(255, 222, 153); cursor: pointer;&quot;&gt;&lt;\/rect&gt;&lt;text dy=&quot;4.5&quot; dx=&quot;3.5&quot; style=&quot;fill: black; pointer-events: none;&quot;&gt;&lt;\/text&gt;&lt;text dy=&quot;4.5&quot; dx=&quot;5.5&quot; style=&quot;font: 14px Consolas, &quot;Lucida Console&quot;, Menlo, Monaco, monospace; fill: rgb(51, 51, 51); pointer-events: none;&quot;&gt;#text \u21b5&lt;\/text&gt;&lt;\/g&gt;&lt;g class=&quot;node&quot; transform=&quot;translate(33.33333206176758,210)&quot; style=&quot;opacity: 1;&quot;&gt;&lt;rect y=&quot;-12.5&quot; x=&quot;-5&quot; rx=&quot;4&quot; ry=&quot;4&quot; height=&quot;25&quot; width=&quot;280&quot; style=&quot;fill: rgb(206, 224, 244); cursor: pointer;&quot;&gt;&lt;\/rect&gt;&lt;text dy=&quot;4.5&quot; dx=&quot;3.5&quot; style=&quot;fill: black; pointer-events: none;&quot;&gt;\u25be &lt;\/text&gt;&lt;text dy=&quot;4.5&quot; dx=&quot;16.5&quot; style=&quot;font: 14px Consolas, &quot;Lucida Console&quot;, Menlo, Monaco, monospace; fill: rgb(51, 51, 51); pointer-events: none;&quot;&gt;BODY&lt;\/text&gt;&lt;\/g&gt;&lt;g class=&quot;node&quot; transform=&quot;translate(66.66666412353516,240)&quot; style=&quot;opacity: 1;&quot;&gt;&lt;rect y=&quot;-12.5&quot; x=&quot;-5&quot; rx=&quot;4&quot; ry=&quot;4&quot; height=&quot;25&quot; width=&quot;280&quot; style=&quot;fill: rgb(255, 222, 153); cursor: pointer;&quot;&gt;&lt;\/rect&gt;&lt;text dy=&quot;4.5&quot; dx=&quot;3.5&quot; style=&quot;fill: black; pointer-events: none;&quot;&gt;&lt;\/text&gt;&lt;text dy=&quot;4.5&quot; dx=&quot;5.5&quot; style=&quot;font: 14px Consolas, &quot;Lucida Console&quot;, Menlo, Monaco, monospace; fill: rgb(51, 51, 51); pointer-events: none;&quot;&gt;#text \u21b5\u2423\u2423The truth about elk.\u21b5&lt;\/text&gt;&lt;\/g&gt;&lt;g class=&quot;node&quot; transform=&quot;translate(66.66666412353516,60)&quot; style=&quot;opacity: 1;&quot;&gt;&lt;rect y=&quot;-12.5&quot; x=&quot;-5&quot; rx=&quot;4&quot; ry=&quot;4&quot; height=&quot;25&quot; width=&quot;280&quot; style=&quot;fill: rgb(255, 222, 153); cursor: pointer;&quot;&gt;&lt;\/rect&gt;&lt;text dy=&quot;4.5&quot; dx=&quot;3.5&quot; style=&quot;fill: black; pointer-events: none;&quot;&gt;&lt;\/text&gt;&lt;text dy=&quot;4.5&quot; dx=&quot;5.5&quot; style=&quot;font: 14px Consolas, &quot;Lucida Console&quot;, Menlo, Monaco, monospace; fill: rgb(51, 51, 51); pointer-events: none;&quot;&gt;#text \u21b5\u2423\u2423&lt;\/text&gt;&lt;\/g&gt;&lt;g class=&quot;node&quot; transform=&quot;translate(66.66666412353516,90)&quot; style=&quot;opacity: 1;&quot;&gt;&lt;rect y=&quot;-12.5&quot; x=&quot;-5&quot; rx=&quot;4&quot; ry=&quot;4&quot; height=&quot;25&quot; width=&quot;280&quot; style=&quot;fill: rgb(206, 224, 244); cursor: pointer;&quot;&gt;&lt;\/rect&gt;&lt;text dy=&quot;4.5&quot; dx=&quot;3.5&quot; style=&quot;fill: black; pointer-events: none;&quot;&gt;\u25be &lt;\/text&gt;&lt;text dy=&quot;4.5&quot; dx=&quot;16.5&quot; style=&quot;font: 14px Consolas, &quot;Lucida Console&quot;, Menlo, Monaco, monospace; fill: rgb(51, 51, 51); pointer-events: none;&quot;&gt;TITLE&lt;\/text&gt;&lt;\/g&gt;&lt;g class=&quot;node&quot; transform=&quot;translate(100,120)&quot; style=&quot;opacity: 1;&quot;&gt;&lt;rect y=&quot;-12.5&quot; x=&quot;-5&quot; rx=&quot;4&quot; ry=&quot;4&quot; height=&quot;25&quot; width=&quot;280&quot; style=&quot;fill: rgb(255, 222, 153); cursor: pointer;&quot;&gt;&lt;\/rect&gt;&lt;text dy=&quot;4.5&quot; dx=&quot;3.5&quot; style=&quot;fill: black; pointer-events: none;&quot;&gt;&lt;\/text&gt;&lt;text dy=&quot;4.5&quot; dx=&quot;5.5&quot; style=&quot;font: 14px Consolas, &quot;Lucida Console&quot;, Menlo, Monaco, monospace; fill: rgb(51, 51, 51); pointer-events: none;&quot;&gt;#text About elk&lt;\/text&gt;&lt;\/g&gt;&lt;g class=&quot;node&quot; transform=&quot;translate(66.66666412353516,150)&quot; style=&quot;opacity: 1;&quot;&gt;&lt;rect y=&quot;-12.5&quot; x=&quot;-5&quot; rx=&quot;4&quot; ry=&quot;4&quot; height=&quot;25&quot; width=&quot;280&quot; style=&quot;fill: rgb(255, 222, 153); cursor: pointer;&quot;&gt;&lt;\/rect&gt;&lt;text dy=&quot;4.5&quot; dx=&quot;3.5&quot; style=&quot;fill: black; pointer-events: none;&quot;&gt;&lt;\/text&gt;&lt;text dy=&quot;4.5&quot; dx=&quot;5.5&quot; style=&quot;font: 14px Consolas, &quot;Lucida Console&quot;, Menlo, Monaco, monospace; fill: rgb(51, 51, 51); pointer-events: none;&quot;&gt;#text \u21b5&lt;\/text&gt;&lt;\/g&gt;&lt;\/g&gt;&lt;\/svg&gt;<br \/>\n\u6bcf\u4e2a\u6811\u7684\u8282\u70b9\u90fd\u662f\u4e00\u4e2a\u5bf9\u8c61\u3002<br \/>\n\u6807\u7b7e\u88ab\u79f0\u4e3a\u00a0<strong>\u5143\u7d20\u8282\u70b9<\/strong>\uff08\u6216\u8005\u4ec5\u4ec5\u662f\u5143\u7d20\uff09\uff0c\u5e76\u5f62\u6210\u4e86\u6811\u72b6\u7ed3\u6784\uff1a<code>&lt;html&gt;<\/code>\u00a0\u5728\u6839\u8282\u70b9\uff0c<code>&lt;head&gt;<\/code>\u00a0\u548c\u00a0<code>&lt;body&gt;<\/code>\u00a0\u662f\u5176\u5b50\u9879\uff0c\u7b49\u3002<br \/>\n\u5143\u7d20\u5185\u7684\u6587\u672c\u5f62\u6210\u00a0<strong>\u6587\u672c\u8282\u70b9<\/strong>\uff0c\u88ab\u6807\u8bb0\u4e3a\u00a0<code>\uff03text<\/code>\u3002\u4e00\u4e2a\u6587\u672c\u8282\u70b9\u53ea\u5305\u542b\u4e00\u4e2a\u5b57\u7b26\u4e32\u3002\u5b83\u6ca1\u6709\u5b50\u9879\uff0c\u5e76\u4e14\u603b\u662f\u6811\u7684\u53f6\u5b50\u3002<br \/>\n\u4f8b\u5982\uff0c<code>&lt;title&gt;<\/code>\u00a0\u6807\u7b7e\u91cc\u9762\u6709\u6587\u672c\u00a0<code>&quot;About elk&quot;<\/code>\u3002<br \/>\n\u8bf7\u6ce8\u610f\u6587\u672c\u8282\u70b9\u4e2d\u7684\u7279\u6b8a\u5b57\u7b26\uff1a<\/p>\n<ul>\n<li>\u6362\u884c\u7b26\uff1a<code>\u21b5<\/code>\uff08\u5728 JavaScript \u4e2d\u4e3a\u00a0<code>\\n<\/code>\uff09<\/li>\n<li>\u7a7a\u683c\uff1a<code>\u2423<\/code><br \/>\n\u7a7a\u683c\u548c\u6362\u884c\u7b26\u90fd\u662f\u5b8c\u5168\u6709\u6548\u7684\u5b57\u7b26\uff0c\u5c31\u50cf\u5b57\u6bcd\u548c\u6570\u5b57\u3002\u5b83\u4eec\u5f62\u6210\u6587\u672c\u8282\u70b9\u5e76\u6210\u4e3a DOM \u7684\u4e00\u90e8\u5206\u3002\u6240\u4ee5\uff0c\u4f8b\u5982\uff0c\u5728\u4e0a\u9762\u7684\u793a\u4f8b\u4e2d\uff0c<code>&lt;head&gt;<\/code>\u00a0\u6807\u7b7e\u4e2d\u7684\u00a0<code>&lt;title&gt;<\/code>\u00a0\u6807\u7b7e\u524d\u9762\u5305\u542b\u4e86\u4e00\u4e9b\u7a7a\u683c\uff0c\u5e76\u4e14\u8be5\u6587\u672c\u53d8\u6210\u4e86\u4e00\u4e2a\u00a0<code>#text<\/code>\u00a0\u8282\u70b9\uff08\u5b83\u53ea\u5305\u542b\u4e00\u4e2a\u6362\u884c\u7b26\u548c\u4e00\u4e9b\u7a7a\u683c\uff09\u3002<br \/>\n\u53ea\u6709\u4e24\u4e2a\u9876\u7ea7\u6392\u9664\u9879\uff1a<\/li>\n<\/ul>\n<ol>\n<li>\u7531\u4e8e\u5386\u53f2\u539f\u56e0\uff0c<code>&lt;head&gt;<\/code>\u00a0\u4e4b\u524d\u7684\u7a7a\u683c\u548c\u6362\u884c\u7b26\u5747\u88ab\u5ffd\u7565\u3002<\/li>\n<li>\u5982\u679c\u6211\u4eec\u5728\u00a0<code>&lt;\/body&gt;<\/code>\u00a0\u4e4b\u540e\u653e\u7f6e\u4e00\u4e9b\u4e1c\u897f\uff0c\u90a3\u4e48\u5b83\u4f1a\u88ab\u81ea\u52a8\u79fb\u52a8\u5230\u00a0<code>body<\/code>\u00a0\u5185\uff0c\u5e76\u5904\u4e8e\u00a0<code>body<\/code>\u00a0\u4e2d\u7684\u6700\u4e0b\u65b9\uff0c\u56e0\u4e3a HTML \u89c4\u8303\u8981\u6c42\u6240\u6709\u5185\u5bb9\u5fc5\u987b\u4f4d\u4e8e\u00a0<code>&lt;body&gt;<\/code>\u00a0\u5185\u3002\u6240\u4ee5\u00a0<code>&lt;\/body&gt;<\/code>\u00a0\u4e4b\u540e\u4e0d\u80fd\u6709\u7a7a\u683c\u3002<br \/>\n\u5728\u5176\u4ed6\u60c5\u51b5\u4e0b\uff0c\u4e00\u5207\u90fd\u5f88\u7b80\u5355 \u2014\u2014 \u5982\u679c\u6587\u6863\u4e2d\u6709\u7a7a\u683c\uff08\u5c31\u50cf\u4efb\u4f55\u5b57\u7b26\u4e00\u6837\uff09\uff0c\u90a3\u4e48\u5b83\u4eec\u5c06\u6210\u4e3a DOM \u4e2d\u7684\u6587\u672c\u8282\u70b9\uff0c\u800c\u5982\u679c\u6211\u4eec\u5220\u9664\u5b83\u4eec\uff0c\u5219\u4e0d\u4f1a\u6709\u4efb\u4f55\u7a7a\u683c\u3002<\/li>\n<\/ol>\n<blockquote>\n<p>\u5b57\u7b26\u4e32\u5f00\u5934\/\u7ed3\u5c3e\u5904\u7684\u7a7a\u683c\uff0c\u4ee5\u53ca\u53ea\u6709\u7a7a\u683c\u7684\u6587\u672c\u8282\u70b9\uff0c\u901a\u5e38\u4f1a\u88ab\u5de5\u5177\u9690\u85cf<br \/>\n\u4e0e DOM \u4e00\u8d77\u4f7f\u7528\u7684\u6d4f\u89c8\u5668\u5de5\u5177\uff08\u5373\u5c06\u4ecb\u7ecd\uff09\u901a\u5e38\u4e0d\u4f1a\u5728\u6587\u672c\u7684\u5f00\u59cb\/\u7ed3\u5c3e\u663e\u793a\u7a7a\u683c\uff0c\u5e76\u4e14\u5728\u6807\u7b7e\u4e4b\u95f4\u4e5f\u4e0d\u4f1a\u663e\u793a\u7a7a\u6587\u672c\u8282\u70b9\uff08\u6362\u884c\u7b26\uff09\u3002<br \/>\n\u5f00\u53d1\u8005\u5de5\u5177\u901a\u8fc7\u8fd9\u79cd\u65b9\u5f0f\u8282\u7701\u5c4f\u5e55\u7a7a\u95f4\u3002<br \/>\n\u5728\u672c\u6559\u7a0b\u4e2d\uff0c\u5982\u679c\u8fd9\u4e9b\u7a7a\u683c\u548c\u7a7a\u6587\u672c\u8282\u70b9\u65e0\u5173\u7d27\u8981\u65f6\uff0c\u6211\u4eec\u5728\u540e\u9762\u51fa\u73b0\u7684\u5173\u4e8e DOM \u7684\u793a\u610f\u56fe\u4e2d\u4f1a\u5ffd\u7565\u5b83\u4eec\u3002\u8fd9\u6837\u7684\u7a7a\u683c\u901a\u5e38\u4e0d\u4f1a\u5f71\u54cd\u6587\u6863\u7684\u663e\u793a\u65b9\u5f0f\u3002<\/p>\n<\/blockquote>\n<h2>\u81ea\u52a8\u4fee\u6b63<\/h2>\n<p>\u5982\u679c\u6d4f\u89c8\u5668\u9047\u5230\u683c\u5f0f\u4e0d\u6b63\u786e\u7684 HTML\uff0c\u5b83\u4f1a\u5728\u5f62\u6210 DOM \u65f6\u81ea\u52a8\u66f4\u6b63\u5b83\u3002<br \/>\n\u4f8b\u5982\uff0c\u9876\u7ea7\u6807\u7b7e\u603b\u662f\u00a0<code>&lt;html&gt;<\/code>\u3002\u5373\u4f7f\u5b83\u4e0d\u5b58\u5728\u4e8e\u6587\u6863\u4e2d \u2014 \u5b83\u4e5f\u4f1a\u51fa\u73b0\u5728 DOM \u4e2d\uff0c\u56e0\u4e3a\u6d4f\u89c8\u5668\u4f1a\u521b\u5efa\u5b83\u3002\u5bf9\u4e8e\u00a0<code>&lt;body&gt;<\/code>\u00a0\u4e5f\u662f\u4e00\u6837\u3002<br \/>\n\u4f8b\u5982\uff0c\u5982\u679c\u4e00\u4e2a HTML \u6587\u4ef6\u4e2d\u53ea\u6709\u4e00\u4e2a\u5355\u8bcd \u201cHello\u201d\uff0c\u6d4f\u89c8\u5668\u5219\u4f1a\u628a\u5b83\u5305\u88c5\u5230\u00a0<code>&lt;html&gt;<\/code>\u00a0\u548c\u00a0<code>&lt;body&gt;<\/code>\u00a0\u4e2d\uff0c\u5e76\u4e14\u4f1a\u6dfb\u52a0\u6240\u9700\u7684\u00a0<code>&lt;head&gt;<\/code><br \/>\n\u5728\u751f\u6210 DOM \u65f6\uff0c\u6d4f\u89c8\u5668\u4f1a\u81ea\u52a8\u5904\u7406\u6587\u6863\u4e2d\u7684\u9519\u8bef\uff0c\u5173\u95ed\u6807\u7b7e\u7b49\u3002<\/p>\n<blockquote>\n<p>\u8868\u683c\u6c38\u8fdc\u6709\u00a0<code>&lt;tbody&gt;<\/code><br \/>\n\u8868\u683c\u662f\u4e00\u4e2a\u6709\u8da3\u7684\u201c\u7279\u6b8a\u7684\u4f8b\u5b50\u201d\u3002\u6309\u7167 DOM \u89c4\u8303\uff0c\u5b83\u4eec\u5fc5\u987b\u5177\u6709\u00a0<code>&lt;tbody&gt;<\/code>\u00a0\u6807\u7b7e\uff0c\u4f46 HTML \u6587\u672c\u53ef\u80fd\u4f1a\u5ffd\u7565\u5b83\u3002\u7136\u540e\u6d4f\u89c8\u5668\u5728\u521b\u5efa DOM \u65f6\uff0c\u81ea\u52a8\u5730\u521b\u5efa\u4e86\u00a0<code>&lt;tbody&gt;<\/code>\u3002<\/p>\n<\/blockquote>\n<h2>\u5176\u4ed6\u8282\u70b9\u7c7b\u578b<\/h2>\n<p>\u9664\u4e86\u5143\u7d20\u548c\u6587\u672c\u8282\u70b9\u5916\uff0c\u8fd8\u6709\u4e00\u4e9b\u5176\u4ed6\u7684\u8282\u70b9\u7c7b\u578b\u3002<br \/>\n\u4f8b\u5982\uff0c\u6ce8\u91ca<br \/>\n\u5728\u8fd9\u91cc\u6211\u4eec\u53ef\u4ee5\u770b\u5230\u4e00\u4e2a\u65b0\u7684\u6811\u8282\u70b9\u7c7b\u578b \u2014\u2014\u00a0<strong>comment \u8282\u70b9<\/strong>\uff0c\u88ab\u6807\u8bb0\u4e3a\u00a0<code>#comment<\/code>\uff0c\u5b83\u5728\u4e24\u4e2a\u6587\u672c\u8282\u70b9\u4e4b\u95f4\u3002<br \/>\n\u6211\u4eec\u53ef\u80fd\u4f1a\u60f3 \u2014\u2014 \u4e3a\u4ec0\u4e48\u8981\u5c06\u6ce8\u91ca\u6dfb\u52a0\u5230 DOM \u4e2d\uff1f\u5b83\u4e0d\u4f1a\u5bf9\u89c6\u89c9\u5c55\u73b0\u4ea7\u751f\u4efb\u4f55\u5f71\u54cd\u5417\u3002\u4f46\u662f\u6709\u4e00\u6761\u89c4\u5219 \u2014\u2014 \u5982\u679c\u4e00\u4e9b\u5185\u5bb9\u5b58\u5728\u4e8e HTML \u4e2d\uff0c\u90a3\u4e48\u5b83\u4e5f\u5fc5\u987b\u5728 DOM \u6811\u4e2d\u3002<br \/>\n<strong>HTML \u4e2d\u7684\u6240\u6709\u5185\u5bb9\uff0c\u751a\u81f3\u6ce8\u91ca\uff0c\u90fd\u4f1a\u6210\u4e3a DOM \u7684\u4e00\u90e8\u5206\u3002<\/strong><br \/>\n\u751a\u81f3 HTML \u5f00\u5934\u7684\u00a0<code>&lt;!DOCTYPE...&gt;<\/code>\u00a0\u6307\u4ee4\u4e5f\u662f\u4e00\u4e2a DOM \u8282\u70b9\u3002\u5b83\u5728 DOM \u6811\u4e2d\u4f4d\u4e8e\u00a0<code>&lt;html&gt;<\/code>\u00a0\u4e4b\u524d\u3002\u5f88\u5c11\u6709\u4eba\u77e5\u9053\u8fd9\u4e00\u70b9\u3002\u6211\u4eec\u4e0d\u4f1a\u89e6\u53ca\u90a3\u4e2a\u8282\u70b9\uff0c\u6211\u4eec\u751a\u81f3\u4e0d\u4f1a\u5728\u56fe\u8868\u4e2d\u7ed8\u5236\u5b83\uff0c\u4f46\u5b83\u786e\u5b9e\u5c31\u5728\u90a3\u91cc\u3002<br \/>\n\u8868\u793a\u6574\u4e2a\u6587\u6863\u7684\u00a0<code>document<\/code>\u00a0\u5bf9\u8c61\uff0c\u5728\u5f62\u5f0f\u4e0a\u4e5f\u662f\u4e00\u4e2a DOM \u8282\u70b9\u3002<br \/>\n\u4e00\u5171\u6709\u00a0<a href=\"https:\/\/dom.spec.whatwg.org\/#node\">12 \u79cd\u8282\u70b9\u7c7b\u578b<\/a>\u3002\u5b9e\u9645\u4e0a\uff0c\u6211\u4eec\u901a\u5e38\u7528\u5230\u7684\u662f\u5176\u4e2d\u7684 4 \u79cd\uff1a<\/p>\n<ol>\n<li><code>document<\/code>\u00a0\u2014\u2014 DOM \u7684\u201c\u5165\u53e3\u70b9\u201d\u3002<\/li>\n<li>\u5143\u7d20\u8282\u70b9 \u2014\u2014 HTML \u6807\u7b7e\uff0c\u6811\u6784\u5efa\u5757\u3002<\/li>\n<li>\u6587\u672c\u8282\u70b9 \u2014\u2014 \u5305\u542b\u6587\u672c\u3002<\/li>\n<li>\u6ce8\u91ca \u2014\u2014 \u6709\u65f6\u6211\u4eec\u53ef\u4ee5\u5c06\u4e00\u4e9b\u4fe1\u606f\u653e\u5165\u5176\u4e2d\uff0c\u5b83\u4e0d\u4f1a\u663e\u793a\uff0c\u4f46 JS \u53ef\u4ee5\u4ece DOM \u4e2d\u8bfb\u53d6\u5b83\u3002<\/li>\n<\/ol>\n<h2>try yourself<\/h2>\n<p>\u8981\u5728\u5b9e\u9645\u4e2d\u67e5\u770b DOM \u7ed3\u6784\uff0c\u8bf7\u5c1d\u8bd5\u00a0<a href=\"http:\/\/software.hixie.ch\/utilities\/js\/live-dom-viewer\/\">Live DOM Viewer<\/a>\u3002\u53ea\u9700\u8f93\u5165\u6587\u6863\uff0c\u5b83\u5c06\u7acb\u5373\u663e\u793a\u4e3a DOM\u3002<br \/>\n\u63a2\u7d22 DOM \u7684\u53e6\u4e00\u79cd\u65b9\u5f0f\u662f\u4f7f\u7528\u6d4f\u89c8\u5668\u5f00\u53d1\u5de5\u5177\u3002\u5b9e\u9645\u4e0a\uff0c\u8fd9\u5c31\u662f\u6211\u4eec\u5728\u5f00\u53d1\u4e2d\u6240\u4f7f\u7528\u7684\u3002<br \/>\n\u4f60\u53ef\u4ee5\u6253\u5f00\u8fd9\u4e2a\u7f51\u9875\u00a0<a href=\"https:\/\/zh.javascript.info\/article\/dom-nodes\/elks.html\">elks.html<\/a>\uff0c\u7136\u540e\u6253\u5f00\u6d4f\u89c8\u5668\u5f00\u53d1\u5de5\u5177\uff0c\u5e76\u5207\u6362\u5230\u5143\u7d20\uff08Elements\uff09\u9009\u9879\u5361\u3002<br \/>\n\u4f60\u53ef\u4ee5\u770b\u5230 DOM\uff0c\u70b9\u51fb\u5143\u7d20\uff0c\u67e5\u770b\u5b83\u4eec\u7684\u7ec6\u8282\u7b49\u3002<\/p>\n<p>\u8bf7\u6ce8\u610f\uff0c\u5f00\u53d1\u8005\u5de5\u5177\u4e2d\u7684 DOM \u7ed3\u6784\u662f\u7ecf\u8fc7\u7b80\u5316\u7684\u3002\u6587\u672c\u8282\u70b9\u4ec5\u4ee5\u6587\u672c\u5f62\u5f0f\u663e\u793a\u3002\u5e76\u4e14\u6839\u672c\u6ca1\u6709\u201c\u7a7a\u767d\u201d\uff08\u53ea\u6709\u7a7a\u683c\uff09\u7684\u6587\u672c\u8282\u70b9\u3002\u8fd9\u5176\u5b9e\u633a\u597d\uff0c\u56e0\u4e3a\u5927\u591a\u6570\u60c5\u51b5\u4e0b\uff0c\u6211\u4eec\u53ea\u5173\u5fc3\u5143\u7d20\u8282\u70b9\u3002<br \/>\n\u70b9\u51fb\u5de6\u4e0a\u89d2\u7684\u00a0\u00a0\u6309\u94ae\u53ef\u4ee5\u8ba9\u6211\u4eec\u4f7f\u7528\u9f20\u6807\uff08\u6216\u5176\u4ed6\u6307\u9488\u8bbe\u5907\uff09\u4ece\u7f51\u9875\u4e2d\u9009\u62e9\u4e00\u4e2a\u8282\u70b9\u5e76\u201c\u68c0\u67e5\uff08inspect\uff09\u201d\u5b83\uff08\u5728\u5143\u7d20\u9009\u9879\u5361\u4e2d\u6eda\u52a8\u5230\u8be5\u8282\u70b9\uff09\u3002\u5f53\u6211\u4eec\u6709\u4e00\u4e2a\u5de8\u5927\u7684 HTML \u9875\u9762\uff08\u548c\u76f8\u5e94\u7684\u5de8\u5927 DOM\uff09\uff0c\u5e76\u5e0c\u671b\u67e5\u770b\u5176\u4e2d\u7684\u4e00\u4e2a\u7279\u5b9a\u5143\u7d20\u7684\u4f4d\u7f6e\u65f6\uff0c\u8fd9\u5f88\u6709\u7528\u3002<br \/>\n\u53e6\u4e00\u79cd\u65b9\u6cd5\u662f\u5728\u7f51\u9875\u4e0a\u53f3\u952e\u5355\u51fb\uff0c\u7136\u540e\u5728\u4e0a\u4e0b\u6587\u83dc\u5355\u4e2d\u9009\u62e9\u201c\u68c0\u67e5\uff08Inspect\uff09\u201d\u3002<\/p>\n<p>\u5728\u5de5\u5177\u7684\u53f3\u4fa7\u90e8\u5206\u6709\u4ee5\u4e0b\u5b50\u9009\u9879\u5361\uff1a<\/p>\n<ul>\n<li><strong>Styles<\/strong>\u00a0\u2014\u2014 \u6211\u4eec\u53ef\u4ee5\u770b\u5230\u6309\u89c4\u5219\u5e94\u7528\u4e8e\u5f53\u524d\u5143\u7d20\u7684 CSS \u89c4\u5219\uff0c\u5305\u62ec\u5185\u5efa\u89c4\u5219\uff08\u7070\u8272\uff09\u3002\u51e0\u4e4e\u6240\u6709\u5185\u5bb9\u90fd\u53ef\u4ee5\u5c31\u5730\u7f16\u8f91\uff0c\u5305\u62ec\u4e0b\u9762\u7684\u65b9\u6846\u7684 dimension\/margin\/padding\u3002<\/li>\n<li><strong>Computed<\/strong>\u00a0\u2014\u2014 \u6309\u5c5e\u6027\u67e5\u770b\u5e94\u7528\u4e8e\u5143\u7d20\u7684 CSS\uff1a\u5bf9\u4e8e\u6bcf\u4e2a\u5c5e\u6027\uff0c\u6211\u4eec\u53ef\u4ee5\u90fd\u53ef\u4ee5\u770b\u5230\u8d4b\u4e88\u5b83\u7684\u89c4\u5219\uff08\u5305\u62ec CSS \u7ee7\u627f\u7b49\uff09\u3002<\/li>\n<li><strong>Event Listeners<\/strong>\u00a0\u2014\u2014 \u67e5\u770b\u9644\u52a0\u5230 DOM \u5143\u7d20\u7684\u4e8b\u4ef6\u4fa6\u542c\u5668\uff08\u6211\u4eec\u5c06\u5728\u672c\u6559\u7a0b\u7684\u4e0b\u4e00\u90e8\u5206\u4ecb\u7ecd\u5b83\u4eec\uff09\u3002<\/li>\n<li>\u2026\u2026\u7b49\u3002<br \/>\n\u5b66\u4e60\u5b83\u4eec\u7684\u6700\u4f73\u65b9\u5f0f\u5c31\u662f\u591a\u70b9\u4e00\u70b9\u770b\u4e00\u4e0b\u3002\u5927\u591a\u6570\u503c\u90fd\u662f\u53ef\u4ee5\u5c31\u5730\u7f16\u8f91\u7684\u3002<\/li>\n<\/ul>\n<h2>\u4e0e\u63a7\u5236\u53f0\u4ea4\u4e92<\/h2>\n<p>\u5728\u6211\u4eec\u5904\u7406 DOM \u65f6\uff0c\u6211\u4eec\u53ef\u80fd\u8fd8\u5e0c\u671b\u5bf9\u5176\u5e94\u7528 JavaScript\u3002\u4f8b\u5982\uff1a\u83b7\u53d6\u4e00\u4e2a\u8282\u70b9\u5e76\u8fd0\u884c\u4e00\u4e9b\u4ee3\u7801\u6765\u4fee\u6539\u5b83\uff0c\u4ee5\u67e5\u770b\u7ed3\u679c\u3002\u4ee5\u4e0b\u662f\u5728\u5143\u7d20\uff08Elements\uff09\u9009\u9879\u5361\u548c\u63a7\u5236\u53f0\uff08Console\uff09\u4e4b\u95f4\u5207\u6362\u7684\u4e00\u4e9b\u6280\u5de7\u3002<br \/>\n\u9996\u5148\uff1a<\/p>\n<ul>\n<li>\u5728\u5143\u7d20\uff08Elements\uff09\u9009\u9879\u5361\u4e2d\u9009\u62e9\u7b2c\u4e00\u4e2a\u00a0<code>&lt;li&gt;<\/code>\u3002<\/li>\n<li>\u6309\u4e0b\u00a0Esc\u00a0\u2014\u2014 \u5b83\u5c06\u5728\u5143\u7d20\uff08Elements\uff09\u9009\u9879\u5361\u4e0b\u65b9\u6253\u5f00\u63a7\u5236\u53f0\uff08Console\uff09\u3002<br \/>\n\u73b0\u5728\u6700\u540e\u9009\u4e2d\u7684\u5143\u7d20\u53ef\u4ee5\u901a\u8fc7\u00a0<code>$0<\/code>\u00a0\u6765\u8fdb\u884c\u64cd\u4f5c\uff0c\u5728\u4e4b\u524d\u7684\u9009\u62e9\u4e2d\u5219\u662f\u00a0<code>$1<\/code>\u3002<br \/>\n\u6211\u4eec\u53ef\u4ee5\u5bf9\u5b83\u4eec\u6267\u884c\u4e00\u4e9b\u547d\u4ee4\u3002\u4f8b\u5982\uff0c<code>$0.style.background = 'red'<\/code>\u00a0\u4f7f\u9009\u5b9a\u7684\u5217\u8868\u9879\uff08list item\uff09\u53d8\u6210\u7ea2\u8272<br \/>\n\u8fd9\u5c31\u662f\u5728\u63a7\u5236\u53f0\uff08Console\uff09\u4e2d\u83b7\u53d6\u5143\u7d20\uff08Elements\uff09\u9009\u9879\u5361\u4e2d\u7684\u8282\u70b9\u7684\u65b9\u6cd5\u3002<\/li>\n<\/ul>\n<p>\u8fd8\u6709\u4e00\u79cd\u65b9\u5f0f\u3002\u5982\u679c\u5b58\u5728\u5f15\u7528 DOM \u8282\u70b9\u7684\u53d8\u91cf\uff0c\u90a3\u4e48\u6211\u4eec\u53ef\u4ee5\u5728\u63a7\u5236\u53f0\uff08Console\uff09\u4e2d\u4f7f\u7528\u547d\u4ee4\u00a0<code>inspect(node)<\/code>\uff0c\u6765\u5728\u5143\u7d20\uff08Elements\uff09\u9009\u9879\u5361\u4e2d\u67e5\u770b\u5b83\u3002<br \/>\n\u6216\u8005\u6211\u4eec\u53ef\u4ee5\u76f4\u63a5\u5728\u63a7\u5236\u53f0\uff08Console\uff09\u4e2d\u8f93\u51fa DOM \u8282\u70b9\uff0c\u5e76\u201c\u5c31\u5730\u201d\u63a2\u7d22\u5b83\uff0c\u4f8b\u5982\u4e0b\u9762\u7684\u00a0<code>document.body<\/code><br \/>\n\u5f53\u7136\uff0c\u8fd9\u662f\u51fa\u4e8e\u8c03\u8bd5\u76ee\u7684\u3002\u4ece\u4e0b\u4e00\u7ae0\u5f00\u59cb\uff0c\u6211\u4eec\u5c06\u4f7f\u7528 JavaScript \u8bbf\u95ee\u548c\u4fee\u6539 DOM\u3002<br \/>\n\u6d4f\u89c8\u5668\u5f00\u53d1\u8005\u5de5\u5177\u5bf9\u4e8e\u5f00\u53d1\u6709\u5f88\u5927\u7684\u5e2e\u52a9\uff1a\u6211\u4eec\u53ef\u4ee5\u63a2\u7d22 DOM\uff0c\u5c1d\u8bd5\u4e00\u4e9b\u4e1c\u897f\uff0c\u5e76\u627e\u51fa\u95ee\u9898\u6240\u5728\u3002<\/p>\n<h1>\u904d\u5386DOM<\/h1>\n<p>DOM \u8ba9\u6211\u4eec\u53ef\u4ee5\u5bf9\u5143\u7d20\u548c\u5b83\u4eec\u4e2d\u7684\u5185\u5bb9\u505a\u4efb\u4f55\u4e8b\uff0c\u4f46\u662f\u9996\u5148\u6211\u4eec\u9700\u8981\u83b7\u53d6\u5230\u5bf9\u5e94\u7684 DOM \u5bf9\u8c61\u3002<br \/>\n\u5bf9 DOM \u7684\u6240\u6709\u64cd\u4f5c\u90fd\u662f\u4ee5\u00a0<code>document<\/code>\u00a0\u5bf9\u8c61\u5f00\u59cb\u3002\u5b83\u662f DOM \u7684\u4e3b\u201c\u5165\u53e3\u70b9\u201d\u3002\u4ece\u5b83\u6211\u4eec\u53ef\u4ee5\u8bbf\u95ee\u4efb\u4f55\u8282\u70b9\u3002<br \/>\n\u8fd9\u91cc\u662f\u4e00\u5f20\u63cf\u8ff0\u5bf9\u8c61\u95f4\u94fe\u63a5\u7684\u56fe\u7247\uff0c\u901a\u8fc7\u8fd9\u4e9b\u94fe\u63a5\u6211\u4eec\u53ef\u4ee5\u5728 DOM \u8282\u70b9\u4e4b\u95f4\u79fb\u52a8\u3002<br \/>\n<img decoding=\"async\" src=\"https:\/\/levin.ink\/wp-content\/uploads\/2024\/05\/Pasted-image-20240509164621.png\" alt=\"Pasted image 20240509164621.png\"><\/p>\n<h2>\u6700\u9876\u5c42 documentElement body<\/h2>\n<p>\u6700\u9876\u5c42\u7684\u6811\u8282\u70b9\u53ef\u4ee5\u76f4\u63a5\u4f5c\u4e3a\u00a0<code>document<\/code>\u00a0\u7684\u5c5e\u6027\u6765\u4f7f\u7528\uff1a<br \/>\n<code>&lt;html&gt;<\/code>\u00a0=\u00a0<code>document.documentElement<\/code><br \/>\n\u6700\u9876\u5c42\u7684 document \u8282\u70b9\u662f\u00a0<code>document.documentElement<\/code>\u3002\u8fd9\u662f\u5bf9\u5e94\u00a0<code>&lt;html&gt;<\/code>\u00a0\u6807\u7b7e\u7684 DOM \u8282\u70b9\u3002<br \/>\n<code>&lt;body&gt;<\/code>\u00a0=\u00a0<code>document.body<\/code><br \/>\n\u53e6\u4e00\u4e2a\u88ab\u5e7f\u6cdb\u4f7f\u7528\u7684 DOM \u8282\u70b9\u662f\u00a0<code>&lt;body&gt;<\/code>\u00a0\u5143\u7d20 \u2014\u2014\u00a0<code>document.body<\/code>\u3002<br \/>\n<code>&lt;head&gt;<\/code>\u00a0=\u00a0<code>document.head<\/code><br \/>\n<code>&lt;head&gt;<\/code>\u00a0\u6807\u7b7e\u53ef\u4ee5\u901a\u8fc7\u00a0<code>document.head<\/code>\u00a0\u8bbf\u95ee\u3002<\/p>\n<blockquote>\n<p>\u8fd9\u91cc\u6709\u4e2a\u95ee\u9898\uff1a<code>document.body<\/code>\u00a0\u7684\u503c\u53ef\u80fd\u662f\u00a0<code>null<\/code><br \/>\n\u811a\u672c\u65e0\u6cd5\u8bbf\u95ee\u5728\u8fd0\u884c\u65f6\u4e0d\u5b58\u5728\u7684\u5143\u7d20\u3002<br \/>\n\u5c24\u5176\u662f\uff0c\u5982\u679c\u4e00\u4e2a\u811a\u672c\u662f\u5728\u00a0<code>&lt;head&gt;<\/code>\u00a0\u4e2d\uff0c\u90a3\u4e48\u811a\u672c\u662f\u8bbf\u95ee\u4e0d\u5230\u00a0<code>document.body<\/code>\u00a0\u5143\u7d20\u7684\uff0c\u56e0\u4e3a\u6d4f\u89c8\u5668\u8fd8\u6ca1\u6709\u8bfb\u5230\u5b83\u3002<\/p>\n<\/blockquote>\n<blockquote>\n<p>\u5728 DOM \u7684\u4e16\u754c\u4e2d\uff0c<code>null<\/code>\u00a0\u5c31\u610f\u5473\u7740\u201c\u4e0d\u5b58\u5728\u201d<br \/>\n\u5728 DOM \u4e2d\uff0c<code>null<\/code>\u00a0\u503c\u5c31\u610f\u5473\u7740\u201c\u4e0d\u5b58\u5728\u201d\u6216\u8005\u201c\u6ca1\u6709\u8fd9\u4e2a\u8282\u70b9\u201d\u3002<\/p>\n<\/blockquote>\n<h2>\u5b50\u8282\u70b9 childNotes firstChild lastChild<\/h2>\n<p>\u4ece\u73b0\u5728\u5f00\u59cb\uff0c\u6211\u4eec\u5c06\u4f7f\u7528\u4e0b\u9762\u8fd9\u4e24\u4e2a\u672f\u8bed\uff1a<\/p>\n<ul>\n<li><strong>\u5b50\u8282\u70b9\uff08\u6216\u8005\u53eb\u4f5c\u5b50\uff09<\/strong>\u00a0\u2014\u2014 \u5bf9\u5e94\u7684\u662f\u76f4\u7cfb\u7684\u5b50\u5143\u7d20\u3002\u6362\u53e5\u8bdd\u8bf4\uff0c\u5b83\u4eec\u88ab\u5b8c\u5168\u5d4c\u5957\u5728\u7ed9\u5b9a\u7684\u5143\u7d20\u4e2d\u3002\u4f8b\u5982\uff0c<code>&lt;head&gt;<\/code>\u00a0\u548c\u00a0<code>&lt;body&gt;<\/code>\u00a0\u5c31\u662f\u00a0<code>&lt;html&gt;<\/code>\u00a0\u5143\u7d20\u7684\u5b50\u5143\u7d20\u3002<\/li>\n<li><strong>\u5b50\u5b59\u5143\u7d20<\/strong>\u00a0\u2014\u2014 \u5d4c\u5957\u5728\u7ed9\u5b9a\u5143\u7d20\u4e2d\u7684\u6240\u6709\u5143\u7d20\uff0c\u5305\u62ec\u5b50\u5143\u7d20\uff0c\u4ee5\u53ca\u5b50\u5143\u7d20\u7684\u5b50\u5143\u7d20\u7b49\u3002<br \/>\n<code>&lt;body&gt;<\/code>\u00a0\u5143\u7d20\u7684\u5b50\u5b59\u5143\u7d20\u4e0d\u4ec5\u5305\u542b\u76f4\u63a5\u7684\u5b50\u5143\u7d20\u00a0<code>&lt;div&gt;<\/code>\u00a0\u548c\u00a0<code>&lt;ul&gt;<\/code>\uff0c\u8fd8\u5305\u542b\u50cf\u00a0<code>&lt;li&gt;<\/code>\uff08<code>&lt;ul&gt;<\/code>\u00a0\u7684\u5b50\u5143\u7d20\uff09\u548c\u00a0<code>&lt;b&gt;<\/code>\uff08<code>&lt;li&gt;<\/code>\u00a0\u7684\u5b50\u5143\u7d20\uff09\u8fd9\u6837\u7684\u5143\u7d20 \u2014 \u6574\u4e2a\u5b50\u6811\u3002<br \/>\n<strong><code>childNodes<\/code>\u00a0\u96c6\u5408\u5217\u51fa\u4e86\u6240\u6709\u5b50\u8282\u70b9\uff0c\u5305\u62ec\u6587\u672c\u8282\u70b9\u3002<\/strong><\/li>\n<\/ul>\n<pre><code class=\"language-js\">for (let i = 0; i &lt; document.body.childNodes.length; i++) {\n    alert( document.body.childNodes[i] ); \/\/ Text, DIV, Text, UL, ..., SCRIPT\n}\n<\/code><\/pre>\n<p>\u8bf7\u6ce8\u610f\u8fd9\u91cc\u7684\u4e00\u4e2a\u6709\u8da3\u7684\u7ec6\u8282\u3002\u5982\u679c\u6211\u4eec\u8fd0\u884c\u4e0a\u9762\u8fd9\u4e2a\u4f8b\u5b50\uff0c\u6240\u663e\u793a\u7684\u6700\u540e\u4e00\u4e2a\u5143\u7d20\u662f\u00a0<code>&lt;script&gt;<\/code>\u3002\u5b9e\u9645\u4e0a\uff0c\u6587\u6863\u4e0b\u9762\u8fd8\u6709\u5f88\u591a\u4e1c\u897f\uff0c\u4f46\u662f\u5728\u8fd9\u4e2a\u811a\u672c\u8fd0\u884c\u7684\u65f6\u5019\uff0c\u6d4f\u89c8\u5668\u8fd8\u6ca1\u6709\u8bfb\u5230\u4e0b\u9762\u7684\u5185\u5bb9\uff0c\u6240\u4ee5\u8fd9\u4e2a\u811a\u672c\u4e5f\u5c31\u770b\u4e0d\u5230\u5b83\u4eec\u3002<br \/>\n<strong><code>firstChild<\/code>\u00a0\u548c\u00a0<code>lastChild<\/code>\u00a0\u5c5e\u6027\u662f\u8bbf\u95ee\u7b2c\u4e00\u4e2a\u548c\u6700\u540e\u4e00\u4e2a\u5b50\u5143\u7d20\u7684\u5feb\u6377\u65b9\u5f0f\u3002<\/strong><br \/>\n\u5b83\u4eec\u53ea\u662f\u7b80\u5199\u3002\u5982\u679c\u5143\u7d20\u5b58\u5728\u5b50\u8282\u70b9\uff0c\u90a3\u4e48\u4e0b\u9762\u7684\u811a\u672c\u8fd0\u884c\u7ed3\u679c\u5c06\u662f true<\/p>\n<pre><code class=\"language-js\">elem.childNodes[0] === elem.firstChild\nelem.childNodes[elem.childNodes.length - 1] === elem.lastChild\n<\/code><\/pre>\n<p>\u8fd9\u91cc\u8fd8\u6709\u4e00\u4e2a\u7279\u522b\u7684\u51fd\u6570\u00a0<code>elem.hasChildNodes()<\/code>\u00a0\u7528\u4e8e\u68c0\u67e5\u8282\u70b9\u662f\u5426\u6709\u5b50\u8282\u70b9\u3002<\/p>\n<h2>DOM \u96c6\u5408<\/h2>\n<p>\u6b63\u5982\u6211\u4eec\u770b\u5230\u7684\u90a3\u6837\uff0c<code>childNodes<\/code>\u00a0\u770b\u8d77\u6765\u5c31\u50cf\u4e00\u4e2a\u6570\u7ec4\u3002\u4f46\u5b9e\u9645\u4e0a\u5b83\u5e76\u4e0d\u662f\u4e00\u4e2a\u6570\u7ec4\uff0c\u800c\u662f\u4e00\u4e2a\u00a0<strong>\u96c6\u5408<\/strong>\u00a0\u2014\u2014 \u4e00\u4e2a\u7c7b\u6570\u7ec4\u7684\u53ef\u8fed\u4ee3\u5bf9\u8c61\u3002<br \/>\n\u8fd9\u4e2a\u6027\u8d28\u4f1a\u5bfc\u81f4\u4e24\u4e2a\u91cd\u8981\u7684\u7ed3\u679c\uff1a<\/p>\n<ol>\n<li>\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u00a0<code>for..of<\/code>\u00a0\u6765\u8fed\u4ee3\u5b83<br \/>\n\u8fd9\u662f\u56e0\u4e3a\u96c6\u5408\u662f\u53ef\u8fed\u4ee3\u7684\uff08\u63d0\u4f9b\u4e86\u6240\u9700\u8981\u7684\u00a0<code>Symbol.iterator<\/code>\u00a0\u5c5e\u6027\uff09\u3002<\/li>\n<li>\u65e0\u6cd5\u4f7f\u7528\u6570\u7ec4\u7684\u65b9\u6cd5\uff0c\u56e0\u4e3a\u5b83\u4e0d\u662f\u4e00\u4e2a\u6570\u7ec4<br \/>\n\u96c6\u5408\u7684\u6027\u8d28\u6240\u5f97\u5230\u7684\u7b2c\u4e00\u4e2a\u7ed3\u679c\u5f88\u4e0d\u9519\u3002\u7b2c\u4e8c\u4e2a\u7ed3\u679c\u4e5f\u8fd8\u53ef\u4ee5\u5fcd\u53d7\uff0c\u56e0\u4e3a\u5982\u679c\u6211\u4eec\u60f3\u8981\u4f7f\u7528\u6570\u7ec4\u7684\u65b9\u6cd5\u7684\u8bdd\uff0c\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u00a0<code>Array.from<\/code>\u00a0\u65b9\u6cd5\u6765\u4ece\u96c6\u5408\u521b\u5efa\u4e00\u4e2a\u201c\u771f\u201d\u6570\u7ec4<\/li>\n<\/ol>\n<pre><code class=\"language-js\">alert( Array.from(document.body.childNodes).filter ); \/\/ function\n<\/code><\/pre>\n<blockquote>\n<p>DOM \u96c6\u5408\u662f\u53ea\u8bfb\u7684<br \/>\nDOM \u96c6\u5408\uff0c\u751a\u81f3\u53ef\u4ee5\u8bf4\u672c\u7ae0\u4e2d\u5217\u51fa\u7684\u00a0<strong>\u6240\u6709<\/strong>\u00a0\u5bfc\u822a\uff08navigation\uff09\u5c5e\u6027\u90fd\u662f\u53ea\u8bfb\u7684\u3002<br \/>\n\u6211\u4eec\u4e0d\u80fd\u901a\u8fc7\u7c7b\u4f3c\u00a0<code>childNodes[i] = ...<\/code>\u00a0\u7684\u64cd\u4f5c\u6765\u66ff\u6362\u4e00\u4e2a\u5b50\u8282\u70b9\u3002<br \/>\n\u4fee\u6539\u5b50\u8282\u70b9\u9700\u8981\u4f7f\u7528\u5176\u5b83\u65b9\u6cd5\u3002\u6211\u4eec\u5c06\u4f1a\u5728\u4e0b\u4e00\u7ae0\u4e2d\u770b\u5230\u5b83\u4eec\u3002<\/p>\n<\/blockquote>\n<blockquote>\n<p>DOM \u96c6\u5408\u662f\u5b9e\u65f6\u7684<br \/>\n\u9664\u5c0f\u90e8\u5206\u4f8b\u5916\uff0c\u51e0\u4e4e\u6240\u6709\u7684 DOM \u96c6\u5408\u90fd\u662f\u00a0<strong>\u5b9e\u65f6<\/strong>\u00a0\u7684\u3002\u6362\u53e5\u8bdd\u8bf4\uff0c\u5b83\u4eec\u53cd\u6620\u4e86 DOM \u7684\u5f53\u524d\u72b6\u6001\u3002<br \/>\n\u5982\u679c\u6211\u4eec\u4fdd\u7559\u4e00\u4e2a\u5bf9\u00a0<code>elem.childNodes<\/code>\u00a0\u7684\u5f15\u7528\uff0c\u7136\u540e\u5411 DOM \u4e2d\u6dfb\u52a0\/\u79fb\u9664\u8282\u70b9\uff0c\u90a3\u4e48\u8fd9\u4e9b\u8282\u70b9\u7684\u66f4\u65b0\u4f1a\u81ea\u52a8\u51fa\u73b0\u5728\u96c6\u5408\u4e2d\u3002<\/p>\n<\/blockquote>\n<blockquote>\n<p>\u4e0d\u8981\u4f7f\u7528\u00a0<code>for..in<\/code>\u00a0\u6765\u904d\u5386\u96c6\u5408<br \/>\n\u53ef\u4ee5\u4f7f\u7528\u00a0<code>for..of<\/code>\u00a0\u5bf9\u96c6\u5408\u8fdb\u884c\u8fed\u4ee3\u3002\u4f46\u6709\u65f6\u5019\u4eba\u4eec\u4f1a\u5c1d\u8bd5\u4f7f\u7528\u00a0<code>for..in<\/code>\u00a0\u6765\u8fed\u4ee3\u96c6\u5408\u3002<br \/>\n\u8bf7\u4e0d\u8981\u8fd9\u4e48\u505a\u3002<code>for..in<\/code>\u00a0\u5faa\u73af\u904d\u5386\u7684\u662f\u6240\u6709\u53ef\u679a\u4e3e\u7684\uff08enumerable\uff09\u5c5e\u6027\u3002\u96c6\u5408\u8fd8\u6709\u4e00\u4e9b\u201c\u989d\u5916\u7684\u201d\u5f88\u5c11\u88ab\u7528\u5230\u7684\u5c5e\u6027\uff0c\u901a\u5e38\u8fd9\u4e9b\u5c5e\u6027\u4e5f\u662f\u6211\u4eec\u4e0d\u671f\u671b\u5f97\u5230\u7684<\/p>\n<\/blockquote>\n<h2>\u5144\u5f1f\u8282\u70b9 \u7236\u8282\u70b9<\/h2>\n<p><strong>\u5144\u5f1f\u8282\u70b9\uff08sibling\uff09<\/strong>\u00a0\u662f\u6307\u6709\u540c\u4e00\u4e2a\u7236\u8282\u70b9\u7684\u8282\u70b9\u3002<br \/>\n\u4f8b\u5982\uff0c<code>&lt;head&gt;<\/code>\u00a0\u548c\u00a0<code>&lt;body&gt;<\/code>\u00a0\u5c31\u662f\u5144\u5f1f\u8282\u70b9<\/p>\n<ul>\n<li><code>&lt;body&gt;<\/code>\u00a0\u53ef\u4ee5\u8bf4\u662f\u00a0<code>&lt;head&gt;<\/code>\u00a0\u7684\u201c\u4e0b\u4e00\u4e2a\u201d\u6216\u8005\u201c\u53f3\u8fb9\u201d\u5144\u5f1f\u8282\u70b9\u3002<\/li>\n<li><code>&lt;head&gt;<\/code>\u00a0\u53ef\u4ee5\u8bf4\u662f\u00a0<code>&lt;body&gt;<\/code>\u00a0\u7684\u201c\u524d\u4e00\u4e2a\u201d\u6216\u8005\u201c\u5de6\u8fb9\u201d\u5144\u5f1f\u8282\u70b9\u3002<br \/>\n\u4e0b\u4e00\u4e2a\u5144\u5f1f\u8282\u70b9\u5728\u00a0<code>nextSibling<\/code>\u00a0\u5c5e\u6027\u4e2d\uff0c\u4e0a\u4e00\u4e2a\u662f\u5728\u00a0<code>previousSibling<\/code>\u00a0\u5c5e\u6027\u4e2d\u3002<br \/>\n\u53ef\u4ee5\u901a\u8fc7\u00a0<code>parentNode<\/code>\u00a0\u6765\u8bbf\u95ee\u7236\u8282\u70b9\u3002<\/li>\n<\/ul>\n<h2>\u7eaf\u5143\u7d20\u5bfc\u822a<\/h2>\n<p>\u4e0a\u9762\u5217\u51fa\u7684\u5bfc\u822a\uff08navigation\uff09\u5c5e\u6027\u5f15\u7528\u00a0<strong>\u6240\u6709<\/strong>\u00a0\u8282\u70b9\u3002\u4f8b\u5982\uff0c\u5728\u00a0<code>childNodes<\/code>\u00a0\u4e2d\u6211\u4eec\u53ef\u4ee5\u770b\u5230\u6587\u672c\u8282\u70b9\uff0c\u5143\u7d20\u8282\u70b9\uff0c\u751a\u81f3\u5305\u62ec\u6ce8\u91ca\u8282\u70b9\uff08\u5982\u679c\u5b83\u4eec\u5b58\u5728\u7684\u8bdd\uff09\u3002<br \/>\n\u4f46\u662f\u5bf9\u4e8e\u5f88\u591a\u4efb\u52a1\u6765\u8bf4\uff0c\u6211\u4eec\u5e76\u4e0d\u60f3\u8981\u6587\u672c\u8282\u70b9\u6216\u6ce8\u91ca\u8282\u70b9\u3002\u6211\u4eec\u5e0c\u671b\u64cd\u7eb5\u7684\u662f\u4ee3\u8868\u6807\u7b7e\u7684\u548c\u5f62\u6210\u9875\u9762\u7ed3\u6784\u7684\u5143\u7d20\u8282\u70b9\u3002<br \/>\n\u6240\u4ee5\uff0c\u8ba9\u6211\u4eec\u770b\u770b\u66f4\u591a\u53ea\u8003\u8651\u00a0<strong>\u5143\u7d20\u8282\u70b9<\/strong>\u00a0\u7684\u5bfc\u822a\u94fe\u63a5\uff08navigation link\uff09<br \/>\n<div class='fancybox-wrapper lazyload-container-unload' data-fancybox='post-images' href='https:\/\/levin.ink\/wp-content\/uploads\/2024\/05\/Pasted-image-20240509172041.png'><img class=\"lazyload lazyload-style-1\" src=\"data:image\/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPgo8c3ZnIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjZmZmZmZmMDAiPjxnPjwvZz4KPC9zdmc+\"  decoding=\"async\" data-original=\"https:\/\/levin.ink\/wp-content\/uploads\/2024\/05\/Pasted-image-20240509172041.png\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB\/AAffA0nNPuCLAAAAAElFTkSuQmCC\" alt=\"Pasted image 20240509172041.png\"><\/div><br \/>\n\u8fd9\u4e9b\u94fe\u63a5\u548c\u6211\u4eec\u5728\u4e0a\u9762\u63d0\u5230\u8fc7\u7684\u7c7b\u4f3c\uff0c\u53ea\u662f\u5728\u8bcd\u4e2d\u95f4\u52a0\u4e86\u00a0<code>Element<\/code>\uff1a<\/p>\n<ul>\n<li><code>children<\/code>\u00a0\u2014\u2014 \u4ec5\u90a3\u4e9b\u4f5c\u4e3a\u5143\u7d20\u8282\u70b9\u7684\u5b50\u4ee3\u7684\u8282\u70b9\u3002<\/li>\n<li><code>firstElementChild<\/code>\uff0c<code>lastElementChild<\/code>\u00a0\u2014\u2014 \u7b2c\u4e00\u4e2a\u548c\u6700\u540e\u4e00\u4e2a\u5b50\u5143\u7d20\u3002<\/li>\n<li><code>previousElementSibling<\/code>\uff0c<code>nextElementSibling<\/code>\u00a0\u2014\u2014 \u5144\u5f1f\u5143\u7d20\u3002<\/li>\n<li><code>parentElement<\/code>\u00a0\u2014\u2014 \u7236\u5143\u7d20\u3002<\/li>\n<\/ul>\n<blockquote>\n<p>\u4e3a\u4ec0\u4e48\u662f\u00a0<code>parentElement<\/code>? \u7236\u8282\u70b9\u53ef\u4ee5\u4e0d\u662f\u4e00\u4e2a\u5143\u7d20\u5417\uff1f<br \/>\n<code>parentElement<\/code>\u00a0\u5c5e\u6027\u8fd4\u56de\u7684\u662f\u201c\u5143\u7d20\u7c7b\u578b\u201d\u7684\u7236\u8282\u70b9\uff0c\u800c\u00a0<code>parentNode<\/code>\u00a0\u8fd4\u56de\u7684\u662f\u201c\u4efb\u4f55\u7c7b\u578b\u201d\u7684\u7236\u8282\u70b9\u3002\u8fd9\u4e9b\u5c5e\u6027\u901a\u5e38\u6765\u8bf4\u662f\u4e00\u6837\u7684\uff1a\u5b83\u4eec\u90fd\u662f\u7528\u4e8e\u83b7\u53d6\u7236\u8282\u70b9\u3002<br \/>\n\u552f\u4e00\u7684\u4f8b\u5916\u5c31\u662f\u00a0<code>document.documentElement<\/code><\/p>\n<\/blockquote>\n<pre><code class=\"language-js\">alert( document.documentElement.parentNode ); \/\/ document\nalert( document.documentElement.parentElement ); \/\/ null\n<\/code><\/pre>\n<blockquote>\n<p>\u56e0\u4e3a\u6839\u8282\u70b9\u00a0<code>document.documentElement<\/code>\uff08<code>&lt;html&gt;<\/code>\uff09\u7684\u7236\u8282\u70b9\u662f\u00a0<code>document<\/code>\u3002\u4f46\u00a0<code>document<\/code>\u00a0\u4e0d\u662f\u4e00\u4e2a\u5143\u7d20\u8282\u70b9\uff0c\u6240\u4ee5\u00a0<code>parentNode<\/code>\u00a0\u8fd4\u56de\u4e86\u00a0<code>document<\/code>\uff0c\u4f46\u00a0<code>parentElement<\/code>\u00a0\u8fd4\u56de\u7684\u662f\u00a0<code>null<\/code>\u3002<br \/>\n\u5f53\u6211\u4eec\u60f3\u4ece\u4efb\u610f\u8282\u70b9\u00a0<code>elem<\/code>\u00a0\u5230\u00a0<code>&lt;html&gt;<\/code>\u00a0\u800c\u4e0d\u662f\u5230\u00a0<code>document<\/code>\u00a0\u65f6\uff0c\u8fd9\u4e2a\u7ec6\u8282\u53ef\u80fd\u5f88\u6709\u7528<\/p>\n<\/blockquote>\n<pre><code class=\"language-js\">while(elem = elem.parentElement) { \/\/ \u5411\u4e0a\uff0c\u76f4\u5230 &lt;html&gt;\n  alert( elem );\n}\n<\/code><\/pre>\n<h2>\u66f4\u591a\u94fe\u63a5 \u8868\u683c<\/h2>\n<p>\u5230\u73b0\u5728\uff0c\u6211\u4eec\u5df2\u7ecf\u63cf\u8ff0\u4e86\u57fa\u672c\u7684\u5bfc\u822a\uff08navigation\uff09\u5c5e\u6027\u3002<br \/>\n\u65b9\u4fbf\u8d77\u89c1\uff0c\u67d0\u4e9b\u7c7b\u578b\u7684 DOM \u5143\u7d20\u53ef\u80fd\u4f1a\u63d0\u4f9b\u7279\u5b9a\u4e8e\u5176\u7c7b\u578b\u7684\u5176\u4ed6\u5c5e\u6027\u3002<br \/>\n\u8868\u683c\uff08Table\uff09\u662f\u4e00\u4e2a\u5f88\u597d\u7684\u4f8b\u5b50\uff0c\u5b83\u4ee3\u8868\u4e86\u4e00\u4e2a\u7279\u522b\u91cd\u8981\u7684\u60c5\u51b5\uff1a<br \/>\n<strong><code>&lt;table&gt;<\/code><\/strong>\u00a0\u5143\u7d20\u652f\u6301 (\u9664\u4e86\u4e0a\u9762\u7ed9\u51fa\u7684\uff0c\u4e4b\u5916) \u4ee5\u4e0b\u5c5e\u6027:<\/p>\n<ul>\n<li><code>table.rows<\/code>\u00a0\u2014\u2014\u00a0<code>&lt;tr&gt;<\/code>\u00a0\u5143\u7d20\u7684\u96c6\u5408\u3002<\/li>\n<li><code>table.caption\/tHead\/tFoot<\/code>\u00a0\u2014\u2014 \u5f15\u7528\u5143\u7d20\u00a0<code>&lt;caption&gt;<\/code>\uff0c<code>&lt;thead&gt;<\/code>\uff0c<code>&lt;tfoot&gt;<\/code>\u3002<\/li>\n<li><code>table.tBodies<\/code>\u00a0\u2014\u2014\u00a0<code>&lt;tbody&gt;<\/code>\u00a0\u5143\u7d20\u7684\u96c6\u5408\uff08\u6839\u636e\u6807\u51c6\u8fd8\u6709\u5f88\u591a\u5143\u7d20\uff0c\u4f46\u662f\u8fd9\u91cc\u81f3\u5c11\u4f1a\u6709\u4e00\u4e2a \u2014\u2014 \u5373\u4f7f\u6ca1\u6709\u88ab\u5199\u5728 HTML \u6e90\u6587\u4ef6\u4e2d\uff0c\u6d4f\u89c8\u5668\u4e5f\u4f1a\u5c06\u5176\u653e\u5165 DOM \u4e2d\uff09\u3002<br \/>\n<strong><code>&lt;thead&gt;<\/code>\uff0c<code>&lt;tfoot&gt;<\/code>\uff0c<code>&lt;tbody&gt;<\/code><\/strong>\u00a0\u5143\u7d20\u63d0\u4f9b\u4e86\u00a0<code>rows<\/code>\u00a0\u5c5e\u6027\uff1a<\/li>\n<li><code>tbody.rows<\/code>\u00a0\u2014\u2014 \u8868\u683c\u5185\u90e8\u00a0<code>&lt;tr&gt;<\/code>\u00a0\u5143\u7d20\u7684\u96c6\u5408\u3002<br \/>\n<strong><code>&lt;tr&gt;<\/code>\uff1a<\/strong><\/li>\n<li><code>tr.cells<\/code>\u00a0\u2014\u2014 \u5728\u7ed9\u5b9a\u00a0<code>&lt;tr&gt;<\/code>\u00a0\u4e2d\u7684\u00a0<code>&lt;td&gt;<\/code>\u00a0\u548c\u00a0<code>&lt;th&gt;<\/code>\u00a0\u5355\u5143\u683c\u7684\u96c6\u5408\u3002<\/li>\n<li><code>tr.sectionRowIndex<\/code>\u00a0\u2014\u2014 \u7ed9\u5b9a\u7684\u00a0<code>&lt;tr&gt;<\/code>\u00a0\u5728\u5c01\u95ed\u7684\u00a0<code>&lt;thead&gt;\/&lt;tbody&gt;\/&lt;tfoot&gt;<\/code>\u00a0\u4e2d\u7684\u4f4d\u7f6e\uff08\u7d22\u5f15\uff09\u3002<\/li>\n<li><code>tr.rowIndex<\/code>\u00a0\u2014\u2014 \u5728\u6574\u4e2a\u8868\u683c\u4e2d\u00a0<code>&lt;tr&gt;<\/code>\u00a0\u7684\u7f16\u53f7\uff08\u5305\u62ec\u8868\u683c\u7684\u6240\u6709\u884c\uff09\u3002<br \/>\n<strong><code>&lt;td&gt;<\/code>\u00a0\u548c\u00a0<code>&lt;th&gt;<\/code>\uff1a<\/strong><\/li>\n<li><code>td.cellIndex<\/code>\u00a0\u2014\u2014 \u5728\u5c01\u95ed\u7684\u00a0<code>&lt;tr&gt;<\/code>\u00a0\u4e2d\u5355\u5143\u683c\u7684\u7f16\u53f7\u3002<\/li>\n<\/ul>\n<h1>\u641c\u7d22 getElement querySelector<\/h1>\n<h2>document.getElementById \u6216\u8005\u53ea\u4f7f\u7528 id<\/h2>\n<p>\u5982\u679c\u4e00\u4e2a\u5143\u7d20\u6709\u00a0<code>id<\/code>\u00a0\u7279\u6027\uff08attribute\uff09\uff0c\u90a3\u6211\u4eec\u5c31\u53ef\u4ee5\u4f7f\u7528\u00a0<code>document.getElementById(id)<\/code>\u00a0\u65b9\u6cd5\u83b7\u53d6\u8be5\u5143\u7d20\uff0c\u65e0\u8bba\u5b83\u5728\u54ea\u91cc\u3002<\/p>\n<pre><code class=\"language-html\">&lt;div id=&quot;elem&quot;&gt;\n  &lt;div id=&quot;elem-content&quot;&gt;Element&lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;script&gt;\n  \/\/ \u83b7\u53d6\u8be5\u5143\u7d20\n  let elem = document.getElementById('elem');\n\n  \/\/ \u5c06\u8be5\u5143\u7d20\u80cc\u666f\u6539\u4e3a\u7ea2\u8272\n  elem.style.background = 'red';\n&lt;\/script&gt;\n\n&lt;script&gt;\n  \/\/ elem \u662f\u5bf9\u5e26\u6709 id=&quot;elem&quot; \u7684 DOM \u5143\u7d20\u7684\u5f15\u7528\n  elem.style.background = 'red';\n\n  \/\/ id=&quot;elem-content&quot; \u5185\u6709\u8fde\u5b57\u7b26\uff0c\u6240\u4ee5\u5b83\u4e0d\u80fd\u6210\u4e3a\u4e00\u4e2a\u53d8\u91cf\n  \/\/ ...\u4f46\u662f\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7\u4f7f\u7528\u65b9\u62ec\u53f7 window['elem-content'] \u6765\u8bbf\u95ee\u5b83\n&lt;\/script&gt;\n<\/code><\/pre>\n<p>\u9664\u975e\u6211\u4eec\u58f0\u660e\u4e00\u4e2a\u5177\u6709\u76f8\u540c\u540d\u79f0\u7684 JavaScript \u53d8\u91cf\uff0c\u5426\u5219\u5b83\u5177\u6709\u4f18\u5148\u6743<\/p>\n<pre><code class=\"language-html\">&lt;div id=&quot;elem&quot;&gt;&lt;\/div&gt;\n\n&lt;script&gt;\n  let elem = 5; \/\/ \u73b0\u5728 elem \u662f 5\uff0c\u800c\u4e0d\u662f\u5bf9 &lt;div id=&quot;elem&quot;&gt; \u7684\u5f15\u7528\n\n  alert(elem); \/\/ 5\n&lt;\/script&gt;\n<\/code><\/pre>\n<blockquote>\n<p>\u8bf7\u4e0d\u8981\u4f7f\u7528\u4ee5 id \u547d\u540d\u7684\u5168\u5c40\u53d8\u91cf\u6765\u8bbf\u95ee\u5143\u7d20<br \/>\n<a href=\"http:\/\/www.whatwg.org\/specs\/web-apps\/current-work\/#dom-window-nameditem\">\u5728\u89c4\u8303\u4e2d<\/a>\u00a0\u5bf9\u6b64\u884c\u4e3a\u8fdb\u884c\u4e86\u63cf\u8ff0\uff0c\u6240\u4ee5\u5b83\u662f\u4e00\u79cd\u6807\u51c6\u3002\u4f46\u8fd9\u662f\u6ce8\u610f\u8003\u8651\u5230\u517c\u5bb9\u6027\u624d\u652f\u6301\u7684\u3002<br \/>\n\u6d4f\u89c8\u5668\u5c1d\u8bd5\u901a\u8fc7\u6df7\u5408 JavaScript \u548c DOM \u7684\u547d\u540d\u7a7a\u95f4\u6765\u5e2e\u52a9\u6211\u4eec\u3002\u5bf9\u4e8e\u5185\u8054\u5230 HTML \u4e2d\u7684\u7b80\u5355\u811a\u672c\u6765\u8bf4\uff0c\u8fd9\u8fd8\u884c\uff0c\u4f46\u662f\u901a\u5e38\u6765\u8bf4\uff0c\u8fd9\u4e0d\u662f\u4e00\u4ef6\u597d\u4e8b\u3002\u56e0\u4e3a\u8fd9\u53ef\u80fd\u4f1a\u9020\u6210\u547d\u540d\u51b2\u7a81\u3002\u53e6\u5916\uff0c\u5f53\u4eba\u4eec\u9605\u8bfb JavaScript \u4ee3\u7801\u4e14\u770b\u4e0d\u5230\u5bf9\u5e94\u7684 HTML \u65f6\uff0c\u53d8\u91cf\u7684\u6765\u6e90\u5c31\u4f1a\u4e0d\u660e\u663e\u3002<br \/>\n\u5728\u672c\u6559\u7a0b\u4e2d\uff0c\u6211\u4eec\u53ea\u4f1a\u5728\u5143\u7d20\u6765\u6e90\u975e\u5e38\u660e\u663e\u65f6\uff0c\u4e3a\u4e86\u7b80\u6d01\u8d77\u89c1\uff0c\u624d\u4f1a\u4f7f\u7528\u00a0<code>id<\/code>\u00a0\u76f4\u63a5\u5f15\u7528\u5bf9\u5e94\u7684\u5143\u7d20\u3002<br \/>\n\u5728\u5b9e\u9645\u5f00\u53d1\u4e2d\uff0c<code>document.getElementById<\/code>\u00a0\u662f\u9996\u9009\u65b9\u6cd5\u3002<\/p>\n<\/blockquote>\n<blockquote>\n<p><code>id<\/code>\u00a0\u5fc5\u987b\u662f\u552f\u4e00\u7684<br \/>\n<code>id<\/code>\u00a0\u5fc5\u987b\u662f\u552f\u4e00\u7684\u3002\u5728\u6587\u6863\u4e2d\uff0c\u53ea\u80fd\u6709\u4e00\u4e2a\u5143\u7d20\u5e26\u6709\u7ed9\u5b9a\u7684\u00a0<code>id<\/code>\u3002<br \/>\n\u5982\u679c\u6709\u591a\u4e2a\u5143\u7d20\u90fd\u5e26\u6709\u540c\u4e00\u4e2a\u00a0<code>id<\/code>\uff0c\u90a3\u4e48\u4f7f\u7528\u5b83\u7684\u65b9\u6cd5\u7684\u884c\u4e3a\u662f\u4e0d\u53ef\u9884\u6d4b\u7684\uff0c\u4f8b\u5982\u00a0<code>document.getElementById<\/code>\u00a0\u53ef\u80fd\u4f1a\u968f\u673a\u8fd4\u56de\u5176\u4e2d\u4e00\u4e2a\u5143\u7d20\u3002\u56e0\u6b64\uff0c\u8bf7\u9075\u5b88\u89c4\u5219\uff0c\u4fdd\u6301\u00a0<code>id<\/code>\u00a0\u7684\u552f\u4e00\u6027\u3002<\/p>\n<\/blockquote>\n<blockquote>\n<p>\u53ea\u6709\u00a0<code>document.getElementById<\/code>\uff0c\u6ca1\u6709\u00a0<code>anyElem.getElementById<\/code><br \/>\n<code>getElementById<\/code>\u00a0\u65b9\u6cd5\u53ea\u80fd\u88ab\u5728\u00a0<code>document<\/code>\u00a0\u5bf9\u8c61\u4e0a\u8c03\u7528\u3002\u5b83\u4f1a\u5728\u6574\u4e2a\u6587\u6863\u4e2d\u67e5\u627e\u7ed9\u5b9a\u7684\u00a0<code>id<\/code>\u3002<\/p>\n<\/blockquote>\n<h2>querySelectorAll<\/h2>\n<p>\u5230\u76ee\u524d\u4e3a\u6b62\uff0c\u6700\u901a\u7528\u7684\u65b9\u6cd5\u662f\u00a0<code>elem.querySelectorAll(css)<\/code>\uff0c\u5b83\u8fd4\u56de\u00a0<code>elem<\/code>\u00a0\u4e2d\u4e0e\u7ed9\u5b9a CSS \u9009\u62e9\u5668\u5339\u914d\u7684\u6240\u6709\u5143\u7d20\u3002<br \/>\n\u8fd9\u4e2a\u65b9\u6cd5\u786e\u5b9e\u529f\u80fd\u5f3a\u5927\uff0c\u56e0\u4e3a\u53ef\u4ee5\u4f7f\u7528\u4efb\u4f55 CSS \u9009\u62e9\u5668\u3002<\/p>\n<blockquote>\n<p>\u4e5f\u53ef\u4ee5\u4f7f\u7528\u4f2a\u7c7b<br \/>\nCSS \u9009\u62e9\u5668\u7684\u4f2a\u7c7b\uff0c\u4f8b\u5982\u00a0<code>:hover<\/code>\u00a0\u548c\u00a0<code>:active<\/code>\u00a0\u4e5f\u90fd\u662f\u88ab\u652f\u6301\u7684\u3002\u4f8b\u5982\uff0c<code>document.querySelectorAll(':hover')<\/code>\u00a0\u5c06\u4f1a\u8fd4\u56de\u9f20\u6807\u6307\u9488\u6b63\u5904\u4e8e\u5176\u4e0a\u65b9\u7684\u5143\u7d20\u7684\u96c6\u5408\uff08\u6309\u5d4c\u5957\u987a\u5e8f\uff1a\u4ece\u6700\u5916\u5c42\u00a0<code>&lt;html&gt;<\/code>\u00a0\u5230\u5d4c\u5957\u6700\u591a\u7684\u5143\u7d20\uff09\u3002<\/p>\n<\/blockquote>\n<h2>querySelector<\/h2>\n<p><code>elem.querySelector(css)<\/code>\u00a0\u8c03\u7528\u4f1a\u8fd4\u56de\u7ed9\u5b9a CSS \u9009\u62e9\u5668\u7684\u7b2c\u4e00\u4e2a\u5143\u7d20\u3002<br \/>\n\u6362\u53e5\u8bdd\u8bf4\uff0c\u7ed3\u679c\u4e0e\u00a0<code>elem.querySelectorAll(css)[0]<\/code>\u00a0\u76f8\u540c\uff0c\u4f46\u662f\u540e\u8005\u4f1a\u67e5\u627e\u00a0<strong>\u6240\u6709<\/strong>\u00a0\u5143\u7d20\uff0c\u5e76\u4ece\u4e2d\u9009\u53d6\u4e00\u4e2a\uff0c\u800c\u00a0<code>elem.querySelector<\/code>\u00a0\u53ea\u4f1a\u67e5\u627e\u4e00\u4e2a\u3002\u56e0\u6b64\u5b83\u5728\u901f\u5ea6\u4e0a\u66f4\u5feb\uff0c\u5e76\u4e14\u5199\u8d77\u6765\u66f4\u77ed\u3002<\/p>\n<h2>matches<\/h2>\n<p>\u4e4b\u524d\u7684\u65b9\u6cd5\u662f\u641c\u7d22 DOM\u3002<br \/>\n<a href=\"https:\/\/dom.spec.whatwg.org\/#dom-element-matches\">elem.matches(css)<\/a>\u00a0\u4e0d\u4f1a\u67e5\u627e\u4efb\u4f55\u5185\u5bb9\uff0c\u5b83\u53ea\u4f1a\u68c0\u67e5\u00a0<code>elem<\/code>\u00a0\u662f\u5426\u4e0e\u7ed9\u5b9a\u7684 CSS \u9009\u62e9\u5668\u5339\u914d\u3002\u5b83\u8fd4\u56de\u00a0<code>true<\/code>\u00a0\u6216\u00a0<code>false<\/code>\u3002<br \/>\n\u5f53\u6211\u4eec\u904d\u5386\u5143\u7d20\uff08\u4f8b\u5982\u6570\u7ec4\u6216\u5176\u4ed6\u5185\u5bb9\uff09\u5e76\u8bd5\u56fe\u8fc7\u6ee4\u90a3\u4e9b\u6211\u4eec\u611f\u5174\u8da3\u7684\u5143\u7d20\u65f6\uff0c\u8fd9\u4e2a\u65b9\u6cd5\u4f1a\u5f88\u6709\u7528\u3002<\/p>\n<h2>closest<\/h2>\n<p>\u5143\u7d20\u7684\u7956\u5148\uff08ancestor\uff09\u662f\uff1a\u7236\u7ea7\uff0c\u7236\u7ea7\u7684\u7236\u7ea7\uff0c\u5b83\u7684\u7236\u7ea7\u7b49\u3002\u7956\u5148\u4eec\u4e00\u8d77\u7ec4\u6210\u4e86\u4ece\u5143\u7d20\u5230\u9876\u7aef\u7684\u7236\u7ea7\u94fe\u3002<br \/>\n<code>elem.closest(css)<\/code>\u00a0\u65b9\u6cd5\u4f1a\u67e5\u627e\u4e0e CSS \u9009\u62e9\u5668\u5339\u914d\u7684\u6700\u8fd1\u7684\u7956\u5148\u3002<code>elem<\/code>\u00a0\u81ea\u5df1\u4e5f\u4f1a\u88ab\u641c\u7d22\u3002<br \/>\n\u6362\u53e5\u8bdd\u8bf4\uff0c\u65b9\u6cd5\u00a0<code>closest<\/code>\u00a0\u5728\u5143\u7d20\u4e2d\u5f97\u5230\u4e86\u63d0\u5347\uff0c\u5e76\u68c0\u67e5\u6bcf\u4e2a\u7236\u7ea7\u3002\u5982\u679c\u5b83\u4e0e\u9009\u62e9\u5668\u5339\u914d\uff0c\u5219\u505c\u6b62\u641c\u7d22\u5e76\u8fd4\u56de\u8be5\u7956\u5148\u3002<\/p>\n<h2>getElementsBy*<\/h2>\n<p>\u8fd8\u6709\u5176\u4ed6\u901a\u8fc7\u6807\u7b7e\uff0c\u7c7b\u7b49\u67e5\u627e\u8282\u70b9\u7684\u65b9\u6cd5\u3002<br \/>\n\u5982\u4eca\uff0c\u5b83\u4eec\u5927\u591a\u5df2\u7ecf\u6210\u4e3a\u4e86\u5386\u53f2\uff0c\u56e0\u4e3a\u00a0<code>querySelector<\/code>\u00a0\u529f\u80fd\u66f4\u5f3a\u5927\uff0c\u5199\u8d77\u6765\u66f4\u77ed\u3002<br \/>\n\u56e0\u6b64\uff0c\u8fd9\u91cc\u6211\u4eec\u4ecb\u7ecd\u5b83\u4eec\u53ea\u662f\u4e3a\u4e86\u5b8c\u6574\u8d77\u89c1\uff0c\u800c\u4f60\u4ecd\u7136\u53ef\u4ee5\u5728\u65e7\u811a\u672c\u4e2d\u627e\u5230\u8fd9\u4e9b\u65b9\u6cd5\u3002<\/p>\n<ul>\n<li><code>elem.getElementsByTagName(tag)<\/code>\u00a0\u67e5\u627e\u5177\u6709\u7ed9\u5b9a\u6807\u7b7e\u7684\u5143\u7d20\uff0c\u5e76\u8fd4\u56de\u5b83\u4eec\u7684\u96c6\u5408\u3002<code>tag<\/code>\u00a0\u53c2\u6570\u4e5f\u53ef\u4ee5\u662f\u5bf9\u4e8e\u201c\u4efb\u4f55\u6807\u7b7e\u201d\u7684\u661f\u53f7\u00a0<code>&quot;*&quot;<\/code>\u3002<\/li>\n<li><code>elem.getElementsByClassName(className)<\/code>\u00a0\u8fd4\u56de\u5177\u6709\u7ed9\u5b9aCSS\u7c7b\u7684\u5143\u7d20\u3002<\/li>\n<li><code>document.getElementsByName(name)<\/code>\u00a0\u8fd4\u56de\u5728\u6587\u6863\u8303\u56f4\u5185\u5177\u6709\u7ed9\u5b9a\u00a0<code>name<\/code>\u00a0\u7279\u6027\u7684\u5143\u7d20\u3002\u5f88\u5c11\u4f7f\u7528\u3002<\/li>\n<\/ul>\n<blockquote>\n<p>\u4e0d\u8981\u5fd8\u8bb0\u5b57\u6bcd\u00a0<code>&quot;s&quot;<\/code>\uff01<br \/>\n\u65b0\u624b\u5f00\u53d1\u8005\u6709\u65f6\u4f1a\u5fd8\u8bb0\u5b57\u7b26\u00a0<code>&quot;s&quot;<\/code>\u3002\u4e5f\u5c31\u662f\u8bf4\uff0c\u4ed6\u4eec\u4f1a\u8c03\u7528\u00a0<code>getElementByTagName<\/code>\u00a0\u800c\u4e0d\u662f\u00a0<code>getElement**s**ByTagName<\/code>\u3002<br \/>\n<code>getElementById<\/code>\u00a0\u4e2d\u6ca1\u6709\u5b57\u6bcd\u00a0<code>&quot;s&quot;<\/code>\uff0c\u662f\u56e0\u4e3a\u5b83\u53ea\u8fd4\u56de\u5355\u4e2a\u5143\u7d20\u3002\u4f46\u662f\u00a0<code>getElementsByTagName<\/code>\u00a0\u8fd4\u56de\u7684\u662f\u5143\u7d20\u7684\u96c6\u5408\uff0c\u6240\u4ee5\u91cc\u9762\u6709\u00a0<code>&quot;s&quot;<\/code>\u3002<\/p>\n<\/blockquote>\n<blockquote>\n<p>\u5b83\u8fd4\u56de\u7684\u662f\u4e00\u4e2a\u96c6\u5408\uff0c\u4e0d\u662f\u4e00\u4e2a\u5143\u7d20\uff01<br \/>\n\u53e6\u4e00\u4e2a\u666e\u904d\u7684\u9519\u8bef\u662f\u4e0d\u52a0\u7d22\u5f15<br \/>\n\u8fd9\u662f\u884c\u4e0d\u901a\u7684\uff0c\u56e0\u4e3a\u5b83\u9700\u8981\u7684\u662f\u4e00\u4e2a input \u7684\u00a0<strong>\u96c6\u5408<\/strong>\uff0c\u5e76\u5c06\u503c\u8d4b\uff08assign\uff09\u7ed9\u5b83\uff0c\u800c\u4e0d\u662f\u8d4b\u503c\u7ed9\u5176\u4e2d\u7684\u4e00\u4e2a\u5143\u7d20\u3002<br \/>\n\u6211\u4eec\u5e94\u8be5\u904d\u5386\u96c6\u5408\u6216\u901a\u8fc7\u5bf9\u5e94\u7684\u7d22\u5f15\u6765\u83b7\u53d6\u5143\u7d20\uff0c\u7136\u540e\u8d4b\u503c<\/p>\n<\/blockquote>\n<h2>\u5b9e\u65f6\u7684\u96c6\u5408<\/h2>\n<p>\u6240\u6709\u7684\u00a0<code>&quot;getElementsBy*&quot;<\/code>\u00a0\u65b9\u6cd5\u90fd\u4f1a\u8fd4\u56de\u4e00\u4e2a\u00a0<strong>\u5b9e\u65f6\u7684\uff08live\uff09<\/strong>\u00a0\u96c6\u5408\u3002\u8fd9\u6837\u7684\u96c6\u5408\u59cb\u7ec8\u53cd\u6620\u7684\u662f\u6587\u6863\u7684\u5f53\u524d\u72b6\u6001\uff0c\u5e76\u4e14\u5728\u6587\u6863\u53d1\u751f\u66f4\u6539\u65f6\u4f1a\u201c\u81ea\u52a8\u66f4\u65b0\u201d\u3002<br \/>\n\u5728\u4e0b\u9762\u7684\u4f8b\u5b50\u4e2d\uff0c\u6709\u4e24\u4e2a\u811a\u672c\u3002<\/p>\n<ol>\n<li>\u7b2c\u4e00\u4e2a\u521b\u5efa\u4e86\u5bf9\u00a0<code>&lt;div&gt;<\/code>\u00a0\u7684\u96c6\u5408\u7684\u5f15\u7528\u3002\u622a\u81f3\u76ee\u524d\uff0c\u5b83\u7684\u957f\u5ea6\u662f\u00a0<code>1<\/code>\u3002<\/li>\n<li>\u7b2c\u4e8c\u4e2a\u811a\u672c\u5728\u6d4f\u89c8\u5668\u518d\u9047\u5230\u4e00\u4e2a\u00a0<code>&lt;div&gt;<\/code>\u00a0\u65f6\u8fd0\u884c\uff0c\u6240\u4ee5\u5b83\u7684\u957f\u5ea6\u662f\u00a0<code>2<\/code>\u3002<\/li>\n<\/ol>\n<pre><code class=\"language-html\">&lt;div&gt;First div&lt;\/div&gt;\n\n&lt;script&gt;\n  let divs = document.getElementsByTagName('div');\n  alert(divs.length); \/\/ 1\n&lt;\/script&gt;\n\n&lt;div&gt;Second div&lt;\/div&gt;\n\n&lt;script&gt;\n  alert(divs.length); \/\/ 2\n&lt;\/script&gt;\n<\/code><\/pre>\n<p>\u76f8\u53cd\uff0c<code>querySelectorAll<\/code>\u00a0\u8fd4\u56de\u7684\u662f\u4e00\u4e2a\u00a0<strong>\u9759\u6001\u7684<\/strong>\u00a0\u96c6\u5408\u3002\u5c31\u50cf\u5143\u7d20\u7684\u56fa\u5b9a\u6570\u7ec4\u3002<br \/>\n\u5982\u679c\u6211\u4eec\u4f7f\u7528\u5b83\uff0c\u90a3\u4e48\u4e24\u4e2a\u811a\u672c\u90fd\u4f1a\u8f93\u51fa\u00a0<code>1<\/code>\uff1a<\/p>\n<pre><code class=\"language-html\">&lt;div&gt;First div&lt;\/div&gt;\n\n&lt;script&gt;\n  let divs = document.querySelectorAll('div');\n  alert(divs.length); \/\/ 1\n&lt;\/script&gt;\n\n&lt;div&gt;Second div&lt;\/div&gt;\n\n&lt;script&gt;\n  alert(divs.length); \/\/ 1\n&lt;\/script&gt;\n<\/code><\/pre>\n<h1>\u8282\u70b9\u5c5e\u6027 type tag \u548c content<\/h1>\n<h2>DOM \u8282\u70b9\u7c7b<\/h2>\n<p>\u4e0d\u540c\u7684 DOM \u8282\u70b9\u53ef\u80fd\u6709\u4e0d\u540c\u7684\u5c5e\u6027\u3002\u4f8b\u5982\uff0c\u6807\u7b7e\u00a0<code>&lt;a&gt;<\/code>\u00a0\u76f8\u5bf9\u5e94\u7684\u5143\u7d20\u8282\u70b9\u5177\u6709\u94fe\u63a5\u76f8\u5173\u7684\uff08link-related\uff09\u5c5e\u6027\uff0c\u6807\u7b7e\u00a0<code>&lt;input&gt;<\/code>\u00a0\u76f8\u5bf9\u5e94\u7684\u5143\u7d20\u8282\u70b9\u5177\u6709\u4e0e\u8f93\u5165\u76f8\u5173\u7684\u5c5e\u6027\uff0c\u7b49\u3002\u6587\u672c\u8282\u70b9\u4e0e\u5143\u7d20\u8282\u70b9\u4e0d\u540c\u3002\u4f46\u662f\u6240\u6709\u8fd9\u4e9b\u6807\u7b7e\u5bf9\u5e94\u7684 DOM \u8282\u70b9\u4e4b\u95f4\u4e5f\u5b58\u5728\u5171\u6709\u7684\u5c5e\u6027\u548c\u65b9\u6cd5\uff0c\u56e0\u4e3a\u6240\u6709\u7c7b\u578b\u7684 DOM \u8282\u70b9\u90fd\u5f62\u6210\u4e86\u4e00\u4e2a\u5355\u4e00\u5c42\u6b21\u7684\u7ed3\u6784\uff08single hierarchy\uff09\u3002<br \/>\n\u6bcf\u4e2a DOM \u8282\u70b9\u90fd\u5c5e\u4e8e\u76f8\u5e94\u7684\u5185\u5efa\u7c7b\u3002<br \/>\n\u5c42\u6b21\u7ed3\u6784\uff08hierarchy\uff09\u7684\u6839\u8282\u70b9\u662f\u00a0<a href=\"https:\/\/dom.spec.whatwg.org\/#eventtarget\">EventTarget<\/a>\uff0c<a href=\"https:\/\/dom.spec.whatwg.org\/#interface-node\">Node<\/a>\u00a0\u7ee7\u627f\u81ea\u5b83\uff0c\u5176\u4ed6 DOM \u8282\u70b9\u7ee7\u627f\u81ea Node\u3002<br \/>\n<div class='fancybox-wrapper lazyload-container-unload' data-fancybox='post-images' href='https:\/\/levin.ink\/wp-content\/uploads\/2024\/05\/Pasted-image-20240510194435.png'><img class=\"lazyload lazyload-style-1\" src=\"data:image\/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPgo8c3ZnIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjZmZmZmZmMDAiPjxnPjwvZz4KPC9zdmc+\"  decoding=\"async\" data-original=\"https:\/\/levin.ink\/wp-content\/uploads\/2024\/05\/Pasted-image-20240510194435.png\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB\/AAffA0nNPuCLAAAAAElFTkSuQmCC\" alt=\"Pasted image 20240510194435.png\"><\/div><br \/>\n\u7c7b\u5982\u4e0b\u6240\u793a\uff1a<\/p>\n<ul>\n<li><a href=\"https:\/\/dom.spec.whatwg.org\/#eventtarget\">EventTarget<\/a>\u00a0\u2014\u2014 \u662f\u4e00\u5207\u7684\u6839\u201c\u62bd\u8c61\uff08abstract\uff09\u201d\u7c7b\u3002<br \/>\n\u8be5\u7c7b\u7684\u5bf9\u8c61\u4ece\u672a\u88ab\u521b\u5efa\u3002\u5b83\u4f5c\u4e3a\u4e00\u4e2a\u57fa\u7840\uff0c\u4ee5\u4fbf\u8ba9\u6240\u6709 DOM \u8282\u70b9\u90fd\u652f\u6301\u6240\u8c13\u7684\u201c\u4e8b\u4ef6\uff08event\uff09\u201d\uff0c\u6211\u4eec\u4f1a\u5728\u4e4b\u540e\u5b66\u4e60\u5b83\u3002<\/li>\n<li><a href=\"http:\/\/dom.spec.whatwg.org\/#interface-node\">Node<\/a>\u00a0\u2014\u2014 \u4e5f\u662f\u4e00\u4e2a\u201c\u62bd\u8c61\u201d\u7c7b\uff0c\u5145\u5f53 DOM \u8282\u70b9\u7684\u57fa\u7840\u3002<br \/>\n\u5b83\u63d0\u4f9b\u4e86\u6811\u7684\u6838\u5fc3\u529f\u80fd\uff1a<code>parentNode<\/code>\uff0c<code>nextSibling<\/code>\uff0c<code>childNodes<\/code>\u00a0\u7b49\uff08\u5b83\u4eec\u90fd\u662f getter\uff09\u3002<code>Node<\/code>\u00a0\u7c7b\u7684\u5bf9\u8c61\u4ece\u672a\u88ab\u521b\u5efa\u3002\u4f46\u662f\u8fd8\u6709\u4e00\u4e9b\u7ee7\u627f\u81ea\u5b83\u7684\u5176\u4ed6\u7c7b\uff08\u56e0\u6b64\u7ee7\u627f\u4e86\u00a0<code>Node<\/code>\u00a0\u7684\u529f\u80fd\uff09\u3002<\/li>\n<li><a href=\"https:\/\/dom.spec.whatwg.org\/#interface-document\">Document<\/a>\u00a0\u7531\u4e8e\u5386\u53f2\u539f\u56e0\u901a\u5e38\u88ab\u00a0<code>HTMLDocument<\/code>\u00a0\u7ee7\u627f\uff08\u5c3d\u7ba1\u6700\u65b0\u7684\u89c4\u8303\u6ca1\u6709\u89c4\u5b9a\uff09\u2014\u2014 \u662f\u4e00\u4e2a\u6574\u4f53\u7684\u6587\u6863\u3002<br \/>\n\u5168\u5c40\u53d8\u91cf\u00a0<code>document<\/code>\u00a0\u5c31\u662f\u5c5e\u4e8e\u8fd9\u4e2a\u7c7b\u3002\u5b83\u4f5c\u4e3a DOM \u7684\u5165\u53e3\u3002<\/li>\n<li><a href=\"https:\/\/dom.spec.whatwg.org\/#interface-characterdata\">CharacterData<\/a>\u00a0\u2014\u2014 \u4e00\u4e2a\u201c\u62bd\u8c61\u201d\u7c7b\uff0c\u88ab\u4e0b\u8ff0\u7c7b\u7ee7\u627f\uff1a\n<ul>\n<li><a href=\"https:\/\/dom.spec.whatwg.org\/#interface-text\">Text<\/a>\u00a0\u2014\u2014 \u5bf9\u5e94\u4e8e\u5143\u7d20\u5185\u90e8\u6587\u672c\u7684\u7c7b\uff0c\u4f8b\u5982\u00a0<code>&lt;p&gt;Hello&lt;\/p&gt;<\/code>\u00a0\u4e2d\u7684\u00a0<code>Hello<\/code>\u3002<\/li>\n<li><a href=\"https:\/\/dom.spec.whatwg.org\/#interface-comment\">Comment<\/a>\u00a0\u2014\u2014 \u6ce8\u91ca\u7c7b\u3002\u5b83\u4eec\u4e0d\u4f1a\u88ab\u5c55\u793a\u51fa\u6765\uff0c\u4f46\u6bcf\u4e2a\u6ce8\u91ca\u90fd\u4f1a\u6210\u4e3a DOM \u4e2d\u7684\u4e00\u5458\u3002<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"http:\/\/dom.spec.whatwg.org\/#interface-element\">Element<\/a>\u00a0\u2014\u2014 \u662f DOM \u5143\u7d20\u7684\u57fa\u7840\u7c7b\u3002<br \/>\n\u5b83\u63d0\u4f9b\u4e86\u5143\u7d20\u7ea7\u5bfc\u822a\uff08navigation\uff09\uff0c\u5982\u00a0<code>nextElementSibling<\/code>\uff0c<code>children<\/code>\uff0c\u4ee5\u53ca\u641c\u7d22\u65b9\u6cd5\uff0c\u5982\u00a0<code>getElementsByTagName<\/code>\u00a0\u548c\u00a0<code>querySelector<\/code>\u3002<br \/>\n\u6d4f\u89c8\u5668\u4e0d\u4ec5\u652f\u6301 HTML\uff0c\u8fd8\u652f\u6301 XML \u548c SVG\u3002\u56e0\u6b64\uff0c<code>Element<\/code>\u00a0\u7c7b\u5145\u5f53\u7684\u662f\u66f4\u5177\u4f53\u7684\u7c7b\u7684\u57fa\u7840\uff1a<code>SVGElement<\/code>\uff0c<code>XMLElement<\/code>\uff08\u6211\u4eec\u5728\u8fd9\u91cc\u4e0d\u9700\u8981\u5b83\uff09\u548c\u00a0<code>HTMLElement<\/code>\u3002<\/li>\n<li>\u6700\u540e\uff0c<a href=\"https:\/\/html.spec.whatwg.org\/multipage\/dom.html#htmlelement\">HTMLElement<\/a>\u00a0\u2014\u2014 \u662f\u6240\u6709 HTML \u5143\u7d20\u7684\u57fa\u7840\u7c7b\u3002\u6211\u4eec\u5927\u90e8\u5206\u65f6\u5019\u90fd\u4f1a\u7528\u5230\u5b83\u3002<br \/>\n\u5b83\u4f1a\u88ab\u66f4\u5177\u4f53\u7684 HTML \u5143\u7d20\u7ee7\u627f\uff1a<\/p>\n<ul>\n<li><a href=\"https:\/\/html.spec.whatwg.org\/multipage\/forms.html#htmlinputelement\">HTMLInputElement<\/a>\u00a0\u2014\u2014\u00a0<code>&lt;input&gt;<\/code>\u00a0\u5143\u7d20\u7684\u7c7b\uff0c<\/li>\n<li><a href=\"https:\/\/html.spec.whatwg.org\/multipage\/semantics.html#htmlbodyelement\">HTMLBodyElement<\/a>\u00a0\u2014\u2014\u00a0<code>&lt;body&gt;<\/code>\u00a0\u5143\u7d20\u7684\u7c7b\uff0c<\/li>\n<li><a href=\"https:\/\/html.spec.whatwg.org\/multipage\/semantics.html#htmlanchorelement\">HTMLAnchorElement<\/a>\u00a0\u2014\u2014\u00a0<code>&lt;a&gt;<\/code>\u00a0\u5143\u7d20\u7684\u7c7b\uff0c<\/li>\n<li>\u2026\u2026\u7b49<br \/>\n\u8fd8\u6709\u5f88\u591a\u5176\u4ed6\u6807\u7b7e\u5177\u6709\u81ea\u5df1\u7684\u7c7b\uff0c\u53ef\u80fd\u8fd8\u5177\u6709\u7279\u5b9a\u7684\u5c5e\u6027\u548c\u65b9\u6cd5\uff0c\u800c\u4e00\u4e9b\u5143\u7d20\uff0c\u5982\u00a0<code>&lt;span&gt;<\/code>\u3001<code>&lt;section&gt;<\/code>\u3001<code>&lt;article&gt;<\/code>\u00a0\u7b49\uff0c\u6ca1\u6709\u4efb\u4f55\u7279\u5b9a\u7684\u5c5e\u6027\uff0c\u6240\u4ee5\u5b83\u4eec\u662f\u00a0<code>HTMLElement<\/code>\u00a0\u7c7b\u7684\u5b9e\u4f8b\u3002<br \/>\n\u56e0\u6b64\uff0c\u7ed9\u5b9a\u8282\u70b9\u7684\u5168\u90e8\u5c5e\u6027\u548c\u65b9\u6cd5\u90fd\u662f\u7ee7\u627f\u94fe\u7684\u7ed3\u679c\u3002<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>\u4f8b\u5982\uff0c\u6211\u4eec\u8003\u8651\u4e00\u4e0b\u00a0<code>&lt;input&gt;<\/code>\u00a0\u5143\u7d20\u7684 DOM \u5bf9\u8c61\u3002\u5b83\u5c5e\u4e8e\u00a0<a href=\"https:\/\/html.spec.whatwg.org\/multipage\/forms.html#htmlinputelement\">HTMLInputElement<\/a>\u00a0\u7c7b\u3002<br \/>\n\u5b83\u83b7\u53d6\u5c5e\u6027\u548c\u65b9\u6cd5\uff0c\u5e76\u5c06\u5176\u4f5c\u4e3a\u4e0b\u5217\u7c7b\uff08\u6309\u7ee7\u627f\u987a\u5e8f\u5217\u51fa\uff09\u7684\u53e0\u52a0\uff1a<\/p>\n<ul>\n<li><code>HTMLInputElement<\/code>\u00a0\u2014\u2014 \u8be5\u7c7b\u63d0\u4f9b\u7279\u5b9a\u4e8e\u8f93\u5165\u7684\u5c5e\u6027\uff0c<\/li>\n<li><code>HTMLElement<\/code>\u00a0\u2014\u2014 \u5b83\u63d0\u4f9b\u4e86\u901a\u7528\uff08common\uff09\u7684 HTML \u5143\u7d20\u65b9\u6cd5\uff08\u4ee5\u53ca getter \u548c setter\uff09<\/li>\n<li><code>Element<\/code>\u00a0\u2014\u2014 \u63d0\u4f9b\u901a\u7528\uff08generic\uff09\u5143\u7d20\u65b9\u6cd5\uff0c<\/li>\n<li><code>Node<\/code>\u00a0\u2014\u2014 \u63d0\u4f9b\u901a\u7528 DOM \u8282\u70b9\u5c5e\u6027\uff0c<\/li>\n<li><code>EventTarget<\/code>\u00a0\u2014\u2014 \u4e3a\u4e8b\u4ef6\uff08\u5305\u62ec\u4e8b\u4ef6\u672c\u8eab\uff09\u63d0\u4f9b\u652f\u6301\uff0c<\/li>\n<li>\u2026\u2026\u6700\u540e\uff0c\u5b83\u7ee7\u627f\u81ea\u00a0<code>Object<\/code>\uff0c\u56e0\u4e3a\u50cf\u00a0<code>hasOwnProperty<\/code>\u00a0\u8fd9\u6837\u7684\u201c\u666e\u901a\u5bf9\u8c61\u201d\u65b9\u6cd5\u4e5f\u662f\u53ef\u7528\u7684\u3002<br \/>\n\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7\u56de\u8c03\u6765\u67e5\u770b DOM \u8282\u70b9\u7c7b\u540d\uff0c\u56e0\u4e3a\u5bf9\u8c61\u901a\u5e38\u90fd\u5177\u6709\u00a0<code>constructor<\/code>\u00a0\u5c5e\u6027\u3002\u5b83\u5f15\u7528\u7c7b\u7684 constructor\uff0c<code>constructor.name<\/code>\u00a0\u5c31\u662f\u5b83\u7684\u540d\u79f0<\/li>\n<\/ul>\n<pre><code class=\"language-js\">document.body.constructor.name \/\/ HTMLBodyElement\ndocument.body \/\/ [object HTMLBodyElement]\ndocument.body instanceof HTMLBodyElement \/\/ true\ndocument.body instanceof HTMLElement \/\/ true\ndocument.body instanceof Element \/\/ true\ndocument.body instanceof Node \/\/ true\ndocument.body instanceof EventTarget \/\/ true\n<\/code><\/pre>\n<p>\u6b63\u5982\u6211\u4eec\u6240\u770b\u5230\u7684\uff0cDOM \u8282\u70b9\u662f\u5e38\u89c4\u7684 JavaScript \u5bf9\u8c61\u3002\u5b83\u4eec\u4f7f\u7528\u57fa\u4e8e\u539f\u578b\u7684\u7c7b\u8fdb\u884c\u7ee7\u627f\u3002<br \/>\n\u5728\u6d4f\u89c8\u5668\u4e2d\uff0c\u4f7f\u7528\u00a0<code>console.dir(elem)<\/code>\u00a0\u8f93\u51fa\u5143\u7d20\u6765\u67e5\u770b\u4e5f\u662f\u975e\u5e38\u5bb9\u6613\u7684\u3002\u5728\u63a7\u5236\u53f0\u4e2d\uff0c\u4f60\u53ef\u4ee5\u770b\u5230\u00a0<code>HTMLElement.prototype<\/code>\u00a0\u548c\u00a0<code>Element.prototype<\/code>\u00a0\u7b49\u3002<\/p>\n<blockquote>\n<p><code>console.dir(elem)<\/code>\u00a0\u4e0e\u00a0<code>console.log(elem)<\/code><br \/>\n\u5927\u591a\u6570\u6d4f\u89c8\u5668\u5728\u5176\u5f00\u53d1\u8005\u5de5\u5177\u4e2d\u90fd\u652f\u6301\u8fd9\u4e24\u4e2a\u547d\u4ee4\uff1a<code>console.log<\/code>\u00a0\u548c\u00a0<code>console.dir<\/code>\u3002\u5b83\u4eec\u5c06\u5b83\u4eec\u7684\u53c2\u6570\u8f93\u51fa\u5230\u63a7\u5236\u53f0\u4e2d\u3002\u5bf9\u4e8e JavaScript \u5bf9\u8c61\uff0c\u8fd9\u4e9b\u547d\u4ee4\u901a\u5e38\u505a\u7684\u662f\u76f8\u540c\u7684\u4e8b\u3002<br \/>\n\u4f46\u5bf9\u4e8e DOM \u5143\u7d20\uff0c\u5b83\u4eec\u662f\u4e0d\u540c\u7684\uff1a<\/p>\n<ul>\n<li><code>console.log(elem)<\/code>\u00a0\u663e\u793a\u5143\u7d20\u7684 DOM \u6811\u3002<\/li>\n<li><code>console.dir(elem)<\/code>\u00a0\u5c06\u5143\u7d20\u663e\u793a\u4e3a DOM \u5bf9\u8c61\uff0c\u975e\u5e38\u9002\u5408\u63a2\u7d22\u5176\u5c5e\u6027\u3002<\/li>\n<\/ul>\n<\/blockquote>\n<blockquote>\n<p>\u89c4\u8303\u4e2d\u7684 IDL<br \/>\n\u5728\u89c4\u8303\u4e2d\uff0cDOM \u7c7b\u4e0d\u662f\u4f7f\u7528 JavaScript \u6765\u63cf\u8ff0\u7684\uff0c\u800c\u662f\u4e00\u79cd\u7279\u6b8a\u7684\u00a0<a href=\"https:\/\/en.wikipedia.org\/wiki\/Interface_description_language\">\u63a5\u53e3\u63cf\u8ff0\u8bed\u8a00\uff08Interface description language\uff09<\/a>\uff0c\u7b80\u5199\u4e3a IDL\uff0c\u5b83\u901a\u5e38\u5f88\u5bb9\u6613\u7406\u89e3\u3002<br \/>\n\u5728 IDL \u4e2d\uff0c\u6240\u6709\u5c5e\u6027\u4ee5\u5176\u7c7b\u578b\u5f00\u5934\u3002\u4f8b\u5982\uff0c<code>DOMString<\/code>\u00a0\u548c\u00a0<code>boolean<\/code>\u00a0\u7b49\u3002<br \/>\n\u4ee5\u4e0b\u662f\u6458\u5f55\uff08excerpt\uff09\uff0c\u5e76\u9644\u6709\u6ce8\u91ca\uff1a<\/p>\n<\/blockquote>\n<pre><code class=\"language-idl\">\/\/ \u5b9a\u4e49 HTMLInputElement\n\/\/ \u5192\u53f7 &quot;:&quot; \u8868\u793a HTMLInputElement \u7ee7\u627f\u81ea HTMLElement\ninterface HTMLInputElement: HTMLElement {\n  \/\/ \u63a5\u4e0b\u6765\u662f &lt;input&gt; \u5143\u7d20\u7684\u5c5e\u6027\u548c\u65b9\u6cd5\n\n  \/\/ &quot;DOMString&quot; \u8868\u793a\u5c5e\u6027\u7684\u503c\u662f\u5b57\u7b26\u4e32\n  attribute DOMString accept;\n  attribute DOMString alt;\n  attribute DOMString autocomplete;\n  attribute DOMString value;\n\n  \/\/ \u5e03\u5c14\u503c\u5c5e\u6027\uff08true\/false\uff09\n  attribute boolean autofocus;\n  ...\n  \/\/ \u73b0\u5728\u65b9\u6cd5\uff1a&quot;void&quot; \u8868\u793a\u65b9\u6cd5\u6ca1\u6709\u8fd4\u56de\u503c\n  void select();\n  ...\n}\n<\/code><\/pre>\n<h2>nodeType \u5c5e\u6027<\/h2>\n<p><code>nodeType<\/code>\u00a0\u5c5e\u6027\u63d0\u4f9b\u4e86\u53e6\u4e00\u79cd\u201c\u8fc7\u65f6\u7684\u201d\u7528\u6765\u83b7\u53d6 DOM \u8282\u70b9\u7c7b\u578b\u7684\u65b9\u6cd5\u3002<br \/>\n\u5b83\u6709\u4e00\u4e2a\u6570\u503c\u578b\u503c\uff08numeric value\uff09\uff1a<\/p>\n<ul>\n<li>\u5bf9\u4e8e\u5143\u7d20\u8282\u70b9\u00a0<code>elem.nodeType == 1<\/code>\uff0c<\/li>\n<li>\u5bf9\u4e8e\u6587\u672c\u8282\u70b9\u00a0<code>elem.nodeType == 3<\/code>\uff0c<\/li>\n<li>\u5bf9\u4e8e document \u5bf9\u8c61\u00a0<code>elem.nodeType == 9<\/code>\uff0c<\/li>\n<li>\u5728\u00a0<a href=\"https:\/\/dom.spec.whatwg.org\/#node\">\u89c4\u8303<\/a>\u00a0\u4e2d\u8fd8\u6709\u4e00\u4e9b\u5176\u4ed6\u503c\u3002<\/li>\n<\/ul>\n<pre><code class=\"language-html\">&lt;body&gt;\n  &lt;script&gt;\n  let elem = document.body;\n\n  \/\/ \u8ba9\u6211\u4eec\u68c0\u67e5\u4e00\u4e0b\uff1aelem \u4e2d\u7684\u8282\u70b9\u7c7b\u578b\u662f\u4ec0\u4e48\uff1f\n  alert(elem.nodeType); \/\/ 1 =&gt; element\n\n  \/\/ \u5b83\u7684\u7b2c\u4e00\u4e2a\u5b50\u8282\u70b9\u7684\u7c7b\u578b\u662f\u2026\u2026\n  alert(elem.firstChild.nodeType); \/\/ 3 =&gt; text\n\n  \/\/ \u5bf9\u4e8e document \u5bf9\u8c61\uff0c\u7c7b\u578b\u662f 9\n  alert( document.nodeType ); \/\/ 9\n  &lt;\/script&gt;\n&lt;\/body&gt;\n<\/code><\/pre>\n<p>\u5728\u73b0\u4ee3\u811a\u672c\u4e2d\uff0c\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u00a0<code>instanceof<\/code>\u00a0\u548c\u5176\u4ed6\u57fa\u4e8e\u7c7b\u7684\u68c0\u67e5\u65b9\u6cd5\u6765\u67e5\u770b\u8282\u70b9\u7c7b\u578b\uff0c\u4f46\u6709\u65f6\u00a0<code>nodeType<\/code>\u00a0\u53ef\u80fd\u66f4\u7b80\u5355\u3002\u6211\u4eec\u53ea\u80fd\u8bfb\u53d6\u00a0<code>nodeType<\/code>\u00a0\u800c\u4e0d\u80fd\u4fee\u6539\u5b83\u3002<\/p>\n<h2>\u6807\u7b7e nodeName tagName<\/h2>\n<p>\u7ed9\u5b9a\u4e00\u4e2a DOM \u8282\u70b9\uff0c\u6211\u4eec\u53ef\u4ee5\u4ece\u00a0<code>nodeName<\/code>\u00a0\u6216\u8005\u00a0<code>tagName<\/code>\u00a0\u5c5e\u6027\u4e2d\u8bfb\u53d6\u5b83\u7684\u6807\u7b7e\u540d<\/p>\n<pre><code class=\"language-js\">alert( document.body.nodeName ); \/\/ BODY\nalert( document.body.tagName ); \/\/ BODY\n<\/code><\/pre>\n<p>tagName \u548c nodeName \u4e4b\u95f4\u6709\u4ec0\u4e48\u4e0d\u540c\u5417\uff1f<br \/>\n\u5f53\u7136\uff0c\u5dee\u5f02\u5c31\u4f53\u73b0\u5728\u5b83\u4eec\u7684\u540d\u5b57\u4e0a\uff0c\u4f46\u786e\u5b9e\u6709\u4e9b\u5fae\u5999\u3002<\/p>\n<ul>\n<li><code>tagName<\/code>\u00a0\u5c5e\u6027\u4ec5\u9002\u7528\u4e8e\u00a0<code>Element<\/code>\u00a0\u8282\u70b9\u3002<\/li>\n<li><code>nodeName<\/code>\u00a0\u662f\u4e3a\u4efb\u610f\u00a0<code>Node<\/code>\u00a0\u5b9a\u4e49\u7684\uff1a\n<ul>\n<li>\u5bf9\u4e8e\u5143\u7d20\uff0c\u5b83\u7684\u610f\u4e49\u4e0e\u00a0<code>tagName<\/code>\u00a0\u76f8\u540c\u3002<\/li>\n<li>\u5bf9\u4e8e\u5176\u4ed6\u8282\u70b9\u7c7b\u578b\uff08text\uff0ccomment \u7b49\uff09\uff0c\u5b83\u62e5\u6709\u4e00\u4e2a\u5bf9\u5e94\u8282\u70b9\u7c7b\u578b\u7684\u5b57\u7b26\u4e32\u3002<br \/>\n\u6362\u53e5\u8bdd\u8bf4\uff0c<code>tagName<\/code>\u00a0\u4ec5\u53d7\u5143\u7d20\u8282\u70b9\u652f\u6301\uff08\u56e0\u4e3a\u5b83\u8d77\u6e90\u4e8e\u00a0<code>Element<\/code>\u00a0\u7c7b\uff09\uff0c\u800c\u00a0<code>nodeName<\/code>\u00a0\u5219\u53ef\u4ee5\u8bf4\u660e\u5176\u4ed6\u8282\u70b9\u7c7b\u578b\u3002<br \/>\n\u4f8b\u5982\uff0c\u6211\u4eec\u6bd4\u8f83\u4e00\u4e0b\u00a0<code>document<\/code>\u00a0\u7684\u00a0<code>tagName<\/code>\u00a0\u548c\u00a0<code>nodeName<\/code>\uff0c\u4ee5\u53ca\u4e00\u4e2a\u6ce8\u91ca\u8282\u70b9<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<pre><code class=\"language-html\">&lt;body&gt;&lt;!-- comment --&gt;\n\n  &lt;script&gt;\n    \/\/ for comment\n    alert( document.body.firstChild.tagName ); \/\/ undefined\uff08\u4e0d\u662f\u4e00\u4e2a\u5143\u7d20\uff09\n    alert( document.body.firstChild.nodeName ); \/\/ #comment\n\n    \/\/ for document\n    alert( document.tagName ); \/\/ undefined\uff08\u4e0d\u662f\u4e00\u4e2a\u5143\u7d20\uff09\n    alert( document.nodeName ); \/\/ #document\n  &lt;\/script&gt;\n&lt;\/body&gt;\n<\/code><\/pre>\n<p>\u5982\u679c\u6211\u4eec\u53ea\u5904\u7406\u5143\u7d20\uff0c\u90a3\u4e48\u00a0<code>tagName<\/code>\u00a0\u548c\u00a0<code>nodeName<\/code>\u00a0\u8fd9\u4e24\u79cd\u65b9\u6cd5\uff0c\u6211\u4eec\u90fd\u53ef\u4ee5\u4f7f\u7528\uff0c\u6ca1\u6709\u533a\u522b\u3002<\/p>\n<blockquote>\n<p>\u6807\u7b7e\u540d\u79f0\u59cb\u7ec8\u662f\u5927\u5199\u7684\uff0c\u9664\u975e\u662f\u5728 XML \u6a21\u5f0f\u4e0b<br \/>\n\u6d4f\u89c8\u5668\u6709\u4e24\u79cd\u5904\u7406\u6587\u6863\uff08document\uff09\u7684\u6a21\u5f0f\uff1aHTML \u548c XML\u3002\u901a\u5e38\uff0cHTML \u6a21\u5f0f\u7528\u4e8e\u7f51\u9875\u3002\u53ea\u6709\u5728\u6d4f\u89c8\u5668\u63a5\u6536\u5230\u5e26\u6709\u00a0<code>Content-Type: application\/xml+xhtml<\/code>\u00a0header \u7684 XML-document \u65f6\uff0cXML \u6a21\u5f0f\u624d\u4f1a\u88ab\u542f\u7528\u3002<br \/>\n\u5728 HTML \u6a21\u5f0f\u4e0b\uff0c<code>tagName\/nodeName<\/code>\u00a0\u59cb\u7ec8\u662f\u5927\u5199\u7684\uff1a\u5b83\u662f\u00a0<code>BODY<\/code>\uff0c\u800c\u4e0d\u662f\u00a0<code>&lt;body&gt;<\/code>\u00a0\u6216\u00a0<code>&lt;BoDy&gt;<\/code>\u3002<br \/>\n\u5728 XML \u6a21\u5f0f\u4e2d\uff0c\u5927\u5c0f\u5199\u4fdd\u6301\u4e3a\u201c\u539f\u6837\u201d\u3002\u5982\u4eca\uff0cXML \u6a21\u5f0f\u5f88\u5c11\u88ab\u4f7f\u7528\u3002<\/p>\n<\/blockquote>\n<h2>innerHTML \u5185\u5bb9<\/h2>\n<p><a href=\"https:\/\/w3c.github.io\/DOM-Parsing\/#the-innerhtml-mixin\">innerHTML<\/a>\u00a0\u5c5e\u6027\u5141\u8bb8\u5c06\u5143\u7d20\u4e2d\u7684 HTML \u83b7\u53d6\u4e3a\u5b57\u7b26\u4e32\u5f62\u5f0f\u3002<br \/>\n\u6211\u4eec\u4e5f\u53ef\u4ee5\u4fee\u6539\u5b83\u3002\u56e0\u6b64\uff0c\u5b83\u662f\u66f4\u6539\u9875\u9762\u6700\u6709\u6548\u7684\u65b9\u6cd5\u4e4b\u4e00\u3002<br \/>\n\u4e0b\u9762\u8fd9\u4e2a\u793a\u4f8b\u663e\u793a\u4e86\u00a0<code>document.body<\/code>\u00a0\u4e2d\u7684\u5185\u5bb9\uff0c\u7136\u540e\u5c06\u5176\u5b8c\u5168\u66ff\u6362<\/p>\n<pre><code class=\"language-html\">&lt;body&gt;\n  &lt;p&gt;A paragraph&lt;\/p&gt;\n  &lt;div&gt;A div&lt;\/div&gt;\n\n  &lt;script&gt;\n    alert( document.body.innerHTML ); \/\/ \u8bfb\u53d6\u5f53\u524d\u5185\u5bb9\n    document.body.innerHTML = 'The new BODY!'; \/\/ \u66ff\u6362\u5b83\n  &lt;\/script&gt;\n\n&lt;\/body&gt;\n<\/code><\/pre>\n<blockquote>\n<p>\u811a\u672c\u4e0d\u4f1a\u6267\u884c<br \/>\n\u5982\u679c\u00a0<code>innerHTML<\/code>\u00a0\u5c06\u4e00\u4e2a\u00a0<code>&lt;script&gt;<\/code>\u00a0\u6807\u7b7e\u63d2\u5165\u5230 document \u4e2d \u2014\u2014 \u5b83\u4f1a\u6210\u4e3a HTML \u7684\u4e00\u90e8\u5206\uff0c\u4f46\u662f\u4e0d\u4f1a\u6267\u884c\u3002<\/p>\n<\/blockquote>\n<h3>Be careful &quot;innerHTML += &quot;\u4f1a\u5b8c\u5168\u91cd\u5199<\/h3>\n<p>\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u00a0<code>elem.innerHTML+=&quot;more html&quot;<\/code>\u00a0\u5c06 HTML \u9644\u52a0\u5230\u5143\u7d20\u4e0a\u3002<br \/>\n\u4f46\u6211\u4eec\u5fc5\u987b\u975e\u5e38\u8c28\u614e\u5730\u4f7f\u7528\u5b83\uff0c\u56e0\u4e3a\u6211\u4eec\u6240\u505a\u7684\u00a0<strong>\u4e0d\u662f<\/strong>\u00a0\u9644\u52a0\u5185\u5bb9\uff0c\u800c\u4e14\u5b8c\u5168\u5730\u91cd\u5199\u3002<br \/>\n\u4ece\u6280\u672f\u4e0a\u6765\u8bf4\uff0c\u4e0b\u9762\u8fd9\u4e24\u884c\u4ee3\u7801\u7684\u4f5c\u7528\u76f8\u540c<\/p>\n<pre><code class=\"language-js\">elem.innerHTML += &quot;...&quot;;\n\/\/ \u8fdb\u884c\u5199\u5165\u7684\u4e00\u79cd\u66f4\u7b80\u77ed\u7684\u65b9\u5f0f\uff1a\nelem.innerHTML = elem.innerHTML + &quot;...&quot;\n<\/code><\/pre>\n<p>\u6362\u53e5\u8bdd\u8bf4\uff0c<code>innerHTML+=<\/code>\u00a0\u505a\u4e86\u4ee5\u4e0b\u5de5\u4f5c\uff1a<\/p>\n<ol>\n<li>\u79fb\u9664\u65e7\u7684\u5185\u5bb9\u3002<\/li>\n<li>\u7136\u540e\u5199\u5165\u65b0\u7684\u00a0<code>innerHTML<\/code>\uff08\u65b0\u65e7\u7ed3\u5408\uff09\u3002<br \/>\n<strong>\u56e0\u4e3a\u5185\u5bb9\u5df2\u201c\u5f52\u96f6\u201d\u5e76\u4ece\u5934\u5f00\u59cb\u91cd\u5199\uff0c\u56e0\u6b64\u6240\u6709\u7684\u56fe\u7247\u548c\u5176\u4ed6\u8d44\u6e90\u90fd\u5c06\u91cd\u5199\u52a0\u8f7d\u3002<\/strong><br \/>\n\u5728\u4e0a\u9762\u7684\u00a0<code>chatDiv<\/code>\u00a0\u793a\u4f8b\u4e2d\uff0c<code>chatDiv.innerHTML+=&quot;How goes?&quot;<\/code>\u00a0\u91cd\u5efa\u4e86 HTML \u5185\u5bb9\u5e76\u91cd\u65b0\u52a0\u8f7d\u4e86\u00a0<code>smile.gif<\/code>\uff08\u5e0c\u671b\u5b83\u662f\u7f13\u5b58\u7684\uff09\u3002\u5982\u679c\u00a0<code>chatDiv<\/code>\u00a0\u6709\u8bb8\u591a\u5176\u4ed6\u6587\u672c\u548c\u56fe\u7247\uff0c\u90a3\u4e48\u5c31\u5f88\u5bb9\u6613\u770b\u5230\u91cd\u65b0\u52a0\u8f7d\uff08\u8bd1\u6ce8\uff1a\u662f\u6307\u5728\u6709\u5f88\u591a\u5185\u5bb9\u65f6\uff0c\u91cd\u65b0\u52a0\u8f7d\u4f1a\u8017\u8d39\u66f4\u591a\u7684\u65f6\u95f4\uff0c\u6240\u4ee5\u4f60\u5c31\u5f88\u5bb9\u6613\u770b\u89c1\u9875\u9762\u91cd\u8f7d\u7684\u8fc7\u7a0b\uff09\u3002<br \/>\n\u5e76\u4e14\u8fd8\u4f1a\u6709\u5176\u4ed6\u526f\u4f5c\u7528\u3002\u4f8b\u5982\uff0c\u5982\u679c\u73b0\u6709\u7684\u6587\u672c\u88ab\u7528\u9f20\u6807\u9009\u4e2d\u4e86\uff0c\u90a3\u4e48\u5927\u591a\u6570\u6d4f\u89c8\u5668\u90fd\u4f1a\u5728\u91cd\u5199\u00a0<code>innerHTML<\/code>\u00a0\u65f6\u5220\u9664\u9009\u5b9a\u72b6\u6001\u3002\u5982\u679c\u8fd9\u91cc\u6709\u4e00\u4e2a\u5e26\u6709\u7528\u6237\u8f93\u5165\u7684\u6587\u672c\u7684\u00a0<code>&lt;input&gt;<\/code>\uff0c\u90a3\u4e48\u8fd9\u4e2a\u88ab\u8f93\u5165\u7684\u6587\u672c\u5c06\u4f1a\u88ab\u79fb\u9664\u3002\u8bf8\u5982\u6b64\u7c7b\u3002<br \/>\n\u5e78\u8fd0\u7684\u662f\uff0c\u9664\u4e86\u00a0<code>innerHTML<\/code>\uff0c\u8fd8\u6709\u5176\u4ed6\u53ef\u4ee5\u6dfb\u52a0 HTML \u7684\u65b9\u6cd5\uff0c\u6211\u4eec\u5f88\u5feb\u5c31\u4f1a\u5b66\u5230\u3002<\/li>\n<\/ol>\n<h2>outerHTML: \u5143\u7d20\u7684\u5b8c\u6574HTML<\/h2>\n<p><code>outerHTML<\/code>\u00a0\u5c5e\u6027\u5305\u542b\u4e86\u5143\u7d20\u7684\u5b8c\u6574 HTML\u3002\u5c31\u50cf\u00a0<code>innerHTML<\/code>\u00a0\u52a0\u4e0a\u5143\u7d20\u672c\u8eab\u4e00\u6837\u3002<br \/>\n<strong>\u6ce8\u610f\uff1a\u4e0e\u00a0<code>innerHTML<\/code>\u00a0\u4e0d\u540c\uff0c\u5199\u5165\u00a0<code>outerHTML<\/code>\u00a0\u4e0d\u4f1a\u6539\u53d8\u5143\u7d20\u3002\u800c\u662f\u5728 DOM \u4e2d\u66ff\u6362\u5b83\u3002<\/strong><br \/>\n\u662f\u7684\uff0c\u542c\u8d77\u6765\u5f88\u5947\u602a\uff0c\u5b83\u786e\u5b9e\u5f88\u5947\u602a\uff0c\u8fd9\u5c31\u662f\u4e3a\u4ec0\u4e48\u6211\u4eec\u5728\u8fd9\u91cc\u5bf9\u6b64\u505a\u4e86\u4e00\u4e2a\u5355\u72ec\u7684\u6ce8\u91ca\u3002\u770b\u4e00\u4e0b\u3002<\/p>\n<pre><code class=\"language-html\">&lt;div&gt;Hello, world!&lt;\/div&gt;\n\n&lt;script&gt;\n  let div = document.querySelector('div');\n\n  \/\/ \u4f7f\u7528 &lt;p&gt;...&lt;\/p&gt; \u66ff\u6362 div.outerHTML\n  div.outerHTML = '&lt;p&gt;A new element&lt;\/p&gt;'; \/\/ (*)\n\n  \/\/ \u86e4\uff01'div' \u8fd8\u662f\u539f\u6765\u90a3\u6837\uff01\n  alert(div.outerHTML); \/\/ &lt;div&gt;Hello, world!&lt;\/div&gt; (**)\n&lt;\/script&gt;\n<\/code><\/pre>\n<p>\u770b\u8d77\u6765\u771f\u7684\u5f88\u5947\u602a\uff0c\u5bf9\u5427\uff1f<br \/>\n\u5728\u00a0<code>(*)<\/code>\u00a0\u884c\uff0c\u6211\u4eec\u4f7f\u7528\u00a0<code>&lt;p&gt;A new element&lt;\/p&gt;<\/code>\u00a0\u66ff\u6362\u00a0<code>div<\/code>\u3002\u5728\u5916\u90e8\u6587\u6863\uff08DOM\uff09\u4e2d\u6211\u4eec\u53ef\u4ee5\u770b\u5230\u7684\u662f\u65b0\u5185\u5bb9\u800c\u4e0d\u662f\u00a0<code>&lt;div&gt;<\/code>\u3002\u4f46\u662f\u6b63\u5982\u6211\u4eec\u5728\u00a0<code>(**)<\/code>\u00a0\u884c\u6240\u770b\u5230\u7684\uff0c\u65e7\u7684\u00a0<code>div<\/code>\u00a0\u53d8\u91cf\u5e76\u6ca1\u6709\u88ab\u6539\u53d8\u3002<br \/>\n<code>outerHTML<\/code>\u00a0\u8d4b\u503c\u4e0d\u4f1a\u4fee\u6539 DOM \u5143\u7d20\uff08\u5728\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\u662f\u88ab \u2018div\u2019 \u5f15\u7528\u7684\u5bf9\u8c61\uff09\uff0c\u800c\u662f\u5c06\u5176\u4ece DOM \u4e2d\u5220\u9664\u5e76\u5728\u5176\u4f4d\u7f6e\u63d2\u5165\u65b0\u7684 HTML\u3002<br \/>\n\u6240\u4ee5\uff0c\u5728\u00a0<code>div.outerHTML=...<\/code>\u00a0\u4e2d\u53d1\u751f\u7684\u4e8b\u60c5\u662f\uff1a<\/p>\n<ul>\n<li><code>div<\/code>\u00a0\u88ab\u4ece\u6587\u6863\uff08document\uff09\u4e2d\u79fb\u9664\u3002<\/li>\n<li>\u53e6\u4e00\u4e2a HTML \u7247\u6bb5\u00a0<code>&lt;p&gt;A new element&lt;\/p&gt;<\/code>\u00a0\u88ab\u63d2\u5165\u5230\u5176\u4f4d\u7f6e\u4e0a\u3002<\/li>\n<li><code>div<\/code>\u00a0\u4ecd\u62e5\u6709\u5176\u65e7\u7684\u503c\u3002\u65b0\u7684 HTML \u6ca1\u6709\u88ab\u8d4b\u503c\u7ed9\u4efb\u4f55\u53d8\u91cf\u3002<br \/>\n\u5728\u8fd9\u513f\u5f88\u5bb9\u6613\u51fa\u9519\uff1a\u4fee\u6539\u00a0<code>div.outerHTML<\/code>\u00a0\u7136\u540e\u7ee7\u7eed\u4f7f\u7528\u00a0<code>div<\/code>\uff0c\u5c31\u597d\u50cf\u5b83\u5305\u542b\u7684\u662f\u65b0\u5185\u5bb9\u4e00\u6837\u3002\u4f46\u4e8b\u5b9e\u5e76\u975e\u5982\u6b64\u3002\u8fd9\u6837\u7684\u4e1c\u897f\u5bf9\u4e8e\u00a0<code>innerHTML<\/code>\u00a0\u662f\u6b63\u786e\u7684\uff0c\u4f46\u662f\u5bf9\u4e8e\u00a0<code>outerHTML<\/code>\u00a0\u5374\u4e0d\u6b63\u786e\u3002<br \/>\n\u6211\u4eec\u53ef\u4ee5\u5411\u00a0<code>elem.outerHTML<\/code>\u00a0\u5199\u5165\u5185\u5bb9\uff0c\u4f46\u662f\u8981\u8bb0\u4f4f\uff0c\u5b83\u4e0d\u4f1a\u6539\u53d8\u6211\u4eec\u6240\u5199\u7684\u5143\u7d20\uff08\u2018elem\u2019\uff09\u3002\u800c\u662f\u5c06\u65b0\u7684 HTML \u653e\u5728\u5176\u4f4d\u7f6e\u4e0a\u3002\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7\u67e5\u8be2 DOM \u6765\u83b7\u53d6\u5bf9\u65b0\u5143\u7d20\u7684\u5f15\u7528\u3002<\/li>\n<\/ul>\n<h2>nodeValue\/data: \u6587\u672c\u8282\u70b9\u5185\u5bb9<\/h2>\n<p><code>innerHTML<\/code>\u00a0\u5c5e\u6027\u4ec5\u5bf9\u5143\u7d20\u8282\u70b9\u6709\u6548\u3002<br \/>\n\u5176\u4ed6\u8282\u70b9\u7c7b\u578b\uff0c\u4f8b\u5982\u6587\u672c\u8282\u70b9\uff0c\u5177\u6709\u5b83\u4eec\u7684\u5bf9\u5e94\u9879\uff1a<code>nodeValue<\/code>\u00a0\u548c\u00a0<code>data<\/code>\u00a0\u5c5e\u6027\u3002\u8fd9\u4e24\u8005\u5728\u5b9e\u9645\u4f7f\u7528\u4e2d\u51e0\u4e4e\u76f8\u540c\uff0c\u53ea\u6709\u7ec6\u5fae\u89c4\u8303\u4e0a\u7684\u5dee\u5f02\u3002\u56e0\u6b64\uff0c\u6211\u4eec\u5c06\u4f7f\u7528\u00a0<code>data<\/code>\uff0c\u56e0\u4e3a\u5b83\u66f4\u77ed\u3002<\/p>\n<p>\u5bf9\u4e8e\u6587\u672c\u8282\u70b9\uff0c\u6211\u4eec\u53ef\u4ee5\u60f3\u8c61\u8bfb\u53d6\u6216\u4fee\u6539\u5b83\u4eec\u7684\u539f\u56e0\uff0c\u4f46\u662f\u6ce8\u91ca\u5462\uff1f<br \/>\n\u6709\u65f6\uff0c\u5f00\u53d1\u8005\u4f1a\u5c06\u4fe1\u606f\u6216\u6a21\u677f\u8bf4\u660e\u5d4c\u5165\u5230 HTML \u4e2d\u7684\u6ce8\u91ca\u4e2d\uff0c\u5982\u4e0b\u6240\u793a<\/p>\n<pre><code class=\"language-html\">&lt;!-- if isAdmin --&gt;\n  &lt;div&gt;Welcome, Admin!&lt;\/div&gt;\n&lt;!-- \/if --&gt;\n<\/code><\/pre>\n<p>\u2026\u2026\u7136\u540e\uff0cJavaScript \u53ef\u4ee5\u4ece\u00a0<code>data<\/code>\u00a0\u5c5e\u6027\u4e2d\u8bfb\u53d6\u5b83\uff0c\u5e76\u5904\u7406\u5d4c\u5165\u7684\u6307\u4ee4\u3002<\/p>\n<h2>textContent: \u7eaf\u6587\u672c<\/h2>\n<p><code>textContent<\/code>\u00a0\u63d0\u4f9b\u4e86\u5bf9\u5143\u7d20\u5185\u7684\u00a0<strong>\u6587\u672c<\/strong>\u00a0\u7684\u8bbf\u95ee\u6743\u9650\uff1a\u4ec5\u6587\u672c\uff0c\u53bb\u6389\u6240\u6709\u00a0<code>&lt;tags&gt;<\/code>\u3002<\/p>\n<pre><code class=\"language-html\">&lt;div id=&quot;news&quot;&gt;\n  &lt;h1&gt;Headline!&lt;\/h1&gt;\n  &lt;p&gt;Martians attack people!&lt;\/p&gt;\n&lt;\/div&gt;\n\n&lt;script&gt;\n  \/\/ Headline! Martians attack people!\n  alert(news.textContent);\n&lt;\/script&gt;\n<\/code><\/pre>\n<p>\u6b63\u5982\u6211\u4eec\u6240\u770b\u5230\uff0c\u53ea\u8fd4\u56de\u6587\u672c\uff0c\u5c31\u50cf\u6240\u6709\u00a0<code>&lt;tags&gt;<\/code>\u00a0\u90fd\u88ab\u526a\u6389\u4e86\u4e00\u6837\uff0c\u4f46\u5b9e\u9645\u4e0a\u5176\u4e2d\u7684\u6587\u672c\u4ecd\u7136\u5b58\u5728\u3002<br \/>\n\u5728\u5b9e\u9645\u5f00\u53d1\u4e2d\uff0c\u7528\u5230\u8fd9\u6837\u7684\u6587\u672c\u8bfb\u53d6\u7684\u573a\u666f\u975e\u5e38\u5c11\u3002<br \/>\n<strong>\u5199\u5165\u00a0<code>textContent<\/code>\u00a0\u8981\u6709\u7528\u5f97\u591a\uff0c\u56e0\u4e3a\u5b83\u5141\u8bb8\u4ee5\u201c\u5b89\u5168\u65b9\u5f0f\u201d\u5199\u5165\u6587\u672c\u3002<\/strong><br \/>\n\u5047\u8bbe\u6211\u4eec\u6709\u4e00\u4e2a\u7528\u6237\u8f93\u5165\u7684\u4efb\u610f\u5b57\u7b26\u4e32\uff0c\u6211\u4eec\u5e0c\u671b\u5c06\u5176\u663e\u793a\u51fa\u6765\u3002<\/p>\n<ul>\n<li>\u4f7f\u7528\u00a0<code>innerHTML<\/code>\uff0c\u6211\u4eec\u5c06\u5176\u201c\u4f5c\u4e3a HTML\u201d\u63d2\u5165\uff0c\u5e26\u6709\u6240\u6709 HTML \u6807\u7b7e\u3002<\/li>\n<li>\u4f7f\u7528\u00a0<code>textContent<\/code>\uff0c\u6211\u4eec\u5c06\u5176\u201c\u4f5c\u4e3a\u6587\u672c\u201d\u63d2\u5165\uff0c\u6240\u6709\u7b26\u53f7\uff08symbol\uff09\u5747\u6309\u5b57\u9762\u610f\u4e49\u5904\u7406\u3002<\/li>\n<\/ul>\n<pre><code class=\"language-html\">&lt;div id=&quot;elem1&quot;&gt;&lt;\/div&gt;\n&lt;div id=&quot;elem2&quot;&gt;&lt;\/div&gt;\n\n&lt;script&gt;\n  let name = prompt(&quot;What's your name?&quot;, &quot;&lt;b&gt;Winnie-the-Pooh!&lt;\/b&gt;&quot;);\n\n  elem1.innerHTML = name;\n  elem2.textContent = name;\n&lt;\/script&gt;\n<\/code><\/pre>\n<ol>\n<li>\u7b2c\u4e00\u4e2a\u00a0<code>&lt;div&gt;<\/code>\u00a0\u83b7\u53d6 name \u201c\u4f5c\u4e3a HTML\u201d\uff1a\u6240\u6709\u6807\u7b7e\u90fd\u53d8\u6210\u6807\u7b7e\uff0c\u6240\u4ee5\u6211\u4eec\u53ef\u4ee5\u770b\u5230\u7c97\u4f53\u7684 name\u3002<\/li>\n<li>\u7b2c\u4e8c\u4e2a\u00a0<code>&lt;div&gt;<\/code>\u00a0\u83b7\u53d6 name \u201c\u4f5c\u4e3a\u6587\u672c\u201d\uff0c\u56e0\u6b64\u6211\u4eec\u53ef\u4ee5\u4ece\u5b57\u9762\u4e0a\u770b\u5230\u00a0<code>&lt;b&gt;Winnie-the-Pooh!&lt;\/b&gt;<\/code>\u3002<br \/>\n\u5728\u5927\u591a\u6570\u60c5\u51b5\u4e0b\uff0c\u6211\u4eec\u671f\u671b\u6765\u81ea\u7528\u6237\u7684\u6587\u672c\uff0c\u5e76\u5e0c\u671b\u5c06\u5176\u89c6\u4e3a\u6587\u672c\u5bf9\u5f85\u3002\u6211\u4eec\u4e0d\u5e0c\u671b\u5728\u6211\u4eec\u7684\u7f51\u7ad9\u4e2d\u51fa\u73b0\u610f\u6599\u4e0d\u5230\u7684 HTML\u3002\u5bf9\u00a0<code>textContent<\/code>\u00a0\u7684\u8d4b\u503c\u6b63\u597d\u53ef\u4ee5\u505a\u5230\u8fd9\u4e00\u70b9\u3002<\/li>\n<\/ol>\n<h2>&quot;hidden&quot; \u5c5e\u6027<\/h2>\n<p>\u201chidden\u201d \u7279\u6027\uff08attribute\uff09\u548c DOM \u5c5e\u6027\uff08property\uff09\u6307\u5b9a\u5143\u7d20\u662f\u5426\u53ef\u89c1\u3002<br \/>\n\u6211\u4eec\u53ef\u4ee5\u5728 HTML \u4e2d\u4f7f\u7528\u5b83\uff0c\u6216\u8005\u4f7f\u7528 JavaScript \u5bf9\u5176\u8fdb\u884c\u8d4b\u503c<\/p>\n<pre><code class=\"language-html\">&lt;div&gt;Both divs below are hidden&lt;\/div&gt;\n\n&lt;div hidden&gt;With the attribute &quot;hidden&quot;&lt;\/div&gt;\n\n&lt;div id=&quot;elem&quot;&gt;JavaScript assigned the property &quot;hidden&quot;&lt;\/div&gt;\n\n&lt;script&gt;\n  elem.hidden = true;\n&lt;\/script&gt;\n<\/code><\/pre>\n<p>\u4ece\u6280\u672f\u4e0a\u6765\u8bf4\uff0c<code>hidden<\/code>\u00a0\u4e0e\u00a0<code>style=&quot;display:none&quot;<\/code>\u00a0\u505a\u7684\u662f\u76f8\u540c\u7684\u4e8b\u3002\u4f46\u00a0<code>hidden<\/code>\u00a0\u5199\u6cd5\u66f4\u7b80\u6d01\u3002<br \/>\n\u8fd9\u91cc\u6709\u4e00\u4e2a blinking \u5143\u7d20<\/p>\n<pre><code class=\"language-html\">&lt;div id=&quot;elem&quot;&gt;A blinking element&lt;\/div&gt;\n\n&lt;script&gt;\n  setInterval(() =&gt; elem.hidden = !elem.hidden, 1000);\n&lt;\/script&gt;\n<\/code><\/pre>\n<h2>\u66f4\u591a\u5c5e\u6027<\/h2>\n<p>DOM \u5143\u7d20\u8fd8\u6709\u5176\u4ed6\u5c5e\u6027\uff0c\u7279\u522b\u662f\u90a3\u4e9b\u4f9d\u8d56\u4e8e class \u7684\u5c5e\u6027\uff1a<\/p>\n<ul>\n<li><code>value<\/code>\u00a0\u2014\u2014\u00a0<code>&lt;input&gt;<\/code>\uff0c<code>&lt;select&gt;<\/code>\u00a0\u548c\u00a0<code>&lt;textarea&gt;<\/code>\uff08<code>HTMLInputElement<\/code>\uff0c<code>HTMLSelectElement<\/code>\u2026\u2026\uff09\u7684 value\u3002<\/li>\n<li><code>href<\/code>\u00a0\u2014\u2014\u00a0<code>&lt;a href=&quot;...&quot;&gt;<\/code>\uff08<code>HTMLAnchorElement<\/code>\uff09\u7684 href\u3002<\/li>\n<li><code>id<\/code>\u00a0\u2014\u2014 \u6240\u6709\u5143\u7d20\uff08<code>HTMLElement<\/code>\uff09\u7684 \u201cid\u201d \u7279\u6027\uff08attribute\uff09\u7684\u503c\u3002<\/li>\n<li>\u2026\u2026\u4ee5\u53ca\u66f4\u591a\u5176\u4ed6\u5185\u5bb9\u2026\u2026<br \/>\n\u5982\u679c\u6211\u4eec\u60f3\u8981\u5feb\u901f\u83b7\u53d6\u5b83\u4eec\uff0c\u6216\u8005\u5bf9\u5177\u4f53\u7684\u6d4f\u89c8\u5668\u89c4\u8303\u611f\u5174\u8da3 \u2014 \u6211\u4eec\u603b\u662f\u53ef\u4ee5\u4f7f\u7528\u00a0<code>console.dir(elem)<\/code>\u00a0\u8f93\u51fa\u5143\u7d20\u5e76\u8bfb\u53d6\u5176\u5c5e\u6027\u3002\u6216\u8005\u5728\u6d4f\u89c8\u5668\u7684\u5f00\u53d1\u8005\u5de5\u5177\u7684\u5143\u7d20\uff08Elements\uff09\u6807\u7b7e\u9875\u4e2d\u63a2\u7d22\u201cDOM \u5c5e\u6027\u201d\u3002<\/li>\n<\/ul>\n<h1>\u7279\u6027\u548c\u5c5e\u6027 (Attributes and properties)<\/h1>\n<p>\u5f53\u6d4f\u89c8\u5668\u52a0\u8f7d\u9875\u9762\u65f6\uff0c\u5b83\u4f1a\u201c\u8bfb\u53d6\u201d\uff08\u6216\u8005\u79f0\u4e4b\u4e3a\uff1a\u201c\u89e3\u6790\u201d\uff09HTML \u5e76\u4ece\u4e2d\u751f\u6210 DOM \u5bf9\u8c61\u3002\u5bf9\u4e8e\u5143\u7d20\u8282\u70b9\uff0c\u5927\u591a\u6570\u6807\u51c6\u7684 HTML \u7279\u6027\uff08attributes\uff09\u4f1a\u81ea\u52a8\u53d8\u6210 DOM \u5bf9\u8c61\u7684\u5c5e\u6027\uff08properties\uff09\u3002\uff08\u8bd1\u6ce8\uff1aattribute \u548c property \u4e24\u8bcd\u610f\u601d\u76f8\u8fd1\uff0c\u4e3a\u4f5c\u533a\u5206\uff0c\u5168\u6587\u5c06 attribute \u8bd1\u4e3a\u201c\u7279\u6027\u201d\uff0cproperty \u8bd1\u4e3a\u201c\u5c5e\u6027\u201d\uff0c\u8bf7\u8bfb\u8005\u6ce8\u610f\u533a\u5206\u3002\uff09<br \/>\n\u4f8b\u5982\uff0c\u5982\u679c\u6807\u7b7e\u662f\u00a0<code>&lt;body id=&quot;page&quot;&gt;<\/code>\uff0c\u90a3\u4e48 DOM \u5bf9\u8c61\u5c31\u4f1a\u6709\u00a0<code>body.id=&quot;page&quot;<\/code>\u3002<\/p>\n<h2>DOM \u5c5e\u6027<\/h2>\n<p>\u6211\u4eec\u5df2\u7ecf\u89c1\u8fc7\u4e86\u5185\u5efa DOM \u5c5e\u6027\u3002\u5b83\u4eec\u6570\u91cf\u5e9e\u5927\u3002\u4f46\u662f\u4ece\u6280\u672f\u4e0a\u8bb2\uff0c\u6ca1\u6709\u4eba\u4f1a\u9650\u5236\u6211\u4eec\uff0c\u5982\u679c\u6211\u4eec\u89c9\u5f97\u8fd9\u4e9b DOM \u8fd8\u4e0d\u591f\uff0c\u6211\u4eec\u53ef\u4ee5\u6dfb\u52a0\u6211\u4eec\u81ea\u5df1\u7684\u3002<br \/>\nDOM \u8282\u70b9\u662f\u5e38\u89c4\u7684 JavaScript \u5bf9\u8c61\u3002\u6211\u4eec\u53ef\u4ee5\u66f4\u6539\u5b83\u4eec\u3002<\/p>\n<pre><code class=\"language-js\">\/\/ \u6dfb\u52a0\u4e00\u4e2a\u5c5e\u6027\ndocument.body.myData = {\n\tname: 'xxx',\n\ttitle: 'xxx'\n};\n\/\/ \u6dfb\u52a0\u4e00\u4e2a\u65b9\u6cd5\ndocument.body.sayTagName = function() {\n\talert(this.tagName);\n};\n\/\/ \u4fee\u6539\u5185\u5efa\u5c5e\u6027\u7684\u539f\u578b\uff0c\u4e3a\u6240\u6709\u5143\u7d20\u6dfb\u52a0\u4e00\u4e2a\u65b9\u6cd5\nElement.prototype.sayHi = function() {\n\talert(&quot;Hi&quot;);\n};\n<\/code><\/pre>\n<p>\u6240\u4ee5\uff0cDOM \u5c5e\u6027\u548c\u65b9\u6cd5\u7684\u884c\u4e3a\u5c31\u50cf\u5e38\u89c4\u7684 Javascript \u5bf9\u8c61\u4e00\u6837\uff1a<\/p>\n<ul>\n<li>\u5b83\u4eec\u53ef\u4ee5\u6709\u5f88\u591a\u503c\u3002<\/li>\n<li>\u5b83\u4eec\u662f\u5927\u5c0f\u5199\u654f\u611f\u7684\uff08\u8981\u5199\u6210\u00a0<code>elem.nodeType<\/code>\uff0c\u800c\u4e0d\u662f\u00a0<code>elem.NoDeTyPe<\/code>\uff09\u3002<\/li>\n<\/ul>\n<h2>HTML \u5c5e\u6027<\/h2>\n<p>\u5728 HTML \u4e2d\uff0c\u6807\u7b7e\u53ef\u80fd\u62e5\u6709\u7279\u6027\uff08attributes\uff09\u3002\u5f53\u6d4f\u89c8\u5668\u89e3\u6790 HTML \u6587\u672c\uff0c\u5e76\u6839\u636e\u6807\u7b7e\u521b\u5efa DOM \u5bf9\u8c61\u65f6\uff0c\u6d4f\u89c8\u5668\u4f1a\u8fa8\u522b\u00a0<strong>\u6807\u51c6\u7684<\/strong>\u00a0\u7279\u6027\u5e76\u4ee5\u6b64\u521b\u5efa DOM \u5c5e\u6027\u3002<br \/>\n\u6240\u4ee5\uff0c\u5f53\u4e00\u4e2a\u5143\u7d20\u6709\u00a0<code>id<\/code>\u00a0\u6216\u5176\u4ed6\u00a0<strong>\u6807\u51c6\u7684<\/strong>\u00a0\u7279\u6027\uff0c\u90a3\u4e48\u5c31\u4f1a\u751f\u6210\u5bf9\u5e94\u7684 DOM \u5c5e\u6027\u3002\u4f46\u662f\u975e\u00a0<strong>\u6807\u51c6\u7684<\/strong>\u00a0\u7279\u6027\u5219\u4e0d\u4f1a\u3002<\/p>\n<pre><code class=\"language-html\">&lt;body id=&quot;test&quot; something=&quot;non-standard&quot;&gt;\n  &lt;script&gt;\n    alert(document.body.id); \/\/ test\n    \/\/ \u975e\u6807\u51c6\u7684\u7279\u6027\u6ca1\u6709\u83b7\u5f97\u5bf9\u5e94\u7684\u5c5e\u6027\n    alert(document.body.something); \/\/ undefined\n  &lt;\/script&gt;\n&lt;\/body&gt;\n<\/code><\/pre>\n<p>\u8bf7\u6ce8\u610f\uff0c\u4e00\u4e2a\u5143\u7d20\u7684\u6807\u51c6\u7684\u7279\u6027\u5bf9\u4e8e\u53e6\u4e00\u4e2a\u5143\u7d20\u53ef\u80fd\u662f\u672a\u77e5\u7684\u3002\u4f8b\u5982\u00a0<code>&quot;type&quot;<\/code>\u00a0\u662f\u00a0<code>&lt;input&gt;<\/code>\u00a0\u7684\u4e00\u4e2a\u6807\u51c6\u7684\u7279\u6027\uff08<a href=\"https:\/\/html.spec.whatwg.org\/#htmlinputelement\">HTMLInputElement<\/a>\uff09\uff0c\u4f46\u5bf9\u4e8e\u00a0<code>&lt;body&gt;<\/code>\uff08<a href=\"https:\/\/html.spec.whatwg.org\/#htmlbodyelement\">HTMLBodyElement<\/a>\uff09\u6765\u8bf4\u5219\u4e0d\u662f\u3002\u89c4\u8303\u4e2d\u5bf9\u76f8\u5e94\u5143\u7d20\u7c7b\u7684\u6807\u51c6\u7684\u5c5e\u6027\u8fdb\u884c\u4e86\u8be6\u7ec6\u7684\u63cf\u8ff0\u3002<\/p>\n<pre><code class=\"language-html\">&lt;body id=&quot;body&quot; type=&quot;...&quot;&gt;\n  &lt;input id=&quot;input&quot; type=&quot;text&quot;&gt;\n  &lt;script&gt;\n    alert(input.type); \/\/ text\n    alert(body.type); \/\/ undefined\uff1aDOM \u5c5e\u6027\u6ca1\u6709\u88ab\u521b\u5efa\uff0c\u56e0\u4e3a\u5b83\u4e0d\u662f\u4e00\u4e2a\u6807\u51c6\u7684\u7279\u6027\n  &lt;\/script&gt;\n&lt;\/body&gt;\n<\/code><\/pre>\n<p>\u6240\u4ee5\uff0c\u5982\u679c\u4e00\u4e2a\u7279\u6027\u4e0d\u662f\u6807\u51c6\u7684\uff0c\u90a3\u4e48\u5c31\u6ca1\u6709\u76f8\u5bf9\u5e94\u7684 DOM \u5c5e\u6027\u3002\u90a3\u6211\u4eec\u6709\u4ec0\u4e48\u65b9\u6cd5\u6765\u8bbf\u95ee\u8fd9\u4e9b\u7279\u6027\u5417\uff1f<br \/>\n\u5f53\u7136\u3002\u6240\u6709\u7279\u6027\u90fd\u53ef\u4ee5\u901a\u8fc7\u4f7f\u7528\u4ee5\u4e0b\u65b9\u6cd5\u8fdb\u884c\u8bbf\u95ee\uff1a<\/p>\n<ul>\n<li><code>elem.hasAttribute(name)<\/code>\u00a0\u2014\u2014 \u68c0\u67e5\u7279\u6027\u662f\u5426\u5b58\u5728\u3002<\/li>\n<li><code>elem.getAttribute(name)<\/code>\u00a0\u2014\u2014 \u83b7\u53d6\u8fd9\u4e2a\u7279\u6027\u503c\u3002<\/li>\n<li><code>elem.setAttribute(name, value)<\/code>\u00a0\u2014\u2014 \u8bbe\u7f6e\u8fd9\u4e2a\u7279\u6027\u503c\u3002<\/li>\n<li><code>elem.removeAttribute(name)<\/code>\u00a0\u2014\u2014 \u79fb\u9664\u8fd9\u4e2a\u7279\u6027\u3002<br \/>\n\u8fd9\u4e9b\u65b9\u6cd5\u64cd\u4f5c\u7684\u5b9e\u9645\u4e0a\u662f HTML \u4e2d\u7684\u5185\u5bb9\u3002<br \/>\n\u6211\u4eec\u4e5f\u53ef\u4ee5\u4f7f\u7528\u00a0<code>elem.attributes<\/code>\u00a0\u8bfb\u53d6\u6240\u6709\u7279\u6027\uff1a\u5c5e\u4e8e\u5185\u5efa\u00a0<a href=\"https:\/\/dom.spec.whatwg.org\/#attr\">Attr<\/a>\u00a0\u7c7b\u7684\u5bf9\u8c61\u7684\u96c6\u5408\uff0c\u5177\u6709\u00a0<code>name<\/code>\u00a0\u548c\u00a0<code>value<\/code>\u00a0\u5c5e\u6027\u3002<\/li>\n<\/ul>\n<p>HTML \u7279\u6027\u6709\u4ee5\u4e0b\u51e0\u4e2a\u7279\u5f81\uff1a<\/p>\n<ul>\n<li>\u5b83\u4eec\u7684\u540d\u5b57\u662f\u5927\u5c0f\u5199\u4e0d\u654f\u611f\u7684\uff08<code>id<\/code>\u00a0\u4e0e\u00a0<code>ID<\/code>\u00a0\u76f8\u540c\uff09\u3002<\/li>\n<li>\u5b83\u4eec\u7684\u503c\u603b\u662f\u5b57\u7b26\u4e32\u7c7b\u578b\u7684\u3002<\/li>\n<\/ul>\n<pre><code class=\"language-html\">&lt;body&gt;\n  &lt;div id=&quot;elem&quot; about=&quot;Elephant&quot;&gt;&lt;\/div&gt;\n\n  &lt;script&gt;\n    alert( elem.getAttribute('About') ); \/\/ (1) 'Elephant'\uff0c\u8bfb\u53d6\n\n    elem.setAttribute('Test', 123); \/\/ (2) \u5199\u5165\n\n    alert( elem.outerHTML ); \/\/ (3) \u67e5\u770b\u7279\u6027\u662f\u5426\u5728 HTML \u4e2d\uff08\u5728\uff09\n\n    for (let attr of elem.attributes) { \/\/ (4) \u5217\u51fa\u6240\u6709\n      alert( `${attr.name} = ${attr.value}` );\n    }\n  &lt;\/script&gt;\n&lt;\/body&gt;\n<\/code><\/pre>\n<p>\u8bf7\u6ce8\u610f\uff1a<\/p>\n<ol>\n<li><code>getAttribute('About')<\/code>\u00a0\u2014\u2014 \u8fd9\u91cc\u7684\u7b2c\u4e00\u4e2a\u5b57\u6bcd\u662f\u5927\u5199\u7684\uff0c\u4f46\u662f\u5728 HTML \u4e2d\uff0c\u5b83\u4eec\u90fd\u662f\u5c0f\u5199\u7684\u3002\u4f46\u8fd9\u6ca1\u6709\u5f71\u54cd\uff1a\u7279\u6027\u7684\u540d\u79f0\u662f\u5927\u5c0f\u5199\u4e0d\u654f\u611f\u7684\u3002<\/li>\n<li>\u6211\u4eec\u53ef\u4ee5\u5c06\u4efb\u4f55\u4e1c\u897f\u8d4b\u503c\u7ed9\u7279\u6027\uff0c\u4f46\u662f\u8fd9\u4e9b\u4e1c\u897f\u4f1a\u53d8\u6210\u5b57\u7b26\u4e32\u7c7b\u578b\u7684\u3002\u6240\u4ee5\u8fd9\u91cc\u6211\u4eec\u7684\u503c\u4e3a\u00a0<code>&quot;123&quot;<\/code>\u3002<\/li>\n<li>\u6240\u6709\u7279\u6027\uff0c\u5305\u62ec\u6211\u4eec\u8bbe\u7f6e\u7684\u90a3\u4e2a\u7279\u6027\uff0c\u5728\u00a0<code>outerHTML<\/code>\u00a0\u4e2d\u90fd\u662f\u53ef\u89c1\u7684\u3002<\/li>\n<li><code>attributes<\/code>\u00a0\u96c6\u5408\u662f\u53ef\u8fed\u4ee3\u5bf9\u8c61\uff0c\u8be5\u5bf9\u8c61\u5c06\u6240\u6709\u5143\u7d20\u7684\u7279\u6027\uff08\u6807\u51c6\u548c\u975e\u6807\u51c6\u7684\uff09\u4f5c\u4e3a\u00a0<code>name<\/code>\u00a0\u548c\u00a0<code>value<\/code>\u00a0\u5c5e\u6027\u5b58\u50a8\u5728\u5bf9\u8c61\u4e2d\u3002<\/li>\n<\/ol>\n<h2>\u5c5e\u6027-\u7279\u6027\u540c\u6b65<\/h2>\n<p>\u5f53\u4e00\u4e2a\u6807\u51c6\u7684\u7279\u6027\u88ab\u6539\u53d8\uff0c\u5bf9\u5e94\u7684\u5c5e\u6027\u4e5f\u4f1a\u81ea\u52a8\u66f4\u65b0\uff0c\uff08\u9664\u4e86\u51e0\u4e2a\u7279\u4f8b\uff09\u53cd\u4e4b\u4ea6\u7136\u3002<br \/>\n\u5728\u4e0b\u9762\u8fd9\u4e2a\u793a\u4f8b\u4e2d\uff0c<code>id<\/code>\u00a0\u88ab\u4fee\u6539\u4e3a\u7279\u6027\uff0c\u6211\u4eec\u53ef\u4ee5\u770b\u5230\u5bf9\u5e94\u7684\u5c5e\u6027\u4e5f\u53d1\u751f\u4e86\u53d8\u5316\u3002<\/p>\n<pre><code class=\"language-html\">&lt;input&gt;\n\n&lt;script&gt;\n  let input = document.querySelector('input');\n\n  \/\/ \u7279\u6027 =&gt; \u5c5e\u6027\n  input.setAttribute('id', 'id');\n  alert(input.id); \/\/ id\uff08\u88ab\u66f4\u65b0\u4e86\uff09\n\n  \/\/ \u5c5e\u6027 =&gt; \u7279\u6027\n  input.id = 'newId';\n  alert(input.getAttribute('id')); \/\/ newId\uff08\u88ab\u66f4\u65b0\u4e86\uff09\n&lt;\/script&gt;\n<\/code><\/pre>\n<p>\u4f46\u8fd9\u91cc\u4e5f\u6709\u4e9b\u4f8b\u5916\uff0c\u4f8b\u5982\u00a0<code>input.value<\/code>\u00a0\u53ea\u80fd\u4ece\u7279\u6027\u540c\u6b65\u5230\u5c5e\u6027\uff0c\u53cd\u8fc7\u6765\u5219\u4e0d\u884c<\/p>\n<pre><code class=\"language-html\">&lt;input&gt;\n\n&lt;script&gt;\n  let input = document.querySelector('input');\n\n  \/\/ \u7279\u6027 =&gt; \u5c5e\u6027\n  input.setAttribute('value', 'text');\n  alert(input.value); \/\/ text\n\n  \/\/ \u8fd9\u4e2a\u64cd\u4f5c\u65e0\u6548\uff0c\u5c5e\u6027 =&gt; \u7279\u6027\n  input.value = 'newValue';\n  alert(input.getAttribute('value')); \/\/ text\uff08\u6ca1\u6709\u88ab\u66f4\u65b0\uff01\uff09\n&lt;\/script&gt;\n<\/code><\/pre>\n<p>\u5728\u4e0a\u9762\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\uff1a<\/p>\n<ul>\n<li>\u6539\u53d8\u7279\u6027\u503c\u00a0<code>value<\/code>\u00a0\u4f1a\u66f4\u65b0\u5c5e\u6027\u3002<\/li>\n<li>\u4f46\u662f\u5c5e\u6027\u7684\u66f4\u6539\u4e0d\u4f1a\u5f71\u54cd\u7279\u6027\u3002<br \/>\n\u8fd9\u4e2a\u201c\u529f\u80fd\u201d\u5728\u5b9e\u9645\u4e2d\u4f1a\u6d3e\u4e0a\u7528\u573a\uff0c\u56e0\u4e3a\u7528\u6237\u884c\u4e3a\u53ef\u80fd\u4f1a\u5bfc\u81f4\u00a0<code>value<\/code>\u00a0\u7684\u66f4\u6539\uff0c\u7136\u540e\u5728\u8fd9\u4e9b\u64cd\u4f5c\u4e4b\u540e\uff0c\u5982\u679c\u6211\u4eec\u60f3\u4ece HTML \u4e2d\u6062\u590d\u201c\u539f\u59cb\u201d\u503c\uff0c\u90a3\u4e48\u8be5\u503c\u5c31\u5728\u7279\u6027\u4e2d\u3002<\/li>\n<\/ul>\n<h2>DOM \u5c5e\u6027\u662f\u591a\u7c7b\u578b\u7684<\/h2>\n<p>DOM \u5c5e\u6027\u4e0d\u603b\u662f\u5b57\u7b26\u4e32\u7c7b\u578b\u7684\u3002\u4f8b\u5982\uff0c<code>input.checked<\/code>\u00a0\u5c5e\u6027\uff08\u5bf9\u4e8e checkbox \u7684\uff09\u662f\u5e03\u5c14\u578b\u7684\u3002<\/p>\n<pre><code class=\"language-html\">&lt;input id=&quot;input&quot; type=&quot;checkbox&quot; checked&gt; checkbox\n\n&lt;script&gt;\n  alert(input.getAttribute('checked')); \/\/ \u7279\u6027\u503c\u662f\uff1a\u7a7a\u5b57\u7b26\u4e32\n  alert(input.checked); \/\/ \u5c5e\u6027\u503c\u662f\uff1atrue\n&lt;\/script&gt;\n<\/code><\/pre>\n<p>\u8fd8\u6709\u5176\u4ed6\u7684\u4f8b\u5b50\u3002<code>style<\/code>\u00a0\u7279\u6027\u662f\u5b57\u7b26\u4e32\u7c7b\u578b\u7684\uff0c\u4f46\u00a0<code>style<\/code>\u00a0\u5c5e\u6027\u662f\u4e00\u4e2a\u5bf9\u8c61<\/p>\n<pre><code class=\"language-html\">&lt;div id=&quot;div&quot; style=&quot;color:red;font-size:120%&quot;&gt;Hello&lt;\/div&gt;\n\n&lt;script&gt;\n  \/\/ \u5b57\u7b26\u4e32\n  alert(div.getAttribute('style')); \/\/ color:red;font-size:120%\n\n  \/\/ \u5bf9\u8c61\n  alert(div.style); \/\/ [object CSSStyleDeclaration]\n  alert(div.style.color); \/\/ red\n&lt;\/script&gt;\n<\/code><\/pre>\n<p>\u5c3d\u7ba1\u5927\u591a\u6570 DOM \u5c5e\u6027\u90fd\u662f\u5b57\u7b26\u4e32\u7c7b\u578b\u7684\u3002<br \/>\n\u6709\u4e00\u79cd\u975e\u5e38\u5c11\u89c1\u7684\u60c5\u51b5\uff0c\u5373\u4f7f\u4e00\u4e2a DOM \u5c5e\u6027\u662f\u5b57\u7b26\u4e32\u7c7b\u578b\u7684\uff0c\u4f46\u5b83\u53ef\u80fd\u548c HTML \u7279\u6027\u4e5f\u662f\u4e0d\u540c\u7684\u3002\u4f8b\u5982\uff0c<code>href<\/code>\u00a0DOM \u5c5e\u6027\u4e00\u76f4\u662f\u4e00\u4e2a\u00a0<strong>\u5b8c\u6574\u7684<\/strong>\u00a0URL\uff0c\u5373\u4f7f\u8be5\u7279\u6027\u5305\u542b\u4e00\u4e2a\u76f8\u5bf9\u8def\u5f84\u6216\u8005\u5305\u542b\u4e00\u4e2a\u00a0<code>#hash<\/code>\u3002<\/p>\n<pre><code class=\"language-html\">&lt;a id=&quot;a&quot; href=&quot;#hello&quot;&gt;link&lt;\/a&gt;\n&lt;script&gt;\n  \/\/ \u7279\u6027\n  alert(a.getAttribute('href')); \/\/ #hello\n\n  \/\/ \u5c5e\u6027\n  alert(a.href ); \/\/ http:\/\/site.com\/page#hello \u5f62\u5f0f\u7684\u5b8c\u6574 URL\n&lt;\/script&gt;\n<\/code><\/pre>\n<p>\u5982\u679c\u6211\u4eec\u9700\u8981\u00a0<code>href<\/code>\u00a0\u7279\u6027\u7684\u503c\uff0c\u6216\u8005\u5176\u4ed6\u4e0e HTML \u4e2d\u6240\u5199\u7684\u5b8c\u5168\u76f8\u540c\u7684\u7279\u6027\uff0c\u5219\u53ef\u4ee5\u4f7f\u7528\u00a0<code>getAttribute<\/code>\u3002<\/p>\n<h2>\u975e\u6807\u51c6\u7684\u7279\u6027\uff0cdataset<\/h2>\n<p>\u5f53\u7f16\u5199 HTML \u65f6\uff0c\u6211\u4eec\u4f1a\u7528\u5230\u5f88\u591a\u6807\u51c6\u7684\u7279\u6027\u3002\u4f46\u662f\u975e\u6807\u51c6\u7684\uff0c\u81ea\u5b9a\u4e49\u7684\u5462\uff1f\u9996\u5148\uff0c\u8ba9\u6211\u4eec\u770b\u770b\u5b83\u4eec\u662f\u5426\u6709\u7528\uff1f\u7528\u6765\u505a\u4ec0\u4e48\uff1f<br \/>\n\u6709\u65f6\uff0c\u975e\u6807\u51c6\u7684\u7279\u6027\u5e38\u5e38\u7528\u4e8e\u5c06\u81ea\u5b9a\u4e49\u7684\u6570\u636e\u4ece HTML \u4f20\u9012\u5230 JavaScript\uff0c\u6216\u8005\u7528\u4e8e\u4e3a JavaScript \u201c\u6807\u8bb0\u201d HTML \u5143\u7d20\u3002<\/p>\n<pre><code class=\"language-html\">&lt;!-- \u6807\u8bb0\u8fd9\u4e2a div \u4ee5\u5728\u8fd9\u663e\u793a &quot;name&quot; --&gt;\n&lt;div show-info=&quot;name&quot;&gt;&lt;\/div&gt;\n&lt;!-- \u6807\u8bb0\u8fd9\u4e2a div \u4ee5\u5728\u8fd9\u663e\u793a &quot;age&quot; --&gt;\n&lt;div show-info=&quot;age&quot;&gt;&lt;\/div&gt;\n\n&lt;script&gt;\n  \/\/ \u8fd9\u6bb5\u4ee3\u7801\u627e\u5230\u5e26\u6709\u6807\u8bb0\u7684\u5143\u7d20\uff0c\u5e76\u663e\u793a\u9700\u8981\u7684\u5185\u5bb9\n  let user = {\n    name: &quot;Pete&quot;,\n    age: 25\n  };\n\n  for(let div of document.querySelectorAll('[show-info]')) {\n    \/\/ \u5728\u5b57\u6bb5\u4e2d\u63d2\u5165\u76f8\u5e94\u7684\u4fe1\u606f\n    let field = div.getAttribute('show-info');\n    div.innerHTML = user[field]; \/\/ \u9996\u5148 &quot;name&quot; \u53d8\u4e3a Pete\uff0c\u7136\u540e &quot;age&quot; \u53d8\u4e3a 25\n  }\n&lt;\/script&gt;\n<\/code><\/pre>\n<p>\u5b83\u4eec\u8fd8\u53ef\u4ee5\u7528\u6765\u8bbe\u7f6e\u5143\u7d20\u7684\u6837\u5f0f\u3002<br \/>\n\u4f8b\u5982\uff0c\u8fd9\u91cc\u4f7f\u7528\u00a0<code>order-state<\/code>\u00a0\u7279\u6027\u6765\u8bbe\u7f6e\u8ba2\u5355\u72b6\u6001<\/p>\n<pre><code class=\"language-html\">&lt;style&gt;\n  \/* \u6837\u5f0f\u4f9d\u8d56\u4e8e\u81ea\u5b9a\u4e49\u7279\u6027 &quot;order-state&quot; *\/\n  .order[order-state=&quot;new&quot;] {\n    color: green;\n  }\n\n  .order[order-state=&quot;pending&quot;] {\n    color: blue;\n  }\n\n  .order[order-state=&quot;canceled&quot;] {\n    color: red;\n  }\n&lt;\/style&gt;\n\n&lt;div class=&quot;order&quot; order-state=&quot;new&quot;&gt;\n  A new order.\n&lt;\/div&gt;\n\n&lt;div class=&quot;order&quot; order-state=&quot;pending&quot;&gt;\n  A pending order.\n&lt;\/div&gt;\n\n&lt;div class=&quot;order&quot; order-state=&quot;canceled&quot;&gt;\n  A canceled order.\n&lt;\/div&gt;\n<\/code><\/pre>\n<p>\u4e3a\u4ec0\u4e48\u4f7f\u7528\u7279\u6027\u6bd4\u4f7f\u7528\u00a0<code>.order-state-new<\/code>\uff0c<code>.order-state-pending<\/code>\uff0c<code>.order-state-canceled<\/code>\u00a0\u8fd9\u4e9b\u6837\u5f0f\u7c7b\u8981\u597d\uff1f<br \/>\n\u56e0\u4e3a\u7279\u6027\u503c\u66f4\u5bb9\u6613\u7ba1\u7406\u3002\u6211\u4eec\u53ef\u4ee5\u8f7b\u677e\u5730\u66f4\u6539\u72b6\u6001<\/p>\n<pre><code class=\"language-js\">\/\/ \u6bd4\u5220\u9664\u65e7\u7684\u6216\u8005\u6dfb\u52a0\u4e00\u4e2a\u65b0\u7684\u7c7b\u8981\u7b80\u5355\u4e00\u4e9b\ndiv.setAttribute('order-state', 'canceled');\n<\/code><\/pre>\n<p>\u4f46\u662f\u81ea\u5b9a\u4e49\u7684\u7279\u6027\u4e5f\u5b58\u5728\u95ee\u9898\u3002\u5982\u679c\u6211\u4eec\u51fa\u4e8e\u6211\u4eec\u7684\u76ee\u7684\u4f7f\u7528\u4e86\u975e\u6807\u51c6\u7684\u7279\u6027\uff0c\u4e4b\u540e\u5b83\u88ab\u5f15\u5165\u5230\u4e86\u6807\u51c6\u4e2d\u5e76\u6709\u4e86\u5176\u81ea\u5df1\u7684\u7528\u9014\uff0c\u8be5\u600e\u4e48\u529e\uff1fHTML \u8bed\u8a00\u662f\u5728\u4e0d\u65ad\u53d1\u5c55\u7684\uff0c\u5e76\u4e14\u66f4\u591a\u7684\u7279\u6027\u51fa\u73b0\u5728\u4e86\u6807\u51c6\u4e2d\uff0c\u4ee5\u6ee1\u8db3\u5f00\u53d1\u8005\u7684\u9700\u6c42\u3002\u5728\u8fd9\u79cd\u60c5\u51b5\u4e0b\uff0c\u81ea\u5b9a\u4e49\u7684\u5c5e\u6027\u53ef\u80fd\u4f1a\u4ea7\u751f\u610f\u6599\u4e0d\u5230\u7684\u5f71\u54cd\u3002<br \/>\n\u4e3a\u4e86\u907f\u514d\u51b2\u7a81\uff0c\u5b58\u5728\u00a0data-* \u7279\u6027\u3002<br \/>\n<strong>\u6240\u6709\u4ee5 \u201cdata-\u201d \u5f00\u5934\u7684\u7279\u6027\u5747\u88ab\u4fdd\u7559\u4f9b\u7a0b\u5e8f\u5458\u4f7f\u7528\u3002\u5b83\u4eec\u53ef\u5728\u00a0<code>dataset<\/code>\u00a0\u5c5e\u6027\u4e2d\u4f7f\u7528\u3002<\/strong><br \/>\n\u4f8b\u5982\uff0c\u5982\u679c\u4e00\u4e2a\u00a0<code>elem<\/code>\u00a0\u6709\u4e00\u4e2a\u540d\u4e3a\u00a0<code>&quot;data-about&quot;<\/code>\u00a0\u7684\u7279\u6027\uff0c\u90a3\u4e48\u53ef\u4ee5\u901a\u8fc7\u00a0<code>elem.dataset.about<\/code>\u00a0\u53d6\u5230\u5b83\u3002<\/p>\n<pre><code class=\"language-html\">&lt;body data-about=&quot;Elephants&quot;&gt;\n&lt;script&gt;\n  alert(document.body.dataset.about); \/\/ Elephants\n&lt;\/script&gt;\n<\/code><\/pre>\n<p>\u50cf\u00a0<code>data-order-state<\/code>\u00a0\u8fd9\u6837\u7684\u591a\u8bcd\u7279\u6027\u53ef\u4ee5\u4ee5\u9a7c\u5cf0\u5f0f\u8fdb\u884c\u8c03\u7528\uff1a<code>dataset.orderState<\/code>\u3002<\/p>\n<pre><code class=\"language-html\">&lt;style&gt;\n  .order[data-order-state=&quot;new&quot;] {\n    color: green;\n  }\n\n  .order[data-order-state=&quot;pending&quot;] {\n    color: blue;\n  }\n\n  .order[data-order-state=&quot;canceled&quot;] {\n    color: red;\n  }\n&lt;\/style&gt;\n\n&lt;div id=&quot;order&quot; class=&quot;order&quot; data-order-state=&quot;new&quot;&gt;\n  A new order.\n&lt;\/div&gt;\n\n&lt;script&gt;\n  \/\/ \u8bfb\u53d6\n  alert(order.dataset.orderState); \/\/ new\n\n  \/\/ \u4fee\u6539\n  order.dataset.orderState = &quot;pending&quot;; \/\/ (*)\n&lt;\/script&gt;\n<\/code><\/pre>\n<p>\u4f7f\u7528\u00a0<code>data-*<\/code>\u00a0\u7279\u6027\u662f\u4e00\u79cd\u5408\u6cd5\u4e14\u5b89\u5168\u7684\u4f20\u9012\u81ea\u5b9a\u4e49\u6570\u636e\u7684\u65b9\u5f0f\u3002<br \/>\n\u8bf7\u6ce8\u610f\uff0c\u6211\u4eec\u4e0d\u4ec5\u53ef\u4ee5\u8bfb\u53d6\u6570\u636e\uff0c\u8fd8\u53ef\u4ee5\u4fee\u6539\u6570\u636e\u5c5e\u6027\uff08data-attributes\uff09\u3002\u7136\u540e CSS \u4f1a\u66f4\u65b0\u76f8\u5e94\u7684\u89c6\u56fe\uff1a\u5728\u4e0a\u9762\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\u7684\u6700\u540e\u4e00\u884c\u00a0<code>(*)<\/code>\u00a0\u5c06\u989c\u8272\u66f4\u6539\u4e3a\u4e86\u84dd\u8272\u3002<\/p>\n<h1>\u4fee\u6539\u6587\u6863 \uff08document\uff09<\/h1>\n<h2>\u521b\u5efa\u4e00\u4e2a\u5143\u7d20<\/h2>\n<p><code>document.creatElement(tag)<\/code><br \/>\n\u7528\u7ed9\u5b9a\u7684\u6807\u7b7e\u521b\u5efa\u4e00\u4e2a\u65b0\u00a0<strong>\u5143\u7d20\u8282\u70b9\uff08element node\uff09<\/strong><\/p>\n<pre><code class=\"language-js\">let div = document.createElement('div');\n<\/code><\/pre>\n<p><code>document.createTextNode(text)<\/code><br \/>\n\u7528\u7ed9\u5b9a\u7684\u6587\u672c\u521b\u5efa\u4e00\u4e2a\u00a0<strong>\u6587\u672c\u8282\u70b9<\/strong><\/p>\n<pre><code class=\"language-js\">let textNode = document.createTextNode('Here I am');\n<\/code><\/pre>\n<p>\u5927\u591a\u6570\u60c5\u51b5\u4e0b\uff0c\u6211\u4eec\u9700\u8981\u4e3a\u6b64\u6d88\u606f\u521b\u5efa\u50cf\u00a0<code>div<\/code>\u00a0\u8fd9\u6837\u7684\u5143\u7d20\u8282\u70b9\u3002<\/p>\n<h3>\u521b\u5efa\u4e00\u6761\u6d88\u606f<\/h3>\n<pre><code class=\"language-js\">\/\/ 1. \u521b\u5efa &lt;div&gt; \u5143\u7d20\nlet div = document.createElement('div');\n\n\/\/ 2. \u5c06\u5143\u7d20\u7684\u7c7b\u8bbe\u7f6e\u4e3a &quot;alert&quot;\ndiv.className = &quot;alert&quot;;\n\n\/\/ 3. \u586b\u5145\u6d88\u606f\u5185\u5bb9\ndiv.innerHTML = &quot;&lt;strong&gt;Hi there!&lt;\/strong&gt; You've read an important message.&quot;;\n<\/code><\/pre>\n<p>\u6211\u4eec\u5df2\u7ecf\u521b\u5efa\u4e86\u8be5\u5143\u7d20\u3002\u4f46\u5230\u76ee\u524d\u4e3a\u6b62\uff0c\u5b83\u8fd8\u53ea\u662f\u5728\u4e00\u4e2a\u540d\u4e3a\u00a0<code>div<\/code>\u00a0\u7684\u53d8\u91cf\u4e2d\uff0c\u5c1a\u672a\u5728\u9875\u9762\u4e2d\u3002\u6240\u4ee5\u6211\u4eec\u65e0\u6cd5\u5728\u9875\u9762\u4e0a\u770b\u5230\u5b83\u3002<\/p>\n<h2>\u63d2\u5165\u65b9\u6cd5<\/h2>\n<p>\u4e3a\u4e86\u8ba9\u00a0<code>div<\/code>\u00a0\u663e\u793a\u51fa\u6765\uff0c\u6211\u4eec\u9700\u8981\u5c06\u5176\u63d2\u5165\u5230\u00a0<code>document<\/code>\u00a0\u4e2d\u7684\u67d0\u5904\u3002\u4f8b\u5982\uff0c\u901a\u8fc7\u00a0<code>document.body<\/code>\u00a0\u5c06\u5176\u63d2\u5165\u5230\u00a0<code>&lt;body&gt;<\/code>\u00a0\u5143\u7d20\u91cc\u3002<br \/>\n\u5bf9\u6b64\u6709\u4e00\u4e2a\u7279\u6b8a\u7684\u65b9\u6cd5\u00a0<code>append<\/code>\uff1a<code>document.body.append(div)<\/code><br \/>\n\u6211\u4eec\u5bf9\u00a0<code>document.body<\/code>\u00a0\u8c03\u7528\u4e86\u00a0<code>append<\/code>\u00a0\u65b9\u6cd5\u3002\u4e0d\u8fc7\u6211\u4eec\u53ef\u4ee5\u5728\u5176\u4ed6\u4efb\u4f55\u5143\u7d20\u4e0a\u8c03\u7528\u00a0<code>append<\/code>\u00a0\u65b9\u6cd5\uff0c\u4ee5\u5c06\u53e6\u5916\u4e00\u4e2a\u5143\u7d20\u653e\u5165\u5230\u91cc\u9762\u3002\u4f8b\u5982\uff0c\u901a\u8fc7\u8c03\u7528\u00a0<code>div.append(anotherElement)<\/code>\uff0c\u6211\u4eec\u4fbf\u53ef\u4ee5\u5728\u00a0<code>&lt;div&gt;<\/code>\u00a0\u672b\u5c3e\u6dfb\u52a0\u4e00\u4e9b\u5185\u5bb9\u3002<br \/>\n\u8fd9\u91cc\u662f\u66f4\u591a\u7684\u5143\u7d20\u63d2\u5165\u65b9\u6cd5\uff0c\u6307\u660e\u4e86\u4e0d\u540c\u7684\u63d2\u5165\u4f4d\u7f6e\uff1a<\/p>\n<ul>\n<li><code>node.append(...nodes or strings)<\/code>\u00a0\u2014\u2014 \u5728\u00a0<code>node<\/code>\u00a0<strong>\u672b\u5c3e<\/strong>\u00a0\u63d2\u5165\u8282\u70b9\u6216\u5b57\u7b26\u4e32\uff0c<\/li>\n<li><code>node.prepend(...nodes or strings)<\/code>\u00a0\u2014\u2014 \u5728\u00a0<code>node<\/code>\u00a0<strong>\u5f00\u5934<\/strong>\u00a0\u63d2\u5165\u8282\u70b9\u6216\u5b57\u7b26\u4e32\uff0c<\/li>\n<li><code>node.before(...nodes or strings)<\/code>\u00a0\u2014\u2014 \u5728\u00a0<code>node<\/code>\u00a0<strong>\u524d\u9762<\/strong>\u00a0\u63d2\u5165\u8282\u70b9\u6216\u5b57\u7b26\u4e32\uff0c<\/li>\n<li><code>node.after(...nodes or strings)<\/code>\u00a0\u2014\u2014 \u5728\u00a0<code>node<\/code>\u00a0<strong>\u540e\u9762<\/strong>\u00a0\u63d2\u5165\u8282\u70b9\u6216\u5b57\u7b26\u4e32\uff0c<\/li>\n<li><code>node.replaceWith(...nodes or strings)<\/code>\u00a0\u2014\u2014 \u5c06\u00a0<code>node<\/code>\u00a0\u66ff\u6362\u4e3a\u7ed9\u5b9a\u7684\u8282\u70b9\u6216\u5b57\u7b26\u4e32\u3002<br \/>\n\u8fd9\u4e9b\u65b9\u6cd5\u7684\u53c2\u6570\u53ef\u4ee5\u662f\u4e00\u4e2a\u8981\u63d2\u5165\u7684\u4efb\u610f\u7684 DOM \u8282\u70b9\u5217\u8868\uff0c\u6216\u8005\u6587\u672c\u5b57\u7b26\u4e32\uff08\u4f1a\u88ab\u81ea\u52a8\u8f6c\u6362\u6210\u6587\u672c\u8282\u70b9\uff09\u3002<br \/>\n<img decoding=\"async\" src=\"https:\/\/levin.ink\/wp-content\/uploads\/2024\/05\/Pasted-image-20240513161903.png\" alt=\"Pasted image 20240513161903.png\"><\/li>\n<\/ul>\n<pre><code class=\"language-html\">&lt;div id=&quot;div&quot;&gt;&lt;\/div&gt;\n&lt;script&gt;\n  div.before('&lt;p&gt;Hello&lt;\/p&gt;', document.createElement('hr'));\n&lt;\/script&gt;\n<\/code><\/pre>\n<p>\u8bf7\u6ce8\u610f\uff1a\u8fd9\u91cc\u7684\u6587\u5b57\u90fd\u88ab\u201c\u4f5c\u4e3a\u6587\u672c\u201d\u63d2\u5165\uff0c\u800c\u4e0d\u662f\u201c\u4f5c\u4e3a HTML \u4ee3\u7801\u201d\u3002\u56e0\u6b64\u50cf\u00a0<code>&lt;<\/code>\u3001<code>&gt;<\/code>\u00a0\u8fd9\u6837\u7684\u7b26\u53f7\u90fd\u4f1a\u88ab\u4f5c\u8f6c\u4e49\u5904\u7406\u6765\u4fdd\u8bc1\u6b63\u786e\u663e\u793a\u3002<br \/>\n\u6700\u7ec8\u4e3a<\/p>\n<pre><code class=\"language-html\">&amp;lt;p&amp;gt;Hello&amp;lt;\/p&amp;gt;\n&lt;hr&gt;\n&lt;div id=&quot;div&quot;&gt;&lt;\/div&gt;\n<\/code><\/pre>\n<p>\u6362\u53e5\u8bdd\u8bf4\uff0c\u5b57\u7b26\u4e32\u88ab\u4ee5\u4e00\u79cd\u5b89\u5168\u7684\u65b9\u5f0f\u63d2\u5165\u5230\u9875\u9762\u4e2d\uff0c\u5c31\u50cf\u00a0<code>elem.textContent<\/code>\u00a0\u6240\u505a\u7684\u4e00\u6837\u3002<br \/>\n\u6240\u4ee5\uff0c\u8fd9\u4e9b\u65b9\u6cd5\u53ea\u80fd\u7528\u6765\u63d2\u5165 DOM \u8282\u70b9\u6216\u6587\u672c\u7247\u6bb5\u3002<br \/>\n\u4f46\u5982\u679c\u6211\u4eec\u60f3\u8981\u5c06\u5185\u5bb9\u201c\u4f5c\u4e3a HTML \u4ee3\u7801\u63d2\u5165\u201d\uff0c\u8ba9\u5185\u5bb9\u4e2d\u7684\u6240\u6709\u6807\u7b7e\u548c\u5176\u4ed6\u4e1c\u897f\u90fd\u50cf\u4f7f\u7528\u00a0<code>elem.innerHTML<\/code>\u00a0\u6240\u8868\u73b0\u7684\u6548\u679c\u4e00\u6837\uff0c\u90a3\u5e94\u8be5\u600e\u4e48\u529e\u5462\uff1f<\/p>\n<h2>insertAdjacentHTML\/Text\/Element<\/h2>\n<p>\u4e3a\u6b64\uff0c\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u53e6\u4e00\u4e2a\u975e\u5e38\u901a\u7528\u7684\u65b9\u6cd5\uff1a<code>elem.insertAdjacentHTML(where, html)<\/code>\u3002<br \/>\n\u8be5\u65b9\u6cd5\u7684\u7b2c\u4e00\u4e2a\u53c2\u6570\u662f\u4ee3\u7801\u5b57\uff08code word\uff09\uff0c\u6307\u5b9a\u76f8\u5bf9\u4e8e\u00a0<code>elem<\/code>\u00a0\u7684\u63d2\u5165\u4f4d\u7f6e\u3002\u5fc5\u987b\u4e3a\u4ee5\u4e0b\u4e4b\u4e00\uff1a<\/p>\n<ul>\n<li><code>&quot;beforebegin&quot;<\/code>\u00a0\u2014\u2014 \u5c06\u00a0<code>html<\/code>\u00a0\u63d2\u5165\u5230\u00a0<code>elem<\/code>\u00a0\u4e4b\u524d\uff0c<\/li>\n<li><code>&quot;afterbegin&quot;<\/code>\u00a0\u2014\u2014 \u5c06\u00a0<code>html<\/code>\u00a0\u63d2\u5165\u5230\u00a0<code>elem<\/code>\u00a0\u5f00\u5934\uff0c<\/li>\n<li><code>&quot;beforeend&quot;<\/code>\u00a0\u2014\u2014 \u5c06\u00a0<code>html<\/code>\u00a0\u63d2\u5165\u5230\u00a0<code>elem<\/code>\u00a0\u672b\u5c3e\uff0c<\/li>\n<li><code>&quot;afterend&quot;<\/code>\u00a0\u2014\u2014 \u5c06\u00a0<code>html<\/code>\u00a0\u63d2\u5165\u5230\u00a0<code>elem<\/code>\u00a0\u4e4b\u540e\u3002<br \/>\n\u7b2c\u4e8c\u4e2a\u53c2\u6570\u662f HTML \u5b57\u7b26\u4e32\uff0c\u8be5\u5b57\u7b26\u4e32\u4f1a\u88ab\u201c\u4f5c\u4e3a HTML\u201d \u63d2\u5165\u3002<br \/>\n<div class='fancybox-wrapper lazyload-container-unload' data-fancybox='post-images' href='https:\/\/levin.ink\/wp-content\/uploads\/2024\/05\/Pasted-image-20240513162316.png'><img class=\"lazyload lazyload-style-1\" src=\"data:image\/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPgo8c3ZnIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjZmZmZmZmMDAiPjxnPjwvZz4KPC9zdmc+\"  decoding=\"async\" data-original=\"https:\/\/levin.ink\/wp-content\/uploads\/2024\/05\/Pasted-image-20240513162316.png\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB\/AAffA0nNPuCLAAAAAElFTkSuQmCC\" alt=\"Pasted image 20240513162316.png\"><\/div><br \/>\n\u6211\u4eec\u5f88\u5bb9\u6613\u5c31\u4f1a\u6ce8\u610f\u5230\u8fd9\u5f20\u56fe\u7247\u548c\u4e0a\u4e00\u5f20\u56fe\u7247\u7684\u76f8\u4f3c\u4e4b\u5904\u3002\u63d2\u5165\u70b9\u5b9e\u9645\u4e0a\u662f\u76f8\u540c\u7684\uff0c\u4f46\u6b64\u65b9\u6cd5\u63d2\u5165\u7684\u662f HTML\u3002<br \/>\n\u8fd9\u4e2a\u65b9\u6cd5\u6709\u4e24\u4e2a\u5144\u5f1f\uff1a<\/li>\n<li><code>elem.insertAdjacentText(where, text)<\/code>\u00a0\u2014\u2014 \u8bed\u6cd5\u4e00\u6837\uff0c\u4f46\u662f\u5c06\u00a0<code>text<\/code>\u00a0\u5b57\u7b26\u4e32\u201c\u4f5c\u4e3a\u6587\u672c\u201d\u63d2\u5165\u800c\u4e0d\u662f\u4f5c\u4e3a HTML\uff0c<\/li>\n<li><code>elem.insertAdjacentElement(where, elem)<\/code>\u00a0\u2014\u2014 \u8bed\u6cd5\u4e00\u6837\uff0c\u4f46\u662f\u63d2\u5165\u7684\u662f\u4e00\u4e2a\u5143\u7d20\u3002<br \/>\n\u5b83\u4eec\u7684\u5b58\u5728\u4e3b\u8981\u662f\u4e3a\u4e86\u4f7f\u8bed\u6cd5\u201c\u7edf\u4e00\u201d\u3002\u5b9e\u9645\u4e0a\uff0c\u5927\u591a\u6570\u65f6\u5019\u53ea\u4f7f\u7528\u00a0<code>insertAdjacentHTML<\/code>\u3002\u56e0\u4e3a\u5bf9\u4e8e\u5143\u7d20\u548c\u6587\u672c\uff0c\u6211\u4eec\u6709\u00a0<code>append\/prepend\/before\/after<\/code>\u00a0\u65b9\u6cd5 \u2014\u2014 \u5b83\u4eec\u4e5f\u53ef\u4ee5\u7528\u4e8e\u63d2\u5165\u8282\u70b9\/\u6587\u672c\u7247\u6bb5\uff0c\u4f46\u5199\u8d77\u6765\u66f4\u77ed\u3002<\/li>\n<\/ul>\n<h2>\u8282\u70b9\u79fb\u9664<\/h2>\n<p><code>node.remove()<\/code><br \/>\n\u8bf7\u6ce8\u610f\uff1a\u5982\u679c\u6211\u4eec\u8981\u5c06\u4e00\u4e2a\u5143\u7d20\u00a0<strong>\u79fb\u52a8<\/strong>\u00a0\u5230\u53e6\u4e00\u4e2a\u5730\u65b9\uff0c\u5219\u65e0\u9700\u5c06\u5176\u4ece\u539f\u6765\u7684\u4f4d\u7f6e\u4e2d\u5220\u9664\u3002<br \/>\n<strong>\u6240\u6709\u63d2\u5165\u65b9\u6cd5\u90fd\u4f1a\u81ea\u52a8\u4ece\u65e7\u4f4d\u7f6e\u5220\u9664\u8be5\u8282\u70b9\u3002<\/strong><\/p>\n<pre><code class=\"language-html\">&lt;div id=&quot;first&quot;&gt;First&lt;\/div&gt;\n&lt;div id=&quot;second&quot;&gt;Second&lt;\/div&gt;\n&lt;script&gt;\n  \/\/ \u65e0\u9700\u8c03\u7528 remove\n  second.after(first); \/\/ \u83b7\u53d6 #second\uff0c\u5e76\u5728\u5176\u540e\u9762\u63d2\u5165 #first\n&lt;\/script&gt;\n<\/code><\/pre>\n<h2>\u514b\u9686\u8282\u70b9 cloneNode<\/h2>\n<p>\u5f53\u6211\u4eec\u6709\u4e00\u4e2a\u5f88\u5927\u7684\u5143\u7d20\u65f6\uff0c\u514b\u9686\u7684\u65b9\u5f0f\u53ef\u80fd\u66f4\u5feb\u66f4\u7b80\u5355\u3002<br \/>\n\u8c03\u7528\u00a0<code>elem.cloneNode(true)<\/code>\u00a0\u6765\u521b\u5efa\u5143\u7d20\u7684\u4e00\u4e2a\u201c\u6df1\u201d\u514b\u9686 \u2014\u2014 \u5177\u6709\u6240\u6709\u7279\u6027\uff08attribute\uff09\u548c\u5b50\u5143\u7d20\u3002\u5982\u679c\u6211\u4eec\u8c03\u7528\u00a0<code>elem.cloneNode(false)<\/code>\uff0c\u90a3\u514b\u9686\u5c31\u4e0d\u5305\u62ec\u5b50\u5143\u7d20\u3002<\/p>\n<h2>DocumentFragment<\/h2>\n<p><code>DocumentFragment<\/code>\u00a0\u662f\u4e00\u4e2a\u7279\u6b8a\u7684 DOM \u8282\u70b9\uff0c\u7528\u4f5c\u6765\u4f20\u9012\u8282\u70b9\u5217\u8868\u7684\u5305\u88c5\u5668\uff08wrapper\uff09\u3002<br \/>\n\u6211\u4eec\u53ef\u4ee5\u5411\u5176\u9644\u52a0\u5176\u4ed6\u8282\u70b9\uff0c\u4f46\u662f\u5f53\u6211\u4eec\u5c06\u5176\u63d2\u5165\u67d0\u4e2a\u4f4d\u7f6e\u65f6\uff0c\u5219\u4f1a\u63d2\u5165\u5176\u5185\u5bb9\u3002<br \/>\n\u4f8b\u5982\uff0c\u4e0b\u9762\u8fd9\u6bb5\u4ee3\u7801\u4e2d\u7684\u00a0<code>getListContent<\/code>\u00a0\u4f1a\u751f\u6210\u5e26\u6709\u00a0<code>&lt;li&gt;<\/code>\u00a0\u5217\u8868\u9879\u7684\u7247\u6bb5\uff0c\u7136\u540e\u5c06\u5176\u63d2\u5165\u5230\u00a0<code>&lt;ul&gt;<\/code>\u00a0\u4e2d<\/p>\n<pre><code class=\"language-html\">&lt;ul id=&quot;ul&quot;&gt;&lt;\/ul&gt;\n\n&lt;script&gt;\nfunction getListContent() {\n  let fragment = new DocumentFragment();\n\n  for(let i=1; i&lt;=3; i++) {\n    let li = document.createElement('li');\n    li.append(i);\n    fragment.append(li);\n  }\n\n  return fragment;\n}\n\nul.append(getListContent()); \/\/ (*)\n&lt;\/script&gt;\n<\/code><\/pre>\n<p>\u8bf7\u6ce8\u610f\uff0c\u5728\u6700\u540e\u4e00\u884c\u00a0<code>(*)<\/code>\u00a0\u6211\u4eec\u9644\u52a0\u4e86\u00a0<code>DocumentFragment<\/code>\uff0c\u4f46\u662f\u5b83\u548c\u00a0<code>ul<\/code>\u00a0\u201c\u878d\u4e3a\u4e00\u4f53\uff08blends in\uff09\u201d\u4e86\uff0c\u6240\u4ee5\u6700\u7ec8\u7684\u6587\u6863\u7ed3\u6784\u5e94\u8be5\u662f<\/p>\n<pre><code class=\"language-html\">&lt;ul&gt;\n  &lt;li&gt;1&lt;\/li&gt;\n  &lt;li&gt;2&lt;\/li&gt;\n  &lt;li&gt;3&lt;\/li&gt;\n&lt;\/ul&gt;\n<\/code><\/pre>\n<p><code>DocumentFragment<\/code>\u00a0\u5f88\u5c11\u88ab\u663e\u5f0f\u4f7f\u7528\u3002\u5982\u679c\u53ef\u4ee5\u6539\u4e3a\u8fd4\u56de\u4e00\u4e2a\u8282\u70b9\u6570\u7ec4\uff0c\u90a3\u4e3a\u4ec0\u4e48\u8fd8\u8981\u9644\u52a0\u5230\u7279\u6b8a\u7c7b\u578b\u7684\u8282\u70b9\u4e0a\u5462\uff1f<br \/>\n\u6211\u4eec\u4e4b\u6240\u4ee5\u63d0\u5230\u00a0<code>DocumentFragment<\/code>\uff0c\u4e3b\u8981\u662f\u56e0\u4e3a\u5b83\u4e0a\u9762\u6709\u4e00\u4e9b\u6982\u5ff5\uff0c\u4f8b\u5982\u00a0<a href=\"https:\/\/zh.javascript.info\/template-element\">template<\/a>\u00a0\u5143\u7d20\uff0c\u6211\u4eec\u5c06\u5728\u4ee5\u540e\u8ba8\u8bba\u3002<\/p>\n<h2>\u8001\u5f0f\u7684insert\/remove<\/h2>\n<blockquote>\n<p>\u8001\u5f0f\u7528\u6cd5<br \/>\n\u8fd9\u4e9b\u5185\u5bb9\u6709\u52a9\u4e8e\u7406\u89e3\u65e7\u811a\u672c\uff0c\u4f46\u4e0d\u9002\u5408\u7528\u4e8e\u65b0\u4ee3\u7801\u7684\u5f00\u53d1\u4e2d\u3002<\/p>\n<\/blockquote>\n<p><code>parentElem.appendChild(node)<\/code><br \/>\n\u5c06\u00a0<code>node<\/code>\u00a0\u9644\u52a0\u4e3a\u00a0<code>parentElem<\/code>\u00a0\u7684\u6700\u540e\u4e00\u4e2a\u5b50\u5143\u7d20\u3002<\/p>\n<p><code>parentElem.insertBefore(node, nextSibling)<\/code><br \/>\n\u5728\u00a0<code>parentElem<\/code>\u00a0\u7684\u00a0<code>nextSibling<\/code>\u00a0\u524d\u63d2\u5165\u00a0<code>node<\/code>\u3002<\/p>\n<p><code>parentElem.replaceChild(node, oldChild)<\/code><br \/>\n\u5c06\u00a0<code>parentElem<\/code>\u00a0\u7684\u540e\u4ee3\u4e2d\u7684\u00a0<code>oldChild<\/code>\u00a0\u66ff\u6362\u4e3a\u00a0<code>node<\/code>\u3002<\/p>\n<p>\u6240\u6709\u8fd9\u4e9b\u65b9\u6cd5\u90fd\u4f1a\u8fd4\u56de\u63d2\u5165\/\u5220\u9664\u7684\u8282\u70b9\u3002\u6362\u53e5\u8bdd\u8bf4\uff0c<code>parentElem.appendChild(node)<\/code>\u00a0\u8fd4\u56de\u00a0<code>node<\/code>\u3002\u4f46\u662f\u901a\u5e38\u6211\u4eec\u4e0d\u4f1a\u4f7f\u7528\u8fd4\u56de\u503c\uff0c\u6211\u4eec\u53ea\u662f\u4f7f\u7528\u5bf9\u5e94\u7684\u65b9\u6cd5\u3002<\/p>\n<h2>\u5173\u4e8e document.write<\/h2>\n<p>\u975e\u5e38\u53e4\u8001\u7684\u5411\u7f51\u9875\u6dfb\u52a0\u5185\u5bb9\u7684\u65b9\u6cd5\uff1a<code>document.write<\/code>\u3002<br \/>\n\u8c03\u7528\u00a0<code>document.write(html)<\/code>\u00a0\u610f\u5473\u7740\u5c06\u00a0<code>html<\/code>\u00a0\u201c\u5c31\u5730\u9a6c\u4e0a\u201d\u5199\u5165\u9875\u9762\u3002<code>html<\/code>\u00a0\u5b57\u7b26\u4e32\u53ef\u4ee5\u662f\u52a8\u6001\u751f\u6210\u7684\uff0c\u6240\u4ee5\u5b83\u5f88\u7075\u6d3b\u3002\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528 JavaScript \u521b\u5efa\u4e00\u4e2a\u5b8c\u6574\u7684\u9875\u9762\u5e76\u5bf9\u5176\u8fdb\u884c\u5199\u5165\u3002<br \/>\n\u8fd9\u4e2a\u65b9\u6cd5\u6765\u81ea\u4e8e\u6ca1\u6709 DOM\uff0c\u6ca1\u6709\u6807\u51c6\u7684\u4e0a\u53e4\u65f6\u671f\u2026\u2026\u3002\u4f46\u8fd9\u4e2a\u65b9\u6cd5\u4f9d\u88ab\u4fdd\u7559\u4e86\u4e0b\u6765\uff0c\u56e0\u4e3a\u8fd8\u6709\u811a\u672c\u5728\u4f7f\u7528\u5b83\u3002<br \/>\n\u7531\u4e8e\u4ee5\u4e0b\u91cd\u8981\u7684\u9650\u5236\uff0c\u5728\u73b0\u4ee3\u811a\u672c\u4e2d\u6211\u4eec\u5f88\u5c11\u770b\u5230\u5b83\uff1a<br \/>\n<strong><code>document.write<\/code>\u00a0\u8c03\u7528\u53ea\u5728\u9875\u9762\u52a0\u8f7d\u65f6\u5de5\u4f5c\u3002<\/strong><br \/>\n\u56e0\u6b64\uff0c\u5728\u67d0\u79cd\u7a0b\u5ea6\u4e0a\u8bb2\uff0c\u5b83\u5728\u201c\u52a0\u8f7d\u5b8c\u6210\u201d\u9636\u6bb5\u662f\u4e0d\u53ef\u7528\u7684\uff0c\u8fd9\u4e0e\u6211\u4eec\u4e0a\u9762\u4ecb\u7ecd\u7684\u5176\u4ed6 DOM \u65b9\u6cd5\u4e0d\u540c\u3002<br \/>\n\u8fd9\u662f\u5b83\u7684\u7f3a\u9677\u3002<br \/>\n\u8fd8\u6709\u4e00\u4e2a\u597d\u5904\u3002\u4ece\u6280\u672f\u4e0a\u8bb2\uff0c\u5f53\u5728\u6d4f\u89c8\u5668\u6b63\u5728\u8bfb\u53d6\uff08\u201c\u89e3\u6790\u201d\uff09\u4f20\u5165\u7684 HTML \u65f6\u8c03\u7528\u00a0<code>document.write<\/code>\u00a0\u65b9\u6cd5\u6765\u5199\u5165\u4e00\u4e9b\u4e1c\u897f\uff0c\u6d4f\u89c8\u5668\u4f1a\u50cf\u5b83\u672c\u6765\u5c31\u5728 HTML \u6587\u672c\u4e2d\u90a3\u6837\u4f7f\u7528\u5b83\u3002<br \/>\n\u6240\u4ee5\u5b83\u8fd0\u884c\u8d77\u6765\u51fa\u5947\u7684\u5feb\uff0c\u56e0\u4e3a\u5b83\u00a0<strong>\u4e0d\u6d89\u53ca DOM \u4fee\u6539<\/strong>\u3002\u5b83\u76f4\u63a5\u5199\u5165\u5230\u9875\u9762\u6587\u672c\u4e2d\uff0c\u800c\u6b64\u65f6 DOM \u5c1a\u672a\u6784\u5efa\u3002<br \/>\n\u56e0\u6b64\uff0c\u5982\u679c\u6211\u4eec\u9700\u8981\u5411 HTML \u52a8\u6001\u5730\u6dfb\u52a0\u5927\u91cf\u6587\u672c\uff0c\u5e76\u4e14\u6211\u4eec\u6b63\u5904\u4e8e\u9875\u9762\u52a0\u8f7d\u9636\u6bb5\uff0c\u5e76\u4e14\u901f\u5ea6\u5f88\u91cd\u8981\uff0c\u90a3\u4e48\u5b83\u53ef\u80fd\u4f1a\u6709\u5e2e\u52a9\u3002\u4f46\u5b9e\u9645\u4e0a\uff0c\u8fd9\u4e9b\u8981\u6c42\u5f88\u5c11\u540c\u65f6\u51fa\u73b0\u3002\u6211\u4eec\u53ef\u4ee5\u5728\u811a\u672c\u4e2d\u770b\u5230\u6b64\u65b9\u6cd5\uff0c\u901a\u5e38\u662f\u56e0\u4e3a\u8fd9\u4e9b\u811a\u672c\u5f88\u65e7\u3002<\/p>\n<h1>\u6837\u5f0f\u548c\u7c7b<\/h1>\n<p>\u5728\u6211\u4eec\u8ba8\u8bba JavaScript \u5904\u7406\u6837\u5f0f\u548c\u7c7b\u7684\u65b9\u6cd5\u4e4b\u524d \u2014\u2014 \u6709\u4e00\u4e2a\u91cd\u8981\u7684\u89c4\u5219\u3002\u5e0c\u671b\u5b83\u8db3\u591f\u660e\u663e\uff0c\u4f46\u662f\u6211\u4eec\u4ecd\u7136\u5fc5\u987b\u63d0\u5230\u5b83\u3002<br \/>\n\u901a\u5e38\u6709\u4e24\u79cd\u8bbe\u7f6e\u5143\u7d20\u6837\u5f0f\u7684\u65b9\u5f0f\uff1a<\/p>\n<ol>\n<li>\u5728 CSS \u4e2d\u521b\u5efa\u4e00\u4e2a\u7c7b\uff0c\u5e76\u6dfb\u52a0\u5b83\uff1a<code>&lt;div class=&quot;...&quot;&gt;<\/code><\/li>\n<li>\u5c06\u5c5e\u6027\u76f4\u63a5\u5199\u5165\u00a0<code>style<\/code>\uff1a<code>&lt;div style=&quot;...&quot;&gt;<\/code>\u3002<br \/>\nJavaScript \u65e2\u53ef\u4ee5\u4fee\u6539\u7c7b\uff0c\u4e5f\u53ef\u4ee5\u4fee\u6539\u00a0<code>style<\/code>\u00a0\u5c5e\u6027\u3002<br \/>\n\u76f8\u8f83\u4e8e\u5c06\u6837\u5f0f\u5199\u5165\u00a0<code>style<\/code>\u00a0\u5c5e\u6027\uff0c\u6211\u4eec\u5e94\u8be5\u9996\u9009\u901a\u8fc7 CSS \u7c7b\u7684\u65b9\u5f0f\u6765\u6dfb\u52a0\u6837\u5f0f\u3002\u4ec5\u5f53\u7c7b\u201c\u65e0\u6cd5\u5904\u7406\u201d\u65f6\uff0c\u624d\u5e94\u9009\u62e9\u4f7f\u7528\u00a0<code>style<\/code>\u00a0\u5c5e\u6027\u7684\u65b9\u5f0f\u3002<br \/>\n\u4f8b\u5982\uff0c\u5982\u679c\u6211\u4eec\u52a8\u6001\u5730\u8ba1\u7b97\u5143\u7d20\u7684\u5750\u6807\uff0c\u5e76\u5e0c\u671b\u901a\u8fc7 JavaScript \u6765\u8bbe\u7f6e\u5b83\u4eec\uff0c\u90a3\u4e48\u4f7f\u7528\u00a0<code>style<\/code>\u00a0\u662f\u53ef\u4ee5\u63a5\u53d7\u7684<\/li>\n<\/ol>\n<pre><code class=\"language-js\">let top = \/* \u590d\u6742\u7684\u8ba1\u7b97 *\/;\nlet left = \/* \u590d\u6742\u7684\u8ba1\u7b97 *\/;\n\nelem.style.left = left; \/\/ \u4f8b\u5982 '123px'\uff0c\u5728\u8fd0\u884c\u65f6\u8ba1\u7b97\u51fa\u7684\nelem.style.top = top; \/\/ \u4f8b\u5982 '456px'\n<\/code><\/pre>\n<p>\u5bf9\u4e8e\u5176\u4ed6\u60c5\u51b5\uff0c\u4f8b\u5982\u5c06\u6587\u672c\u8bbe\u4e3a\u7ea2\u8272\uff0c\u6dfb\u52a0\u4e00\u4e2a\u80cc\u666f\u56fe\u6807 \u2014\u2014 \u53ef\u4ee5\u5728 CSS \u4e2d\u5bf9\u8fd9\u4e9b\u6837\u5f0f\u8fdb\u884c\u63cf\u8ff0\uff0c\u7136\u540e\u6dfb\u52a0\u7c7b\uff08JavaScript \u53ef\u4ee5\u505a\u5230\uff09\u3002\u8fd9\u6837\u66f4\u7075\u6d3b\uff0c\u66f4\u6613\u4e8e\u652f\u6301\u3002<\/p>\n<h2>className classList<\/h2>\n<p>\u66f4\u6539\u7c7b\u662f\u811a\u672c\u4e2d\u6700\u5e38\u89c1\u7684\u64cd\u4f5c\u4e4b\u4e00\u3002<br \/>\n\u5728\u5f88\u4e45\u4ee5\u524d\uff0cJavaScript \u4e2d\u6709\u4e00\u4e2a\u9650\u5236\uff1a\u50cf\u00a0<code>&quot;class&quot;<\/code>\u00a0\u8fd9\u6837\u7684\u4fdd\u7559\u5b57\u4e0d\u80fd\u7528\u4f5c\u5bf9\u8c61\u7684\u5c5e\u6027\u3002\u8fd9\u4e00\u9650\u5236\u73b0\u5728\u5df2\u7ecf\u4e0d\u5b58\u5728\u4e86\uff0c\u4f46\u5f53\u65f6\u5c31\u4e0d\u80fd\u5b58\u5728\u50cf\u00a0<code>elem.class<\/code>\u00a0\u8fd9\u6837\u7684\u00a0<code>&quot;class&quot;<\/code>\u00a0\u5c5e\u6027\u3002<\/p>\n<p>\u56e0\u6b64\uff0c\u5bf9\u4e8e\u7c7b\uff0c\u5f15\u5165\u4e86\u770b\u8d77\u6765\u7c7b\u4f3c\u7684\u5c5e\u6027\u00a0<code>&quot;className&quot;<\/code>\uff1a<code>elem.className<\/code>\u00a0\u5bf9\u5e94\u4e8e\u00a0<code>&quot;class&quot;<\/code>\u00a0\u7279\u6027\uff08attribute\uff09\u3002<br \/>\n\u5982\u679c\u6211\u4eec\u5bf9\u00a0<code>elem.className<\/code>\u00a0\u8fdb\u884c\u8d4b\u503c\uff0c\u5b83\u5c06\u66ff\u6362\u7c7b\u4e2d\u7684\u6574\u4e2a\u5b57\u7b26\u4e32\u3002\u6709\u65f6\uff0c\u8fd9\u6b63\u662f\u6211\u4eec\u6240\u9700\u8981\u7684\uff0c\u4f46\u901a\u5e38\u6211\u4eec\u5e0c\u671b\u6dfb\u52a0\/\u5220\u9664\u5355\u4e2a\u7c7b\u3002<br \/>\n\u8fd9\u91cc\u8fd8\u6709\u53e6\u4e00\u4e2a\u5c5e\u6027\uff1a<code>elem.classList<\/code>\u3002<br \/>\n<code>elem.classList<\/code>\u00a0\u662f\u4e00\u4e2a\u7279\u6b8a\u7684\u5bf9\u8c61\uff0c\u5b83\u5177\u6709\u00a0<code>add\/remove\/toggle<\/code>\u00a0\u5355\u4e2a\u7c7b\u7684\u65b9\u6cd5\u3002<\/p>\n<p>\u56e0\u6b64\uff0c\u6211\u4eec\u65e2\u53ef\u4ee5\u4f7f\u7528\u00a0<code>className<\/code>\u00a0\u5bf9\u5b8c\u6574\u7684\u7c7b\u5b57\u7b26\u4e32\u8fdb\u884c\u64cd\u4f5c\uff0c\u4e5f\u53ef\u4ee5\u4f7f\u7528\u4f7f\u7528\u00a0<code>classList<\/code>\u00a0\u5bf9\u5355\u4e2a\u7c7b\u8fdb\u884c\u64cd\u4f5c\u3002\u6211\u4eec\u9009\u62e9\u4ec0\u4e48\u53d6\u51b3\u4e8e\u6211\u4eec\u7684\u9700\u6c42\u3002<br \/>\n<code>classList<\/code>\u00a0\u7684\u65b9\u6cd5\uff1a<\/p>\n<ul>\n<li><code>elem.classList.add\/remove(class)<\/code>\u00a0\u2014\u2014 \u6dfb\u52a0\/\u79fb\u9664\u7c7b\u3002<\/li>\n<li><code>elem.classList.toggle(class)<\/code>\u00a0\u2014\u2014 \u5982\u679c\u7c7b\u4e0d\u5b58\u5728\u5c31\u6dfb\u52a0\u7c7b\uff0c\u5b58\u5728\u5c31\u79fb\u9664\u5b83\u3002<\/li>\n<li><code>elem.classList.contains(class)<\/code>\u00a0\u2014\u2014 \u68c0\u67e5\u7ed9\u5b9a\u7c7b\uff0c\u8fd4\u56de\u00a0<code>true\/false<\/code>\u3002<br \/>\n\u6b64\u5916\uff0c<code>classList<\/code>\u00a0\u662f\u53ef\u8fed\u4ee3\u7684<\/li>\n<\/ul>\n<h2>\u5143\u7d20\u6837\u5f0f<\/h2>\n<p><code>elem.style<\/code>\u00a0\u5c5e\u6027\u662f\u4e00\u4e2a\u5bf9\u8c61\uff0c\u5b83\u5bf9\u5e94\u4e8e\u00a0<code>&quot;style&quot;<\/code>\u00a0\u7279\u6027\uff08attribute\uff09\u4e2d\u6240\u5199\u7684\u5185\u5bb9\u3002<code>elem.style.width=&quot;100px&quot;<\/code>\u00a0\u7684\u6548\u679c\u7b49\u4ef7\u4e8e\u6211\u4eec\u5728\u00a0<code>style<\/code>\u00a0\u7279\u6027\u4e2d\u6709\u4e00\u4e2a\u00a0<code>width:100px<\/code>\u00a0\u5b57\u7b26\u4e32\u3002<br \/>\n\u5bf9\u4e8e\u591a\u8bcd\uff08multi-word\uff09\u5c5e\u6027\uff0c\u4f7f\u7528\u9a7c\u5cf0\u5f0f camelCase\uff1a<\/p>\n<pre><code class=\"language-js\">background-color  =&gt; elem.style.backgroundColor\nz-index           =&gt; elem.style.zIndex\nborder-left-width =&gt; elem.style.borderLeftWidth\n<\/code><\/pre>\n<blockquote>\n<p>\u524d\u7f00\u5c5e\u6027<br \/>\n\u50cf\u00a0<code>-moz-border-radius<\/code>\u00a0\u548c\u00a0<code>-webkit-border-radius<\/code>\u00a0\u8fd9\u6837\u7684\u6d4f\u89c8\u5668\u524d\u7f00\u5c5e\u6027\uff0c\u4e5f\u9075\u5faa\u540c\u6837\u7684\u89c4\u5219\uff1a\u8fde\u5b57\u7b26\u00a0<code>-<\/code>\u00a0\u8868\u793a\u5927\u5199\u3002<\/p>\n<\/blockquote>\n<pre><code class=\"language-js\">button.style.MozBorderRadius = '5px';\nbutton.style.WebkitBorderRadius = '5px';\n<\/code><\/pre>\n<h2>\u91cd\u7f6e\u6837\u5f0f\u5c5e\u6027<\/h2>\n<p>\u6709\u65f6\u6211\u4eec\u60f3\u8981\u5206\u914d\u4e00\u4e2a\u6837\u5f0f\u5c5e\u6027\uff0c\u7a0d\u540e\u79fb\u9664\u5b83\u3002<br \/>\n\u4f8b\u5982\uff0c\u4e3a\u4e86\u9690\u85cf\u4e00\u4e2a\u5143\u7d20\uff0c\u6211\u4eec\u53ef\u4ee5\u8bbe\u7f6e\u00a0<code>elem.style.display = &quot;none&quot;<\/code>\u3002<br \/>\n\u7136\u540e\uff0c\u7a0d\u540e\u6211\u4eec\u53ef\u80fd\u60f3\u8981\u79fb\u9664\u00a0<code>style.display<\/code>\uff0c\u5c31\u50cf\u5b83\u6ca1\u6709\u88ab\u8bbe\u7f6e\u4e00\u6837\u3002\u8fd9\u91cc\u4e0d\u5e94\u8be5\u4f7f\u7528\u00a0<code>delete elem.style.display<\/code>\uff0c\u800c\u5e94\u8be5\u4f7f\u7528\u00a0<code>elem.style.display = &quot;&quot;<\/code>\u00a0\u5c06\u5176\u8d4b\u503c\u4e3a\u7a7a\u3002<br \/>\n\u5982\u679c\u6211\u4eec\u5c06\u00a0<code>style.display<\/code>\u00a0\u8bbe\u7f6e\u4e3a\u7a7a\u5b57\u7b26\u4e32\uff0c\u90a3\u4e48\u6d4f\u89c8\u5668\u901a\u5e38\u4f1a\u5e94\u7528 CSS \u7c7b\u4ee5\u53ca\u5185\u5efa\u6837\u5f0f\uff0c\u5c31\u597d\u50cf\u6839\u672c\u6ca1\u6709\u8fd9\u6837\u7684\u00a0<code>style.display<\/code>\u00a0\u5c5e\u6027\u4e00\u6837\u3002<br \/>\n\u8fd8\u6709\u4e00\u4e2a\u7279\u6b8a\u7684\u65b9\u6cd5\u00a0<code>elem.style.removeProperty('style property')<\/code>\u3002\u6240\u4ee5\uff0c\u6211\u4eec\u53ef\u4ee5\u50cf\u8fd9\u6837\u5220\u9664\u4e00\u4e2a\u5c5e\u6027<\/p>\n<pre><code class=\"language-js\">document.body.style.background = 'red'; \/\/\u5c06 background \u8bbe\u7f6e\u4e3a\u7ea2\u8272\n\nsetTimeout(() =&gt; document.body.style.removeProperty('background'), 1000); \/\/ 1 \u79d2\u540e\u79fb\u9664 background\n<\/code><\/pre>\n<blockquote>\n<p>\u7528\u00a0<code>style.cssText<\/code>\u00a0\u8fdb\u884c\u5b8c\u5168\u7684\u91cd\u5199<br \/>\n\u901a\u5e38\uff0c\u6211\u4eec\u4f7f\u7528\u00a0<code>style.*<\/code>\u00a0\u6765\u5bf9\u5404\u4e2a\u6837\u5f0f\u5c5e\u6027\u8fdb\u884c\u8d4b\u503c\u3002\u6211\u4eec\u4e0d\u80fd\u50cf\u8fd9\u6837\u7684\u00a0<code>div.style=&quot;color: red; width: 100px&quot;<\/code>\u00a0\u8bbe\u7f6e\u5b8c\u6574\u7684\u5c5e\u6027\uff0c\u56e0\u4e3a\u00a0<code>div.style<\/code>\u00a0\u662f\u4e00\u4e2a\u5bf9\u8c61\uff0c\u5e76\u4e14\u5b83\u662f\u53ea\u8bfb\u7684\u3002<br \/>\n\u60f3\u8981\u4ee5\u5b57\u7b26\u4e32\u7684\u5f62\u5f0f\u8bbe\u7f6e\u5b8c\u6574\u7684\u6837\u5f0f\uff0c\u53ef\u4ee5\u4f7f\u7528\u7279\u6b8a\u5c5e\u6027\u00a0<code>style.cssText<\/code>\uff1a<\/p>\n<\/blockquote>\n<pre><code class=\"language-html\">&lt;div id=&quot;div&quot;&gt;Button&lt;\/div&gt;\n\n&lt;script&gt;\n  \/\/ \u6211\u4eec\u53ef\u4ee5\u5728\u8fd9\u91cc\u8bbe\u7f6e\u7279\u6b8a\u7684\u6837\u5f0f\u6807\u8bb0\uff0c\u4f8b\u5982 &quot;important&quot;\n  div.style.cssText=`color: red !important;\n    background-color: yellow;\n    width: 100px;\n    text-align: center;\n  `;\n\n  alert(div.style.cssText);\n&lt;\/script&gt;\n<\/code><\/pre>\n<blockquote>\n<p>\u6211\u4eec\u5f88\u5c11\u4f7f\u7528\u8fd9\u4e2a\u5c5e\u6027\uff0c\u56e0\u4e3a\u8fd9\u6837\u7684\u8d4b\u503c\u4f1a\u5220\u9664\u6240\u6709\u73b0\u6709\u6837\u5f0f\uff1a\u5b83\u4e0d\u662f\u8fdb\u884c\u6dfb\u52a0\uff0c\u800c\u662f\u66ff\u6362\u5b83\u4eec\u3002\u6709\u65f6\u53ef\u80fd\u4f1a\u5220\u9664\u6240\u9700\u7684\u5185\u5bb9\u3002\u4f46\u662f\uff0c\u5f53\u6211\u4eec\u77e5\u9053\u6211\u4eec\u4e0d\u4f1a\u5220\u9664\u73b0\u6709\u6837\u5f0f\u65f6\uff0c\u53ef\u4ee5\u5b89\u5168\u5730\u5c06\u5176\u7528\u4e8e\u65b0\u5143\u7d20\u3002<br \/>\n\u53ef\u4ee5\u901a\u8fc7\u8bbe\u7f6e\u4e00\u4e2a\u7279\u6027\uff08attribute\uff09\u6765\u5b9e\u73b0\u540c\u6837\u7684\u6548\u679c\uff1a<code>div.setAttribute('style', 'color: red...')<\/code>\u3002<\/p>\n<\/blockquote>\n<h2>\u6ce8\u610f\u5355\u4f4d<\/h2>\n<p>\u4e0d\u8981\u5fd8\u8bb0\u5c06 CSS \u5355\u4f4d\u6dfb\u52a0\u5230\u503c\u4e0a\u3002<br \/>\n\u4f8b\u5982\uff0c\u6211\u4eec\u4e0d\u5e94\u8be5\u5c06\u00a0<code>elem.style.top<\/code>\u00a0\u8bbe\u7f6e\u4e3a\u00a0<code>10<\/code>\uff0c\u800c\u5e94\u5c06\u5176\u8bbe\u7f6e\u4e3a\u00a0<code>10px<\/code>\u3002\u5426\u5219\u8bbe\u7f6e\u4f1a\u65e0\u6548<\/p>\n<h2>\u8ba1\u7b97\u6837\u5f0f getComputedStyle<\/h2>\n<p>\u4fee\u6539\u6837\u5f0f\u5f88\u7b80\u5355\u3002\u4f46\u662f\u5982\u4f55\u00a0<strong>\u8bfb\u53d6<\/strong>\u00a0\u6837\u5f0f\u5462\uff1f<br \/>\n\u4f8b\u5982\uff0c\u6211\u4eec\u60f3\u77e5\u9053\u5143\u7d20\u7684 size\uff0cmargins \u548c color\u3002\u5e94\u8be5\u600e\u4e48\u83b7\u53d6\uff1f<br \/>\n<strong><code>style<\/code>\u00a0\u5c5e\u6027\u4ec5\u5bf9\u00a0<code>&quot;style&quot;<\/code>\u00a0\u7279\u6027\uff08attribute\uff09\u503c\u8d77\u4f5c\u7528\uff0c\u800c\u6ca1\u6709\u4efb\u4f55 CSS \u7ea7\u8054\uff08cascade\uff09\u3002<\/strong><br \/>\n\u56e0\u6b64\u6211\u4eec\u65e0\u6cd5\u4f7f\u7528\u00a0<code>elem.style<\/code>\u00a0\u8bfb\u53d6\u6765\u81ea CSS \u7c7b\u7684\u4efb\u4f55\u5185\u5bb9\u3002<br \/>\n\u4f8b\u5982\uff0c\u8fd9\u91cc\u7684\u00a0<code>style<\/code>\u00a0\u770b\u4e0d\u5230 margin<\/p>\n<pre><code class=\"language-html\">&lt;head&gt;\n  &lt;style&gt; body { color: red; margin: 5px } &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n  The red text\n  &lt;script&gt;\n    alert(document.body.style.color); \/\/ \u7a7a\u7684\n    alert(document.body.style.marginTop); \/\/ \u7a7a\u7684\n  &lt;\/script&gt;\n&lt;\/body&gt;\n<\/code><\/pre>\n<p>\u2026\u2026\u4f46\u5982\u679c\u6211\u4eec\u9700\u8981\uff0c\u4f8b\u5982\uff0c\u5c06 margin \u589e\u52a0 20px \u5462\uff1f\u90a3\u4e48\u6211\u4eec\u9700\u8981 margin \u7684\u5f53\u524d\u503c\u3002<br \/>\n\u5bf9\u4e8e\u8fd9\u4e2a\u9700\u6c42\uff0c\u8fd9\u91cc\u6709\u53e6\u4e00\u79cd\u65b9\u6cd5\uff1a<code>getComputedStyle<\/code>\u3002<br \/>\n\u8bed\u6cd5\u5982\u4e0b\uff1a<\/p>\n<pre><code class=\"language-js\">getComputedStyle(element, [pseudo])\n<\/code><\/pre>\n<p>element<br \/>\n\u9700\u8981\u88ab\u8bfb\u53d6\u6837\u5f0f\u503c\u7684\u5143\u7d20\u3002<br \/>\npseudo<br \/>\n\u4f2a\u5143\u7d20\uff08\u5982\u679c\u9700\u8981\uff09\uff0c\u4f8b\u5982\u00a0<code>::before<\/code>\u3002\u7a7a\u5b57\u7b26\u4e32\u6216\u65e0\u53c2\u6570\u5219\u610f\u5473\u7740\u5143\u7d20\u672c\u8eab\u3002<br \/>\n\u7ed3\u679c\u662f\u4e00\u4e2a\u5177\u6709\u6837\u5f0f\u5c5e\u6027\u7684\u5bf9\u8c61\uff0c\u50cf\u00a0<code>elem.style<\/code>\uff0c\u4f46\u73b0\u5728\u5bf9\u4e8e\u6240\u6709\u7684 CSS \u7c7b\u6765\u8bf4\u90fd\u662f\u5982\u6b64\u3002<\/p>\n<blockquote>\n<p>\u8ba1\u7b97\u503c\u548c\u89e3\u6790\u503c<br \/>\n\u5728\u00a0<a href=\"https:\/\/drafts.csswg.org\/cssom\/#resolved-values\">CSS<\/a>\u00a0\u4e2d\u6709\u4e24\u4e2a\u6982\u5ff5\uff1a<\/p>\n<ol>\n<li><strong>\u8ba1\u7b97 (computed)<\/strong>\u00a0\u6837\u5f0f\u503c\u662f\u6240\u6709 CSS \u89c4\u5219\u548c CSS \u7ee7\u627f\u90fd\u5e94\u7528\u540e\u7684\u503c\uff0c\u8fd9\u662f CSS \u7ea7\u8054\uff08cascade\uff09\u7684\u7ed3\u679c\u3002\u5b83\u770b\u8d77\u6765\u50cf\u00a0<code>height:1em<\/code>\u00a0\u6216\u00a0<code>font-size:125%<\/code>\u3002<\/li>\n<li><strong>\u89e3\u6790 (resolved)<\/strong>\u00a0\u6837\u5f0f\u503c\u662f\u6700\u7ec8\u5e94\u7528\u4e8e\u5143\u7d20\u7684\u6837\u5f0f\u503c\u3002\u8bf8\u5982\u00a0<code>1em<\/code>\u00a0\u6216\u00a0<code>125%<\/code>\u00a0\u8fd9\u6837\u7684\u503c\u662f\u76f8\u5bf9\u7684\u3002\u6d4f\u89c8\u5668\u5c06\u4f7f\u7528\u8ba1\u7b97\uff08computed\uff09\u503c\uff0c\u5e76\u4f7f\u6240\u6709\u5355\u4f4d\u5747\u4e3a\u56fa\u5b9a\u7684\uff0c\u4e14\u4e3a\u7edd\u5bf9\u5355\u4f4d\uff0c\u4f8b\u5982\uff1a<code>height:20px<\/code>\u00a0\u6216\u00a0<code>font-size:16px<\/code>\u3002\u5bf9\u4e8e\u51e0\u4f55\u5c5e\u6027\uff0c\u89e3\u6790\uff08resolved\uff09\u503c\u53ef\u80fd\u5177\u6709\u6d6e\u70b9\uff0c\u4f8b\u5982\uff1a<code>width:50.5px<\/code>\u3002<\/li>\n<li>\u5f88\u4e45\u4ee5\u524d\uff0c\u521b\u5efa\u4e86\u00a0<code>getComputedStyle<\/code>\u00a0\u6765\u83b7\u53d6\u8ba1\u7b97\uff08computed\uff09\u503c\uff0c\u4f46\u4e8b\u5b9e\u8bc1\u660e\uff0c\u89e3\u6790\uff08resolved\uff09\u503c\u8981\u65b9\u4fbf\u5f97\u591a\uff0c\u6807\u51c6\u4e5f\u56e0\u6b64\u53d1\u751f\u4e86\u53d8\u5316\u3002<\/li>\n<li>\u6240\u4ee5\uff0c\u73b0\u5728\u00a0<code>getComputedStyle<\/code>\u00a0\u5b9e\u9645\u4e0a\u8fd4\u56de\u7684\u662f\u5c5e\u6027\u7684\u89e3\u6790\u503c\uff08resolved\uff09\u3002<\/li>\n<\/ol>\n<\/blockquote>\n<blockquote>\n<p><code>getComputedStyle<\/code>\u00a0\u9700\u8981\u5b8c\u6574\u7684\u5c5e\u6027\u540d<br \/>\n\u6211\u4eec\u5e94\u8be5\u603b\u662f\u4f7f\u7528\u6211\u4eec\u60f3\u8981\u7684\u786e\u5207\u7684\u5c5e\u6027\uff0c\u4f8b\u5982\u00a0<code>paddingLeft<\/code>\u3001<code>marginTop<\/code>\u00a0\u6216\u00a0<code>borderTopWidth<\/code>\u3002\u5426\u5219\uff0c\u5c31\u4e0d\u80fd\u4fdd\u8bc1\u6b63\u786e\u7684\u7ed3\u679c\u3002<br \/>\n\u4f8b\u5982\uff0c\u5982\u679c\u6709\u00a0<code>paddingLeft\/paddingTop<\/code>\u00a0\u5c5e\u6027\uff0c\u90a3\u4e48\u5bf9\u4e8e\u00a0<code>getComputedStyle(elem).padding<\/code>\uff0c\u6211\u4eec\u4f1a\u5f97\u5230\u4ec0\u4e48\uff1f\u4ec0\u4e48\u90fd\u6ca1\u6709\uff0c\u6216\u8005\u662f\u4ece\u5df2\u77e5\u7684 padding \u4e2d\u201c\u751f\u6210\u201d\u7684\u503c\uff1f\u8fd9\u91cc\u6ca1\u6709\u6807\u51c6\u7684\u89c4\u5219\u3002<\/p>\n<\/blockquote>\n<blockquote>\n<p>\u5e94\u7528\u4e8e\u00a0<code>:visited<\/code>\u00a0\u94fe\u63a5\u7684\u6837\u5f0f\u88ab\u9690\u85cf\u4e86\uff01<br \/>\n\u53ef\u4ee5\u4f7f\u7528 CSS \u4f2a\u7c7b\u00a0<code>:visited<\/code>\u00a0\u5bf9\u88ab\u8bbf\u95ee\u8fc7\u7684\u94fe\u63a5\u8fdb\u884c\u7740\u8272\u3002<br \/>\n\u4f46\u00a0<code>getComputedStyle<\/code>\u00a0\u6ca1\u6709\u7ed9\u51fa\u8bbf\u95ee\u8be5\u989c\u8272\u7684\u65b9\u5f0f\uff0c\u56e0\u4e3a\u5982\u679c\u5141\u8bb8\u7684\u8bdd\uff0c\u4efb\u610f\u9875\u9762\u90fd\u53ef\u4ee5\u901a\u8fc7\u5728\u9875\u9762\u4e0a\u521b\u5efa\u5b83\uff0c\u5e76\u901a\u8fc7\u68c0\u67e5\u6837\u5f0f\u6765\u786e\u5b9a\u7528\u6237\u662f\u5426\u8bbf\u95ee\u4e86\u67d0\u94fe\u63a5\u3002<br \/>\nJavaScript \u770b\u4e0d\u5230\u00a0<code>:visited<\/code>\u00a0\u6240\u5e94\u7528\u7684\u6837\u5f0f\u3002\u6b64\u5916\uff0cCSS \u4e2d\u4e5f\u6709\u4e00\u4e2a\u9650\u5236\uff0c\u5373\u7981\u6b62\u5728\u00a0<code>:visited<\/code>\u00a0\u4e2d\u5e94\u7528\u66f4\u6539\u51e0\u4f55\u5f62\u72b6\u7684\u6837\u5f0f\u3002\u8fd9\u662f\u4e3a\u4e86\u786e\u4fdd\u4e00\u4e2a\u4e0d\u597d\u7684\u9875\u9762\u65e0\u6cd5\u68c0\u6d4b\u94fe\u63a5\u662f\u5426\u88ab\u8bbf\u95ee\uff0c\u8fdb\u800c\u7aa5\u63a2\u9690\u79c1\u3002<\/p>\n<\/blockquote>\n<h1>\u5143\u7d20\u5927\u5c0f\u548c\u6eda\u52a8<\/h1>\n<h2>\u793a\u4f8b\u5143\u7d20<\/h2>\n<p>\u4f5c\u4e3a\u6f14\u793a\u5c5e\u6027\u7684\u793a\u4f8b\u5143\u7d20\uff0c\u6211\u4eec\u5c06\u4f7f\u7528\u4e0b\u9762\u7ed9\u51fa\u7684\u5143\u7d20<\/p>\n<pre><code class=\"language-html\">&lt;div id=&quot;example&quot;&gt;\n  ...Text...\n&lt;\/div&gt;\n&lt;style&gt;\n  #example {\n    width: 300px;\n    height: 200px;\n    border: 25px solid #E8C48F;\n    padding: 20px;\n    overflow: auto;\n  }\n&lt;\/style&gt;\n<\/code><\/pre>\n<p>\u5b83\u6709\u8fb9\u6846\uff08border\uff09\uff0c\u5185\u8fb9\u8ddd\uff08padding\uff09\u548c\u6eda\u52a8\uff08scrolling\uff09\u7b49\u5168\u5957\u529f\u80fd\u3002\u4f46\u6ca1\u6709\u5916\u8fb9\u8ddd\uff08margin\uff09\uff0c\u56e0\u4e3a\u5b83\u4eec\u4e0d\u662f\u5143\u7d20\u672c\u8eab\u7684\u4e00\u90e8\u5206\uff0c\u5e76\u4e14\u5b83\u4eec\u6ca1\u4ec0\u4e48\u7279\u6b8a\u7684\u5c5e\u6027\u3002<br \/>\n<img decoding=\"async\" src=\"https:\/\/levin.ink\/wp-content\/uploads\/2024\/05\/Pasted-image-20240517154158.png\" alt=\"Pasted image 20240517154158.png\"><\/p>\n<blockquote>\n<p>\u6ce8\u610f\u6eda\u52a8\u6761<br \/>\n\u4e0a\u56fe\u6f14\u793a\u4e86\u5143\u7d20\u5177\u6709\u6eda\u52a8\u6761\u8fd9\u79cd\u6700\u590d\u6742\u7684\u60c5\u51b5\u3002\u4e00\u4e9b\u6d4f\u89c8\u5668\uff08\u5e76\u975e\u5168\u90e8\uff09\u901a\u8fc7\u4ece\u5185\u5bb9\uff08\u4e0a\u9762\u6807\u8bb0\u4e3a \u201ccontent width\u201d\uff09\u4e2d\u83b7\u53d6\u7a7a\u95f4\u6765\u4e3a\u6eda\u52a8\u6761\u4fdd\u7559\u7a7a\u95f4\u3002<br \/>\n\u56e0\u6b64\uff0c\u5982\u679c\u6ca1\u6709\u6eda\u52a8\u6761\uff0c\u5185\u5bb9\u5bbd\u5ea6\u5c06\u662f\u00a0<code>300 px<\/code>\uff0c\u4f46\u662f\u5982\u679c\u6eda\u52a8\u6761\u5bbd\u5ea6\u662f\u00a0<code>16px<\/code>\uff08\u4e0d\u540c\u7684\u8bbe\u5907\u548c\u6d4f\u89c8\u5668\uff0c\u6eda\u52a8\u6761\u7684\u5bbd\u5ea6\u53ef\u80fd\u6709\u6240\u4e0d\u540c\uff09\uff0c\u90a3\u4e48\u8fd8\u5269\u4e0b\u00a0<code>300 - 16 \uff1d 284px<\/code>\uff0c\u6211\u4eec\u5e94\u8be5\u8003\u8651\u5230\u8fd9\u4e00\u70b9\u3002\u8fd9\u5c31\u662f\u4e3a\u4ec0\u4e48\u672c\u7ae0\u7684\u4f8b\u5b50\u603b\u662f\u5047\u8bbe\u6709\u6eda\u52a8\u6761\u3002\u5982\u679c\u6ca1\u6709\u6eda\u52a8\u6761\uff0c\u4e00\u4e9b\u8ba1\u7b97\u4f1a\u66f4\u7b80\u5355\u3002<\/p>\n<\/blockquote>\n<blockquote>\n<p>\u6587\u672c\u53ef\u80fd\u4f1a\u6ea2\u51fa\u5230\u00a0<code>padding-bottom<\/code>\u00a0\u4e2d<br \/>\n\u5728\u6211\u4eec\u7684\u63d2\u56fe\u4e2d\u7684 padding \u4e2d\u901a\u5e38\u663e\u793a\u4e3a\u7a7a\uff0c\u4f46\u662f\u5982\u679c\u5143\u7d20\u4e2d\u6709\u5f88\u591a\u6587\u672c\uff0c\u5e76\u4e14\u6ea2\u51fa\u4e86\uff0c\u90a3\u4e48\u6d4f\u89c8\u5668\u4f1a\u5728\u00a0<code>padding-bottom<\/code>\u00a0\u5904\u663e\u793a\u201c\u6ea2\u51fa\u201d\u6587\u672c\uff0c\u8fd9\u662f\u6b63\u5e38\u73b0\u8c61\u3002<\/p>\n<\/blockquote>\n<h2>\u51e0\u4f55<\/h2>\n<p><div class='fancybox-wrapper lazyload-container-unload' data-fancybox='post-images' href='https:\/\/levin.ink\/wp-content\/uploads\/2024\/05\/Pasted-image-20240517154508.png'><img class=\"lazyload lazyload-style-1\" src=\"data:image\/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPgo8c3ZnIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjZmZmZmZmMDAiPjxnPjwvZz4KPC9zdmc+\"  decoding=\"async\" data-original=\"https:\/\/levin.ink\/wp-content\/uploads\/2024\/05\/Pasted-image-20240517154508.png\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB\/AAffA0nNPuCLAAAAAElFTkSuQmCC\" alt=\"Pasted image 20240517154508.png\"><\/div><br \/>\n\u8fd9\u4e9b\u5c5e\u6027\u7684\u503c\u5728\u6280\u672f\u4e0a\u8bb2\u662f\u6570\u5b57\uff0c\u4f46\u8fd9\u4e9b\u6570\u5b57\u5176\u5b9e\u662f\u201c\u50cf\u7d20\uff08pixel\uff09\u201d\uff0c\u56e0\u6b64\u5b83\u4eec\u662f\u50cf\u7d20\u6d4b\u91cf\u503c\u3002<br \/>\n\u8ba9\u6211\u4eec\u4ece\u5143\u7d20\u5916\u90e8\u5f00\u59cb\u63a2\u7d22\u5c5e\u6027\u3002<\/p>\n<h2>offsetParent offsetLeft\/Top<\/h2>\n<p>\u8fd9\u4e9b\u5c5e\u6027\u5f88\u5c11\u4f7f\u7528\uff0c\u4f46\u5b83\u4eec\u4ecd\u7136\u662f\u201c\u6700\u5916\u9762\u201d\u7684\u51e0\u4f55\u5c5e\u6027\uff0c\u6240\u4ee5\u6211\u4eec\u5c06\u4ece\u5b83\u4eec\u5f00\u59cb\u3002<br \/>\n<code>offsetParent<\/code>\u00a0\u662f\u6700\u63a5\u8fd1\u7684\u7956\u5148\uff08ancestor\uff09\uff0c\u5728\u6d4f\u89c8\u5668\u6e32\u67d3\u671f\u95f4\uff0c\u5b83\u88ab\u7528\u4e8e\u8ba1\u7b97\u5750\u6807\u3002<br \/>\n\u6700\u8fd1\u7684\u7956\u5148\u4e3a\u4e0b\u5217\u4e4b\u4e00\uff1a<\/p>\n<ol>\n<li>CSS \u5b9a\u4f4d\u7684\uff08<code>position<\/code>\u00a0\u4e3a\u00a0<code>absolute<\/code>\u3001<code>relative<\/code>\u3001<code>fixed<\/code>\u00a0\u6216\u00a0<code>sticky<\/code>\uff09\uff0c<\/li>\n<li>\u6216\u00a0<code>&lt;td&gt;<\/code>\uff0c<code>&lt;th&gt;<\/code>\uff0c<code>&lt;table&gt;<\/code>\uff0c<\/li>\n<li>\u6216\u00a0<code>&lt;body&gt;<\/code>\u3002<br \/>\n\u5c5e\u6027\u00a0<code>offsetLeft\/offsetTop<\/code>\u00a0\u63d0\u4f9b\u76f8\u5bf9\u4e8e\u00a0<code>offsetParent<\/code>\u00a0\u5de6\u4e0a\u89d2\u7684 x\/y \u5750\u6807\u3002<br \/>\n\u5728\u4e0b\u9762\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\uff0c\u5185\u90e8\u7684\u00a0<code>&lt;div&gt;<\/code>\u00a0\u6709\u00a0<code>&lt;main&gt;<\/code>\u00a0\u4f5c\u4e3a\u00a0<code>offsetParent<\/code>\uff0c\u5e76\u4e14\u00a0<code>offsetLeft\/offsetTop<\/code>\u00a0\u8ba9\u5b83\u4ece\u5de6\u4e0a\u89d2\u4f4d\u79fb\uff08<code>180<\/code>\uff09\uff1a<\/li>\n<\/ol>\n<pre><code class=\"language-html\">&lt;main style=&quot;position: relative&quot; id=&quot;main&quot;&gt;\n  &lt;article&gt;\n    &lt;div id=&quot;example&quot; style=&quot;position: absolute; left: 180px; top: 180px&quot;&gt;...&lt;\/div&gt;\n  &lt;\/article&gt;\n&lt;\/main&gt;\n&lt;script&gt;\n  alert(example.offsetParent.id); \/\/ main\n  alert(example.offsetLeft); \/\/ 180\uff08\u6ce8\u610f\uff1a\u8fd9\u662f\u4e00\u4e2a\u6570\u5b57\uff0c\u4e0d\u662f\u5b57\u7b26\u4e32 &quot;180px&quot;\uff09\n  alert(example.offsetTop); \/\/ 180\n&lt;\/script&gt;\n<\/code><\/pre>\n<p><div class='fancybox-wrapper lazyload-container-unload' data-fancybox='post-images' href='https:\/\/levin.ink\/wp-content\/uploads\/2024\/05\/Pasted-image-20240517155639.png'><img class=\"lazyload lazyload-style-1\" src=\"data:image\/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPgo8c3ZnIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjZmZmZmZmMDAiPjxnPjwvZz4KPC9zdmc+\"  decoding=\"async\" data-original=\"https:\/\/levin.ink\/wp-content\/uploads\/2024\/05\/Pasted-image-20240517155639.png\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB\/AAffA0nNPuCLAAAAAElFTkSuQmCC\" alt=\"Pasted image 20240517155639.png\"><\/div><br \/>\n\u6709\u4ee5\u4e0b\u51e0\u79cd\u60c5\u51b5\u4e0b\uff0c<code>offsetParent<\/code>\u00a0\u7684\u503c\u4e3a\u00a0<code>null<\/code>\uff1a<\/p>\n<ol>\n<li>\u5bf9\u4e8e\u672a\u663e\u793a\u7684\u5143\u7d20\uff08<code>display:none<\/code>\u00a0\u6216\u8005\u4e0d\u5728\u6587\u6863\u4e2d\uff09\u3002<\/li>\n<li>\u5bf9\u4e8e\u00a0<code>&lt;body&gt;<\/code>\u00a0\u4e0e\u00a0<code>&lt;html&gt;<\/code>\u3002<\/li>\n<li>\u5bf9\u4e8e\u5e26\u6709\u00a0<code>position:fixed<\/code>\u00a0\u7684\u5143\u7d20\u3002<\/li>\n<\/ol>\n<h2>offsetWidth\/Height<\/h2>\n<p>\u73b0\u5728\uff0c\u8ba9\u6211\u4eec\u7ee7\u7eed\u5173\u6ce8\u5143\u7d20\u672c\u8eab\u3002<br \/>\n\u8fd9\u4e24\u4e2a\u5c5e\u6027\u662f\u6700\u7b80\u5355\u7684\u3002\u5b83\u4eec\u63d0\u4f9b\u4e86\u5143\u7d20\u7684\u201c\u5916\u90e8\u201d width\/height\u3002\u6216\u8005\uff0c\u6362\u53e5\u8bdd\u8bf4\uff0c\u5b83\u7684\u5b8c\u6574\u5927\u5c0f\uff08\u5305\u62ec\u8fb9\u6846\uff09\u3002<br \/>\n<div class='fancybox-wrapper lazyload-container-unload' data-fancybox='post-images' href='https:\/\/levin.ink\/wp-content\/uploads\/2024\/05\/Pasted-image-20240517160633.png'><img class=\"lazyload lazyload-style-1\" src=\"data:image\/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPgo8c3ZnIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjZmZmZmZmMDAiPjxnPjwvZz4KPC9zdmc+\"  decoding=\"async\" data-original=\"https:\/\/levin.ink\/wp-content\/uploads\/2024\/05\/Pasted-image-20240517160633.png\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB\/AAffA0nNPuCLAAAAAElFTkSuQmCC\" alt=\"Pasted image 20240517160633.png\"><\/div><br \/>\n\u5bf9\u4e8e\u6211\u4eec\u7684\u793a\u4f8b\u5143\u7d20\uff1a<\/p>\n<ul>\n<li><code>offsetWidth = 390<\/code>\u00a0\u2014\u2014 \u5916\u90e8\u5bbd\u5ea6\uff08width\uff09\uff0c\u53ef\u4ee5\u8ba1\u7b97\u4e3a\u5185\u90e8 CSS-width\uff08<code>300px<\/code>\uff09\u52a0\u4e0a padding\uff08<code>2 * 20px<\/code>\uff09\u548c border\uff08<code>2 * 25px<\/code>\uff09\u3002<\/li>\n<li><code>offsetHeight = 290<\/code>\u00a0\u2014\u2014 \u5916\u90e8\u9ad8\u5ea6\uff08height\uff09\u3002<\/li>\n<\/ul>\n<blockquote>\n<p>\u5bf9\u4e8e\u672a\u663e\u793a\u7684\u5143\u7d20\uff0c\u51e0\u4f55\u5c5e\u6027\u4e3a 0\/null<br \/>\n\u4ec5\u9488\u5bf9\u663e\u793a\u7684\u5143\u7d20\u8ba1\u7b97\u51e0\u4f55\u5c5e\u6027\u3002<br \/>\n\u5982\u679c\u4e00\u4e2a\u5143\u7d20\uff08\u6216\u5176\u4efb\u4f55\u7956\u5148\uff09\u5177\u6709\u00a0<code>display:none<\/code>\u00a0\u6216\u4e0d\u5728\u6587\u6863\u4e2d\uff0c\u5219\u6240\u6709\u51e0\u4f55\u5c5e\u6027\u5747\u4e3a\u96f6\uff08\u6216\u00a0<code>offsetParent<\/code>\u00a0\u4e3a\u00a0<code>null<\/code>\uff09\u3002<br \/>\n\u4f8b\u5982\uff0c\u5f53\u6211\u4eec\u521b\u5efa\u4e86\u4e00\u4e2a\u5143\u7d20\uff0c\u4f46\u5c1a\u672a\u5c06\u5176\u63d2\u5165\u6587\u6863\u4e2d\uff0c\u6216\u8005\u5b83\uff08\u6216\u5b83\u7684\u7956\u5148\uff09\u5177\u6709\u00a0<code>display:none<\/code>\u00a0\u65f6\uff0c<code>offsetParent<\/code>\u00a0\u4e3a\u00a0<code>null<\/code>\uff0c\u5e76\u4e14\u00a0<code>offsetWidth<\/code>\u00a0\u548c\u00a0<code>offsetHeight<\/code>\u00a0\u4e3a\u00a0<code>0<\/code>\u3002<br \/>\n\u6211\u4eec\u53ef\u4ee5\u7528\u5b83\u6765\u68c0\u67e5\u4e00\u4e2a\u5143\u7d20\u662f\u5426\u88ab\u9690\u85cf\uff0c\u50cf\u8fd9\u6837\uff1a<\/p>\n<\/blockquote>\n<pre><code class=\"language-js\">function isHidden(elem) {\n  return !elem.offsetWidth &amp;&amp; !elem.offsetHeight;\n}\n<\/code><\/pre>\n<blockquote>\n<p>\u8bf7\u6ce8\u610f\uff0c\u5bf9\u4e8e\u4f1a\u5c55\u793a\u5728\u5c4f\u5e55\u4e0a\uff0c\u4f46\u5927\u5c0f\u4e3a\u96f6\u7684\u5143\u7d20\uff0c\u5b83\u4eec\u7684\u00a0<code>isHidden<\/code>\u00a0\u8fd4\u56de\u00a0<code>true<\/code>\u3002<\/p>\n<\/blockquote>\n<h2>clientTop\/Left<\/h2>\n<p>\u5728\u5143\u7d20\u5185\u90e8\uff0c\u6211\u4eec\u6709\u8fb9\u6846\uff08border\uff09\u3002<br \/>\n\u4e3a\u4e86\u6d4b\u91cf\u5b83\u4eec\uff0c\u53ef\u4ee5\u4f7f\u7528\u00a0<code>clientTop<\/code>\u00a0\u548c\u00a0<code>clientLeft<\/code>\u3002<br \/>\n\u5728\u6211\u4eec\u7684\u4f8b\u5b50\u4e2d\uff1a<\/p>\n<ul>\n<li><code>clientLeft = 25<\/code>\u00a0\u2014\u2014 \u5de6\u8fb9\u6846\u5bbd\u5ea6<\/li>\n<li><code>clientTop = 25<\/code>\u00a0\u2014\u2014 \u4e0a\u8fb9\u6846\u5bbd\u5ea6<br \/>\n<div class='fancybox-wrapper lazyload-container-unload' data-fancybox='post-images' href='https:\/\/levin.ink\/wp-content\/uploads\/2024\/05\/Pasted-image-20240517160845.png'><img class=\"lazyload lazyload-style-1\" src=\"data:image\/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPgo8c3ZnIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjZmZmZmZmMDAiPjxnPjwvZz4KPC9zdmc+\"  decoding=\"async\" data-original=\"https:\/\/levin.ink\/wp-content\/uploads\/2024\/05\/Pasted-image-20240517160845.png\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB\/AAffA0nNPuCLAAAAAElFTkSuQmCC\" alt=\"Pasted image 20240517160845.png\"><\/div><br \/>\n\u2026\u2026\u4f46\u51c6\u786e\u5730\u8bf4 \u2014\u2014 \u8fd9\u4e9b\u5c5e\u6027\u4e0d\u662f\u8fb9\u6846\u7684 width\/height\uff0c\u800c\u662f\u5185\u4fa7\u4e0e\u5916\u4fa7\u7684\u76f8\u5bf9\u5750\u6807\u3002<br \/>\n\u6709\u4ec0\u4e48\u533a\u522b\uff1f<br \/>\n\u5f53\u6587\u6863\u4ece\u53f3\u5230\u5de6\u663e\u793a\uff08\u64cd\u4f5c\u7cfb\u7edf\u4e3a\u963f\u62c9\u4f2f\u8bed\u6216\u5e0c\u4f2f\u6765\u8bed\uff09\u65f6\uff0c\u5f71\u54cd\u5c31\u663e\u73b0\u51fa\u6765\u4e86\u3002\u6b64\u65f6\u6eda\u52a8\u6761\u4e0d\u5728\u53f3\u8fb9\uff0c\u800c\u662f\u5728\u5de6\u8fb9\uff0c\u6b64\u65f6\u00a0<code>clientLeft<\/code>\u00a0\u5219\u5305\u542b\u4e86\u6eda\u52a8\u6761\u7684\u5bbd\u5ea6\u3002<br \/>\n\u5728\u8fd9\u79cd\u60c5\u51b5\u4e0b\uff0c<code>clientLeft<\/code>\u00a0\u7684\u503c\u5c06\u4e0d\u662f\u00a0<code>25<\/code>\uff0c\u800c\u662f\u52a0\u4e0a\u6eda\u52a8\u6761\u7684\u5bbd\u5ea6\u00a0<code>25 + 16 = 41<\/code>\u3002<\/li>\n<\/ul>\n<h2>clientWidth\/Height<\/h2>\n<p>\u8fd9\u4e9b\u5c5e\u6027\u63d0\u4f9b\u4e86\u5143\u7d20\u8fb9\u6846\u5185\u533a\u57df\u7684\u5927\u5c0f\u3002<br \/>\n\u5b83\u4eec\u5305\u62ec\u4e86 \u201ccontent width\u201d \u548c \u201cpadding\u201d\uff0c\u4f46\u4e0d\u5305\u62ec\u6eda\u52a8\u6761\u5bbd\u5ea6\uff08scrollbar\uff09\uff1a<br \/>\n<div class='fancybox-wrapper lazyload-container-unload' data-fancybox='post-images' href='https:\/\/levin.ink\/wp-content\/uploads\/2024\/05\/Pasted-image-20240517160939.png'><img class=\"lazyload lazyload-style-1\" src=\"data:image\/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPgo8c3ZnIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjZmZmZmZmMDAiPjxnPjwvZz4KPC9zdmc+\"  decoding=\"async\" data-original=\"https:\/\/levin.ink\/wp-content\/uploads\/2024\/05\/Pasted-image-20240517160939.png\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB\/AAffA0nNPuCLAAAAAElFTkSuQmCC\" alt=\"Pasted image 20240517160939.png\"><\/div><br \/>\n\u5728\u4e0a\u56fe\u4e2d\uff0c\u6211\u4eec\u9996\u5148\u8003\u8651\u00a0<code>clientHeight<\/code>\u3002<br \/>\n\u8fd9\u91cc\u6ca1\u6709\u6c34\u5e73\u6eda\u52a8\u6761\uff0c\u6240\u4ee5\u5b83\u6070\u597d\u662f border \u5185\u7684\u603b\u548c\uff1aCSS-height\u00a0<code>200px<\/code>\u00a0\u52a0\u4e0a\u9876\u90e8\u548c\u5e95\u90e8\u7684 padding\uff08<code>2 * 20px<\/code>\uff09\uff0c\u603b\u8ba1\u00a0<code>240px<\/code>\u3002<br \/>\n\u73b0\u5728\u00a0<code>clientWidth<\/code>\u00a0\u2014\u2014 \u8fd9\u91cc\u7684 \u201ccontent width\u201d \u4e0d\u662f\u00a0<code>300px<\/code>\uff0c\u800c\u662f\u00a0<code>284px<\/code>\uff0c\u56e0\u4e3a\u88ab\u6eda\u52a8\u6761\u5360\u7528\u4e86\u00a0<code>16px<\/code>\u3002\u6240\u4ee5\u52a0\u8d77\u6765\u5c31\u662f\u00a0<code>284px<\/code>\u00a0\u52a0\u4e0a\u5de6\u4fa7\u548c\u53f3\u4fa7\u7684 padding\uff0c\u603b\u8ba1\u00a0<code>324px<\/code>\u3002<br \/>\n<strong>\u5982\u679c\u8fd9\u91cc\u6ca1\u6709 padding\uff0c\u90a3\u4e48\u00a0<code>clientWidth\/Height<\/code>\u00a0\u4ee3\u8868\u7684\u5c31\u662f\u5185\u5bb9\u533a\u57df\uff0c\u5373 border \u548c scrollbar\uff08\u5982\u679c\u6709\uff09\u5185\u7684\u533a\u57df\u3002<\/strong><br \/>\n<div class='fancybox-wrapper lazyload-container-unload' data-fancybox='post-images' href='https:\/\/levin.ink\/wp-content\/uploads\/2024\/05\/Pasted-image-20240517161151.png'><img class=\"lazyload lazyload-style-1\" src=\"data:image\/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPgo8c3ZnIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjZmZmZmZmMDAiPjxnPjwvZz4KPC9zdmc+\"  decoding=\"async\" data-original=\"https:\/\/levin.ink\/wp-content\/uploads\/2024\/05\/Pasted-image-20240517161151.png\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB\/AAffA0nNPuCLAAAAAElFTkSuQmCC\" alt=\"Pasted image 20240517161151.png\"><\/div><br \/>\n\u56e0\u6b64\uff0c\u5f53\u6ca1\u6709 padding \u65f6\uff0c\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u00a0<code>clientWidth\/clientHeight<\/code>\u00a0\u6765\u83b7\u53d6\u5185\u5bb9\u533a\u57df\u7684\u5927\u5c0f\u3002<\/p>\n<h3>scrollWidth\/Height<\/h3>\n<p>\u8fd9\u4e9b\u5c5e\u6027\u5c31\u50cf\u00a0<code>clientWidth\/clientHeight<\/code>\uff0c\u4f46\u5b83\u4eec\u8fd8\u5305\u62ec\u6eda\u52a8\u51fa\uff08\u9690\u85cf\uff09\u7684\u90e8\u5206<br \/>\n<div class='fancybox-wrapper lazyload-container-unload' data-fancybox='post-images' href='https:\/\/levin.ink\/wp-content\/uploads\/2024\/05\/Pasted-image-20240517161605.png'><img class=\"lazyload lazyload-style-1\" src=\"data:image\/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPgo8c3ZnIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjZmZmZmZmMDAiPjxnPjwvZz4KPC9zdmc+\"  decoding=\"async\" data-original=\"https:\/\/levin.ink\/wp-content\/uploads\/2024\/05\/Pasted-image-20240517161605.png\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB\/AAffA0nNPuCLAAAAAElFTkSuQmCC\" alt=\"Pasted image 20240517161605.png\"><\/div><br \/>\n\u5728\u4e0a\u56fe\u4e2d\uff1a<\/p>\n<ul>\n<li><code>scrollHeight = 723<\/code>\u00a0\u2014\u2014 \u662f\u5185\u5bb9\u533a\u57df\u7684\u5b8c\u6574\u5185\u90e8\u9ad8\u5ea6\uff0c\u5305\u62ec\u6eda\u52a8\u51fa\u7684\u90e8\u5206\u3002<\/li>\n<li><code>scrollWidth = 324<\/code>\u00a0\u2014\u2014 \u662f\u5b8c\u6574\u7684\u5185\u90e8\u5bbd\u5ea6\uff0c\u8fd9\u91cc\u6211\u4eec\u6ca1\u6709\u6c34\u5e73\u6eda\u52a8\uff0c\u56e0\u6b64\u5b83\u7b49\u4e8e\u00a0<code>clientWidth<\/code>\u3002<br \/>\n\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u8fd9\u4e9b\u5c5e\u6027\u5c06\u5143\u7d20\u5c55\u5f00\uff08expand\uff09\u5230\u6574\u4e2a width\/height\u3002<\/li>\n<\/ul>\n<pre><code class=\"language-JS\">\/\/ \u5c06\u5143\u7d20\u5c55\u5f00\uff08expand\uff09\u5230\u5b8c\u6574\u7684\u5185\u5bb9\u9ad8\u5ea6\nelement.style.height = `${element.scrollHeight}px`;\n<\/code><\/pre>\n<h3>scrollLeft\/scrollTop<\/h3>\n<p>\u5c5e\u6027\u00a0<code>scrollLeft\/scrollTop<\/code>\u00a0\u662f\u5143\u7d20\u7684\u9690\u85cf\u3001\u6eda\u52a8\u90e8\u5206\u7684 width\/height\u3002<br \/>\n\u5728\u4e0b\u56fe\u4e2d\uff0c\u6211\u4eec\u53ef\u4ee5\u770b\u5230\u5e26\u6709\u5782\u76f4\u6eda\u52a8\u5757\u7684\u00a0<code>scrollHeight<\/code>\u00a0\u548c\u00a0<code>scrollTop<\/code>\u3002<br \/>\n<div class='fancybox-wrapper lazyload-container-unload' data-fancybox='post-images' href='https:\/\/levin.ink\/wp-content\/uploads\/2024\/05\/Pasted-image-20240517161743.png'><img class=\"lazyload lazyload-style-1\" src=\"data:image\/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPgo8c3ZnIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjZmZmZmZmMDAiPjxnPjwvZz4KPC9zdmc+\"  decoding=\"async\" data-original=\"https:\/\/levin.ink\/wp-content\/uploads\/2024\/05\/Pasted-image-20240517161743.png\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB\/AAffA0nNPuCLAAAAAElFTkSuQmCC\" alt=\"Pasted image 20240517161743.png\"><\/div><br \/>\n\u6362\u53e5\u8bdd\u8bf4\uff0c<code>scrollTop<\/code>\u00a0\u5c31\u662f\u201c\u5df2\u7ecf\u6eda\u52a8\u4e86\u591a\u5c11\u201d\u3002<\/p>\n<blockquote>\n<p><code>scrollLeft\/scrollTop<\/code>\u00a0\u662f\u53ef\u4fee\u6539\u7684<br \/>\n\u5927\u591a\u6570\u51e0\u4f55\u5c5e\u6027\u662f\u53ea\u8bfb\u7684\uff0c\u4f46\u662f\u00a0<code>scrollLeft\/scrollTop<\/code>\u00a0\u662f\u53ef\u4fee\u6539\u7684\uff0c\u5e76\u4e14\u6d4f\u89c8\u5668\u4f1a\u6eda\u52a8\u8be5\u5143\u7d20\u3002<br \/>\n\u5982\u679c\u4f60\u70b9\u51fb\u4e0b\u9762\u7684\u5143\u7d20\uff0c\u5219\u4f1a\u6267\u884c\u4ee3\u7801\u00a0<code>elem.scrollTop += 10<\/code>\u3002\u8fd9\u4f7f\u5f97\u5143\u7d20\u5185\u5bb9\u5411\u4e0b\u6eda\u52a8\u00a0<code>10px<\/code>\u3002<br \/>\n\u5c06\u00a0<code>scrollTop<\/code>\u00a0\u8bbe\u7f6e\u4e3a\u00a0<code>0<\/code>\u00a0\u6216\u4e00\u4e2a\u5927\u7684\u503c\uff0c\u4f8b\u5982\u00a0<code>1e9<\/code>\uff0c\u5c06\u4f1a\u4f7f\u5143\u7d20\u6eda\u52a8\u5230\u9876\u90e8\/\u5e95\u90e8\u3002<\/p>\n<\/blockquote>\n<h2>\u4e0d\u8981\u4ececss\u4e2d\u83b7\u53d6width\/height<\/h2>\n<p>\u6211\u4eec\u521a\u521a\u4ecb\u7ecd\u4e86 DOM \u5143\u7d20\u7684\u51e0\u4f55\u5c5e\u6027\uff0c\u5b83\u4eec\u53ef\u7528\u4e8e\u83b7\u5f97\u5bbd\u5ea6\u3001\u9ad8\u5ea6\u548c\u8ba1\u7b97\u8ddd\u79bb\u3002<br \/>\n\u4f46\u662f\uff0c\u6b63\u5982\u6211\u4eec\u5728\u00a0<a href=\"https:\/\/zh.javascript.info\/styles-and-classes\">\u6837\u5f0f\u548c\u7c7b<\/a>\u00a0\u4e00\u7ae0\u6240\u77e5\u9053\u7684\u90a3\u6837\uff0c\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u00a0<code>getComputedStyle<\/code>\u00a0\u6765\u8bfb\u53d6 CSS-width \u548c height\u3002<br \/>\n\u90a3\u4e3a\u4ec0\u4e48\u4e0d\u50cf\u8fd9\u6837\u7528\u00a0<code>getComputedStyle<\/code>\u00a0\u8bfb\u53d6\u5143\u7d20\u7684 width \u5462\uff1f<\/p>\n<pre><code class=\"language-JS\">let elem = document.body;\nalert( getComputedStyle(elem).width ); \/\/ \u663e\u793a elem \u7684 CSS width\n<\/code><\/pre>\n<p>\u4e3a\u4ec0\u4e48\u6211\u4eec\u5e94\u8be5\u4f7f\u7528\u51e0\u4f55\u5c5e\u6027\u5462\uff1f\u8fd9\u91cc\u6709\u4e24\u4e2a\u539f\u56e0\uff1a<\/p>\n<ol>\n<li>\u9996\u5148\uff0cCSS\u00a0<code>width\/height<\/code>\u00a0\u53d6\u51b3\u4e8e\u53e6\u4e00\u4e2a\u5c5e\u6027\uff1a<code>box-sizing<\/code>\uff0c\u5b83\u5b9a\u4e49\u4e86\u201c\u4ec0\u4e48\u662f\u201d CSS \u5bbd\u5ea6\u548c\u9ad8\u5ea6\u3002\u51fa\u4e8e CSS \u7684\u76ee\u7684\u800c\u5bf9\u00a0<code>box-sizing<\/code>\u00a0\u8fdb\u884c\u7684\u66f4\u6539\u53ef\u80fd\u4f1a\u7834\u574f\u6b64\u7c7b JavaScript \u64cd\u4f5c\u3002<\/li>\n<li>\u5176\u6b21\uff0cCSS \u7684\u00a0<code>width\/height<\/code>\u00a0\u53ef\u80fd\u662f\u00a0<code>auto<\/code>\uff0c\u4f8b\u5982\u5185\u8054\uff08inline\uff09\u5143\u7d20\uff1a<br \/>\n\u4ece CSS \u7684\u89c2\u70b9\u6765\u770b\uff0c<code>width:auto<\/code>\u00a0\u662f\u5b8c\u5168\u6b63\u5e38\u7684\uff0c\u4f46\u5728 JavaScript \u4e2d\uff0c\u6211\u4eec\u9700\u8981\u4e00\u4e2a\u786e\u5207\u7684\u00a0<code>px<\/code>\u00a0\u5927\u5c0f\uff0c\u4ee5\u4fbf\u6211\u4eec\u5728\u8ba1\u7b97\u4e2d\u4f7f\u7528\u5b83\u3002\u56e0\u6b64\uff0c\u8fd9\u91cc\u7684 CSS \u5bbd\u5ea6\u6ca1\u4ec0\u4e48\u7528\u3002<\/li>\n<\/ol>\n<p>\u8fd8\u6709\u53e6\u4e00\u4e2a\u539f\u56e0\uff1a\u6eda\u52a8\u6761\u3002\u6709\u65f6\uff0c\u5728\u6ca1\u6709\u6eda\u52a8\u6761\u7684\u60c5\u51b5\u4e0b\u4ee3\u7801\u5de5\u4f5c\u6b63\u5e38\uff0c\u5f53\u51fa\u73b0\u6eda\u52a8\u6761\u65f6\uff0c\u4ee3\u7801\u5c31\u51fa\u73b0\u4e86 bug\uff0c\u56e0\u4e3a\u5728\u67d0\u4e9b\u6d4f\u89c8\u5668\u4e2d\uff0c\u6eda\u52a8\u6761\u4f1a\u5360\u7528\u5185\u5bb9\u7684\u7a7a\u95f4\u3002\u56e0\u6b64\uff0c\u53ef\u7528\u4e8e\u5185\u5bb9\u7684\u5b9e\u9645\u5bbd\u5ea6\u5c0f\u4e8e CSS \u5bbd\u5ea6\u3002\u800c\u00a0<code>clientWidth\/clientHeight<\/code>\u00a0\u5219\u4f1a\u8003\u8651\u5230\u8fd9\u4e00\u70b9\u3002<br \/>\n\u2026\u2026\u4f46\u662f\uff0c\u4f7f\u7528\u00a0<code>getComputedStyle(elem).width<\/code>\u00a0\u65f6\uff0c\u60c5\u51b5\u5c31\u4e0d\u540c\u4e86\u3002\u67d0\u4e9b\u6d4f\u89c8\u5668\uff08\u4f8b\u5982 Chrome\uff09\u8fd4\u56de\u7684\u662f\u5b9e\u9645\u5185\u90e8\u5bbd\u5ea6\u51cf\u53bb\u6eda\u52a8\u6761\u5bbd\u5ea6\uff0c\u800c\u67d0\u4e9b\u6d4f\u89c8\u5668\uff08\u4f8b\u5982 Firefox\uff09\u8fd4\u56de\u7684\u662f CSS \u5bbd\u5ea6\uff08\u5ffd\u7565\u4e86\u6eda\u52a8\u6761\uff09\u3002\u8fd9\u79cd\u8de8\u6d4f\u89c8\u5668\u7684\u5dee\u5f02\u662f\u4e0d\u4f7f\u7528\u00a0<code>getComputedStyle<\/code>\u00a0\u800c\u4f9d\u9760\u51e0\u4f55\u5c5e\u6027\u7684\u539f\u56e0\u3002<\/p>\n<p>\u5728\u684c\u9762 Windows \u64cd\u4f5c\u7cfb\u7edf\u4e0a\uff0cFirefox\u3001Chrome\u3001Edge \u90fd\u4e3a\u6eda\u52a8\u6761\u4fdd\u7559\u4e86\u7a7a\u95f4\u3002\u4f46 Firefox \u663e\u793a\u7684\u662f\u00a0<code>300px<\/code>\uff0c\u800c Chrome \u548c Edge \u663e\u793a\u8f83\u5c11\u3002\u8fd9\u662f\u56e0\u4e3a Firefox \u8fd4\u56de CSS \u5bbd\u5ea6\uff0c\u5176\u4ed6\u6d4f\u89c8\u5668\u8fd4\u56de\u201c\u771f\u5b9e\u201d\u5bbd\u5ea6\u3002<br \/>\n\u8bf7\u6ce8\u610f\uff0c\u6240\u63cf\u8ff0\u7684\u5dee\u5f02\u53ea\u662f\u5173\u4e8e\u4ece JavaScript \u8bfb\u53d6\u7684\u00a0<code>getComputedStyle(...).width<\/code>\uff0c\u800c\u89c6\u89c9\u4e0a\u770b\uff0c\u4e00\u5207\u90fd\u662f\u6b63\u786e\u7684\u3002<\/p>\n<h1>Window \u5927\u5c0f\u548c\u6eda\u52a8<\/h1>\n<h2>\u7a97\u53e3\u7684 width\/height<\/h2>\n<p><code>document.documentElement.clientWidth\/clientHeight<\/code><br \/>\n<img decoding=\"async\" src=\"https:\/\/levin.ink\/wp-content\/uploads\/2024\/05\/Pasted-image-20240520133804.png\" alt=\"Pasted image 20240520133804.png\"><\/p>\n<blockquote>\n<p>\u4e0d\u662f\u00a0<code>window.innerWidth\/innerHeight<\/code><br \/>\n\u6d4f\u89c8\u5668\u4e5f\u652f\u6301\u50cf\u00a0<code>window.innerWidth\/innerHeight<\/code>\u00a0\u8fd9\u6837\u7684\u5c5e\u6027\u3002\u5b83\u4eec\u770b\u8d77\u6765\u50cf\u6211\u4eec\u60f3\u8981\u7684\uff0c\u90a3\u4e3a\u4ec0\u4e48\u4e0d\u4f7f\u7528\u5b83\u4eec\u5462\uff1f<br \/>\n\u5982\u679c\u8fd9\u91cc\u5b58\u5728\u4e00\u4e2a\u6eda\u52a8\u6761\uff0c\u5e76\u4e14\u6eda\u52a8\u6761\u5360\u7528\u4e86\u4e00\u4e9b\u7a7a\u95f4\uff0c\u90a3\u4e48\u00a0<code>clientWidth\/clientHeight<\/code>\u00a0\u4f1a\u63d0\u4f9b\u6ca1\u6709\u6eda\u52a8\u6761\uff08\u51cf\u53bb\u5b83\uff09\u7684 width\/height\u3002\u6362\u53e5\u8bdd\u8bf4\uff0c\u5b83\u4eec\u8fd4\u56de\u7684\u662f\u53ef\u7528\u4e8e\u5185\u5bb9\u7684\u6587\u6863\u7684\u53ef\u89c1\u90e8\u5206\u7684 width\/height\u3002<br \/>\n<code>window.innerWidth\/innerHeight<\/code>\u00a0\u5305\u62ec\u4e86\u6eda\u52a8\u6761\u3002<\/p>\n<\/blockquote>\n<blockquote>\n<p><code>DOCTYPE<\/code>\u00a0\u5f88\u91cd\u8981<br \/>\n\u8bf7\u6ce8\u610f\uff1a\u5f53 HTML \u4e2d\u6ca1\u6709\u00a0<code>&lt;!DOCTYPE HTML&gt;<\/code>\u00a0\u65f6\uff0c\u9876\u5c42\u7ea7\uff08top-level\uff09\u51e0\u4f55\u5c5e\u6027\u7684\u5de5\u4f5c\u65b9\u5f0f\u53ef\u80fd\u5c31\u4f1a\u6709\u6240\u4e0d\u540c\u3002\u53ef\u80fd\u4f1a\u51fa\u73b0\u4e00\u4e9b\u7a00\u5947\u53e4\u602a\u7684\u60c5\u51b5\u3002<br \/>\n\u5728\u73b0\u4ee3 HTML \u4e2d\uff0c\u6211\u4eec\u59cb\u7ec8\u90fd\u5e94\u8be5\u5199\u00a0<code>DOCTYPE<\/code>\u3002<\/p>\n<\/blockquote>\n<h2>\u6587\u6863\u7684 width\/height<\/h2>\n<p><code>document.documentElement.scrollWidth\/scrollHeight<\/code><br \/>\n\u4ece\u7406\u8bba\u4e0a\u8bb2\uff0c\u7531\u4e8e\u6839\u6587\u6863\u5143\u7d20\u662f\u00a0<code>document.documentElement<\/code>\uff0c\u5e76\u4e14\u5b83\u5305\u56f4\u4e86\u6240\u6709\u5185\u5bb9\uff0c\u56e0\u6b64\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7\u4f7f\u7528\u00a0<code>documentElement.scrollWidth\/scrollHeight<\/code>\u00a0\u6765\u6d4b\u91cf\u6587\u6863\u7684\u5b8c\u6574\u5927\u5c0f\u3002<br \/>\n\u4f46\u662f\u5728\u8be5\u5143\u7d20\u4e0a\uff0c\u5bf9\u4e8e\u6574\u4e2a\u6587\u6863\uff0c\u8fd9\u4e9b\u5c5e\u6027\u5747\u65e0\u6cd5\u6b63\u5e38\u5de5\u4f5c\u3002\u5728 Chrome\/Safari\/Opera \u4e2d\uff0c\u5982\u679c\u6ca1\u6709\u6eda\u52a8\u6761\uff0c<code>documentElement.scrollHeight<\/code>\u00a0\u751a\u81f3\u53ef\u80fd\u5c0f\u4e8e\u00a0<code>documentElement.clientHeight<\/code>\uff01\u5f88\u5947\u602a\uff0c\u5bf9\u5427\uff1f<br \/>\n\u4e3a\u4e86\u53ef\u9760\u5730\u83b7\u5f97\u5b8c\u6574\u7684\u6587\u6863\u9ad8\u5ea6\uff0c\u6211\u4eec\u5e94\u8be5\u91c7\u7528\u4ee5\u4e0b\u8fd9\u4e9b\u5c5e\u6027\u7684\u6700\u5927\u503c\uff1a<\/p>\n<pre><code class=\"language-js\">let scrollHeight = Math.max(\n\tdocument.body.scrollHeight,\n\tdocument.documentElement.scrollHeight,\n\tdocument.body.offsetHeight, \n\tdocument.documentElement.offsetHeight,\n\tdocument.body.clientHeight, \n\tdocument.documentElement.clientHeight\n);\n\nalert('Full document height, with scrolled out part: ' + scrollHeight);\n<\/code><\/pre>\n<p>\u4e3a\u4ec0\u4e48\u8fd9\u6837\uff1f\u6700\u597d\u4e0d\u8981\u95ee\u3002\u8fd9\u4e9b\u4e0d\u4e00\u81f4\u6765\u6e90\u4e8e\u8fdc\u53e4\u65f6\u4ee3\uff0c\u800c\u4e0d\u662f\u201c\u806a\u660e\u201d\u7684\u903b\u8f91\u3002<\/p>\n<h2>\u83b7\u5f97\u5f53\u524d\u6eda\u52a8<\/h2>\n<p>DOM \u5143\u7d20\u7684\u5f53\u524d\u6eda\u52a8\u72b6\u6001\u5728\u5176\u00a0<code>scrollLeft\/scrollTop<\/code>\u00a0\u5c5e\u6027\u4e2d\u3002<br \/>\n\u5bf9\u4e8e\u6587\u6863\u6eda\u52a8\uff0c\u5728\u5927\u591a\u6570\u6d4f\u89c8\u5668\u4e2d\uff0c\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u00a0<code>document.documentElement.scrollLeft\/scrollTop<\/code>\uff0c\u4f46\u5728\u8f83\u65e7\u7684\u57fa\u4e8e WebKit \u7684\u6d4f\u89c8\u5668\u4e2d\u5219\u4e0d\u884c\uff0c\u4f8b\u5982\u5728 Safari\uff08bug\u00a0<a href=\"https:\/\/bugs.webkit.org\/show_bug.cgi?id=5991\">5991<\/a>\uff09\u4e2d\uff0c\u6211\u4eec\u5e94\u8be5\u4f7f\u7528\u00a0<code>document.body<\/code>\u00a0\u800c\u4e0d\u662f\u00a0<code>document.documentElement<\/code>\u3002<br \/>\n\u5e78\u8fd0\u7684\u662f\uff0c\u6211\u4eec\u6839\u672c\u4e0d\u5fc5\u8bb0\u4f4f\u8fd9\u4e9b\u7279\u6027\uff0c\u56e0\u4e3a\u6211\u4eec\u53ef\u4ee5\u4ece\u00a0<code>window.pageXOffset\/pageYOffset<\/code>\u00a0\u4e2d\u83b7\u53d6\u9875\u9762\u5f53\u524d\u6eda\u52a8<br \/>\n\u8fd9\u4e9b\u5c5e\u6027\u662f\u53ea\u8bfb\u7684\u3002<\/p>\n<blockquote>\n<p>\u6211\u4eec\u4e5f\u53ef\u4ee5\u4ece\u00a0<code>window<\/code>\u00a0\u7684\u00a0<code>scrollX<\/code>\u00a0\u548c\u00a0<code>scrollY<\/code>\u00a0\u5c5e\u6027\u4e2d\u83b7\u53d6\u6eda\u52a8\u4fe1\u606f<br \/>\n\u7531\u4e8e\u5386\u53f2\u539f\u56e0\uff0c\u5b58\u5728\u4e86\u8fd9\u4e24\u79cd\u5c5e\u6027\uff0c\u4f46\u5b83\u4eec\u662f\u4e00\u6837\u7684\uff1a<\/p>\n<ul>\n<li><code>window.pageXOffset<\/code>\u00a0\u662f\u00a0<code>window.scrollX<\/code>\u00a0\u7684\u522b\u540d\u3002<\/li>\n<li><code>window.pageYOffset<\/code>\u00a0\u662f\u00a0<code>window.scrollY<\/code>\u00a0\u7684\u522b\u540d\u3002<\/li>\n<\/ul>\n<\/blockquote>\n<h2>\u6eda\u52a8\uff1ascrollTO, scrollBy, scrollIntoView<\/h2>\n<blockquote>\n<p>\u91cd\u8981\uff1a<br \/>\n\u5fc5\u987b\u5728 DOM \u5b8c\u5168\u6784\u5efa\u597d\u4e4b\u540e\u624d\u80fd\u901a\u8fc7 JavaScript \u6eda\u52a8\u9875\u9762\u3002<br \/>\n\u4f8b\u5982\uff0c\u5982\u679c\u6211\u4eec\u5c1d\u8bd5\u901a\u8fc7\u00a0<code>&lt;head&gt;<\/code>\u00a0\u4e2d\u7684\u811a\u672c\u6eda\u52a8\u9875\u9762\uff0c\u5b83\u5c06\u65e0\u6cd5\u6b63\u5e38\u5de5\u4f5c\u3002<\/p>\n<\/blockquote>\n<p>\u53ef\u4ee5\u901a\u8fc7\u66f4\u6539\u00a0<code>scrollTop\/scrollLeft<\/code>\u00a0\u6765\u6eda\u52a8\u5e38\u89c4\u5143\u7d20\u3002<br \/>\n\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u00a0<code>document.documentElement.scrollTop\/scrollLeft<\/code>\u00a0\u5bf9\u9875\u9762\u8fdb\u884c\u76f8\u540c\u7684\u64cd\u4f5c\uff08Safari \u9664\u5916\uff0c\u800c\u5e94\u8be5\u4f7f\u7528\u00a0<code>document.body.scrollTop\/Left<\/code>\u00a0\u4ee3\u66ff\uff09\u3002<br \/>\n\u6216\u8005\uff0c\u6709\u4e00\u4e2a\u66f4\u7b80\u5355\u7684\u901a\u7528\u89e3\u51b3\u65b9\u6848\uff1a\u4f7f\u7528\u7279\u6b8a\u65b9\u6cd5\u00a0<a href=\"https:\/\/developer.mozilla.org\/zh\/docs\/Web\/API\/Window\/scrollBy\">window.scrollBy(x,y)<\/a>\u00a0\u548c\u00a0<a href=\"https:\/\/developer.mozilla.org\/zh\/docs\/Web\/API\/Window\/scrollTo\">window.scrollTo(pageX,pageY)<\/a>\u3002<\/p>\n<ul>\n<li>\u65b9\u6cd5\u00a0<code>scrollBy(x,y)<\/code>\u00a0\u5c06\u9875\u9762\u6eda\u52a8\u81f3\u00a0<strong>\u76f8\u5bf9\u4e8e\u5f53\u524d\u4f4d\u7f6e\u7684\u00a0<code>(x, y)<\/code>\u00a0\u4f4d\u7f6e<\/strong>\u3002\u4f8b\u5982\uff0c<code>scrollBy(0,10)<\/code>\u00a0\u4f1a\u5c06\u9875\u9762\u5411\u4e0b\u6eda\u52a8\u00a0<code>10px<\/code>\u3002<\/li>\n<li>\u65b9\u6cd5\u00a0<code>scrollTo(pageX,pageY)<\/code>\u00a0\u5c06\u9875\u9762\u6eda\u52a8\u81f3\u00a0<strong>\u7edd\u5bf9\u5750\u6807<\/strong>\uff0c\u4f7f\u5f97\u53ef\u89c1\u90e8\u5206\u7684\u5de6\u4e0a\u89d2\u5177\u6709\u76f8\u5bf9\u4e8e\u6587\u6863\u5de6\u4e0a\u89d2\u7684\u5750\u6807\u00a0<code>(pageX, pageY)<\/code>\u3002\u5c31\u50cf\u8bbe\u7f6e\u4e86\u00a0<code>scrollLeft\/scrollTop<\/code>\u00a0\u4e00\u6837\u3002<\/li>\n<\/ul>\n<p>\u4e3a\u4e86\u5b8c\u6574\u8d77\u89c1\uff0c\u8ba9\u6211\u4eec\u518d\u4ecb\u7ecd\u4e00\u79cd\u65b9\u6cd5\uff1a<a href=\"https:\/\/developer.mozilla.org\/zh\/docs\/Web\/API\/Element\/scrollIntoView\">elem.scrollIntoView(top)<\/a>\u3002<br \/>\n\u5bf9\u00a0<code>elem.scrollIntoView(top)<\/code>\u00a0\u7684\u8c03\u7528\u5c06\u6eda\u52a8\u9875\u9762\u4ee5\u4f7f\u00a0<code>elem<\/code>\u00a0\u53ef\u89c1\u3002\u5b83\u6709\u4e00\u4e2a\u53c2\u6570\uff1a<\/p>\n<ul>\n<li>\u5982\u679c\u00a0<code>top=true<\/code>\uff08\u9ed8\u8ba4\u503c\uff09\uff0c\u9875\u9762\u6eda\u52a8\uff0c\u4f7f\u00a0<code>elem<\/code>\u00a0\u51fa\u73b0\u5728\u7a97\u53e3\u9876\u90e8\u3002\u5143\u7d20\u7684\u4e0a\u8fb9\u7f18\u5c06\u4e0e\u7a97\u53e3\u9876\u90e8\u5bf9\u9f50\u3002<\/li>\n<li>\u5982\u679c\u00a0<code>top=false<\/code>\uff0c\u9875\u9762\u6eda\u52a8\uff0c\u4f7f\u00a0<code>elem<\/code>\u00a0\u51fa\u73b0\u5728\u7a97\u53e3\u5e95\u90e8\u3002\u5143\u7d20\u7684\u5e95\u90e8\u8fb9\u7f18\u5c06\u4e0e\u7a97\u53e3\u5e95\u90e8\u5bf9\u9f50\u3002<\/li>\n<\/ul>\n<h2>\u7981\u6b62\u6eda\u52a8<\/h2>\n<p>\u6709\u65f6\u5019\u6211\u4eec\u9700\u8981\u4f7f\u6587\u6863\u201c\u4e0d\u53ef\u6eda\u52a8\u201d\u3002\u4f8b\u5982\uff0c\u5f53\u6211\u4eec\u9700\u8981\u7528\u4e00\u6761\u9700\u8981\u7acb\u5373\u5f15\u8d77\u6ce8\u610f\u7684\u5927\u6d88\u606f\u6765\u8986\u76d6\u6587\u6863\u65f6\uff0c\u6211\u4eec\u5e0c\u671b\u8bbf\u95ee\u8005\u4e0e\u8be5\u6d88\u606f\u800c\u4e0d\u662f\u4e0e\u6587\u6863\u8fdb\u884c\u4ea4\u4e92\u3002<br \/>\n\u8981\u4f7f\u6587\u6863\u4e0d\u53ef\u6eda\u52a8\uff0c\u53ea\u9700\u8981\u8bbe\u7f6e\u00a0<code>document.body.style.overflow = &quot;hidden&quot;<\/code>\u3002\u8be5\u9875\u9762\u5c06\u201c\u51bb\u7ed3\u201d\u5728\u5176\u5f53\u524d\u6eda\u52a8\u4f4d\u7f6e\u4e0a\u3002<br \/>\n\u6211\u4eec\u8fd8\u53ef\u4ee5\u4f7f\u7528\u76f8\u540c\u7684\u6280\u672f\u6765\u51bb\u7ed3\u5176\u4ed6\u5143\u7d20\u7684\u6eda\u52a8\uff0c\u800c\u4e0d\u4ec5\u4ec5\u662f\u00a0<code>document.body<\/code>\u3002<br \/>\n\u8fd9\u4e2a\u65b9\u6cd5\u7684\u7f3a\u70b9\u662f\u4f1a\u4f7f\u6eda\u52a8\u6761\u6d88\u5931\u3002\u5982\u679c\u6eda\u52a8\u6761\u5360\u7528\u4e86\u4e00\u4e9b\u7a7a\u95f4\uff0c\u5b83\u539f\u672c\u5360\u7528\u7684\u7a7a\u95f4\u5c31\u4f1a\u7a7a\u51fa\u6765\uff0c\u90a3\u4e48\u5185\u5bb9\u5c31\u4f1a\u201c\u8df3\u201d\u8fdb\u53bb\u4ee5\u586b\u5145\u5b83\u3002<br \/>\n\u8fd9\u770b\u8d77\u6765\u6709\u70b9\u5947\u602a\uff0c\u4f46\u662f\u6211\u4eec\u53ef\u4ee5\u5bf9\u6bd4\u51bb\u7ed3\u524d\u540e\u7684\u00a0<code>clientWidth<\/code>\u3002\u5982\u679c\u5b83\u589e\u52a0\u4e86\uff08\u6eda\u52a8\u6761\u6d88\u5931\u540e\uff09\uff0c\u90a3\u4e48\u6211\u4eec\u53ef\u4ee5\u5728\u00a0<code>document.body<\/code>\u00a0\u4e2d\u6eda\u52a8\u6761\u539f\u6765\u7684\u4f4d\u7f6e\u5904\u901a\u8fc7\u6dfb\u52a0\u00a0<code>padding<\/code>\uff0c\u6765\u66ff\u4ee3\u6eda\u52a8\u6761\uff0c\u8fd9\u6837\u8fd9\u4e2a\u95ee\u9898\u5c31\u89e3\u51b3\u4e86\u3002\u4fdd\u6301\u4e86\u6eda\u52a8\u6761\u51bb\u7ed3\u524d\u540e\u6587\u6863\u5185\u5bb9\u5bbd\u5ea6\u76f8\u540c\u3002<\/p>\n<h1>\u5750\u6807<\/h1>\n<p>\u8981\u79fb\u52a8\u9875\u9762\u7684\u5143\u7d20\uff0c\u6211\u4eec\u5e94\u8be5\u5148\u719f\u6089\u5750\u6807\u3002<br \/>\n\u5927\u591a\u6570 JavaScript \u65b9\u6cd5\u5904\u7406\u7684\u662f\u4ee5\u4e0b\u4e24\u79cd\u5750\u6807\u7cfb\u4e2d\u7684\u4e00\u4e2a\uff1a<\/p>\n<ol>\n<li><strong>\u76f8\u5bf9\u4e8e\u7a97\u53e3<\/strong>\u00a0\u2014\u2014 \u7c7b\u4f3c\u4e8e\u00a0<code>position:fixed<\/code>\uff0c\u4ece\u7a97\u53e3\u7684\u9876\u90e8\/\u5de6\u4fa7\u8fb9\u7f18\u8ba1\u7b97\u5f97\u51fa\u3002\n<ul>\n<li>\u6211\u4eec\u5c06\u8fd9\u4e9b\u5750\u6807\u8868\u793a\u4e3a\u00a0<code>clientX\/clientY<\/code>\uff0c\u5f53\u6211\u4eec\u7814\u7a76\u4e8b\u4ef6\u5c5e\u6027\u65f6\uff0c\u5c31\u4f1a\u660e\u767d\u4e3a\u4ec0\u4e48\u4f7f\u7528\u8fd9\u79cd\u540d\u79f0\u6765\u8868\u793a\u5750\u6807\u3002<\/li>\n<\/ul>\n<\/li>\n<li><strong>\u76f8\u5bf9\u4e8e\u6587\u6863<\/strong>\u00a0\u2014\u2014 \u4e0e\u6587\u6863\u6839\uff08document root\uff09\u4e2d\u7684\u00a0<code>position:absolute<\/code>\u00a0\u7c7b\u4f3c\uff0c\u4ece\u6587\u6863\u7684\u9876\u90e8\/\u5de6\u4fa7\u8fb9\u7f18\u8ba1\u7b97\u5f97\u51fa\u3002\n<ul>\n<li>\u6211\u4eec\u5c06\u5b83\u4eec\u8868\u793a\u4e3a\u00a0<code>pageX\/pageY<\/code>\u3002<br \/>\n\u5f53\u9875\u9762\u6eda\u52a8\u5230\u6700\u5f00\u59cb\u65f6\uff0c\u6b64\u65f6\u7a97\u53e3\u7684\u5de6\u4e0a\u89d2\u6070\u597d\u662f\u6587\u6863\u7684\u5de6\u4e0a\u89d2\uff0c\u5b83\u4eec\u7684\u5750\u6807\u5f7c\u6b64\u76f8\u7b49\u3002\u4f46\u662f\uff0c\u5728\u6587\u6863\u79fb\u52a8\u4e4b\u540e\uff0c\u5143\u7d20\u7684\u7a97\u53e3\u76f8\u5bf9\u5750\u6807\u4f1a\u53d1\u751f\u53d8\u5316\uff0c\u56e0\u4e3a\u5143\u7d20\u5728\u7a97\u53e3\u4e2d\u79fb\u52a8\uff0c\u800c\u5143\u7d20\u5728\u6587\u6863\u4e2d\u7684\u76f8\u5bf9\u5750\u6807\u4fdd\u6301\u4e0d\u53d8\u3002<br \/>\n\u5728\u4e0b\u56fe\u4e2d\uff0c\u6211\u4eec\u5728\u6587\u6863\u4e2d\u53d6\u4e00\u70b9\uff0c\u5e76\u6f14\u793a\u4e86\u5b83\u6eda\u52a8\u4e4b\u524d\uff08\u5de6\uff09\u548c\u4e4b\u540e\uff08\u53f3\uff09\u7684\u5750\u6807\uff1a<br \/>\n<img decoding=\"async\" src=\"https:\/\/levin.ink\/wp-content\/uploads\/2024\/05\/Pasted-image-20240520141529.png\" alt=\"Pasted image 20240520141529.png\">\u5f53\u6587\u6863\u6eda\u52a8\u4e86\uff1a<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<ul>\n<li><code>pageY<\/code>\u00a0\u2014\u2014 \u5143\u7d20\u5728\u6587\u6863\u4e2d\u7684\u76f8\u5bf9\u5750\u6807\u4fdd\u6301\u4e0d\u53d8\uff0c\u4ece\u6587\u6863\u9876\u90e8\uff08\u73b0\u5728\u5df2\u6eda\u52a8\u51fa\u53bb\uff09\u5f00\u59cb\u8ba1\u7b97\u3002<\/li>\n<li><code>clientY<\/code>\u00a0\u2014\u2014 \u7a97\u53e3\u76f8\u5bf9\u5750\u6807\u786e\u5b9e\u53d1\u751f\u4e86\u53d8\u5316\uff08\u7bad\u5934\u53d8\u77ed\u4e86\uff09\uff0c\u56e0\u4e3a\u540c\u4e00\u4e2a\u70b9\u8d8a\u6765\u8d8a\u9760\u8fd1\u7a97\u53e3\u9876\u90e8\u3002<\/li>\n<\/ul>\n<h2>\u5143\u7d20\u5750\u6807 getBoundingClientRect<\/h2>\n<p>\u65b9\u6cd5\u00a0<code>elem.getBoundingClientRect()<\/code>\u00a0\u8fd4\u56de\u6700\u5c0f\u77e9\u5f62\u7684\u7a97\u53e3\u5750\u6807\uff0c\u8be5\u77e9\u5f62\u5c06\u00a0<code>elem<\/code>\u00a0\u4f5c\u4e3a\u5185\u5efa\u00a0<a href=\"https:\/\/www.w3.org\/TR\/geometry-1\/#domrect\">DOMRect<\/a>\u00a0\u7c7b\u7684\u5bf9\u8c61\u3002<br \/>\n\u4e3b\u8981\u7684\u00a0<code>DOMRect<\/code>\u00a0\u5c5e\u6027\uff1a<\/p>\n<ul>\n<li><code>x\/y<\/code>\u00a0\u2014\u2014 \u77e9\u5f62\u539f\u70b9\u76f8\u5bf9\u4e8e\u7a97\u53e3\u7684 X\/Y \u5750\u6807\uff0c<\/li>\n<li><code>width\/height<\/code>\u00a0\u2014\u2014 \u77e9\u5f62\u7684 width\/height\uff08\u53ef\u4ee5\u4e3a\u8d1f\uff09\u3002<br \/>\n\u6b64\u5916\uff0c\u8fd8\u6709\u6d3e\u751f\uff08derived\uff09\u5c5e\u6027\uff1a<\/li>\n<li><code>top\/bottom<\/code>\u00a0\u2014\u2014 \u9876\u90e8\/\u5e95\u90e8\u77e9\u5f62\u8fb9\u7f18\u7684 Y \u5750\u6807\uff0c<\/li>\n<li><code>left\/right<\/code>\u00a0\u2014\u2014 \u5de6\/\u53f3\u77e9\u5f62\u8fb9\u7f18\u7684 X \u5750\u6807\u3002<br \/>\n<div class='fancybox-wrapper lazyload-container-unload' data-fancybox='post-images' href='https:\/\/levin.ink\/wp-content\/uploads\/2024\/05\/Pasted-image-20240520142254.png'><img class=\"lazyload lazyload-style-1\" src=\"data:image\/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPgo8c3ZnIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjZmZmZmZmMDAiPjxnPjwvZz4KPC9zdmc+\"  decoding=\"async\" data-original=\"https:\/\/levin.ink\/wp-content\/uploads\/2024\/05\/Pasted-image-20240520142254.png\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB\/AAffA0nNPuCLAAAAAElFTkSuQmCC\" alt=\"Pasted image 20240520142254.png\"><\/div><br \/>\n\u6b63\u5982\u4f60\u6240\u770b\u5230\u7684\uff0c<code>x\/y<\/code>\u00a0\u548c\u00a0<code>width\/height<\/code>\u00a0\u5bf9\u77e9\u5f62\u8fdb\u884c\u4e86\u5b8c\u6574\u7684\u63cf\u8ff0\u3002\u53ef\u4ee5\u5f88\u5bb9\u6613\u5730\u4ece\u5b83\u4eec\u8ba1\u7b97\u51fa\u6d3e\u751f\uff08derived\uff09\u5c5e\u6027\uff1a<\/li>\n<li><code>left = x<\/code><\/li>\n<li><code>top = y<\/code><\/li>\n<li><code>right = x + width<\/code><\/li>\n<li><code>bottom = y + height<\/code><br \/>\n\u8bf7\u6ce8\u610f\uff1a<\/li>\n<li>\u5750\u6807\u53ef\u80fd\u662f\u5c0f\u6570\uff0c\u4f8b\u5982\u00a0<code>10.5<\/code>\u3002\u8fd9\u662f\u6b63\u5e38\u7684\uff0c\u6d4f\u89c8\u5668\u5185\u90e8\u4f7f\u7528\u5c0f\u6570\u8fdb\u884c\u8ba1\u7b97\u3002\u5728\u8bbe\u7f6e\u00a0<code>style.left\/top<\/code>\u00a0\u65f6\uff0c\u6211\u4eec\u4e0d\u662f\u5fc5\u987b\u5bf9\u5b83\u4eec\u8fdb\u884c\u820d\u5165\u3002<\/li>\n<li>\u5750\u6807\u53ef\u80fd\u662f\u8d1f\u6570\u3002\u4f8b\u5982\u6eda\u52a8\u9875\u9762\uff0c\u4f7f\u00a0<code>elem<\/code>\u00a0\u73b0\u5728\u4f4d\u4e8e\u7a97\u53e3\u7684\u4e0a\u65b9\uff0c\u5219\u00a0<code>elem.getBoundingClientRect().top<\/code>\u00a0\u4e3a\u8d1f\u6570\u3002<\/li>\n<\/ul>\n<blockquote>\n<p>\u4e3a\u4ec0\u4e48\u9700\u8981\u6d3e\u751f\uff08derived\uff09\u5c5e\u6027\uff1f\u5982\u679c\u6709\u4e86\u00a0<code>x\/y<\/code>\uff0c\u4e3a\u4ec0\u4e48\u8fd8\u8981\u8fd8\u4f1a\u5b58\u5728\u00a0<code>top\/left<\/code>\uff1f<br \/>\n\u4ece\u6570\u5b66\u4e0a\u8bb2\uff0c\u4e00\u4e2a\u77e9\u5f62\u662f\u4f7f\u7528\u5176\u8d77\u70b9\u00a0<code>(x,y)<\/code>\u00a0\u548c\u65b9\u5411\u5411\u91cf\u00a0<code>(width,height)<\/code>\u00a0\u552f\u4e00\u5b9a\u4e49\u7684\u3002\u56e0\u6b64\uff0c\u5176\u5b83\u6d3e\u751f\u5c5e\u6027\u662f\u4e3a\u4e86\u65b9\u4fbf\u8d77\u89c1\u3002<br \/>\n\u4ece\u6280\u672f\u4e0a\u8bb2\uff0c<code>width\/height<\/code>\u00a0\u53ef\u80fd\u4e3a\u8d1f\u6570\uff0c\u4ece\u800c\u5141\u8bb8\u201c\u5b9a\u5411\uff08directed\uff09\u201d\u77e9\u5f62\uff0c\u4f8b\u5982\u4ee3\u8868\u5e26\u6709\u6b63\u786e\u6807\u8bb0\u7684\u5f00\u59cb\u548c\u7ed3\u675f\u7684\u9f20\u6807\u9009\u62e9\u3002<br \/>\n\u8d1f\u7684\u00a0<code>width\/height<\/code>\u00a0\u503c\u8868\u793a\u77e9\u5f62\u4ece\u5176\u53f3\u4e0b\u89d2\u5f00\u59cb\uff0c\u7136\u540e\u5411\u5de6\u4e0a\u65b9\u201c\u589e\u957f\u201d\u3002<br \/>\n\u8fd9\u662f\u4e00\u4e2a\u77e9\u5f62\uff0c\u5176\u00a0<code>width<\/code>\u00a0\u548c\u00a0<code>height<\/code>\u00a0\u5747\u4e3a\u8d1f\u6570\uff08\u4f8b\u5982\u00a0<code>width=-200<\/code>\uff0c<code>height=-100<\/code>\uff09\uff1a<br \/>\n<div class='fancybox-wrapper lazyload-container-unload' data-fancybox='post-images' href='https:\/\/levin.ink\/wp-content\/uploads\/2024\/05\/Pasted-image-20240520142504.png'><img class=\"lazyload lazyload-style-1\" src=\"data:image\/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPgo8c3ZnIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjZmZmZmZmMDAiPjxnPjwvZz4KPC9zdmc+\"  decoding=\"async\" data-original=\"https:\/\/levin.ink\/wp-content\/uploads\/2024\/05\/Pasted-image-20240520142504.png\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB\/AAffA0nNPuCLAAAAAElFTkSuQmCC\" alt=\"Pasted image 20240520142504.png\"><\/div><br \/>\n\u6b63\u5982\u4f60\u6240\u770b\u5230\u7684\uff0c\u5728\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\uff0c<code>left\/top<\/code>\u00a0\u4e0e\u00a0<code>x\/y<\/code>\u00a0\u4e0d\u76f8\u7b49\u3002<br \/>\n\u4f46\u662f\u5b9e\u9645\u4e0a\uff0c<code>elem.getBoundingClientRect()<\/code>\u00a0\u603b\u662f\u8fd4\u56de\u6b63\u6570\u7684 width\/height\uff0c\u8fd9\u91cc\u6211\u4eec\u63d0\u53ca\u8d1f\u7684\u00a0<code>width\/height<\/code>\u00a0\u53ea\u662f\u4e3a\u4e86\u5e2e\u52a9\u4f60\u7406\u89e3\uff0c\u4e3a\u4ec0\u4e48\u8fd9\u4e9b\u770b\u8d77\u6765\u91cd\u590d\u7684\u5c5e\u6027\uff0c\u5b9e\u9645\u4e0a\u5e76\u4e0d\u662f\u91cd\u590d\u7684\u3002<\/p>\n<\/blockquote>\n<blockquote>\n<p>IE \u6d4f\u89c8\u5668\u4e0d\u652f\u6301\u00a0<code>x\/y<\/code><br \/>\n\u7531\u4e8e\u5386\u53f2\u539f\u56e0\uff0cIE \u6d4f\u89c8\u5668\u4e0d\u652f\u6301\u00a0<code>x\/y<\/code>\u00a0\u5c5e\u6027\u3002<br \/>\n\u56e0\u6b64\uff0c\u6211\u4eec\u53ef\u4ee5\u5199\u4e00\u4e2a polyfill\uff08\u5728\u00a0<code>DomRect.prototype<\/code>\u00a0\u4e2d\u6dfb\u52a0\u4e00\u4e2a getter\uff09\uff0c\u6216\u8005\u4ec5\u4f7f\u7528\u00a0<code>top\/left<\/code>\uff0c\u56e0\u4e3a\u5bf9\u4e8e\u6b63\u503c\u7684\u00a0<code>width\/height<\/code>\u00a0\u6765\u8bf4\uff0c\u5b83\u4eec\u548c\u00a0<code>x\/y<\/code>\u00a0\u4e00\u76f4\u662f\u4e00\u6837\u7684\uff0c\u5c24\u5176\u662f\u5bf9\u4e8e\u00a0<code>elem.getBoundingClientRect()<\/code>\u00a0\u7684\u7ed3\u679c\u3002<\/p>\n<\/blockquote>\n<blockquote>\n<p>\u5750\u6807\u7684 right\/bottom \u4e0e CSS position \u5c5e\u6027\u4e0d\u540c<br \/>\n\u76f8\u5bf9\u4e8e\u7a97\u53e3\uff08window\uff09\u7684\u5750\u6807\u548c CSS\u00a0<code>position:fixed<\/code>\u00a0\u4e4b\u95f4\u6709\u660e\u663e\u7684\u76f8\u4f3c\u4e4b\u5904\u3002<br \/>\n\u4f46\u662f\u5728 CSS \u5b9a\u4f4d\u4e2d\uff0c<code>right<\/code>\u00a0\u5c5e\u6027\u8868\u793a\u8ddd\u53f3\u8fb9\u7f18\u7684\u8ddd\u79bb\uff0c\u800c\u00a0<code>bottom<\/code>\u00a0\u5c5e\u6027\u8868\u793a\u8ddd\u4e0b\u8fb9\u7f18\u7684\u8ddd\u79bb\u3002<br \/>\n\u5982\u679c\u6211\u4eec\u518d\u770b\u4e00\u4e0b\u4e0a\u9762\u7684\u56fe\u7247\uff0c\u6211\u4eec\u53ef\u4ee5\u770b\u5230\u5728 JavaScript \u4e2d\u5e76\u975e\u5982\u6b64\u3002\u7a97\u53e3\u7684\u6240\u6709\u5750\u6807\u90fd\u4ece\u5de6\u4e0a\u89d2\u5f00\u59cb\u8ba1\u6570\uff0c\u5305\u62ec\u8fd9\u4e9b\u5750\u6807\u3002<\/p>\n<\/blockquote>\n<h2>elementFromPoint(x, y)<\/h2>\n<p>\u5bf9\u00a0<code>document.elementFromPoint(x, y)<\/code>\u00a0\u7684\u8c03\u7528\u4f1a\u8fd4\u56de\u5728\u7a97\u53e3\u5750\u6807\u00a0<code>(x, y)<\/code>\u00a0\u5904\u5d4c\u5957\u6700\u591a\uff08the most nested\uff09\u7684\u5143\u7d20\u3002<br \/>\n\u4e0b\u9762\u7684\u4ee3\u7801\u4f1a\u9ad8\u4eae\u663e\u793a\u5e76\u8f93\u51fa\u73b0\u5728\u4f4d\u4e8e\u7a97\u53e3\u4e2d\u95f4\u7684\u5143\u7d20\u7684\u6807\u7b7e\uff1a<\/p>\n<pre><code class=\"language-js\">let centerX = document.documentElement.clientWidth \/ 2;\nlet centerY = document.documentElement.clientHeight \/ 2;\n\nlet elem = document.elementFromPoint(centerX, centerY);\n\nelem.style.background = &quot;red&quot;;\nalert(elem.tagName);\n<\/code><\/pre>\n<p>\u56e0\u4e3a\u5b83\u4f7f\u7528\u7684\u662f\u7a97\u53e3\u5750\u6807\uff0c\u6240\u4ee5\u5143\u7d20\u53ef\u80fd\u4f1a\u56e0\u5f53\u524d\u6eda\u52a8\u4f4d\u7f6e\u800c\u6709\u6240\u4e0d\u540c\u3002<\/p>\n<blockquote>\n<p>\u5bf9\u4e8e\u5728\u7a97\u53e3\u4e4b\u5916\u7684\u5750\u6807\uff0c<code>elementFromPoint<\/code>\u00a0\u8fd4\u56de\u00a0<code>null<\/code><br \/>\n\u65b9\u6cd5\u00a0<code>document.elementFromPoint(x,y)<\/code>\u00a0\u53ea\u5bf9\u5728\u53ef\u89c1\u533a\u57df\u5185\u7684\u5750\u6807\u00a0<code>(x,y)<\/code>\u00a0\u8d77\u4f5c\u7528\u3002<br \/>\n\u5982\u679c\u4efb\u4f55\u5750\u6807\u4e3a\u8d1f\u6216\u8005\u8d85\u8fc7\u4e86\u7a97\u53e3\u7684 width\/height\uff0c\u90a3\u4e48\u8be5\u65b9\u6cd5\u5c31\u4f1a\u8fd4\u56de\u00a0<code>null<\/code>\u3002<br \/>\n\u5728\u5927\u591a\u6570\u60c5\u51b5\u4e0b\uff0c\u8fd9\u79cd\u884c\u4e3a\u5e76\u4e0d\u662f\u4e00\u4e2a\u95ee\u9898\uff0c\u4f46\u662f\u6211\u4eec\u5e94\u8be5\u8bb0\u4f4f\u8fd9\u4e00\u70b9\u3002<\/p>\n<\/blockquote>\n<h2>\u7528\u4e8e fixed \u5b9a\u4f4d<\/h2>\n<p>\u5927\u591a\u6570\u65f6\u5019\uff0c\u6211\u4eec\u9700\u8981\u4f7f\u7528\u5750\u6807\u6765\u786e\u5b9a\u67d0\u4e9b\u5185\u5bb9\u7684\u4f4d\u7f6e\u3002<br \/>\n\u60f3\u8981\u5728\u67d0\u5143\u7d20\u9644\u8fd1\u5c55\u793a\u5185\u5bb9\uff0c\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u00a0<code>getBoundingClientRect<\/code>\u00a0\u6765\u83b7\u53d6\u8fd9\u4e2a\u5143\u7d20\u7684\u5750\u6807\uff0c\u7136\u540e\u4f7f\u7528 CSS\u00a0<code>position<\/code>\u00a0\u4ee5\u53ca\u00a0<code>left\/top<\/code>\uff08\u6216\u00a0<code>right\/bottom<\/code>\uff09\u3002<\/p>\n<p>\u6211\u4eec\u53ef\u4ee5\u4fee\u6539\u4ee3\u7801\u4ee5\u5728\u5143\u7d20\u5de6\u4fa7\uff0c\u53f3\u4fa7\u6216\u4e0b\u9762\u663e\u793a\u6d88\u606f\uff0c\u4e5f\u53ef\u4ee5\u5e94\u7528 CSS \u52a8\u753b\u6765\u8425\u9020\u201c\u6de1\u5165\u6de1\u51fa\u201d\u6548\u679c\u7b49\u3002\u8fd9\u5f88\u7b80\u5355\uff0c\u56e0\u4e3a\u6211\u4eec\u6709\u8be5\u5143\u7d20\u6240\u6709\u5750\u6807\u548c\u5927\u5c0f\u3002<br \/>\n\u4f46\u662f\u8bf7\u6ce8\u610f\u4e00\u4e2a\u91cd\u8981\u7684\u7ec6\u8282\uff1a\u6eda\u52a8\u9875\u9762\u65f6\uff0c\u6d88\u606f\u5c31\u4f1a\u4ece\u6309\u94ae\u6d41\u51fa\u3002<br \/>\n\u539f\u56e0\u5f88\u663e\u7136\uff1amessage \u5143\u7d20\u4f9d\u8d56\u4e8e\u00a0<code>position:fixed<\/code>\uff0c\u56e0\u6b64\u5f53\u9875\u9762\u6eda\u52a8\u65f6\uff0c\u5b83\u4ecd\u4f4d\u4e8e\u7a97\u53e3\u7684\u540c\u4e00\u4f4d\u7f6e\u3002<br \/>\n\u8981\u6539\u53d8\u8fd9\u4e00\u70b9\uff0c\u6211\u4eec\u9700\u8981\u4f7f\u7528\u57fa\u4e8e\u6587\u6863\uff08document\uff09\u7684\u5750\u6807\u548c\u00a0<code>position:absolute<\/code>\u00a0\u6837\u5f0f\u3002<\/p>\n<h2>\u6587\u6863\u5750\u6807<\/h2>\n<p>\u6587\u6863\u76f8\u5bf9\u5750\u6807\u4ece\u6587\u6863\u7684\u5de6\u4e0a\u89d2\u5f00\u59cb\u8ba1\u7b97\uff0c\u800c\u4e0d\u662f\u7a97\u53e3\u3002<br \/>\n\u5728 CSS \u4e2d\uff0c\u7a97\u53e3\u5750\u6807\u5bf9\u5e94\u4e8e\u00a0<code>position:fixed<\/code>\uff0c\u800c\u6587\u6863\u5750\u6807\u4e0e\u9876\u90e8\u7684\u00a0<code>position:absolute<\/code>\u00a0\u7c7b\u4f3c\u3002<br \/>\n\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u00a0<code>position:absolute<\/code>\u00a0\u548c\u00a0<code>top\/left<\/code>\u00a0\u6765\u628a\u67d0\u4e9b\u5185\u5bb9\u653e\u5230\u6587\u6863\u4e2d\u7684\u67d0\u4e2a\u4f4d\u7f6e\uff0c\u4ee5\u4fbf\u5728\u9875\u9762\u6eda\u52a8\u65f6\uff0c\u5143\u7d20\u4ecd\u80fd\u4fdd\u7559\u5728\u8be5\u4f4d\u7f6e\u3002\u4f46\u662f\u6211\u4eec\u9996\u5148\u9700\u8981\u6b63\u786e\u7684\u5750\u6807\u3002<br \/>\n\u8fd9\u91cc\u6ca1\u6709\u6807\u51c6\u65b9\u6cd5\u6765\u83b7\u53d6\u5143\u7d20\u7684\u6587\u6863\u5750\u6807\u3002\u4f46\u662f\u5199\u8d77\u6765\u5f88\u5bb9\u6613\u3002<br \/>\n\u8fd9\u4e24\u4e2a\u5750\u6807\u7cfb\u7edf\u901a\u8fc7\u4ee5\u4e0b\u516c\u5f0f\u76f8\u8fde\u63a5\uff1a<\/p>\n<ul>\n<li><code>pageY<\/code>\u00a0=\u00a0<code>clientY<\/code>\u00a0+ \u6587\u6863\u7684\u5782\u76f4\u6eda\u52a8\u51fa\u7684\u90e8\u5206\u7684\u9ad8\u5ea6\u3002<\/li>\n<li><code>pageX<\/code>\u00a0=\u00a0<code>clientX<\/code>\u00a0+ \u6587\u6863\u7684\u6c34\u5e73\u6eda\u52a8\u51fa\u7684\u90e8\u5206\u7684\u5bbd\u5ea6\u3002<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\u6d4f\u89c8\u5668\u73af\u5883\uff0c\u89c4\u683c JavaScript \u8bed\u8a00\u6700\u521d\u662f\u4e3a Web \u6d4f\u89c8\u5668\u521b\u5efa\u7684\u3002\u6b64\u540e\uff0c\u5b83\u5df2\u7ecf\u6f14\u53d8\u6210\u4e86\u4e00\u79cd\u5177\u6709\u591a\u79cd\u7528 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[],"class_list":["post-598","post","type-post","status-publish","format-standard","hentry","category-front-end"],"_links":{"self":[{"href":"https:\/\/levin.ink\/index.php?rest_route=\/wp\/v2\/posts\/598","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/levin.ink\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/levin.ink\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/levin.ink\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/levin.ink\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=598"}],"version-history":[{"count":2,"href":"https:\/\/levin.ink\/index.php?rest_route=\/wp\/v2\/posts\/598\/revisions"}],"predecessor-version":[{"id":644,"href":"https:\/\/levin.ink\/index.php?rest_route=\/wp\/v2\/posts\/598\/revisions\/644"}],"wp:attachment":[{"href":"https:\/\/levin.ink\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=598"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/levin.ink\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=598"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/levin.ink\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=598"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}