{"id":2104,"date":"2025-02-27T23:44:18","date_gmt":"2025-02-27T15:44:18","guid":{"rendered":"https:\/\/www.laixuexila.com\/?p=2104"},"modified":"2025-02-27T23:56:38","modified_gmt":"2025-02-27T15:56:38","slug":"javascript-html-dom-%e6%94%b9%e5%8f%98-html","status":"publish","type":"post","link":"https:\/\/www.laixuexila.com\/index.php\/2025\/02\/27\/javascript-html-dom-%e6%94%b9%e5%8f%98-html\/","title":{"rendered":"JavaScript HTML DOM &#8211; \u6539\u53d8 HTML"},"content":{"rendered":"\n<p>\u901a\u8fc7 JavaScript \u64cd\u4f5c HTML DOM\uff0c\u6211\u4eec\u53ef\u4ee5\u52a8\u6001\u5730\u6539\u53d8\u7f51\u9875\u7684\u7ed3\u6784\u548c\u5185\u5bb9\u3002\u8fd9\u610f\u5473\u7740\u6211\u4eec\u53ef\u4ee5\u5728\u6d4f\u89c8\u5668\u4e2d\u5b9e\u65f6\u4fee\u6539\u7f51\u9875\u7684 HTML \u5143\u7d20\uff0c\u5982\u6dfb\u52a0\u3001\u5220\u9664\u6216\u4fee\u6539\u5143\u7d20\u7684\u5185\u5bb9\u548c\u5c5e\u6027\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. \u6539\u53d8\u5143\u7d20\u7684\u5185\u5bb9<\/strong><\/h3>\n\n\n\n<p>\u53ef\u4ee5\u901a\u8fc7 <code>innerHTML<\/code> \u6216 <code>innerText<\/code> \u6765\u6539\u53d8 HTML \u5143\u7d20\u7684\u5185\u5bb9\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>innerHTML<\/strong>\uff1a\u53ef\u4ee5\u4fee\u6539\u5143\u7d20\u7684 HTML \u5185\u5bb9\uff0c\u5305\u62ec\u5b50\u5143\u7d20\u548c\u6807\u7b7e\u3002<\/li>\n\n\n\n<li><strong>innerText<\/strong>\uff1a\u53ea\u80fd\u4fee\u6539\u5143\u7d20\u7684\u6587\u672c\u5185\u5bb9\uff0c\u4e0d\u4f1a\u5f71\u54cd HTML \u6807\u7b7e\u3002<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>\u793a\u4f8b\uff1a<\/strong><\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n  &lt;meta charset=\"UTF-8\"&gt;\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n  &lt;title&gt;Change HTML Content&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;div id=\"content\"&gt;\n    &lt;h1&gt;Old Heading&lt;\/h1&gt;\n    &lt;p&gt;This is the old paragraph.&lt;\/p&gt;\n  &lt;\/div&gt;\n\n  &lt;script&gt;\n    \/\/ \u4f7f\u7528 innerHTML \u4fee\u6539\u5143\u7d20\u7684 HTML \u5185\u5bb9\n    document.getElementById('content').innerHTML = '&lt;h1&gt;New Heading&lt;\/h1&gt;&lt;p&gt;This is the new paragraph.&lt;\/p&gt;';\n\n    \/\/ \u4f7f\u7528 innerText \u4fee\u6539\u5143\u7d20\u7684\u6587\u672c\u5185\u5bb9\n    \/\/ document.getElementById('content').innerText = 'Only text content now!';\n  &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2. \u4fee\u6539\u5143\u7d20\u7684\u5c5e\u6027<\/strong><\/h3>\n\n\n\n<p>\u53ef\u4ee5\u4f7f\u7528 <code>setAttribute()<\/code> \u6765\u4fee\u6539\u5143\u7d20\u7684\u5c5e\u6027\uff0c\u5982 <code>id<\/code>, <code>class<\/code>, <code>src<\/code> \u7b49\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>setAttribute(attributeName, value)<\/strong>\uff1a\u8bbe\u7f6e\u6307\u5b9a\u5143\u7d20\u7684\u5c5e\u6027\u3002<\/li>\n\n\n\n<li><strong>getAttribute(attributeName)<\/strong>\uff1a\u83b7\u53d6\u6307\u5b9a\u5143\u7d20\u7684\u5c5e\u6027\u3002<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>\u793a\u4f8b\uff1a<\/strong><\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n  &lt;meta charset=\"UTF-8\"&gt;\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n  &lt;title&gt;Change HTML Attributes&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;img id=\"image\" src=\"old-image.jpg\" alt=\"Old Image\"&gt;\n\n  &lt;script&gt;\n    \/\/ \u4fee\u6539 img \u5143\u7d20\u7684 src \u5c5e\u6027\n    const img = document.getElementById('image');\n    img.setAttribute('src', 'new-image.jpg');\n\n    \/\/ \u83b7\u53d6\u5c5e\u6027\u503c\n    console.log(img.getAttribute('src'));  \/\/ \u8f93\u51fa: new-image.jpg\n  &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. \u6dfb\u52a0\u548c\u5220\u9664\u5143\u7d20<\/strong><\/h3>\n\n\n\n<p>\u53ef\u4ee5\u901a\u8fc7 JavaScript \u52a8\u6001\u5730\u521b\u5efa\u65b0\u7684 HTML \u5143\u7d20\uff0c\u5e76\u5c06\u5176\u6dfb\u52a0\u5230\u9875\u9762\u4e2d\uff0c\u4e5f\u53ef\u4ee5\u5220\u9664\u5df2\u6709\u7684\u5143\u7d20\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>createElement(tagName)<\/strong>\uff1a\u521b\u5efa\u4e00\u4e2a\u65b0\u7684 HTML \u5143\u7d20\u3002<\/li>\n\n\n\n<li><strong>appendChild(child)<\/strong>\uff1a\u5c06\u5b50\u5143\u7d20\u6dfb\u52a0\u5230\u7236\u5143\u7d20\u7684\u672b\u5c3e\u3002<\/li>\n\n\n\n<li><strong>removeChild(child)<\/strong>\uff1a\u4ece\u7236\u5143\u7d20\u4e2d\u5220\u9664\u6307\u5b9a\u7684\u5b50\u5143\u7d20\u3002<\/li>\n\n\n\n<li><strong>remove()<\/strong>\uff1a\u5220\u9664\u5f53\u524d\u5143\u7d20\u3002<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>\u793a\u4f8b\uff1a<\/strong><\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n  &lt;meta charset=\"UTF-8\"&gt;\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n  &lt;title&gt;Add and Remove Elements&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;div id=\"container\"&gt;\n    &lt;p&gt;Existing content&lt;\/p&gt;\n  &lt;\/div&gt;\n\n  &lt;script&gt;\n    \/\/ \u521b\u5efa\u65b0\u7684\u5143\u7d20\n    const newDiv = document.createElement('div');\n    newDiv.innerText = 'This is a new div element.';\n\n    \/\/ \u5c06\u65b0\u7684\u5143\u7d20\u6dfb\u52a0\u5230\u5bb9\u5668\u4e2d\n    const container = document.getElementById('container');\n    container.appendChild(newDiv);\n\n    \/\/ \u5220\u9664\u7b2c\u4e00\u4e2a\u5b50\u5143\u7d20\n    const firstChild = container.querySelector('p');\n    container.removeChild(firstChild);  \/\/ \u5220\u9664&lt;p&gt;Existing content&lt;\/p&gt;\n  &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>4. \u4fee\u6539\u5143\u7d20\u7684\u6837\u5f0f<\/strong><\/h3>\n\n\n\n<p>\u901a\u8fc7 <code>style<\/code> \u5c5e\u6027\uff0c\u6211\u4eec\u53ef\u4ee5\u4fee\u6539 HTML \u5143\u7d20\u7684\u884c\u5185\u6837\u5f0f\uff0c\u5982\u989c\u8272\u3001\u5b57\u4f53\u5927\u5c0f\u3001\u80cc\u666f\u7b49\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>\u793a\u4f8b\uff1a<\/strong><\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n  &lt;meta charset=\"UTF-8\"&gt;\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n  &lt;title&gt;Change Element Styles&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;h1 id=\"heading\"&gt;Change My Style&lt;\/h1&gt;\n\n  &lt;script&gt;\n    \/\/ \u4fee\u6539\u5143\u7d20\u7684\u6837\u5f0f\n    const heading = document.getElementById('heading');\n    heading.style.color = 'red';  \/\/ \u4fee\u6539\u6587\u672c\u989c\u8272\n    heading.style.fontSize = '30px';  \/\/ \u4fee\u6539\u5b57\u4f53\u5927\u5c0f\n    heading.style.backgroundColor = 'yellow';  \/\/ \u4fee\u6539\u80cc\u666f\u989c\u8272\n  &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>5. \u5728\u9875\u9762\u4e2d\u63d2\u5165 HTML<\/strong><\/h3>\n\n\n\n<p>\u6709\u65f6\u9700\u8981\u5c06 HTML \u63d2\u5165\u5230\u73b0\u6709\u7684 DOM \u5143\u7d20\u4e4b\u524d\u3001\u4e4b\u540e\u6216\u5185\u90e8\u3002\u4f8b\u5982\uff0c\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528 <code>insertAdjacentHTML()<\/code> \u63d2\u5165\u65b0\u7684 HTML \u4ee3\u7801\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>\u793a\u4f8b\uff1a<\/strong><\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n  &lt;meta charset=\"UTF-8\"&gt;\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n  &lt;title&gt;Insert HTML&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;div id=\"container\"&gt;\n    &lt;p&gt;Old Paragraph&lt;\/p&gt;\n  &lt;\/div&gt;\n\n  &lt;script&gt;\n    \/\/ \u63d2\u5165\u65b0\u7684 HTML \u5143\u7d20\u5230 div \u4e2d\n    const container = document.getElementById('container');\n    container.insertAdjacentHTML('beforeend', '&lt;p&gt;New Paragraph Added&lt;\/p&gt;');  \/\/ \u5728\u5bb9\u5668\u7684\u672b\u5c3e\u6dfb\u52a0\n  &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>6. \u66ff\u6362\u5143\u7d20\u7684\u5185\u5bb9<\/strong><\/h3>\n\n\n\n<p>\u901a\u8fc7 <code>replaceChild()<\/code> \u65b9\u6cd5\uff0c\u4f60\u53ef\u4ee5\u5c06\u4e00\u4e2a\u5143\u7d20\u66ff\u6362\u4e3a\u53e6\u4e00\u4e2a\u5143\u7d20\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>\u793a\u4f8b\uff1a<\/strong><\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n  &lt;meta charset=\"UTF-8\"&gt;\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n  &lt;title&gt;Replace Element&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;div id=\"container\"&gt;\n    &lt;p id=\"oldPara\"&gt;This is the old paragraph.&lt;\/p&gt;\n  &lt;\/div&gt;\n\n  &lt;script&gt;\n    \/\/ \u521b\u5efa\u65b0\u7684\u5143\u7d20\n    const newPara = document.createElement('p');\n    newPara.innerText = 'This is the new paragraph.';\n\n    \/\/ \u66ff\u6362\u65e7\u7684\u5143\u7d20\n    const container = document.getElementById('container');\n    const oldPara = document.getElementById('oldPara');\n    container.replaceChild(newPara, oldPara);\n  &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u603b\u7ed3<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>JavaScript DOM \u63d0\u4f9b\u4e86\u5bf9\u7f51\u9875\u5185\u5bb9\u7684\u52a8\u6001\u64cd\u4f5c\u80fd\u529b\uff0c\u5141\u8bb8\u4f60\u4fee\u6539 HTML \u5143\u7d20\u7684\u5185\u5bb9\u3001\u6837\u5f0f\u3001\u5c5e\u6027\u4ee5\u53ca\u7ed3\u6784\u3002<\/li>\n\n\n\n<li>\u901a\u8fc7 <code>innerHTML<\/code>, <code>innerText<\/code>, <code>setAttribute()<\/code>, <code>createElement()<\/code>, <code>appendChild()<\/code>, <code>removeChild()<\/code> \u7b49\u65b9\u6cd5\uff0c\u6211\u4eec\u53ef\u4ee5\u7075\u6d3b\u5730\u6539\u53d8\u7f51\u9875\u5185\u5bb9\u3002<\/li>\n\n\n\n<li>\u901a\u8fc7\u8fd9\u4e9b\u65b9\u6cd5\uff0c\u53ef\u4ee5\u4f7f\u7f51\u9875\u5185\u5bb9\u54cd\u5e94\u7528\u6237\u7684\u4ea4\u4e92\uff0c\u63d0\u5347\u7528\u6237\u4f53\u9a8c\u3002<\/li>\n<\/ul>\n\n\n\n<p>\u66f4\u591a\u8be6\u7ec6\u5185\u5bb9\u8bf7\u5173\u6ce8\u5176\u4ed6\u76f8\u5173\u6587\u7ae0\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u901a\u8fc7 JavaScript \u64cd\u4f5c HTML DOM\uff0c\u6211\u4eec\u53ef\u4ee5\u52a8\u6001\u5730\u6539\u53d8\u7f51\u9875\u7684\u7ed3\u6784\u548c\u5185\u5bb9\u3002\u8fd9\u610f\u5473\u7740\u6211\u4eec\u53ef\u4ee5\u5728\u6d4f\u89c8 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[46],"tags":[],"class_list":["post-2104","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/posts\/2104","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/comments?post=2104"}],"version-history":[{"count":2,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/posts\/2104\/revisions"}],"predecessor-version":[{"id":2121,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/posts\/2104\/revisions\/2121"}],"wp:attachment":[{"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/media?parent=2104"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/categories?post=2104"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/tags?post=2104"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}