{"id":2102,"date":"2025-02-27T23:43:16","date_gmt":"2025-02-27T15:43:16","guid":{"rendered":"https:\/\/www.laixuexila.com\/?p=2102"},"modified":"2025-02-27T23:56:56","modified_gmt":"2025-02-27T15:56:56","slug":"javascript-html-dom-%e6%96%87%e6%a1%a3%e5%af%b9%e8%b1%a1%e6%a8%a1%e5%9e%8b","status":"publish","type":"post","link":"https:\/\/www.laixuexila.com\/index.php\/2025\/02\/27\/javascript-html-dom-%e6%96%87%e6%a1%a3%e5%af%b9%e8%b1%a1%e6%a8%a1%e5%9e%8b\/","title":{"rendered":"JavaScript HTML DOM (\u6587\u6863\u5bf9\u8c61\u6a21\u578b)"},"content":{"rendered":"\n<p>HTML DOM\uff08Document Object Model\uff09\u662f\u6d4f\u89c8\u5668\u7684 JavaScript \u73af\u5883\u4e2d\u7528\u4e8e\u8bbf\u95ee\u548c\u64cd\u4f5c HTML \u6587\u6863\u7684\u63a5\u53e3\u3002\u5b83\u5c06\u7f51\u9875\u7ed3\u6784\u5316\u4e3a\u4e00\u4e2a\u6811\u5f62\u7ed3\u6784\uff0c\u53ef\u4ee5\u901a\u8fc7 JavaScript \u5bf9\u7f51\u9875\u8fdb\u884c\u52a8\u6001\u7684\u64cd\u4f5c\uff0c\u5982\u4fee\u6539\u5185\u5bb9\u3001\u6837\u5f0f\u3001\u7ed3\u6784\u7b49\u3002<\/p>\n\n\n\n<p>DOM \u662f\u7f51\u9875\u7684\u7f16\u7a0b\u63a5\u53e3\uff0c\u6240\u6709 HTML \u5143\u7d20\u90fd\u88ab\u8868\u793a\u4e3a DOM \u6811\u4e2d\u7684\u8282\u70b9\u3002\u901a\u8fc7 JavaScript \u53ef\u4ee5\u8bbf\u95ee\u8fd9\u4e9b\u8282\u70b9\uff0c\u5e76\u8fdb\u884c\u589e\u3001\u5220\u3001\u6539\u3001\u67e5\u7b49\u64cd\u4f5c\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. DOM \u6811\u7ed3\u6784<\/strong><\/h3>\n\n\n\n<p>DOM \u5c06\u7f51\u9875\u7684\u6bcf\u4e2a HTML \u5143\u7d20\u8868\u793a\u4e3a\u4e00\u4e2a\u5bf9\u8c61\uff0c\u5f62\u6210\u4e00\u4e2a\u6811\u5f62\u7ed3\u6784\uff0c\u79f0\u4e3a DOM \u6811\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u6587\u6863\u8282\u70b9\uff08Document\uff09<\/strong>\uff1a\u6700\u9876\u5c42\u7684\u8282\u70b9\uff0c\u4ee3\u8868\u6574\u4e2a\u7f51\u9875\u3002<\/li>\n\n\n\n<li><strong>\u5143\u7d20\u8282\u70b9\uff08Element\uff09<\/strong>\uff1a\u4ee3\u8868 HTML \u6807\u7b7e\uff0c\u4f8b\u5982 <code>&lt;div&gt;<\/code>, <code>&lt;p&gt;<\/code>, <code>&lt;h1&gt;<\/code> \u7b49\u3002<\/li>\n\n\n\n<li><strong>\u6587\u672c\u8282\u70b9\uff08Text\uff09<\/strong>\uff1a\u4ee3\u8868\u5143\u7d20\u4e2d\u7684\u6587\u672c\u5185\u5bb9\u3002<\/li>\n\n\n\n<li><strong>\u5c5e\u6027\u8282\u70b9\uff08Attribute\uff09<\/strong>\uff1a\u4ee3\u8868\u5143\u7d20\u7684\u5c5e\u6027\uff0c\u5982 <code>id<\/code>, <code>class<\/code>, <code>href<\/code> \u7b49\u3002<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2. \u83b7\u53d6 DOM \u5143\u7d20<\/strong><\/h3>\n\n\n\n<p>JavaScript \u63d0\u4f9b\u4e86\u591a\u79cd\u65b9\u6cd5\u6765\u8bbf\u95ee DOM \u4e2d\u7684\u5143\u7d20\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>\u5e38\u7528\u83b7\u53d6\u5143\u7d20\u7684\u65b9\u6cd5\uff1a<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>getElementById(id)<\/code>\uff1a\u6839\u636e\u5143\u7d20\u7684 <code>id<\/code> \u83b7\u53d6\u5143\u7d20\u3002<\/li>\n\n\n\n<li><code>getElementsByClassName(className)<\/code>\uff1a\u6839\u636e\u7c7b\u540d\u83b7\u53d6\u5143\u7d20\u3002<\/li>\n\n\n\n<li><code>getElementsByTagName(tagName)<\/code>\uff1a\u6839\u636e\u6807\u7b7e\u540d\u83b7\u53d6\u5143\u7d20\u3002<\/li>\n\n\n\n<li><code>querySelector(selector)<\/code>\uff1a\u8fd4\u56de\u6587\u6863\u4e2d\u5339\u914d\u6307\u5b9a CSS \u9009\u62e9\u5668\u7684\u7b2c\u4e00\u4e2a\u5143\u7d20\u3002<\/li>\n\n\n\n<li><code>querySelectorAll(selector)<\/code>\uff1a\u8fd4\u56de\u6587\u6863\u4e2d\u6240\u6709\u5339\u914d\u6307\u5b9a CSS \u9009\u62e9\u5668\u7684\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;DOM Example&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;h1 id=\"header\"&gt;Hello, World!&lt;\/h1&gt;\n  &lt;p class=\"text\"&gt;This is a paragraph.&lt;\/p&gt;\n  &lt;div class=\"content\"&gt;This is a div element.&lt;\/div&gt;\n\n  &lt;script&gt;\n    \/\/ \u4f7f\u7528 getElementById \u83b7\u53d6\u5143\u7d20\n    const header = document.getElementById('header');\n    console.log(header.innerText);  \/\/ \u8f93\u51fa: Hello, World!\n\n    \/\/ \u4f7f\u7528 getElementsByClassName \u83b7\u53d6\u5143\u7d20\n    const paragraphs = document.getElementsByClassName('text');\n    console.log(paragraphs&#91;0].innerText);  \/\/ \u8f93\u51fa: This is a paragraph.\n\n    \/\/ \u4f7f\u7528 querySelector \u83b7\u53d6\u5143\u7d20\n    const div = document.querySelector('.content');\n    console.log(div.innerText);  \/\/ \u8f93\u51fa: This is a div element.\n\n    \/\/ \u4f7f\u7528 querySelectorAll \u83b7\u53d6\u6240\u6709\u5339\u914d\u7684\u5143\u7d20\n    const allParagraphs = document.querySelectorAll('p');\n    console.log(allParagraphs.length);  \/\/ \u8f93\u51fa: 1\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. \u64cd\u4f5c DOM \u5143\u7d20<\/strong><\/h3>\n\n\n\n<p>\u83b7\u53d6\u5230 DOM \u5143\u7d20\u540e\uff0c\u4f60\u53ef\u4ee5\u4f7f\u7528 JavaScript \u6765\u64cd\u4f5c\u8fd9\u4e9b\u5143\u7d20\uff0c\u5982\u4fee\u6539\u5176\u5185\u5bb9\u3001\u6837\u5f0f\u3001\u5c5e\u6027\u7b49\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>\u4fee\u6539\u5185\u5bb9\uff1a<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>innerHTML<\/code>\uff1a\u83b7\u53d6\u6216\u8bbe\u7f6e\u5143\u7d20\u7684 HTML \u5185\u5bb9\u3002<\/li>\n\n\n\n<li><code>innerText<\/code>\uff1a\u83b7\u53d6\u6216\u8bbe\u7f6e\u5143\u7d20\u7684\u6587\u672c\u5185\u5bb9\u3002<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>\u4fee\u6539\u6837\u5f0f\uff1a<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>style<\/code>\uff1a\u901a\u8fc7 JavaScript \u4fee\u6539\u5143\u7d20\u7684\u884c\u5185\u6837\u5f0f\u3002<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>\u4fee\u6539\u5c5e\u6027\uff1a<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>setAttribute(attributeName, value)<\/code>\uff1a\u8bbe\u7f6e\u5143\u7d20\u7684\u5c5e\u6027\u3002<\/li>\n\n\n\n<li><code>getAttribute(attributeName)<\/code>\uff1a\u83b7\u53d6\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;DOM Manipulation Example&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;h1 id=\"header\"&gt;Hello, World!&lt;\/h1&gt;\n  &lt;p class=\"text\"&gt;This is a paragraph.&lt;\/p&gt;\n\n  &lt;script&gt;\n    \/\/ \u4fee\u6539\u5143\u7d20\u5185\u5bb9\n    const header = document.getElementById('header');\n    header.innerText = \"New Heading!\";  \/\/ \u4fee\u6539\u6587\u672c\u5185\u5bb9\n\n    \/\/ \u4fee\u6539\u5143\u7d20\u7684\u6837\u5f0f\n    header.style.color = 'blue';  \/\/ \u8bbe\u7f6e\u6587\u672c\u989c\u8272\u4e3a\u84dd\u8272\n\n    \/\/ \u4fee\u6539\u5143\u7d20\u5c5e\u6027\n    const paragraph = document.querySelector('.text');\n    paragraph.setAttribute('class', 'newClass');  \/\/ \u4fee\u6539\u7c7b\u540d\n    console.log(paragraph.getAttribute('class'));  \/\/ \u8f93\u51fa: newClass\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. \u521b\u5efa\u548c\u5220\u9664\u5143\u7d20<\/strong><\/h3>\n\n\n\n<p>\u4f60\u53ef\u4ee5\u901a\u8fc7 JavaScript \u52a8\u6001\u5730\u521b\u5efa\u65b0\u7684 HTML \u5143\u7d20\uff0c\u6216\u8005\u5220\u9664\u73b0\u6709\u7684\u5143\u7d20\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>\u521b\u5efa\u5143\u7d20\uff1a<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>createElement(tagName)<\/code>\uff1a\u521b\u5efa\u4e00\u4e2a\u65b0\u7684 HTML \u5143\u7d20\u3002<\/li>\n\n\n\n<li><code>createTextNode(text)<\/code>\uff1a\u521b\u5efa\u4e00\u4e2a\u65b0\u7684\u6587\u672c\u8282\u70b9\u3002<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>\u5220\u9664\u5143\u7d20\uff1a<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>removeChild(child)<\/code>\uff1a\u4ece\u7236\u5143\u7d20\u4e2d\u5220\u9664\u5b50\u5143\u7d20\u3002<\/li>\n\n\n\n<li><code>remove()<\/code>\uff1a\u5220\u9664\u5f53\u524d\u5143\u7d20\u672c\u8eab\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;Create and Remove DOM Elements&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;div id=\"container\"&gt;\n    &lt;h2&gt;Old Header&lt;\/h2&gt;\n  &lt;\/div&gt;\n\n  &lt;script&gt;\n    \/\/ \u521b\u5efa\u65b0\u7684\u5143\u7d20\n    const newHeading = document.createElement('h2');\n    const textNode = document.createTextNode('New Header');\n    newHeading.appendChild(textNode);\n\n    \/\/ \u5c06\u65b0\u7684\u5143\u7d20\u6dfb\u52a0\u5230 DOM \u4e2d\n    const container = document.getElementById('container');\n    container.appendChild(newHeading);  \/\/ \u5c06\u65b0\u5143\u7d20\u6dfb\u52a0\u5230 container \u4e2d\n\n    \/\/ \u5220\u9664\u65e7\u7684\u5143\u7d20\n    const oldHeading = container.querySelector('h2');\n    container.removeChild(oldHeading);  \/\/ \u5220\u9664\u65e7\u7684 header\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. \u4e8b\u4ef6\u5904\u7406<\/strong><\/h3>\n\n\n\n<p>\u4f60\u53ef\u4ee5\u901a\u8fc7 JavaScript \u4e3a DOM \u5143\u7d20\u6dfb\u52a0\u4e8b\u4ef6\u76d1\u542c\u5668\uff0c\u4ece\u800c\u54cd\u5e94\u7528\u6237\u7684\u4ea4\u4e92\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>\u5e38\u7528\u7684\u4e8b\u4ef6\u65b9\u6cd5\uff1a<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>addEventListener(type, listener)<\/code>\uff1a\u4e3a\u5143\u7d20\u6dfb\u52a0\u4e8b\u4ef6\u76d1\u542c\u5668\u3002<\/li>\n\n\n\n<li><code>removeEventListener(type, listener)<\/code>\uff1a\u79fb\u9664\u4e8b\u4ef6\u76d1\u542c\u5668\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;Event Handling Example&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;button id=\"clickButton\"&gt;Click Me&lt;\/button&gt;\n\n  &lt;script&gt;\n    const button = document.getElementById('clickButton');\n\n    \/\/ \u6dfb\u52a0\u70b9\u51fb\u4e8b\u4ef6\u76d1\u542c\u5668\n    button.addEventListener('click', function() {\n      alert(\"Button clicked!\");\n    });\n\n    \/\/ \u79fb\u9664\u4e8b\u4ef6\u76d1\u542c\u5668\n    \/\/ button.removeEventListener('click', function() { alert(\"Button clicked!\"); });\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. DOM \u4e8b\u4ef6\u7c7b\u578b<\/strong><\/h3>\n\n\n\n<p>\u5e38\u89c1\u7684 DOM \u4e8b\u4ef6\u7c7b\u578b\u6709\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u9f20\u6807\u4e8b\u4ef6<\/strong>\uff1a<code>click<\/code>, <code>mouseover<\/code>, <code>mouseout<\/code>, <code>mousedown<\/code>, <code>mouseup<\/code> \u7b49\u3002<\/li>\n\n\n\n<li><strong>\u952e\u76d8\u4e8b\u4ef6<\/strong>\uff1a<code>keydown<\/code>, <code>keyup<\/code>, <code>keypress<\/code> \u7b49\u3002<\/li>\n\n\n\n<li><strong>\u8868\u5355\u4e8b\u4ef6<\/strong>\uff1a<code>submit<\/code>, <code>change<\/code>, <code>focus<\/code>, <code>blur<\/code> \u7b49\u3002<\/li>\n<\/ul>\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><strong>DOM<\/strong>\uff1aDocument Object Model\uff0c\u662f HTML \u548c XML \u6587\u6863\u7684\u7f16\u7a0b\u63a5\u53e3\uff0c\u5141\u8bb8\u811a\u672c\u52a8\u6001\u5730\u8bbf\u95ee\u548c\u4fee\u6539\u7f51\u9875\u5185\u5bb9\u3002<\/li>\n\n\n\n<li>JavaScript \u53ef\u4ee5\u901a\u8fc7 DOM \u63d0\u4f9b\u7684 API \u6765 <strong>\u83b7\u53d6\u3001\u64cd\u4f5c\u3001\u4fee\u6539 HTML \u5143\u7d20<\/strong>\u3002<\/li>\n\n\n\n<li>\u5e38\u7528\u7684 DOM \u65b9\u6cd5\u5305\u62ec <code>getElementById()<\/code>, <code>querySelector()<\/code>, <code>createElement()<\/code>\uff0c\u4ee5\u53ca\u4e8b\u4ef6\u65b9\u6cd5\u5982 <code>addEventListener()<\/code>\u3002<\/li>\n\n\n\n<li>JavaScript \u4f7f\u5f97 HTML \u9875\u9762\u66f4\u52a0\u52a8\u6001\uff0c\u53ef\u4ee5\u54cd\u5e94\u7528\u6237\u7684\u4ea4\u4e92\uff0c\u4fee\u6539\u7f51\u9875\u7684\u7ed3\u6784\u3001\u6837\u5f0f\u548c\u5185\u5bb9\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>HTML DOM\uff08Document Object Model\uff09\u662f\u6d4f\u89c8\u5668\u7684 JavaScript \u73af\u5883\u4e2d\u7528\u4e8e\u8bbf\u95ee [&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-2102","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/posts\/2102","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=2102"}],"version-history":[{"count":2,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/posts\/2102\/revisions"}],"predecessor-version":[{"id":2122,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/posts\/2102\/revisions\/2122"}],"wp:attachment":[{"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/media?parent=2102"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/categories?post=2102"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/tags?post=2102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}