{"id":476958,"date":"2023-08-09T09:05:36","date_gmt":"2023-08-09T09:05:36","guid":{"rendered":""},"modified":"2023-09-05T11:13:45","modified_gmt":"2023-09-05T11:13:45","slug":"document-object-model-dom","status":"publish","type":"wiki","link":"https:\/\/oneproxy.pro\/cn\/wiki\/document-object-model-dom\/","title":{"rendered":"\u6587\u6863\u5bf9\u8c61\u6a21\u578b (DOM)"},"content":{"rendered":"<p>\u6587\u6863\u5bf9\u8c61\u6a21\u578b (DOM) \u662f\u4e00\u4e2a\u91cd\u8981\u7684\u63a5\u53e3\uff0c\u5141\u8bb8\u5f00\u53d1\u4eba\u5458\u4f7f\u7528 JavaScript \u7b49\u811a\u672c\u8bed\u8a00\u4e0e Web \u6587\u6863\u8fdb\u884c\u4ea4\u4e92\u3002\u5b83\u5c06 Web \u6587\u6863\uff08\u4f8b\u5982 HTML \u6216 XML\uff09\u5185\u5bb9\u7684\u7ed3\u6784\u5316\u3001\u5206\u5c42\u548c\u903b\u8f91\u89c6\u56fe\u8868\u793a\u4e3a\u6811\u72b6\u7ed3\u6784\u3002<\/p>\n<h2>\u6587\u6863\u5bf9\u8c61\u6a21\u578b (DOM) \u7684\u8d77\u6e90<\/h2>\n<p>DOM \u7684\u6982\u5ff5\u9996\u6b21\u51fa\u73b0\u4e8e 20 \u4e16\u7eaa 90 \u5e74\u4ee3\u4e2d\u540e\u671f\uff0c\u56e0\u4e3a\u9700\u8981\u5141\u8bb8\u66f4\u591a\u7684\u4ea4\u4e92\u5f0f Web \u5185\u5bb9\u3002\u968f\u7740\u52a8\u6001\u7f51\u7ad9\u7684\u51fa\u73b0\u548c JavaScript \u7684\u5e7f\u6cdb\u4f7f\u7528\uff0c\u9700\u8981\u4e00\u79cd\u5141\u8bb8\u811a\u672c\u66f4\u6539\u6587\u6863\u7ed3\u6784\u3001\u6837\u5f0f\u548c\u5185\u5bb9\u7684\u6a21\u578b\u3002\u4e07\u7ef4\u7f51\u8054\u76df (W3C) \u627f\u62c5\u4e86\u4e3a\u6b64\u76ee\u7684\u521b\u5efa\u6807\u51c6\u5316 API \u7684\u4efb\u52a1\uff0c\u4ece\u800c\u5f00\u53d1\u4e86 DOM\u3002<\/p>\n<p>\u7b2c\u4e00\u4e2a\u6807\u51c6 DOM \u7ea7\u522b\uff0c\u5373 DOM Level 1\uff0c\u7531 W3C \u4e8e 1998 \u5e74\u5f15\u5165\u3002\u5b83\u4e3a\u6574\u4e2a HTML \u6216 XML \u6587\u6863\u63d0\u4f9b\u4e86\u5168\u9762\u7684\u6a21\u578b\uff0c\u5305\u62ec\u66f4\u6539\u6587\u6863\u4efb\u4f55\u90e8\u5206\u7684\u65b9\u6cd5\u3002<\/p>\n<h2>\u6269\u5c55\u6587\u6863\u5bf9\u8c61\u6a21\u578b (DOM)<\/h2>\n<p>DOM \u672c\u8d28\u4e0a\u662f\u4e00\u4e2a\u5e73\u53f0\u548c\u8bed\u8a00\u4e2d\u7acb\u7684\u63a5\u53e3\uff0c\u5141\u8bb8\u7a0b\u5e8f\u548c\u811a\u672c\u52a8\u6001\u8bbf\u95ee\u548c\u66f4\u65b0\u6587\u6863\u7684\u5185\u5bb9\u3001\u7ed3\u6784\u548c\u6837\u5f0f\u3002<\/p>\n<p>DOM \u88ab\u7ec4\u7ec7\u6210\u8282\u70b9\u5c42\u6b21\u7ed3\u6784\uff0c\u6bcf\u4e2a\u8282\u70b9\u4ee3\u8868\u6587\u6863\u7684\u4e00\u90e8\u5206\uff0c\u4f8b\u5982\u5143\u7d20\u3001\u5c5e\u6027\u548c\u6587\u672c\u3002\u8fd9\u79cd\u903b\u8f91\u6811\u7ed3\u6784\u4f7f\u5f97\u5bfc\u822a\u548c\u64cd\u4f5c\u6587\u6863\u5185\u5bb9\u53d8\u5f97\u5bb9\u6613\u3002<\/p>\n<p>Web \u6587\u6863\u88ab\u5efa\u6a21\u4e3a\u5bf9\u8c61\u6811\uff0c\u6240\u6709\u5bf9\u8c61\u90fd\u5177\u6709\u5c5e\u6027\u548c\u65b9\u6cd5\uff0c\u5e76\u4e14\u53ef\u4ee5\u5305\u542b\u5176\u4ed6\u5bf9\u8c61\u3002\u4f8b\u5982\uff0cHTML \u6587\u6863\u88ab\u8f6c\u6362\u4e3a\u8868\u793a\u201cbody\u201d\u3001\u201cdiv\u201d\u3001\u201cspan\u201d\u548c\u201cp\u201d\u7b49\u5143\u7d20\u53ca\u5176\u5c5e\u6027\u548c\u6587\u672c\u5185\u5bb9\u7684\u5bf9\u8c61\u3002<\/p>\n<h2>\u6587\u6863\u5bf9\u8c61\u6a21\u578b (DOM) \u7684\u5de5\u4f5c\u539f\u7406<\/h2>\n<p>DOM \u7684\u5185\u90e8\u7ed3\u6784\u88ab\u7ec4\u7ec7\u4e3a\u8282\u70b9\u6811\u3002\u6700\u9876\u5c42\u7684\u8282\u70b9\u662f <code data-no-translation=\"\">Document<\/code> \u8282\u70b9\uff0c\u4ee3\u8868\u6574\u4e2a\u6587\u6863\u3002\u5728\u6b64\u4e4b\u4e0b\uff0c <code data-no-translation=\"\">Element<\/code> \u8282\u70b9\u5bf9\u5e94\u4e8e\u9875\u9762\u4e2d\u7684 HTML \u5143\u7d20\uff0c <code data-no-translation=\"\">Attribute<\/code> \u8282\u70b9\u4fdd\u5b58\u5143\u7d20\u7684\u5c5e\u6027\uff0c\u5e76\u4e14 <code data-no-translation=\"\">Text<\/code> \u8282\u70b9\u4fdd\u5b58\u5143\u7d20\u7684\u6587\u672c\u5185\u5bb9\u3002<\/p>\n<p>\u8fd9\u79cd\u5c42\u6b21\u7ed3\u6784\u5141\u8bb8\u5f00\u53d1\u4eba\u5458\u5bfc\u822a\u6587\u6863\u6811\u5e76\u4f7f\u7528 API \u65b9\u6cd5\u6765\u9009\u62e9\u3001\u521b\u5efa\u3001\u4fee\u6539\u6216\u5220\u9664\u8282\u70b9\u3002<\/p>\n<p>\u4e0b\u9762\u7684\u793a\u4f8b\u5c55\u793a\u4e86 HTML \u6587\u6863\u5982\u4f55\u5448\u73b0\u4e3a DOM \u6811\uff1a<\/p>\n<pre><div class=\"bg-black rounded-md mb-4\"><div class=\"flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md\"><span>\u6570\u5b66<\/span><button class=\"flex ml-auto gap-2\"><svg stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" viewbox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"h-4 w-4\" height=\"1em\" width=\"1em\" ><path d=\"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2\"><\/path><rect x=\"8\" y=\"2\" width=\"8\" height=\"4\" rx=\"1\" ry=\"1\"><\/rect><\/svg>\u590d\u5236\u4ee3\u7801<\/button><\/div><div class=\"p-4 overflow-y-auto\"><code class=\"!whitespace-pre hljs language-mathematica\" data-no-translation=\"\"><span class=\"hljs-variable\">Document<\/span>\n    \u21b3 <span class=\"hljs-built_in\">Element<\/span><span class=\"hljs-operator\">:<\/span> <span class=\"hljs-variable\">html<\/span>\n        \u21b3 <span class=\"hljs-built_in\">Element<\/span><span class=\"hljs-operator\">:<\/span> <span class=\"hljs-variable\">head<\/span>\n            \u21b3 <span class=\"hljs-built_in\">Element<\/span><span class=\"hljs-operator\">:<\/span> <span class=\"hljs-variable\">title<\/span>\n                \u21b3 <span class=\"hljs-built_in\">Text<\/span><span class=\"hljs-operator\">:<\/span> <span class=\"hljs-string\">\"Title of the Document\"<\/span>\n        \u21b3 <span class=\"hljs-built_in\">Element<\/span><span class=\"hljs-operator\">:<\/span> <span class=\"hljs-variable\">body<\/span>\n            \u21b3 <span class=\"hljs-built_in\">Element<\/span><span class=\"hljs-operator\">:<\/span> <span class=\"hljs-variable\">h1<\/span>\n                \u21b3 <span class=\"hljs-built_in\">Text<\/span><span class=\"hljs-operator\">:<\/span> <span class=\"hljs-string\">\"Hello, world!\"<\/span>\n            \u21b3 <span class=\"hljs-built_in\">Element<\/span><span class=\"hljs-operator\">:<\/span> <span class=\"hljs-variable\">p<\/span>\n                \u21b3 <span class=\"hljs-built_in\">Text<\/span><span class=\"hljs-operator\">:<\/span> <span class=\"hljs-string\">\"This is a paragraph.\"<\/span>\n<\/code><\/div><\/div><\/pre>\n<h2>\u6587\u6863\u5bf9\u8c61\u6a21\u578b (DOM) \u7684\u4e3b\u8981\u7279\u6027<\/h2>\n<ol>\n<li>\n<p><strong>\u6811\u7ed3\u6784<\/strong>\uff1aDOM \u4ee5\u903b\u8f91\u6811\u7ed3\u6784\u8868\u793a\u6587\u6863\uff0c\u8fd9\u4f7f\u5f97\u5bfc\u822a\u3001\u9009\u62e9\u548c\u64cd\u4f5c\u53d8\u5f97\u7b80\u5355\u76f4\u89c2\u3002<\/p>\n<\/li>\n<li>\n<p><strong>\u8bed\u8a00\u4e2d\u7acb<\/strong>\uff1aDOM \u4e0d\u4f9d\u8d56\u4e8e\u4efb\u4f55\u7279\u5b9a\u7684\u7f16\u7a0b\u8bed\u8a00\u3002\u5b83\u662f\u7528\u4e8e\u8868\u793a HTML\u3001XML \u548c\u5176\u4ed6\u6587\u6863\u7c7b\u578b\u4e2d\u7684\u5bf9\u8c61\u5e76\u4e0e\u4e4b\u4ea4\u4e92\u7684\u7ea6\u5b9a\u3002<\/p>\n<\/li>\n<li>\n<p><strong>\u52a8\u6001\u8bbf\u95ee\u548c\u66f4\u65b0<\/strong>\uff1aDOM \u5141\u8bb8\u7a0b\u5e8f\u52a8\u6001\u8bbf\u95ee\u548c\u66f4\u65b0\u6587\u6863\u7684\u5185\u5bb9\u3001\u7ed3\u6784\u548c\u6837\u5f0f\u3002<\/p>\n<\/li>\n<li>\n<p><strong>\u6807\u51c6\u5316<\/strong>\uff1aDOM \u662f W3C \u6807\u51c6\uff0c\u786e\u4fdd\u5176\u5728\u4e0d\u540c\u6d4f\u89c8\u5668\u548c\u5e73\u53f0\u4e0a\u7684\u5e7f\u6cdb\u63a5\u53d7\u548c\u517c\u5bb9\u6027\u3002<\/p>\n<\/li>\n<\/ol>\n<h2>\u6587\u6863\u5bf9\u8c61\u6a21\u578b (DOM) \u7684\u7c7b\u578b<\/h2>\n<p>DOM \u89c4\u8303\u5206\u4e3a\u591a\u4e2a\u201c\u7ea7\u522b\u201d\u548c\u201c\u6a21\u5757\u201d\uff0c\u6bcf\u4e2a\u7ea7\u522b\u90fd\u5728\u524d\u4e00\u4e2a\u7ea7\u522b\u7684\u57fa\u7840\u4e0a\u6dfb\u52a0\u4e86\u7279\u6027\u548c\u529f\u80fd\u3002\u4e3b\u8981\u7c7b\u578b\u5305\u62ec\uff1a<\/p>\n<table>\n<thead>\n<tr>\n<th>DOM \u7ea7\u522b\/\u7c7b\u578b<\/th>\n<th>\u7b80\u8981\u63cf\u8ff0;\u7b80\u4ecb<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>DOM \u7ea7\u522b 1<\/strong><\/td>\n<td>\u4e3a\u6574\u4e2a HTML \u6216 XML \u6587\u6863\u63d0\u4f9b\u4e86\u57fa\u672c\u6a21\u578b\uff0c\u5305\u62ec\u64cd\u4f5c\u5143\u7d20\u53ca\u5176\u5c5e\u6027\u7684\u65b9\u6cd5\u3002<\/td>\n<\/tr>\n<tr>\n<td><strong>DOM \u7ea7\u522b 2<\/strong><\/td>\n<td>\u5f15\u5165\u4e86\u547d\u540d\u7a7a\u95f4\u5904\u7406\u3001\u652f\u6301 CSS \u7684\u6837\u5f0f\u6a21\u5757\u4ee5\u53ca\u51e0\u4e2a\u5904\u7406\u8868\u3001\u4e8b\u4ef6\u7b49\u7684\u65b0\u63a5\u53e3\u7b49\u529f\u80fd\u3002<\/td>\n<\/tr>\n<tr>\n<td><strong>DOM \u7ea7\u522b 3<\/strong><\/td>\n<td>\u6dfb\u52a0\u4e86\u5bf9 XPath \u548c\u952e\u76d8\u4e8b\u4ef6\u5904\u7406\u7684\u652f\u6301\uff0c\u5f15\u5165\u4e86\u7528\u4e8e\u52a0\u8f7d\u548c\u4fdd\u5b58\u6587\u6863\u7684\u63a5\u53e3\u3002<\/td>\n<\/tr>\n<tr>\n<td><strong>DOM \u7ea7\u522b 4<\/strong><\/td>\n<td>\u901a\u8fc7\u51cf\u5c11\u4f9d\u8d56\u5173\u7cfb\u7b80\u5316\u4e86\u6838\u5fc3 DOM\uff0c\u5f15\u5165\u4e86\u5f02\u6b65\u64cd\u4f5c\u7684 Promise\uff0c\u5e76\u6dfb\u52a0\u4e86\u66f4\u591a\u529f\u80fd\uff08\u4f8b\u5982\u7236\u7ea7\u529f\u80fd\uff09\u4ee5\u7b80\u5316\u8282\u70b9\u64cd\u4f5c\u3002<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>\u5229\u7528\u6587\u6863\u5bf9\u8c61\u6a21\u578b (DOM)<\/h2>\n<p>\u6bcf\u6b21\u4f7f\u7528 JavaScript \u64cd\u4f5c\u7f51\u9875\u65f6\u90fd\u4f1a\u7528\u5230 DOM\u3002\u5b83\u662f\u4f17\u591a Web \u6280\u672f\u7684\u57fa\u7840 API\u3002<\/p>\n<p>\u5f00\u53d1\u4eba\u5458\u4f7f\u7528 DOM \u52a8\u6001\u66f4\u6539\u7f51\u9875\u7684\u5916\u89c2\u3001\u611f\u89c9\u548c\u5185\u5bb9\uff0c\u65e0\u9700\u91cd\u65b0\u52a0\u8f7d\u6574\u4e2a\u9875\u9762\uff0c\u4ece\u800c\u5b9e\u73b0\u4ea4\u4e92\u5f0f\u548c\u54cd\u5e94\u5f0f\u7528\u6237\u754c\u9762\u3002<\/p>\n<p>\u5c3d\u7ba1 DOM \u5f88\u5f3a\u5927\uff0c\u4f46\u5b83\u4e5f\u5b58\u5728\u4e00\u4e9b\u95ee\u9898\u3002\u5982\u679c\u4e0d\u5c0f\u5fc3\u4f7f\u7528\uff0c\u5b83\u53ef\u80fd\u4f1a\u53d8\u5f97\u5f88\u6162\uff0c\u5c24\u5176\u662f\u5bf9\u4e8e\u5927\u578b\u6216\u590d\u6742\u7684 Web \u6587\u6863\u3002\u4f18\u5316\u4e0d\u4f73\u7684 DOM \u64cd\u4f5c\u53ef\u80fd\u4f1a\u5bfc\u81f4\u9875\u9762\u6e32\u67d3\u7f13\u6162\u548c\u754c\u9762\u65e0\u54cd\u5e94\u3002\u4e3a\u4e86\u89e3\u51b3\u8fd9\u4e2a\u95ee\u9898\uff0c\u5f00\u53d1\u4eba\u5458\u7ecf\u5e38\u4f7f\u7528 jQuery\u3001React \u6216 Vue.js \u7b49\u5e93\u6216\u6846\u67b6\uff0c\u5b83\u4eec\u63d0\u4f9b\u66f4\u9ad8\u7ea7\u522b\u7684 API \u6765\u5b9e\u73b0\u9ad8\u6548\u7684 DOM \u64cd\u4f5c\u3002<\/p>\n<h2>DOM\u7279\u6027\u53ca\u540c\u7c7b\u672f\u8bed\u6bd4\u8f83<\/h2>\n<table>\n<thead>\n<tr>\n<th>\u5b66\u671f<\/th>\n<th>\u63cf\u8ff0<\/th>\n<th>\u6bd4\u8f83<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>DOM<\/strong><\/td>\n<td>HTML \u548c XML \u6587\u6863\u7684 API\uff0c\u63d0\u4f9b\u6587\u6863\u7684\u7ed3\u6784\u8868\u793a\u5e76\u5141\u8bb8\u5f00\u53d1\u4eba\u5458\u64cd\u4f5c\u5176\u5185\u5bb9\u548c\u89c6\u89c9\u5448\u73b0\u3002<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td><strong>CSSOM<\/strong><\/td>\n<td>CSS \u5bf9\u8c61\u6a21\u578b (CSSOM) \u662f CSS \u6837\u5f0f\u7684\u6620\u5c04\uff0c\u7c7b\u4f3c\u4e8e DOM\uff0c\u4f46\u4e13\u95e8\u7528\u4e8e CSS\u3002\u5b83\u5141\u8bb8\u64cd\u4f5c\u5e94\u7528\u4e8e DOM \u7684\u6837\u5f0f\u8868\u548c\u6837\u5f0f\u3002<\/td>\n<td>DOM \u4fa7\u91cd\u4e8e\u6587\u6863\u7ed3\u6784\uff0c\u800c CSSOM \u4fa7\u91cd\u4e8e\u8868\u793a\u5c42\u3002<\/td>\n<\/tr>\n<tr>\n<td><strong>\u5f71\u5b50 DOM<\/strong><\/td>\n<td>\u4e00\u79cd\u5c01\u88c5 DOM \u6811\u5404\u90e8\u5206\u4ee5\u5b9e\u73b0 Web \u7ec4\u4ef6\u7684\u673a\u5236\u3002\u5b83\u5c06 DOM \u7684\u5404\u4e2a\u90e8\u5206\u9694\u79bb\u5f00\u6765\uff0c\u5c06\u5b83\u4eec\u4ece\u4e3b\u6587\u6863\u6811\u4e2d\u201c\u9690\u85cf\u201d\u8d77\u6765\u3002<\/td>\n<td>\u4e0e\u5e38\u89c4 DOM \u4e0d\u540c\uff0cShadow DOM \u63d0\u4f9b\u6837\u5f0f\u548c\u884c\u4e3a\u5c01\u88c5\u3002<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>\u4e0e\u6587\u6863\u5bf9\u8c61\u6a21\u578b (DOM) \u76f8\u5173\u7684\u672a\u6765\u524d\u666f<\/h2>\n<p>\u968f\u7740 Web \u6280\u672f\u7684\u4e0d\u65ad\u53d1\u5c55\uff0cDOM API \u4e5f\u53ef\u80fd\u4f1a\u6269\u5c55\u548c\u6539\u8fdb\u3002\u672a\u6765\u6f5c\u5728\u7684\u53d1\u5c55\u5305\u62ec\u66f4\u6709\u6548\u7684 DOM \u64cd\u4f5c\u65b9\u6cd5\u3001\u6539\u8fdb\u4e0e\u65b0\u5174 Web \u6807\u51c6\u7684\u96c6\u6210\u4ee5\u53ca HTML \u89c4\u8303\u672c\u8eab\u7684\u4e0d\u65ad\u53d1\u5c55\u3002<\/p>\n<p>\u4e00\u4e2a\u6709\u8da3\u7684\u6301\u7eed\u53d1\u5c55\u662f Web \u7ec4\u4ef6\u7684\u9010\u6e10\u91c7\u7528\uff0c\u5b83\u5141\u8bb8\u521b\u5efa\u53ef\u91cd\u7528\u7684\u5c01\u88c5 HTML \u6807\u7b7e\u3002\u8fd9\u4e0e Shadow DOM \u7d27\u5bc6\u76f8\u5173\uff0cShadow DOM \u63d0\u4f9b\u4e86\u5c01\u88c5 DOM \u5143\u7d20\u7684\u65b9\u6cd5\u3002<\/p>\n<h2>\u6587\u6863\u5bf9\u8c61\u6a21\u578b (DOM) \u548c\u4ee3\u7406\u670d\u52a1\u5668<\/h2>\n<p>\u4ee3\u7406\u670d\u52a1\u5668\u662f\u5728\u5ba2\u6237\u7aef\u548c\u670d\u52a1\u5668\u4e4b\u95f4\u8f6c\u53d1\u8bf7\u6c42\u548c\u54cd\u5e94\u7684\u4e2d\u4ecb\u3002\u867d\u7136 DOM \u4e3b\u8981\u5173\u6ce8\u5ba2\u6237\u7aef Web \u6587\u6863\u7684\u7ed3\u6784\u548c\u64cd\u4f5c\uff0c\u4f46\u4ee3\u7406\u670d\u52a1\u5668\u5728\u7f51\u7edc\u7ea7\u522b\u8fd0\u884c\u3002<\/p>\n<p>\u4f46\u662f\uff0c\u5728\u4ee3\u7406\u670d\u52a1\u5668\u53ef\u80fd\u4fee\u6539 Web \u6587\u6863\u5185\u5bb9\u7684\u60c5\u51b5\u4e0b\uff0c\u53ef\u4ee5\u627e\u5230\u4e24\u8005\u7684\u4ea4\u96c6\u3002\u4f8b\u5982\uff0c\u4ee3\u7406\u670d\u52a1\u5668\u53ef\u4ee5\u5728\u7f51\u9875\u5230\u8fbe\u5ba2\u6237\u7aef\u4e4b\u524d\u6dfb\u52a0\u3001\u5220\u9664\u6216\u4fee\u6539\u7f51\u9875\u4e2d\u7684 DOM \u5143\u7d20\u3002\u8fd9\u53ef\u4ee5\u7528\u4e8e\u591a\u79cd\u539f\u56e0\uff0c\u4f8b\u5982\u6ce8\u5165\u811a\u672c\u3001\u5220\u9664\u4e0d\u9700\u8981\u7684\u5143\u7d20\u6216\u51fa\u4e8e\u672c\u5730\u5316\u6216\u81ea\u5b9a\u4e49\u76ee\u7684\u4fee\u6539\u5185\u5bb9\u3002<\/p>\n<h2>\u76f8\u5173\u94fe\u63a5<\/h2>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document_Object_Model\/Introduction\" target=\"_new\" rel=\"noopener nofollow\">MDN Web \u6587\u6863\uff1a\u6587\u6863\u5bf9\u8c61\u6a21\u578b (DOM)<\/a><\/li>\n<li><a href=\"https:\/\/dom.spec.whatwg.org\/\" target=\"_new\" rel=\"noopener nofollow\">W3C DOM \u6807\u51c6<\/a><\/li>\n<li><a href=\"https:\/\/javascript.info\/dom\" target=\"_new\" rel=\"noopener nofollow\">JavaScript \u4fe1\u606f\uff1aDOM<\/a><\/li>\n<li><a href=\"https:\/\/developers.google.com\/web\/updates\/2018\/09\/inside-browser-part1\" target=\"_new\" rel=\"noopener nofollow\">Google \u7f51\u7edc\u57fa\u7840\u77e5\u8bc6\uff1a\u6d4f\u89c8\u5668\u7684\u5de5\u4f5c\u539f\u7406<\/a><\/li>\n<\/ul>\n<p>\u6b64\u6982\u8ff0\u5e94\u63d0\u4f9b\u5bf9\u6587\u6863\u5bf9\u8c61\u6a21\u578b (DOM)\u3001\u5176\u8d77\u6e90\u3001\u5de5\u4f5c\u539f\u7406\u3001\u7279\u6027\u4ee5\u53ca\u53ef\u80fd\u5982\u4f55\u53d1\u5c55\u7684\u5168\u9762\u7406\u89e3\u3002 DOM \u4ecd\u7136\u662f\u4ea4\u4e92\u5f0f Web \u5f00\u53d1\u7684\u57fa\u77f3\uff0c\u5e76\u5c06\u968f\u7740 Web \u6280\u672f\u7684\u8fdb\u6b65\u7ee7\u7eed\u53d1\u6325\u5173\u952e\u4f5c\u7528\u3002<\/p>","protected":false},"featured_media":468251,"menu_order":0,"template":"","meta":{"_acf_changed":false,"content-type":"","inline_featured_image":false,"footnotes":""},"class_list":["post-476958","wiki","type-wiki","status-publish","has-post-thumbnail","hentry"],"acf":{"faq_title":"Frequently Asked Questions about <mark>Document Object Model (DOM): A Comprehensive Overview<\/mark>","faq_items":[{"question":"What is the Document Object Model (DOM)?","answer":"<p>The Document Object Model (DOM) is an interface that allows developers to interact with web documents using scripting languages like JavaScript. It represents the contents of a web document, such as HTML or XML, in a structured, hierarchical, and logical tree-like structure.<\/p>"},{"question":"When was the Document Object Model (DOM) first introduced?","answer":"<p>The concept of the DOM came into existence in the mid-to-late 1990s, with the World Wide Web Consortium (W3C) introducing the first standard DOM level, DOM Level 1, in 1998.<\/p>"},{"question":"How does the Document Object Model (DOM) work?","answer":"<p>The DOM works by representing a web document in a tree-like structure, with the topmost node being the <code>Document<\/code> node, representing the entire document. Below this, there are <code>Element<\/code> nodes, <code>Attribute<\/code> nodes, and <code>Text<\/code> nodes, each representing elements, attributes, and text within the document. This structure allows developers to navigate the document tree and use API methods to select, create, modify, or delete nodes.<\/p>"},{"question":"What are the key features of the Document Object Model (DOM)?","answer":"<p>The key features of the DOM include its tree-like structure, making it easy to navigate and manipulate; its language-neutrality, making it compatible with any programming language; its dynamic access and update capabilities; and its status as a W3C standard, ensuring widespread acceptance and compatibility.<\/p>"},{"question":"Are there different types of Document Object Model (DOM)?","answer":"<p>Yes, the DOM specification is divided into several \"levels\" and \"modules\", each adding features and functionality to the previous ones. These include DOM Level 1, DOM Level 2, DOM Level 3, and DOM Level 4.<\/p>"},{"question":"How is the Document Object Model (DOM) used?","answer":"<p>The DOM is used to dynamically change the look, feel, and content of a web page without requiring a full page reload. This makes for interactive and responsive user interfaces. However, the DOM can become slow if not used carefully, especially with large or complex web documents.<\/p>"},{"question":"How does the Document Object Model (DOM) relate to proxy servers?","answer":"<p>While the DOM is primarily concerned with the structure and manipulation of web documents on the client-side, proxy servers operate at the network level. However, they intersect when a proxy server modifies the contents of a web document before it reaches the client, such as injecting scripts, removing unwanted elements, or modifying content for localization or customization purposes.<\/p>"},{"question":"What are the future perspectives related to the Document Object Model (DOM)?","answer":"<p>The DOM API is likely to expand and improve as web technologies continue to evolve. Potential future developments include more efficient methods of manipulating the DOM, improved integration with emerging web standards, and the ongoing evolution of the HTML specification itself.<\/p>"}]},"_links":{"self":[{"href":"https:\/\/oneproxy.pro\/cn\/wp-json\/wp\/v2\/wiki\/476958","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oneproxy.pro\/cn\/wp-json\/wp\/v2\/wiki"}],"about":[{"href":"https:\/\/oneproxy.pro\/cn\/wp-json\/wp\/v2\/types\/wiki"}],"version-history":[{"count":0,"href":"https:\/\/oneproxy.pro\/cn\/wp-json\/wp\/v2\/wiki\/476958\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oneproxy.pro\/cn\/wp-json\/wp\/v2\/media\/468251"}],"wp:attachment":[{"href":"https:\/\/oneproxy.pro\/cn\/wp-json\/wp\/v2\/media?parent=476958"}],"curies":[{"name":"\u53ef\u6e7f\u6027\u7c89\u5242","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}