{"id":241,"date":"2026-03-09T22:32:12","date_gmt":"2026-03-09T14:32:12","guid":{"rendered":"https:\/\/www.resilence.cn\/?p=241"},"modified":"2026-03-09T22:32:12","modified_gmt":"2026-03-09T14:32:12","slug":"day-10-dom%e6%93%8d%e4%bd%9c%e5%9f%ba%e7%a1%80","status":"publish","type":"post","link":"https:\/\/www.resilence.cn\/?p=241","title":{"rendered":"Day-10-DOM\u64cd\u4f5c\u57fa\u7840"},"content":{"rendered":"<h1>Day 10: DOM \u64cd\u4f5c\u57fa\u7840<\/h1>\n<h2>\ud83c\udfaf \u5b66\u4e60\u76ee\u6807<\/h2>\n<ul>\n<li>\u7406\u89e3 DOM\uff08\u6587\u6863\u5bf9\u8c61\u6a21\u578b\uff09\u7684\u6982\u5ff5\u548c\u7ed3\u6784<\/li>\n<li>\u638c\u63e1\u67e5\u627e\u5143\u7d20\u7684\u65b9\u6cd5<\/li>\n<li>\u5b66\u4f1a\u4fee\u6539\u5143\u7d20\u7684\u5185\u5bb9\u548c\u5c5e\u6027<\/li>\n<li>\u7406\u89e3 DOM \u6811\u7684\u904d\u5386\u65b9\u6cd5<\/li>\n<\/ul>\n<h2>\ud83d\udca1 \u6838\u5fc3\u6982\u5ff5<\/h2>\n<h3>\u4ec0\u4e48\u662f DOM\uff1f<\/h3>\n<p>DOM\uff08Document Object Model\uff0c\u6587\u6863\u5bf9\u8c61\u6a21\u578b\uff09\u662f HTML \u548c XML \u6587\u6863\u7684\u7f16\u7a0b\u63a5\u53e3\u3002\u5b83\u5c06\u6587\u6863\u8868\u793a\u4e3a\u8282\u70b9\u6811\uff0c\u5141\u8bb8\u7f16\u7a0b\u8bed\u8a00\uff08\u5982 JavaScript\uff09\u8bbf\u95ee\u548c\u4fee\u6539\u6587\u6863\u7684\u5185\u5bb9\u3001\u7ed3\u6784\u548c\u6837\u5f0f\u3002<\/p>\n<p><strong>DOM \u6811\u7ed3\u6784\u793a\u4f8b<\/strong>\uff1a<\/p>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;\u9875\u9762\u6807\u9898&lt;\/title&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;div id=&quot;container&quot;&gt;\n      &lt;h1&gt;\u6b22\u8fce&lt;\/h1&gt;\n      &lt;p class=&quot;text&quot;&gt;\u8fd9\u662f\u6bb5\u843d&lt;\/p&gt;\n      &lt;ul&gt;\n        &lt;li&gt;\u9879\u76ee 1&lt;\/li&gt;\n        &lt;li&gt;\u9879\u76ee 2&lt;\/li&gt;\n      &lt;\/ul&gt;\n    &lt;\/div&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<p>\u5bf9\u5e94\u7684 DOM \u6811\uff1a<\/p>\n<pre><code>Document\n \u2514\u2500\u2500 html\n     \u251c\u2500\u2500 head\n     \u2502   \u2514\u2500\u2500 title\n     \u2502       \u2514\u2500\u2500 &quot;\u9875\u9762\u6807\u9898&quot;\n     \u2514\u2500\u2500 body\n         \u2514\u2500\u2500 div#container\n             \u251c\u2500\u2500 h1\n             \u2502   \u2514\u2500\u2500 &quot;\u6b22\u8fce&quot;\n             \u251c\u2500\u2500 p.text\n             \u2502   \u2514\u2500\u2500 &quot;\u8fd9\u662f\u6bb5\u843d&quot;\n             \u2514\u2500\u2500 ul\n                 \u251c\u2500\u2500 li\n                 \u2502   \u2514\u2500\u2500 &quot;\u9879\u76ee 1&quot;\n                 \u2514\u2500\u2500 li\n                     \u2514\u2500\u2500 &quot;\u9879\u76ee 2&quot;\n<\/code><\/pre>\n<h3>\u8282\u70b9\u7c7b\u578b<\/h3>\n<p>DOM \u4e2d\u6709\u51e0\u79cd\u5e38\u89c1\u7684\u8282\u70b9\u7c7b\u578b\uff1a<\/p>\n<ol>\n<li><strong>\u5143\u7d20\u8282\u70b9\uff08Element\uff09<\/strong>\uff1aHTML \u6807\u7b7e\uff08\u5982 <code>&lt;div&gt;<\/code>, <code>&lt;p&gt;<\/code>\uff09<\/li>\n<li><strong>\u6587\u672c\u8282\u70b9\uff08Text\uff09<\/strong>\uff1a\u5143\u7d20\u5185\u7684\u6587\u672c\u5185\u5bb9<\/li>\n<li><strong>\u5c5e\u6027\u8282\u70b9\uff08Attribute\uff09<\/strong>\uff1a\u5143\u7d20\u7684\u5c5e\u6027\uff08\u5982 <code>class<\/code>, <code>id<\/code>\uff09<\/li>\n<li><strong>\u6587\u6863\u8282\u70b9\uff08Document\uff09<\/strong>\uff1a\u6574\u4e2a\u6587\u6863\u7684\u6839\u8282\u70b9<\/li>\n<\/ol>\n<p><strong>\u793a\u4f8b<\/strong>\uff1a<\/p>\n<pre><code class=\"language-html\">&lt;p id=&quot;para1&quot; class=&quot;text&quot;&gt;\u8fd9\u662f\u4e00\u4e2a\u6bb5\u843d&lt;\/p&gt;\n<\/code><\/pre>\n<ul>\n<li>\u5143\u7d20\u8282\u70b9\uff1a<code>&lt;p&gt;<\/code><\/li>\n<li>\u5c5e\u6027\u8282\u70b9\uff1a<code>id=&quot;para1&quot;<\/code>, <code>class=&quot;text&quot;<\/code><\/li>\n<li>\u6587\u672c\u8282\u70b9\uff1a<code>&quot;\u8fd9\u662f\u4e00\u4e2a\u6bb5\u843d&quot;<\/code><\/li>\n<\/ul>\n<h3>DOM \u67e5\u627e\u65b9\u5f0f<\/h3>\n<p>\u67e5\u627e\u5143\u7d20\u662f DOM \u64cd\u4f5c\u7684\u7b2c\u4e00\u6b65\uff0c\u4e3b\u8981\u6709\u4ee5\u4e0b\u65b9\u6cd5\uff1a<\/p>\n<ol>\n<li><strong>\u901a\u8fc7 ID \u67e5\u627e<\/strong>\uff1a<code>getElementById()<\/code><\/li>\n<li><strong>\u901a\u8fc7\u7c7b\u540d\u67e5\u627e<\/strong>\uff1a<code>getElementsByClassName()<\/code><\/li>\n<li><strong>\u901a\u8fc7\u6807\u7b7e\u540d\u67e5\u627e<\/strong>\uff1a<code>getElementsByTagName()<\/code><\/li>\n<li><strong>\u901a\u8fc7\u9009\u62e9\u5668\u67e5\u627e<\/strong>\uff1a<code>querySelector()<\/code>, <code>querySelectorAll()<\/code><\/li>\n<\/ol>\n<h2>\ud83d\udcdd \u6838\u5fc3 API \u548c\u8bed\u6cd5<\/h2>\n<h3>\u67e5\u627e\u5143\u7d20<\/h3>\n<h4>1. getElementById()<\/h4>\n<pre><code class=\"language-javascript\">const element = document.getElementById('elementId');\n<\/code><\/pre>\n<p><strong>\u529f\u80fd<\/strong>\uff1a\u901a\u8fc7 ID \u67e5\u627e\u5143\u7d20<br \/>\n<strong>\u8fd4\u56de<\/strong>\uff1a\u5355\u4e2a\u5143\u7d20\u6216 <code>null<\/code><\/p>\n<p><strong>\u793a\u4f8b<\/strong>\uff1a<\/p>\n<pre><code class=\"language-javascript\">const title = document.getElementById('main-title');\nif (title) {\n    console.log(title.textContent);  \/\/ \u8f93\u51fa\u6807\u9898\u6587\u672c\n}\n<\/code><\/pre>\n<h4>2. getElementsByClassName()<\/h4>\n<pre><code class=\"language-javascript\">const elements = document.getElementsByClassName('classname');\n<\/code><\/pre>\n<p><strong>\u529f\u80fd<\/strong>\uff1a\u901a\u8fc7\u7c7b\u540d\u67e5\u627e\u5143\u7d20<br \/>\n<strong>\u8fd4\u56de<\/strong>\uff1aHTMLCollection\uff08\u7c7b\u6570\u7ec4\u7684\u96c6\u5408\uff09<\/p>\n<p><strong>\u793a\u4f8b<\/strong>\uff1a<\/p>\n<pre><code class=\"language-javascript\">const items = document.getElementsByClassName('item');\nfor (let i = 0; i &lt; items.length; i++) {\n    console.log(items[i].textContent);\n}\n\n\/\/ \u4f7f\u7528 for...of\nfor (const item of items) {\n    console.log(item.textContent);\n}\n<\/code><\/pre>\n<h4>3. getElementsByTagName()<\/h4>\n<pre><code class=\"language-javascript\">const elements = document.getElementsByTagName('tagname');\n<\/code><\/pre>\n<p><strong>\u529f\u80fd<\/strong>\uff1a\u901a\u8fc7\u6807\u7b7e\u540d\u67e5\u627e\u5143\u7d20<br \/>\n<strong>\u8fd4\u56de<\/strong>\uff1aHTMLCollection<\/p>\n<p><strong>\u793a\u4f8b<\/strong>\uff1a<\/p>\n<pre><code class=\"language-javascript\">const paragraphs = document.getElementsByTagName('p');\nconsole.log(`\u627e\u5230 ${paragraphs.length} \u4e2a\u6bb5\u843d`);\n<\/code><\/pre>\n<h4>4. querySelector()<\/h4>\n<pre><code class=\"language-javascript\">const element = document.querySelector('selector');\n<\/code><\/pre>\n<p><strong>\u529f\u80fd<\/strong>\uff1a\u4f7f\u7528 CSS \u9009\u62e9\u5668\u67e5\u627e\u7b2c\u4e00\u4e2a\u5339\u914d\u7684\u5143\u7d20<br \/>\n<strong>\u8fd4\u56de<\/strong>\uff1a\u5355\u4e2a\u5143\u7d20\u6216 <code>null<\/code><\/p>\n<p><strong>\u793a\u4f8b<\/strong>\uff1a<\/p>\n<pre><code class=\"language-javascript\">\/\/ \u901a\u8fc7 ID\nconst elem1 = document.querySelector('#myId');\n\n\/\/ \u901a\u8fc7\u7c7b\nconst elem2 = document.querySelector('.myClass');\n\n\/\/ \u901a\u8fc7\u6807\u7b7e\nconst elem3 = document.querySelector('div');\n\n\/\/ \u901a\u8fc7\u5c5e\u6027\nconst elem4 = document.querySelector('[data-id=&quot;123&quot;]');\n\n\/\/ \u7ec4\u5408\u9009\u62e9\u5668\nconst elem5 = document.querySelector('.container p:first-child');\n<\/code><\/pre>\n<h4>5. querySelectorAll()<\/h4>\n<pre><code class=\"language-javascript\">const elements = document.querySelectorAll('selector');\n<\/code><\/pre>\n<p><strong>\u529f\u80fd<\/strong>\uff1a\u4f7f\u7528 CSS \u9009\u62e9\u5668\u67e5\u627e\u6240\u6709\u5339\u914d\u7684\u5143\u7d20<br \/>\n<strong>\u8fd4\u56de<\/strong>\uff1aNodeList\uff08\u8282\u70b9\u5217\u8868\uff09<\/p>\n<p><strong>\u793a\u4f8b<\/strong>\uff1a<\/p>\n<pre><code class=\"language-javascript\">const items = document.querySelectorAll('.item');\n\n\/\/ NodeList \u652f\u6301 forEach\nitems.forEach((item, index) =&gt; {\n    console.log(`Item ${index}: ${item.textContent}`);\n});\n\n\/\/ \u8f6c\u6362\u4e3a\u6570\u7ec4\nconst itemsArray = Array.from(items);\n<\/code><\/pre>\n<h3>\u4fee\u6539\u5143\u7d20\u5185\u5bb9<\/h3>\n<h4>1. innerText<\/h4>\n<pre><code class=\"language-javascript\">element.innerText = '\u65b0\u6587\u672c';\n<\/code><\/pre>\n<p><strong>\u529f\u80fd<\/strong>\uff1a\u8bbe\u7f6e\u6216\u83b7\u53d6\u5143\u7d20\u7684\u7eaf\u6587\u672c\u5185\u5bb9<br \/>\n<strong>\u7279\u70b9<\/strong>\uff1a<\/p>\n<ul>\n<li>\u53ea\u80fd\u8bbe\u7f6e\u6587\u672c\uff0c\u4f1a\u89e3\u6790\u4e3a\u7eaf\u6587\u672c<\/li>\n<li>\u83b7\u53d6\u65f6\u4f1a\u89e6\u53d1\u91cd\u6392\uff08reflow\uff09<\/li>\n<li>\u4e0d\u5305\u542b\u9690\u85cf\u5143\u7d20\u7684\u6587\u672c<\/li>\n<\/ul>\n<p><strong>\u793a\u4f8b<\/strong>\uff1a<\/p>\n<pre><code class=\"language-javascript\">const para = document.querySelector('p');\npara.innerText = '&lt;strong&gt;\u52a0\u7c97\u6587\u672c&lt;\/strong&gt;';\n\/\/ \u663e\u793a\u4e3a\uff1a&lt;strong&gt;\u52a0\u7c97\u6587\u672c&lt;\/strong&gt;\uff08\u4e0d\u662f\u52a0\u7c97\u6548\u679c\uff09\n<\/code><\/pre>\n<h4>2. textContent<\/h4>\n<pre><code class=\"language-javascript\">element.textContent = '\u65b0\u6587\u672c';\n<\/code><\/pre>\n<p><strong>\u529f\u80fd<\/strong>\uff1a\u8bbe\u7f6e\u6216\u83b7\u53d6\u5143\u7d20\u7684\u6240\u6709\u6587\u672c\u5185\u5bb9\uff08\u5305\u62ec\u5b50\u5143\u7d20\uff09<br \/>\n<strong>\u7279\u70b9<\/strong>\uff1a<\/p>\n<ul>\n<li>\u6027\u80fd\u66f4\u597d\uff08\u4e0d\u89e6\u53d1\u91cd\u6392\uff09<\/li>\n<li>\u5305\u542b\u9690\u85cf\u5143\u7d20\u7684\u6587\u672c<\/li>\n<\/ul>\n<p><strong>\u793a\u4f8b<\/strong>\uff1a<\/p>\n<pre><code class=\"language-javascript\">const div = document.querySelector('div');\nconsole.log(div.textContent);  \/\/ \u83b7\u53d6\u6240\u6709\u6587\u672c\uff0c\u5305\u62ec\u5b50\u5143\u7d20\u7684\n<\/code><\/pre>\n<h4>3. innerHTML<\/h4>\n<pre><code class=\"language-javascript\">element.innerHTML = '&lt;strong&gt;HTML \u5185\u5bb9&lt;\/strong&gt;';\n<\/code><\/pre>\n<p><strong>\u529f\u80fd<\/strong>\uff1a\u8bbe\u7f6e\u6216\u83b7\u53d6\u5143\u7d20\u7684 HTML \u5185\u5bb9<br \/>\n<strong>\u26a0\ufe0f \u6ce8\u610f<\/strong>\uff1a\u5b58\u5728 XSS \u5b89\u5168\u98ce\u9669<\/p>\n<p><strong>\u793a\u4f8b<\/strong>\uff1a<\/p>\n<pre><code class=\"language-javascript\">const container = document.getElementById('container');\ncontainer.innerHTML = `\n    &lt;h2&gt;\u6807\u9898&lt;\/h2&gt;\n    &lt;p&gt;\u6bb5\u843d&lt;\/p&gt;\n    &lt;ul&gt;\n        &lt;li&gt;\u9879\u76ee 1&lt;\/li&gt;\n        &lt;li&gt;\u9879\u76ee 2&lt;\/li&gt;\n    &lt;\/ul&gt;\n`;\n\n\/\/ \u26a0\ufe0f \u5371\u9669\uff1a\u7528\u6237\u8f93\u5165\u76f4\u63a5\u653e\u5165 innerHTML\nconst userInput = '&lt;img src=x onerror=alert(1)&gt;';\ncontainer.innerHTML = userInput;  \/\/ XSS \u653b\u51fb\uff01\n\n\/\/ \u2705 \u5b89\u5168\uff1a\u4f7f\u7528 textContent \u6216\u8f6c\u4e49\ncontainer.textContent = userInput;\n<\/code><\/pre>\n<h3>\u4fee\u6539\u5143\u7d20\u5c5e\u6027<\/h3>\n<h4>1. \u76f4\u63a5\u5c5e\u6027\u8bbf\u95ee<\/h4>\n<pre><code class=\"language-javascript\">element.id = 'newId';\nelement.className = 'newClass';\nelement.href = 'https:\/\/example.com';\n<\/code><\/pre>\n<h4>2. getAttribute() \/ setAttribute()<\/h4>\n<pre><code class=\"language-javascript\">element.setAttribute('attribute', 'value');\nconst value = element.getAttribute('attribute');\n<\/code><\/pre>\n<p><strong>\u793a\u4f8b<\/strong>\uff1a<\/p>\n<pre><code class=\"language-javascript\">const link = document.querySelector('a');\n\n\/\/ \u8bbe\u7f6e\u5c5e\u6027\nlink.setAttribute('href', 'https:\/\/example.com');\nlink.setAttribute('target', '_blank');\nlink.setAttribute('data-id', '123');\n\n\/\/ \u83b7\u53d6\u5c5e\u6027\nconsole.log(link.getAttribute('href'));  \/\/ https:\/\/example.com\n\n\/\/ \u68c0\u67e5\u5c5e\u6027\u662f\u5426\u5b58\u5728\nif (link.hasAttribute('target')) {\n    console.log('Target \u5c5e\u6027\u5b58\u5728');\n}\n\n\/\/ \u79fb\u9664\u5c5e\u6027\nlink.removeAttribute('target');\n<\/code><\/pre>\n<h4>3. classList \u64cd\u4f5c<\/h4>\n<pre><code class=\"language-javascript\">element.classList.add('class1', 'class2');\nelement.classList.remove('class1');\nelement.classList.toggle('active');\nelement.classList.contains('active');\n<\/code><\/pre>\n<p><strong>\u793a\u4f8b<\/strong>\uff1a<\/p>\n<pre><code class=\"language-javascript\">const button = document.querySelector('button');\n\n\/\/ \u6dfb\u52a0\u7c7b\nbutton.classList.add('primary', 'large');\n\n\/\/ \u79fb\u9664\u7c7b\nbutton.classList.remove('large');\n\n\/\/ \u5207\u6362\u7c7b\uff08\u6709\u5219\u5220\u9664\uff0c\u65e0\u5219\u6dfb\u52a0\uff09\nbutton.classList.toggle('active');\n\n\/\/ \u68c0\u67e5\u7c7b\nif (button.classList.contains('primary')) {\n    console.log('\u4e3b\u8981\u6309\u94ae');\n}\n\n\/\/ \u66ff\u6362\u7c7b\nbutton.classList.replace('old', 'new');\n<\/code><\/pre>\n<h4>4. style \u64cd\u4f5c<\/h4>\n<pre><code class=\"language-javascript\">element.style.property = 'value';\n<\/code><\/pre>\n<p><strong>\u793a\u4f8b<\/strong>\uff1a<\/p>\n<pre><code class=\"language-javascript\">const box = document.querySelector('.box');\n\n\/\/ \u8bbe\u7f6e\u6837\u5f0f\nbox.style.color = 'red';\nbox.style.backgroundColor = 'blue';\nbox.style.fontSize = '20px';\n\n\/\/ \u83b7\u53d6\u6837\u5f0f\nconsole.log(box.style.color);  \/\/ red\n\n\/\/ \u79fb\u9664\u6837\u5f0f\nbox.style.color = '';\n\n\/\/ \u4f7f\u7528 CSS \u53d8\u91cf\nbox.style.setProperty('--main-color', '#007bff');\n<\/code><\/pre>\n<h2>\ud83c\udfae \u793a\u4f8b\u4ee3\u7801<\/h2>\n<h3>\u793a\u4f8b 1\uff1a\u521b\u5efa\u52a8\u6001\u5f85\u529e\u4e8b\u9879\u5217\u8868<\/h3>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;zh-CN&quot;&gt;\n&lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n    &lt;title&gt;\u5f85\u529e\u4e8b\u9879\u5217\u8868&lt;\/title&gt;\n    &lt;style&gt;\n        body {\n            font-family: Arial, sans-serif;\n            max-width: 600px;\n            margin: 50px auto;\n            padding: 20px;\n        }\n        .todo-item {\n            padding: 10px;\n            margin: 5px 0;\n            background: #f0f0f0;\n            border-radius: 4px;\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n        }\n        .todo-item.completed {\n            background: #d4edda;\n            text-decoration: line-through;\n        }\n        button {\n            padding: 5px 10px;\n            cursor: pointer;\n        }\n        .delete-btn {\n            background: #dc3545;\n            color: white;\n            border: none;\n            border-radius: 3px;\n        }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;h1&gt;\u6211\u7684\u5f85\u529e\u4e8b\u9879&lt;\/h1&gt;\n\n    &lt;input type=&quot;text&quot; id=&quot;todoInput&quot; placeholder=&quot;\u8f93\u5165\u5f85\u529e\u4e8b\u9879...&quot;&gt;\n    &lt;button id=&quot;addBtn&quot;&gt;\u6dfb\u52a0&lt;\/button&gt;\n\n    &lt;ul id=&quot;todoList&quot;&gt;&lt;\/ul&gt;\n\n    &lt;script&gt;\n        const input = document.getElementById('todoInput');\n        const addBtn = document.getElementById('addBtn');\n        const todoList = document.getElementById('todoList');\n\n        \/\/ \u6dfb\u52a0\u5f85\u529e\u4e8b\u9879\n        function addTodo() {\n            const text = input.value.trim();\n\n            if (text === '') {\n                alert('\u8bf7\u8f93\u5165\u5f85\u529e\u4e8b\u9879\uff01');\n                return;\n            }\n\n            \/\/ \u521b\u5efa\u5217\u8868\u9879\n            const li = document.createElement('li');\n            li.className = 'todo-item';\n\n            \/\/ \u521b\u5efa\u6587\u672c\n            const span = document.createElement('span');\n            span.textContent = text;\n            li.appendChild(span);\n\n            \/\/ \u521b\u5efa\u5b8c\u6210\u6309\u94ae\n            const completeBtn = document.createElement('button');\n            completeBtn.textContent = '\u5b8c\u6210';\n            completeBtn.onclick = function() {\n                li.classList.toggle('completed');\n            };\n            li.appendChild(completeBtn);\n\n            \/\/ \u521b\u5efa\u5220\u9664\u6309\u94ae\n            const deleteBtn = document.createElement('button');\n            deleteBtn.textContent = '\u5220\u9664';\n            deleteBtn.className = 'delete-btn';\n            deleteBtn.onclick = function() {\n                li.remove();\n                updateCount();\n            };\n            li.appendChild(deleteBtn);\n\n            \/\/ \u6dfb\u52a0\u5230\u5217\u8868\n            todoList.appendChild(li);\n\n            \/\/ \u6e05\u7a7a\u8f93\u5165\n            input.value = '';\n            updateCount();\n        }\n\n        \/\/ \u66f4\u65b0\u8ba1\u6570\n        function updateCount() {\n            const total = todoList.children.length;\n            const completed = todoList.querySelectorAll('.completed').length;\n            console.log(`\u603b\u8ba1: ${total}, \u5df2\u5b8c\u6210: ${completed}`);\n        }\n\n        \/\/ \u4e8b\u4ef6\u76d1\u542c\n        addBtn.addEventListener('click', addTodo);\n\n        input.addEventListener('keypress', function(event) {\n            if (event.key === 'Enter') {\n                addTodo();\n            }\n        });\n\n        \/\/ \u521d\u59cb\u5316\u793a\u4f8b\u6570\u636e\n        const examples = ['\u5b66\u4e60 DOM \u64cd\u4f5c', '\u5b8c\u6210\u7ec3\u4e60\u4efb\u52a1', '\u590d\u4e60 JavaScript'];\n        examples.forEach(text =&gt; {\n            input.value = text;\n            addTodo();\n        });\n    &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<h3>\u793a\u4f8b 2\uff1a\u52a8\u6001\u521b\u5efa\u8868\u5355<\/h3>\n<pre><code class=\"language-javascript\">\/\/ \u521b\u5efa\u8868\u5355\nfunction createDynamicForm() {\n    const form = document.createElement('form');\n    form.id = 'userForm';\n\n    \/\/ \u7528\u6237\u540d\u8f93\u5165\u6846\n    const usernameGroup = createFormGroup(\n        'username',\n        'text',\n        '\u7528\u6237\u540d',\n        '\u8bf7\u8f93\u5165\u7528\u6237\u540d'\n    );\n    form.appendChild(usernameGroup);\n\n    \/\/ \u90ae\u7bb1\u8f93\u5165\u6846\n    const emailGroup = createFormGroup(\n        'email',\n        'email',\n        '\u90ae\u7bb1',\n        '\u8bf7\u8f93\u5165\u90ae\u7bb1\u5730\u5740'\n    );\n    form.appendChild(emailGroup);\n\n    \/\/ \u5bc6\u7801\u8f93\u5165\u6846\n    const passwordGroup = createFormGroup(\n        'password',\n        'password',\n        '\u5bc6\u7801',\n        '\u8bf7\u8f93\u5165\u5bc6\u7801'\n    );\n    form.appendChild(passwordGroup);\n\n    \/\/ \u63d0\u4ea4\u6309\u94ae\n    const submitBtn = document.createElement('button');\n    submitBtn.type = 'submit';\n    submitBtn.textContent = '\u63d0\u4ea4';\n    submitBtn.className = 'submit-btn';\n    form.appendChild(submitBtn);\n\n    \/\/ \u6dfb\u52a0\u5230\u9875\u9762\n    document.body.appendChild(form);\n\n    \/\/ \u8868\u5355\u63d0\u4ea4\u4e8b\u4ef6\n    form.addEventListener('submit', function(event) {\n        event.preventDefault();\n\n        const username = document.getElementById('username').value;\n        const email = document.getElementById('email').value;\n        const password = document.getElementById('password').value;\n\n        console.log('\u63d0\u4ea4\u7684\u6570\u636e:', { username, email, password });\n        alert('\u8868\u5355\u63d0\u4ea4\u6210\u529f\uff01');\n    });\n}\n\n\/\/ \u521b\u5efa\u8868\u5355\u7ec4\nfunction createFormGroup(id, type, labelText, placeholder) {\n    const div = document.createElement('div');\n    div.className = 'form-group';\n\n    const label = document.createElement('label');\n    label.htmlFor = id;\n    label.textContent = labelText;\n    div.appendChild(label);\n\n    const input = document.createElement('input');\n    input.type = type;\n    input.id = id;\n    input.name = id;\n    input.placeholder = placeholder;\n    input.required = true;\n    div.appendChild(input);\n\n    return div;\n}\n\n\/\/ \u521b\u5efa\u8868\u5355\ncreateDynamicForm();\n<\/code><\/pre>\n<h3>\u793a\u4f8b 3\uff1a\u56fe\u7247\u753b\u5eca<\/h3>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;zh-CN&quot;&gt;\n&lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n    &lt;title&gt;\u56fe\u7247\u753b\u5eca&lt;\/title&gt;\n    &lt;style&gt;\n        .gallery {\n            display: grid;\n            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n            gap: 15px;\n            padding: 20px;\n        }\n        .gallery-item {\n            position: relative;\n            overflow: hidden;\n            border-radius: 8px;\n            box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n        }\n        .gallery-item img {\n            width: 100%;\n            height: 200px;\n            object-fit: cover;\n            transition: transform 0.3s;\n        }\n        .gallery-item:hover img {\n            transform: scale(1.1);\n        }\n        .overlay {\n            position: absolute;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            background: rgba(0,0,0,0.7);\n            color: white;\n            padding: 10px;\n            transform: translateY(100%);\n            transition: transform 0.3s;\n        }\n        .gallery-item:hover .overlay {\n            transform: translateY(0);\n        }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;div id=&quot;gallery&quot; class=&quot;gallery&quot;&gt;&lt;\/div&gt;\n\n    &lt;script&gt;\n        \/\/ \u56fe\u7247\u6570\u636e\n        const images = [\n            { url: 'https:\/\/via.placeholder.com\/300x200\/FF6B6B\/ffffff?text=Image+1', title: '\u56fe\u7247 1' },\n            { url: 'https:\/\/via.placeholder.com\/300x200\/4ECDC4\/ffffff?text=Image+2', title: '\u56fe\u7247 2' },\n            { url: 'https:\/\/via.placeholder.com\/300x200\/45B7D1\/ffffff?text=Image+3', title: '\u56fe\u7247 3' },\n            { url: 'https:\/\/via.placeholder.com\/300x200\/FFA07A\/ffffff?text=Image+4', title: '\u56fe\u7247 4' },\n            { url: 'https:\/\/via.placeholder.com\/300x200\/98D8C8\/ffffff?text=Image+5', title: '\u56fe\u7247 5' },\n            { url: 'https:\/\/via.placeholder.com\/300x200\/F7DC6F\/ffffff?text=Image+6', title: '\u56fe\u7247 6' },\n        ];\n\n        const gallery = document.getElementById('gallery');\n\n        \/\/ \u521b\u5efa\u753b\u5eca\n        function createGallery() {\n            images.forEach((image, index) =&gt; {\n                \/\/ \u521b\u5efa\u753b\u5eca\u9879\n                const item = document.createElement('div');\n                item.className = 'gallery-item';\n\n                \/\/ \u521b\u5efa\u56fe\u7247\n                const img = document.createElement('img');\n                img.src = image.url;\n                img.alt = image.title;\n                item.appendChild(img);\n\n                \/\/ \u521b\u5efa\u53e0\u52a0\u5c42\n                const overlay = document.createElement('div');\n                overlay.className = 'overlay';\n                overlay.textContent = image.title;\n                item.appendChild(overlay);\n\n                \/\/ \u70b9\u51fb\u4e8b\u4ef6\n                item.addEventListener('click', function() {\n                    showLightbox(image.url, image.title);\n                });\n\n                \/\/ \u6dfb\u52a0\u5230\u753b\u5eca\n                gallery.appendChild(item);\n            });\n        }\n\n        \/\/ \u663e\u793a\u706f\u7bb1\n        function showLightbox(url, title) {\n            \/\/ \u521b\u5efa\u706f\u7bb1\u906e\u7f69\n            const lightbox = document.createElement('div');\n            lightbox.style.cssText = `\n                position: fixed;\n                top: 0;\n                left: 0;\n                width: 100%;\n                height: 100%;\n                background: rgba(0,0,0,0.9);\n                display: flex;\n                justify-content: center;\n                align-items: center;\n                z-index: 1000;\n                cursor: pointer;\n            `;\n\n            \/\/ \u521b\u5efa\u56fe\u7247\n            const img = document.createElement('img');\n            img.src = url;\n            img.style.cssText = `\n                max-width: 90%;\n                max-height: 90%;\n                border-radius: 8px;\n            `;\n            lightbox.appendChild(img);\n\n            \/\/ \u70b9\u51fb\u5173\u95ed\n            lightbox.addEventListener('click', function() {\n                lightbox.remove();\n            });\n\n            document.body.appendChild(lightbox);\n        }\n\n        \/\/ \u521d\u59cb\u5316\u753b\u5eca\n        createGallery();\n    &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<h2>\u270d\ufe0f \u7ec3\u4e60\u4efb\u52a1<\/h2>\n<h3>\u7ec3\u4e60 1\uff1a\u5b9e\u73b0\u9009\u9879\u5361\u5207\u6362<\/h3>\n<p><strong>\u4efb\u52a1<\/strong>\uff1a\u521b\u5efa\u4e00\u4e2a\u9009\u9879\u5361\u7ec4\u4ef6\uff0c\u652f\u6301\u5185\u5bb9\u5207\u6362<\/p>\n<p><strong>\u8981\u6c42<\/strong>\uff1a<\/p>\n<ol>\n<li>\u521b\u5efa 3 \u4e2a\u9009\u9879\u5361\uff08\u9996\u9875\u3001\u5173\u4e8e\u3001\u8054\u7cfb\uff09<\/li>\n<li>\u70b9\u51fb\u9009\u9879\u5361\u65f6\u5207\u6362\u663e\u793a\u5185\u5bb9<\/li>\n<li>\u5f53\u524d\u9009\u9879\u5361\u9ad8\u4eae\u663e\u793a<\/li>\n<li>\u652f\u6301\u952e\u76d8\u5bfc\u822a\uff08\u5de6\u53f3\u7bad\u5934\uff09<\/li>\n<\/ol>\n<p><strong>\u63d0\u793a<\/strong>\uff1a<\/p>\n<pre><code class=\"language-html\">&lt;div class=&quot;tabs&quot;&gt;\n    &lt;button class=&quot;tab active&quot; data-tab=&quot;home&quot;&gt;\u9996\u9875&lt;\/button&gt;\n    &lt;button class=&quot;tab&quot; data-tab=&quot;about&quot;&gt;\u5173\u4e8e&lt;\/button&gt;\n    &lt;button class=&quot;tab&quot; data-tab=&quot;contact&quot;&gt;\u8054\u7cfb&lt;\/button&gt;\n&lt;\/div&gt;\n&lt;div class=&quot;tab-content&quot;&gt;\n    &lt;div class=&quot;content active&quot; id=&quot;home&quot;&gt;\u9996\u9875\u5185\u5bb9&lt;\/div&gt;\n    &lt;div class=&quot;content&quot; id=&quot;about&quot;&gt;\u5173\u4e8e\u5185\u5bb9&lt;\/div&gt;\n    &lt;div class=&quot;content&quot; id=&quot;contact&quot;&gt;\u8054\u7cfb\u5185\u5bb9&lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n<h3>\u7ec3\u4e60 2\uff1a\u5b9e\u73b0\u6a21\u6001\u6846<\/h3>\n<p><strong>\u4efb\u52a1<\/strong>\uff1a\u521b\u5efa\u4e00\u4e2a\u53ef\u590d\u7528\u7684\u6a21\u6001\u6846\u7ec4\u4ef6<\/p>\n<p><strong>\u8981\u6c42<\/strong>\uff1a<\/p>\n<ol>\n<li>\u63d0\u4f9b <code>openModal(title, content)<\/code> \u51fd\u6570<\/li>\n<li>\u63d0\u4f9b <code>closeModal()<\/code> \u51fd\u6570<\/li>\n<li>\u652f\u6301\u70b9\u51fb\u906e\u7f69\u5c42\u5173\u95ed<\/li>\n<li>\u652f\u6301\u6309 ESC \u952e\u5173\u95ed<\/li>\n<li>\u6dfb\u52a0\u52a8\u753b\u6548\u679c\uff08\u6de1\u5165\u6de1\u51fa\uff09<\/li>\n<\/ol>\n<p><strong>\u63d0\u793a<\/strong>\uff1a<\/p>\n<pre><code class=\"language-javascript\">function openModal(title, content) {\n    \/\/ \u521b\u5efa\u906e\u7f69\u5c42\n    \/\/ \u521b\u5efa\u6a21\u6001\u6846\n    \/\/ \u6dfb\u52a0\u5230 body\n    \/\/ \u7ed1\u5b9a\u5173\u95ed\u4e8b\u4ef6\n}\n\nfunction closeModal() {\n    \/\/ \u79fb\u9664\u6a21\u6001\u6846\n    \/\/ \u79fb\u9664\u906e\u7f69\u5c42\n}\n<\/code><\/pre>\n<h3>\u7ec3\u4e60 3\uff1a\u5b9e\u73b0\u661f\u7ea7\u8bc4\u5206<\/h3>\n<p><strong>\u4efb\u52a1<\/strong>\uff1a\u521b\u5efa\u4e00\u4e2a\u4ea4\u4e92\u5f0f\u661f\u7ea7\u8bc4\u5206\u7ec4\u4ef6<\/p>\n<p><strong>\u8981\u6c42<\/strong>\uff1a<\/p>\n<ol>\n<li>\u663e\u793a 5 \u9897\u661f<\/li>\n<li>\u60ac\u505c\u65f6\u9884\u89c8\u8bc4\u5206\uff08\u9ad8\u4eae\u5f53\u524d\u53ca\u4e4b\u524d\u7684\u661f\uff09<\/li>\n<li>\u70b9\u51fb\u65f6\u8bbe\u7f6e\u8bc4\u5206<\/li>\n<li>\u663e\u793a\u5f53\u524d\u8bc4\u5206\u6570\u503c<\/li>\n<li>\u652f\u6301\u534a\u661f\u8bc4\u5206\uff08\u53ef\u9009\uff09<\/li>\n<\/ol>\n<p><strong>\u63d0\u793a<\/strong>\uff1a<\/p>\n<pre><code class=\"language-javascript\">const stars = document.querySelectorAll('.star');\n\nstars.forEach((star, index) =&gt; {\n    \/\/ \u60ac\u505c\u4e8b\u4ef6\n    star.addEventListener('mouseenter', () =&gt; {\n        highlightStars(index);\n    });\n\n    \/\/ \u70b9\u51fb\u4e8b\u4ef6\n    star.addEventListener('click', () =&gt; {\n        setRating(index + 1);\n    });\n});\n<\/code><\/pre>\n<h2>\ud83c\udf93 \u4eca\u65e5\u6311\u6218<\/h2>\n<h3>\u6311\u6218\uff1a\u5b9e\u73b0\u5b8c\u6574\u7684\u56fe\u7247\u8f6e\u64ad\u7ec4\u4ef6<\/h3>\n<p><strong>\u8981\u6c42<\/strong>\uff1a<\/p>\n<ol>\n<li>\n<p><strong>\u57fa\u672c\u529f\u80fd<\/strong><\/p>\n<ul>\n<li>\u81ea\u52a8\u64ad\u653e\uff08\u6bcf 3 \u79d2\u5207\u6362\uff09<\/li>\n<li>\u624b\u52a8\u5207\u6362\uff08\u4e0a\u4e00\u5f20\/\u4e0b\u4e00\u5f20\u6309\u94ae\uff09<\/li>\n<li>\u6307\u793a\u5668\uff08\u663e\u793a\u5f53\u524d\u4f4d\u7f6e\uff09<\/li>\n<li>\u65e0\u9650\u5faa\u73af\uff08\u6700\u540e\u4e00\u5f20\u8df3\u5230\u7b2c\u4e00\u5f20\uff09<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u8fdb\u9636\u529f\u80fd<\/strong><\/p>\n<ul>\n<li>\u89e6\u6478\u6ed1\u52a8\u652f\u6301<\/li>\n<li>\u952e\u76d8\u5bfc\u822a\uff08\u5de6\u53f3\u7bad\u5934\uff09<\/li>\n<li>\u6682\u505c\/\u64ad\u653e\u6309\u94ae<\/li>\n<li>\u7f29\u7565\u56fe\u5bfc\u822a<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u52a8\u753b\u6548\u679c<\/strong><\/p>\n<ul>\n<li>\u5e73\u6ed1\u8fc7\u6e21\u52a8\u753b<\/li>\n<li>\u6de1\u5165\u6de1\u51fa\u6216\u6ed1\u52a8\u6548\u679c<\/li>\n<li>\u52a0\u8f7d\u8fdb\u5ea6\u6307\u793a\u5668<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u54cd\u5e94\u5f0f\u8bbe\u8ba1<\/strong><\/p>\n<ul>\n<li>\u81ea\u9002\u5e94\u4e0d\u540c\u5c4f\u5e55\u5c3a\u5bf8<\/li>\n<li>\u79fb\u52a8\u7aef\u4f18\u5316<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p><strong>\u63d0\u793a<\/strong>\uff1a<\/p>\n<pre><code class=\"language-javascript\">class Carousel {\n    constructor(container) {\n        this.container = container;\n        this.slides = container.querySelectorAll('.slide');\n        this.currentIndex = 0;\n        this.interval = null;\n\n        this.init();\n    }\n\n    init() {\n        \/\/ \u521d\u59cb\u5316\n        this.showSlide(0);\n        this.startAutoPlay();\n        this.bindEvents();\n    }\n\n    showSlide(index) {\n        \/\/ \u663e\u793a\u6307\u5b9a\u7d22\u5f15\u7684\u5e7b\u706f\u7247\n        \/\/ \u66f4\u65b0\u6307\u793a\u5668\n    }\n\n    next() {\n        \/\/ \u663e\u793a\u4e0b\u4e00\u5f20\n    }\n\n    prev() {\n        \/\/ \u663e\u793a\u4e0a\u4e00\u5f20\n    }\n\n    startAutoPlay() {\n        \/\/ \u5f00\u59cb\u81ea\u52a8\u64ad\u653e\n    }\n\n    stopAutoPlay() {\n        \/\/ \u505c\u6b62\u81ea\u52a8\u64ad\u653e\n    }\n\n    bindEvents() {\n        \/\/ \u7ed1\u5b9a\u4e8b\u4ef6\n    }\n}\n<\/code><\/pre>\n<p><strong>\u6269\u5c55\u529f\u80fd<\/strong>\uff08\u53ef\u9009\uff09\uff1a<\/p>\n<ul>\n<li>\u61d2\u52a0\u8f7d\u56fe\u7247<\/li>\n<li>\u6dfb\u52a0\u5b57\u5e55<\/li>\n<li>\u652f\u6301\u89c6\u9891\u8f6e\u64ad<\/li>\n<li>\u6dfb\u52a0\u7f29\u653e\u529f\u80fd<\/li>\n<\/ul>\n<h2>\ud83d\udca1 \u5e38\u89c1\u95ee\u9898<\/h2>\n<h3>Q1: getElementById \u548c querySelector \u6709\u4ec0\u4e48\u533a\u522b\uff1f<\/h3>\n<p><strong>A<\/strong>:<\/p>\n<p><strong>getElementById<\/strong>\uff1a<\/p>\n<pre><code class=\"language-javascript\">const elem = document.getElementById('myId');\n<\/code><\/pre>\n<ul>\n<li>\u53ea\u80fd\u901a\u8fc7 ID \u67e5\u627e<\/li>\n<li>\u6027\u80fd\u66f4\u597d\uff08\u76f4\u63a5\u67e5\u627e\uff09<\/li>\n<li>\u8fd4\u56de\u5355\u4e2a\u5143\u7d20\u6216 null<\/li>\n<\/ul>\n<p><strong>querySelector<\/strong>\uff1a<\/p>\n<pre><code class=\"language-javascript\">const elem = document.querySelector('#myId');\n<\/code><\/pre>\n<ul>\n<li>\u652f\u6301\u4efb\u610f CSS \u9009\u62e9\u5668<\/li>\n<li>\u7a0d\u6162\uff08\u9700\u8981\u89e3\u6790\u9009\u62e9\u5668\uff09<\/li>\n<li>\u66f4\u7075\u6d3b<\/li>\n<\/ul>\n<p><strong>\u9009\u62e9\u5efa\u8bae<\/strong>\uff1a<\/p>\n<ul>\n<li>\u53ea\u7528 ID \u65f6\uff1a<code>getElementById<\/code>\uff08\u66f4\u5feb\uff09<\/li>\n<li>\u590d\u6742\u9009\u62e9\u5668\uff1a<code>querySelector<\/code>\uff08\u66f4\u7075\u6d3b\uff09<\/li>\n<\/ul>\n<h3>Q2: innerHTML \u548c textContent \u6709\u4ec0\u4e48\u533a\u522b\uff1f<\/h3>\n<p><strong>A<\/strong>:<\/p>\n<p><strong>innerHTML<\/strong>\uff1a<\/p>\n<pre><code class=\"language-javascript\">elem.innerHTML = '&lt;strong&gt;\u52a0\u7c97&lt;\/strong&gt;';\n\/\/ \u663e\u793a\uff1a\u52a0\u7c97\uff08\u5e26\u683c\u5f0f\uff09\n<\/code><\/pre>\n<ul>\n<li>\u89e3\u6790 HTML<\/li>\n<li>\u5b58\u5728 XSS \u98ce\u9669<\/li>\n<li>\u4f1a\u91cd\u65b0\u521b\u5efa DOM \u8282\u70b9\uff08\u6027\u80fd\u5f00\u9500\u5927\uff09<\/li>\n<\/ul>\n<p><strong>textContent<\/strong>\uff1a<\/p>\n<pre><code class=\"language-javascript\">elem.textContent = '&lt;strong&gt;\u52a0\u7c97&lt;\/strong&gt;';\n\/\/ \u663e\u793a\uff1a&lt;strong&gt;\u52a0\u7c97&lt;\/strong&gt;\uff08\u7eaf\u6587\u672c\uff09\n<\/code><\/pre>\n<ul>\n<li>\u7eaf\u6587\u672c\uff0c\u4e0d\u89e3\u6790 HTML<\/li>\n<li>\u5b89\u5168\uff08\u65e0 XSS \u98ce\u9669\uff09<\/li>\n<li>\u6027\u80fd\u66f4\u597d<\/li>\n<\/ul>\n<p><strong>\u9009\u62e9\u5efa\u8bae<\/strong>\uff1a<\/p>\n<ul>\n<li>\u9700\u8981\u63d2\u5165 HTML\uff1a<code>innerHTML<\/code>\uff08\u6ce8\u610f\u8f6c\u4e49\uff09<\/li>\n<li>\u53ea\u9700\u6587\u672c\uff1a<code>textContent<\/code>\uff08\u5b89\u5168\u5feb\u901f\uff09<\/li>\n<\/ul>\n<h3>Q3: HTMLCollection \u548c NodeList \u6709\u4ec0\u4e48\u533a\u522b\uff1f<\/h3>\n<p><strong>A<\/strong>:<\/p>\n<p><strong>HTMLCollection<\/strong>\uff1a<\/p>\n<pre><code class=\"language-javascript\">const elems = document.getElementsByClassName('item');\n<\/code><\/pre>\n<ul>\n<li>\u5b9e\u65f6\u66f4\u65b0\uff08DOM \u53d8\u5316\u65f6\u81ea\u52a8\u66f4\u65b0\uff09<\/li>\n<li><code>getElementsByClassName<\/code>, <code>getElementsByTagName<\/code> \u8fd4\u56de<\/li>\n<li>\u4e0d\u662f\u771f\u6b63\u7684\u6570\u7ec4\uff08\u6ca1\u6709 forEach, map \u7b49\uff09<\/li>\n<\/ul>\n<p><strong>NodeList<\/strong>\uff1a<\/p>\n<pre><code class=\"language-javascript\">const elems = document.querySelectorAll('.item');\n<\/code><\/pre>\n<ul>\n<li>\u9759\u6001\uff08DOM \u53d8\u5316\u65f6\u4e0d\u66f4\u65b0\uff09<\/li>\n<li><code>querySelectorAll<\/code> \u8fd4\u56de<\/li>\n<li>\u652f\u6301 forEach\uff08\u73b0\u4ee3\u6d4f\u89c8\u5668\uff09<\/li>\n<\/ul>\n<p><strong>\u793a\u4f8b<\/strong>\uff1a<\/p>\n<pre><code class=\"language-javascript\">\/\/ HTMLCollection\uff08\u5b9e\u65f6\uff09\nconst items = document.getElementsByClassName('item');\nconsole.log(items.length);  \/\/ 3\ndocument.body.appendChild(document.createElement('div')).className = 'item';\nconsole.log(items.length);  \/\/ 4\uff08\u81ea\u52a8\u66f4\u65b0\uff09\n\n\/\/ NodeList\uff08\u9759\u6001\uff09\nconst items = document.querySelectorAll('.item');\nconsole.log(items.length);  \/\/ 3\ndocument.body.appendChild(document.createElement('div')).className = 'item';\nconsole.log(items.length);  \/\/ 3\uff08\u4e0d\u53d8\uff09\n<\/code><\/pre>\n<p><strong>\u8f6c\u6362\u4e3a\u6570\u7ec4<\/strong>\uff1a<\/p>\n<pre><code class=\"language-javascript\">\/\/ HTMLCollection \u8f6c \u6570\u7ec4\nconst itemsArray = Array.from(document.getElementsByClassName('item'));\n\n\/\/ NodeList \u8f6c \u6570\u7ec4\nconst itemsArray = Array.from(document.querySelectorAll('.item'));\n<\/code><\/pre>\n<h3>Q4: \u5982\u4f55\u907f\u514d XSS \u653b\u51fb\uff1f<\/h3>\n<p><strong>A<\/strong>:<\/p>\n<p><strong>\u5371\u9669\u64cd\u4f5c<\/strong>\uff1a<\/p>\n<pre><code class=\"language-javascript\">\/\/ \u274c \u5371\u9669\uff1a\u7528\u6237\u8f93\u5165\u76f4\u63a5\u63d2\u5165\nconst userInput = '&lt;img src=x onerror=alert(1)&gt;';\nelem.innerHTML = userInput;\n<\/code><\/pre>\n<p><strong>\u5b89\u5168\u65b9\u6cd5<\/strong>\uff1a<\/p>\n<ol>\n<li><strong>\u4f7f\u7528 textContent<\/strong>\uff1a<\/li>\n<\/ol>\n<pre><code class=\"language-javascript\">\/\/ \u2705 \u5b89\u5168\nelem.textContent = userInput;\n<\/code><\/pre>\n<ol start=\"2\">\n<li><strong>\u8f6c\u4e49 HTML<\/strong>\uff1a<\/li>\n<\/ol>\n<pre><code class=\"language-javascript\">function escapeHtml(text) {\n    const div = document.createElement('div');\n    div.textContent = text;\n    return div.innerHTML;\n}\n\n\/\/ \u4f7f\u7528\nconst safe = escapeHtml(userInput);\nelem.innerHTML = safe;\n<\/code><\/pre>\n<ol start=\"3\">\n<li><strong>\u4f7f\u7528 DOM API<\/strong>\uff1a<\/li>\n<\/ol>\n<pre><code class=\"language-javascript\">\/\/ \u2705 \u5b89\u5168\uff1a\u521b\u5efa\u5143\u7d20\nconst img = document.createElement('img');\nimg.src = sanitizeUrl(userUrl);\nelem.appendChild(img);\n<\/code><\/pre>\n<ol start=\"4\">\n<li><strong>\u4f7f\u7528 CSP\uff08\u5185\u5bb9\u5b89\u5168\u7b56\u7565\uff09<\/strong>\uff1a<\/li>\n<\/ol>\n<pre><code class=\"language-html\">&lt;meta http-equiv=&quot;Content-Security-Policy&quot;\n      content=&quot;default-src 'self'; script-src 'self'&quot;&gt;\n<\/code><\/pre>\n<h3>Q5: \u5982\u4f55\u4f18\u5316 DOM \u64cd\u4f5c\u6027\u80fd\uff1f<\/h3>\n<p><strong>A<\/strong>:<\/p>\n<p><strong>\u4f18\u5316\u6280\u5de7<\/strong>\uff1a<\/p>\n<ol>\n<li><strong>\u51cf\u5c11\u91cd\u6392\u548c\u91cd\u7ed8<\/strong>\uff1a<\/li>\n<\/ol>\n<pre><code class=\"language-javascript\">\/\/ \u274c \u4e0d\u597d\uff1a\u591a\u6b21\u4fee\u6539\nelem.style.width = '100px';\nelem.style.height = '100px';\nelem.style.background = 'red';\n\n\/\/ \u2705 \u597d\uff1a\u4e00\u6b21\u6027\u4fee\u6539\nelem.style.cssText = 'width: 100px; height: 100px; background: red;';\n<\/code><\/pre>\n<ol start=\"2\">\n<li><strong>\u6279\u91cf\u64cd\u4f5c<\/strong>\uff1a<\/li>\n<\/ol>\n<pre><code class=\"language-javascript\">\/\/ \u274c \u4e0d\u597d\uff1a\u591a\u6b21\u63d2\u5165\nfor (let i = 0; i &lt; 100; i++) {\n    document.body.appendChild(createElem());\n}\n\n\/\/ \u2705 \u597d\uff1a\u4f7f\u7528 DocumentFragment\nconst fragment = document.createDocumentFragment();\nfor (let i = 0; i &lt; 100; i++) {\n    fragment.appendChild(createElem());\n}\ndocument.body.appendChild(fragment);\n<\/code><\/pre>\n<ol start=\"3\">\n<li><strong>\u7f13\u5b58\u67e5\u8be2\u7ed3\u679c<\/strong>\uff1a<\/li>\n<\/ol>\n<pre><code class=\"language-javascript\">\/\/ \u274c \u4e0d\u597d\uff1a\u91cd\u590d\u67e5\u8be2\nfor (let i = 0; i &lt; 100; i++) {\n    document.getElementById('myId').style.opacity = i \/ 100;\n}\n\n\/\/ \u2705 \u597d\uff1a\u7f13\u5b58\u5143\u7d20\nconst elem = document.getElementById('myId');\nfor (let i = 0; i &lt; 100; i++) {\n    elem.style.opacity = i \/ 100;\n}\n<\/code><\/pre>\n<ol start=\"4\">\n<li><strong>\u4f7f\u7528\u4e8b\u4ef6\u59d4\u6258<\/strong>\uff1a<\/li>\n<\/ol>\n<pre><code class=\"language-javascript\">\/\/ \u274c \u4e0d\u597d\uff1a\u6bcf\u4e2a\u6309\u94ae\u90fd\u7ed1\u5b9a\nbuttons.forEach(btn =&gt; {\n    btn.addEventListener('click', handler);\n});\n\n\/\/ \u2705 \u597d\uff1a\u7236\u5143\u7d20\u59d4\u6258\ncontainer.addEventListener('click', (e) =&gt; {\n    if (e.target.matches('button')) {\n        handler(e);\n    }\n});\n<\/code><\/pre>\n<ol start=\"5\">\n<li><strong>\u907f\u514d layout thrashing<\/strong>\uff1a<\/li>\n<\/ol>\n<pre><code class=\"language-javascript\">\/\/ \u274c \u4e0d\u597d\uff1a\u8bfb\u5199\u4ea4\u9519\nelem1.style.height = elem1.offsetHeight + 10 + 'px';  \/\/ \u8bfb\nelem2.style.height = elem2.offsetHeight + 10 + 'px';  \/\/ \u8bfb\n\n\/\/ \u2705 \u597d\uff1a\u5148\u8bfb\u540e\u5199\nconst h1 = elem1.offsetHeight;  \/\/ \u8bfb\nconst h2 = elem2.offsetHeight;  \/\/ \u8bfb\nelem1.style.height = h1 + 10 + 'px';  \/\/ \u5199\nelem2.style.height = h2 + 10 + 'px';  \/\/ \u5199\n<\/code><\/pre>\n<hr>\n<p><strong>\u5b66\u4e60\u65f6\u95f4<\/strong>: 2026-03-09<br \/>\n<strong>\u96be\u5ea6<\/strong>: \u2b50\u2b50\u2b50\u2b50\u2606<br \/>\n<strong>\u9884\u8ba1\u7528\u65f6<\/strong>: 3-4 \u5c0f\u65f6<br \/>\n<strong>\u5173\u952e\u8bcd<\/strong>: DOM \u64cd\u4f5c, \u5143\u7d20\u67e5\u627e, \u5185\u5bb9\u4fee\u6539, \u4e8b\u4ef6\u5904\u7406, \u6027\u80fd\u4f18\u5316<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Day 10: DOM \u64cd\u4f5c\u57fa\u7840 \ud83c\udfaf \u5b66\u4e60\u76ee\u6807 \u7406\u89e3 DOM\uff08\u6587\u6863\u5bf9\u8c61\u6a21\u578b\uff09\u7684\u6982\u5ff5\u548c\u7ed3\u6784 \u638c\u63e1\u67e5\u627e\u5143\u7d20\u7684\u65b9\u6cd5  &#8230; <a title=\"Day-10-DOM\u64cd\u4f5c\u57fa\u7840\" class=\"read-more\" href=\"https:\/\/www.resilence.cn\/?p=241\" aria-label=\"\u7ee7\u7eed\u9605\u8bfbDay-10-DOM\u64cd\u4f5c\u57fa\u7840\">\u9605\u8bfb\u66f4\u591a<\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-241","post","type-post","status-publish","format-standard","hentry","category-studycoding"],"_links":{"self":[{"href":"https:\/\/www.resilence.cn\/index.php?rest_route=\/wp\/v2\/posts\/241","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.resilence.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.resilence.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.resilence.cn\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.resilence.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=241"}],"version-history":[{"count":1,"href":"https:\/\/www.resilence.cn\/index.php?rest_route=\/wp\/v2\/posts\/241\/revisions"}],"predecessor-version":[{"id":242,"href":"https:\/\/www.resilence.cn\/index.php?rest_route=\/wp\/v2\/posts\/241\/revisions\/242"}],"wp:attachment":[{"href":"https:\/\/www.resilence.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=241"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.resilence.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=241"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.resilence.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=241"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}