{"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\/jp\/wiki\/document-object-model-dom\/","title":{"rendered":"\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8 \u30aa\u30d6\u30b8\u30a7\u30af\u30c8 \u30e2\u30c7\u30eb (DOM)"},"content":{"rendered":"<p>\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8 \u30aa\u30d6\u30b8\u30a7\u30af\u30c8 \u30e2\u30c7\u30eb (DOM) \u306f\u3001\u958b\u767a\u8005\u304c JavaScript \u306a\u3069\u306e\u30b9\u30af\u30ea\u30d7\u30c8\u8a00\u8a9e\u3092\u4f7f\u7528\u3057\u3066 Web \u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3092\u64cd\u4f5c\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u91cd\u8981\u306a\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30a4\u30b9\u3067\u3059\u3002DOM \u306f\u3001HTML \u3084 XML \u306a\u3069\u306e Web \u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u69cb\u9020\u5316\u3055\u308c\u305f\u968e\u5c64\u7684\u304b\u3064\u8ad6\u7406\u7684\u306a\u30d3\u30e5\u30fc\u3092\u30c4\u30ea\u30fc\u306e\u3088\u3046\u306a\u69cb\u9020\u3068\u3057\u3066\u8868\u3057\u307e\u3059\u3002<\/p>\n<h2>\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8 \u30aa\u30d6\u30b8\u30a7\u30af\u30c8 \u30e2\u30c7\u30eb (DOM) \u306e\u8d77\u6e90<\/h2>\n<p>DOM \u306e\u6982\u5ff5\u306f\u3001\u3088\u308a\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a Web \u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u5b9f\u73fe\u3059\u308b\u5fc5\u8981\u6027\u304b\u3089\u30011990 \u5e74\u4ee3\u4e2d\u671f\u304b\u3089\u5f8c\u534a\u306b\u304b\u3051\u3066\u521d\u3081\u3066\u751f\u307e\u308c\u307e\u3057\u305f\u3002\u52d5\u7684\u306a Web \u30b5\u30a4\u30c8\u306e\u51fa\u73fe\u3068 JavaScript \u306e\u666e\u53ca\u306b\u3088\u308a\u3001\u30b9\u30af\u30ea\u30d7\u30c8\u3067\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306e\u69cb\u9020\u3001\u30b9\u30bf\u30a4\u30eb\u3001\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u5909\u66f4\u3067\u304d\u308b\u30e2\u30c7\u30eb\u304c\u5fc5\u8981\u306b\u306a\u308a\u307e\u3057\u305f\u3002World Wide Web Consortium (W3C) \u306f\u3001\u3053\u306e\u76ee\u7684\u306e\u305f\u3081\u306b\u6a19\u6e96\u5316\u3055\u308c\u305f API \u3092\u4f5c\u6210\u3059\u308b\u3068\u3044\u3046\u4f5c\u696d\u3092\u5f15\u304d\u53d7\u3051\u3001DOM \u306e\u958b\u767a\u306b\u3064\u306a\u304c\u308a\u307e\u3057\u305f\u3002<\/p>\n<p>\u6700\u521d\u306e\u6a19\u6e96 DOM \u30ec\u30d9\u30eb\u3067\u3042\u308b DOM \u30ec\u30d9\u30eb 1 \u306f\u30011998 \u5e74\u306b W3C \u306b\u3088\u3063\u3066\u5c0e\u5165\u3055\u308c\u307e\u3057\u305f\u3002\u3053\u308c\u306f\u3001\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306e\u4efb\u610f\u306e\u90e8\u5206\u3092\u5909\u66f4\u3059\u308b\u624b\u6bb5\u3092\u542b\u3080\u3001HTML \u307e\u305f\u306f XML \u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u5168\u4f53\u306e\u5305\u62ec\u7684\u306a\u30e2\u30c7\u30eb\u3092\u63d0\u4f9b\u3057\u307e\u3057\u305f\u3002<\/p>\n<h2>\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8 \u30aa\u30d6\u30b8\u30a7\u30af\u30c8 \u30e2\u30c7\u30eb (DOM) \u306e\u62e1\u5f35<\/h2>\n<p>DOM \u306f\u672c\u8cea\u7684\u306b\u3001\u30d7\u30ed\u30b0\u30e9\u30e0\u3084\u30b9\u30af\u30ea\u30d7\u30c8\u304c\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u3001\u69cb\u9020\u3001\u30b9\u30bf\u30a4\u30eb\u306b\u52d5\u7684\u306b\u30a2\u30af\u30bb\u30b9\u3057\u3066\u66f4\u65b0\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u3001\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u304a\u3088\u3073\u8a00\u8a9e\u306b\u4f9d\u5b58\u3057\u306a\u3044\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9\u3067\u3059\u3002<\/p>\n<p>DOM \u306f\u30ce\u30fc\u30c9\u306e\u968e\u5c64\u306b\u7de8\u6210\u3055\u308c\u3066\u304a\u308a\u3001\u5404\u30ce\u30fc\u30c9\u306f\u8981\u7d20\u3001\u5c5e\u6027\u3001\u30c6\u30ad\u30b9\u30c8\u306a\u3069\u3001\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306e\u4e00\u90e8\u3092\u8868\u3057\u307e\u3059\u3002\u3053\u306e\u8ad6\u7406\u30c4\u30ea\u30fc\u69cb\u9020\u306b\u3088\u308a\u3001\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306e\u5185\u5bb9\u3092\u7c21\u5358\u306b\u30ca\u30d3\u30b2\u30fc\u30c8\u304a\u3088\u3073\u64cd\u4f5c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>Web \u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306f\u3001\u30d7\u30ed\u30d1\u30c6\u30a3\u3068\u30e1\u30bd\u30c3\u30c9\u3092\u6301\u3061\u3001\u4ed6\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u542b\u3080\u3053\u3068\u304c\u3067\u304d\u308b\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u30c4\u30ea\u30fc\u3068\u3057\u3066\u30e2\u30c7\u30eb\u5316\u3055\u308c\u307e\u3059\u3002\u305f\u3068\u3048\u3070\u3001HTML \u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306f\u3001\u300cbody\u300d\u3001\u300cdiv\u300d\u3001\u300cspan\u300d\u3001\u300cp\u300d\u306a\u3069\u306e\u8981\u7d20\u3068\u305d\u306e\u5c5e\u6027\u304a\u3088\u3073\u30c6\u30ad\u30b9\u30c8 \u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u8868\u3059\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306b\u5909\u63db\u3055\u308c\u307e\u3059\u3002<\/p>\n<h2>\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8 \u30aa\u30d6\u30b8\u30a7\u30af\u30c8 \u30e2\u30c7\u30eb (DOM) \u306e\u4ed5\u7d44\u307f<\/h2>\n<p>DOM\u306e\u5185\u90e8\u69cb\u9020\u306f\u30ce\u30fc\u30c9\u306e\u30c4\u30ea\u30fc\u3068\u3057\u3066\u69cb\u6210\u3055\u308c\u3066\u3044\u307e\u3059\u3002\u6700\u4e0a\u4f4d\u306e\u30ce\u30fc\u30c9\u306f <code data-no-translation=\"\">Document<\/code> \u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u5168\u4f53\u3092\u8868\u3059\u30ce\u30fc\u30c9\u3002\u305d\u306e\u4e0b\u306b\u306f <code data-no-translation=\"\">Element<\/code> \u30ce\u30fc\u30c9\u306f\u30da\u30fc\u30b8\u5185\u306eHTML\u8981\u7d20\u306b\u5bfe\u5fdc\u3057\u3001 <code data-no-translation=\"\">Attribute<\/code> \u30ce\u30fc\u30c9\u306f\u8981\u7d20\u306e\u5c5e\u6027\u3092\u4fdd\u6301\u3057\u3001 <code data-no-translation=\"\">Text<\/code> \u30ce\u30fc\u30c9\u306f\u8981\u7d20\u306e\u30c6\u30ad\u30b9\u30c8 \u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u4fdd\u6301\u3057\u307e\u3059\u3002<\/p>\n<p>\u3053\u306e\u968e\u5c64\u69cb\u9020\u306b\u3088\u308a\u3001\u958b\u767a\u8005\u306f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8 \u30c4\u30ea\u30fc\u3092\u30ca\u30d3\u30b2\u30fc\u30c8\u3057\u3001API \u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u30ce\u30fc\u30c9\u3092\u9078\u629e\u3001\u4f5c\u6210\u3001\u5909\u66f4\u3001\u307e\u305f\u306f\u524a\u9664\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>HTML \u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u304c DOM \u30c4\u30ea\u30fc\u3068\u3057\u3066\u3069\u306e\u3088\u3046\u306b\u8868\u793a\u3055\u308c\u308b\u304b\u306e\u4f8b\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<\/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>\u30de\u30bb\u30de\u30c6\u30a3\u30ab<\/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>\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc\u3059\u308b<\/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>\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8 \u30aa\u30d6\u30b8\u30a7\u30af\u30c8 \u30e2\u30c7\u30eb (DOM) \u306e\u4e3b\u306a\u6a5f\u80fd<\/h2>\n<ol>\n<li>\n<p><strong>\u30c4\u30ea\u30fc\u69cb\u9020<\/strong>DOM \u306f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3092\u8ad6\u7406\u30c4\u30ea\u30fc\u69cb\u9020\u3067\u8868\u3057\u3001\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u3001\u9078\u629e\u3001\u64cd\u4f5c\u3092\u7c21\u5358\u304b\u3064\u76f4\u611f\u7684\u306b\u884c\u3048\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002<\/p>\n<\/li>\n<li>\n<p><strong>\u8a00\u8a9e\u306b\u4f9d\u5b58\u3057\u306a\u3044<\/strong>: DOM \u306f\u7279\u5b9a\u306e\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u8a00\u8a9e\u306b\u7e1b\u3089\u308c\u3066\u3044\u307e\u305b\u3093\u3002HTML\u3001XML\u3001\u305d\u306e\u4ed6\u306e\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8 \u30bf\u30a4\u30d7\u5185\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u8868\u73fe\u3057\u3001\u64cd\u4f5c\u3059\u308b\u305f\u3081\u306e\u898f\u5247\u3067\u3059\u3002<\/p>\n<\/li>\n<li>\n<p><strong>\u52d5\u7684\u30a2\u30af\u30bb\u30b9\u3068\u66f4\u65b0<\/strong>: DOM \u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30d7\u30ed\u30b0\u30e9\u30e0\u306f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u3001\u69cb\u9020\u3001\u30b9\u30bf\u30a4\u30eb\u306b\u52d5\u7684\u306b\u30a2\u30af\u30bb\u30b9\u3057\u3066\u66f4\u65b0\u3067\u304d\u307e\u3059\u3002<\/p>\n<\/li>\n<li>\n<p><strong>\u6a19\u6e96\u5316\u3055\u308c\u305f<\/strong>: DOM \u306f W3C \u6a19\u6e96\u3067\u3042\u308a\u3001\u3055\u307e\u3056\u307e\u306a\u30d6\u30e9\u30a6\u30b6\u3084\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u3067\u5e83\u304f\u53d7\u3051\u5165\u308c\u3089\u308c\u3001\u4e92\u63db\u6027\u304c\u3042\u308b\u3053\u3068\u304c\u4fdd\u8a3c\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n<\/li>\n<\/ol>\n<h2>\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8 \u30aa\u30d6\u30b8\u30a7\u30af\u30c8 \u30e2\u30c7\u30eb (DOM) \u306e\u7a2e\u985e<\/h2>\n<p>DOM \u4ed5\u69d8\u306f\u3044\u304f\u3064\u304b\u306e\u300c\u30ec\u30d9\u30eb\u300d\u3068\u300c\u30e2\u30b8\u30e5\u30fc\u30eb\u300d\u306b\u5206\u304b\u308c\u3066\u304a\u308a\u3001\u305d\u308c\u305e\u308c\u304c\u524d\u306e\u30ec\u30d9\u30eb\u306b\u6a5f\u80fd\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002\u4e3b\u306a\u30bf\u30a4\u30d7\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n<table>\n<thead>\n<tr>\n<th>DOM \u30ec\u30d9\u30eb\/\u30bf\u30a4\u30d7<\/th>\n<th>\u7c21\u5358\u306a\u8aac\u660e<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>DOM \u30ec\u30d9\u30eb 1<\/strong><\/td>\n<td>\u8981\u7d20\u3068\u305d\u306e\u5c5e\u6027\u3092\u64cd\u4f5c\u3059\u308b\u30e1\u30bd\u30c3\u30c9\u3092\u542b\u3080\u3001HTML \u307e\u305f\u306f XML \u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u5168\u4f53\u306e\u57fa\u672c\u30e2\u30c7\u30eb\u3092\u63d0\u4f9b\u3057\u307e\u3057\u305f\u3002<\/td>\n<\/tr>\n<tr>\n<td><strong>DOM \u30ec\u30d9\u30eb 2<\/strong><\/td>\n<td>\u540d\u524d\u7a7a\u9593\u306e\u51e6\u7406\u3001CSS \u3092\u30b5\u30dd\u30fc\u30c8\u3059\u308b\u30b9\u30bf\u30a4\u30eb \u30e2\u30b8\u30e5\u30fc\u30eb\u3001\u30c6\u30fc\u30d6\u30eb\u3084\u30a4\u30d9\u30f3\u30c8\u306a\u3069\u3092\u51e6\u7406\u3059\u308b\u305f\u3081\u306e\u3044\u304f\u3064\u304b\u306e\u65b0\u3057\u3044\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30a4\u30b9\u306a\u3069\u306e\u6a5f\u80fd\u3092\u5c0e\u5165\u3057\u307e\u3057\u305f\u3002<\/td>\n<\/tr>\n<tr>\n<td><strong>DOM \u30ec\u30d9\u30eb 3<\/strong><\/td>\n<td>XPath \u304a\u3088\u3073\u30ad\u30fc\u30dc\u30fc\u30c9 \u30a4\u30d9\u30f3\u30c8\u51e6\u7406\u306e\u30b5\u30dd\u30fc\u30c8\u304c\u8ffd\u52a0\u3055\u308c\u3001\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306e\u8aad\u307f\u8fbc\u307f\u3068\u4fdd\u5b58\u306e\u305f\u3081\u306e\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30a4\u30b9\u304c\u5c0e\u5165\u3055\u308c\u307e\u3057\u305f\u3002<\/td>\n<\/tr>\n<tr>\n<td><strong>DOM \u30ec\u30d9\u30eb 4<\/strong><\/td>\n<td>\u4f9d\u5b58\u95a2\u4fc2\u3092\u6e1b\u3089\u3059\u3053\u3068\u3067\u30b3\u30a2 DOM \u3092\u7c21\u7d20\u5316\u3057\u3001\u975e\u540c\u671f\u64cd\u4f5c\u306e Promise \u3092\u5c0e\u5165\u3057\u3001\u30ce\u30fc\u30c9\u64cd\u4f5c\u3092\u5bb9\u6613\u306b\u3059\u308b\u89aa\u6a5f\u80fd\u306a\u3069\u306e\u6a5f\u80fd\u3092\u8ffd\u52a0\u3057\u307e\u3057\u305f\u3002<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8 \u30aa\u30d6\u30b8\u30a7\u30af\u30c8 \u30e2\u30c7\u30eb (DOM) \u306e\u6d3b\u7528<\/h2>\n<p>DOM \u306f\u3001JavaScript \u3092\u4f7f\u7528\u3057\u3066 Web \u30da\u30fc\u30b8\u3092\u64cd\u4f5c\u3059\u308b\u305f\u3073\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002\u3053\u308c\u306f\u3001\u591a\u6570\u306e Web \u30c6\u30af\u30ce\u30ed\u30b8\u30fc\u306e\u57fa\u76e4\u3068\u306a\u308b API \u3067\u3059\u3002<\/p>\n<p>\u958b\u767a\u8005\u306f DOM \u3092\u4f7f\u7528\u3057\u3066\u3001\u30da\u30fc\u30b8\u5168\u4f53\u3092\u518d\u8aad\u307f\u8fbc\u307f\u3059\u308b\u3053\u3068\u306a\u304f Web \u30da\u30fc\u30b8\u306e\u5916\u89b3\u3001\u64cd\u4f5c\u6027\u3001\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u52d5\u7684\u306b\u5909\u66f4\u3057\u3001\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u3067\u5fdc\u7b54\u6027\u306e\u9ad8\u3044\u30e6\u30fc\u30b6\u30fc \u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30a4\u30b9\u3092\u5b9f\u73fe\u3057\u307e\u3059\u3002<\/p>\n<p>DOM \u306f\u5f37\u529b\u3067\u3059\u304c\u3001\u554f\u984c\u304c\u306a\u3044\u308f\u3051\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002\u7279\u306b\u5927\u898f\u6a21\u307e\u305f\u306f\u8907\u96d1\u306a Web \u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3067\u306f\u3001\u614e\u91cd\u306b\u4f7f\u7528\u3057\u306a\u3044\u3068\u9045\u304f\u306a\u308b\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u3002DOM \u64cd\u4f5c\u304c\u9069\u5207\u306b\u6700\u9069\u5316\u3055\u308c\u3066\u3044\u306a\u3044\u3068\u3001\u30da\u30fc\u30b8\u306e\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u304c\u9045\u304f\u306a\u308a\u3001\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30a4\u30b9\u304c\u5fdc\u7b54\u3057\u306a\u304f\u306a\u308b\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002\u3053\u306e\u554f\u984c\u306b\u5bfe\u51e6\u3059\u308b\u305f\u3081\u306b\u3001\u958b\u767a\u8005\u306f\u591a\u304f\u306e\u5834\u5408\u3001\u52b9\u7387\u7684\u306a DOM \u64cd\u4f5c\u306e\u305f\u3081\u306e\u9ad8\u30ec\u30d9\u30eb API \u3092\u63d0\u4f9b\u3059\u308b jQuery\u3001React\u3001Vue.js \u306a\u3069\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u3084\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n<h2>DOM \u306e\u7279\u6027\u3068\u985e\u4f3c\u7528\u8a9e\u3068\u306e\u6bd4\u8f03<\/h2>\n<table>\n<thead>\n<tr>\n<th>\u5b66\u671f<\/th>\n<th>\u8aac\u660e<\/th>\n<th>\u6bd4\u8f03<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>DOM<\/strong><\/td>\n<td>HTML \u304a\u3088\u3073 XML \u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u7528\u306e API\u3002\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306e\u69cb\u9020\u8868\u73fe\u3092\u63d0\u4f9b\u3057\u3001\u958b\u767a\u8005\u304c\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u3068\u8996\u899a\u7684\u306a\u30d7\u30ec\u30bc\u30f3\u30c6\u30fc\u30b7\u30e7\u30f3\u3092\u64cd\u4f5c\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td><strong>CSSOM<\/strong><\/td>\n<td>CSS \u30aa\u30d6\u30b8\u30a7\u30af\u30c8 \u30e2\u30c7\u30eb (CSSOM) \u306f\u3001DOM \u306b\u4f3c\u3066\u3044\u307e\u3059\u304c CSS \u5c02\u7528\u306e CSS \u30b9\u30bf\u30a4\u30eb\u306e\u30de\u30c3\u30d7\u3067\u3059\u3002\u3053\u308c\u306b\u3088\u308a\u3001DOM \u306b\u9069\u7528\u3055\u308c\u305f\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u3068\u30b9\u30bf\u30a4\u30eb\u3092\u64cd\u4f5c\u3067\u304d\u307e\u3059\u3002<\/td>\n<td>DOM \u306f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u69cb\u9020\u306b\u91cd\u70b9\u3092\u7f6e\u3044\u3066\u3044\u307e\u3059\u304c\u3001CSSOM \u306f\u30d7\u30ec\u30bc\u30f3\u30c6\u30fc\u30b7\u30e7\u30f3\u5c64\u306b\u91cd\u70b9\u3092\u7f6e\u3044\u3066\u3044\u307e\u3059\u3002<\/td>\n<\/tr>\n<tr>\n<td><strong>\u30b7\u30e3\u30c9\u30a6DOM<\/strong><\/td>\n<td>Web \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u5b9f\u88c5\u306e\u305f\u3081\u306b DOM \u30c4\u30ea\u30fc\u306e\u4e00\u90e8\u3092\u30ab\u30d7\u30bb\u30eb\u5316\u3059\u308b\u30e1\u30ab\u30cb\u30ba\u30e0\u3002DOM \u306e\u4e00\u90e8\u3092\u5206\u96e2\u3057\u3066\u3001\u30e1\u30a4\u30f3\u306e\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8 \u30c4\u30ea\u30fc\u304b\u3089\u300c\u96a0\u3059\u300d\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/td>\n<td>\u901a\u5e38\u306e DOM \u3068\u306f\u7570\u306a\u308a\u3001Shadow DOM \u306f\u30b9\u30bf\u30a4\u30eb\u3068\u52d5\u4f5c\u306e\u30ab\u30d7\u30bb\u30eb\u5316\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u30e2\u30c7\u30eb (DOM) \u306b\u95a2\u3059\u308b\u5c06\u6765\u306e\u5c55\u671b<\/h2>\n<p>Web \u30c6\u30af\u30ce\u30ed\u30b8\u30fc\u304c\u9032\u5316\u3057\u7d9a\u3051\u308b\u306b\u3064\u308c\u3066\u3001DOM API \u3082\u62e1\u5f35\u3055\u308c\u3001\u6539\u5584\u3055\u308c\u308b\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002\u4eca\u5f8c\u306e\u958b\u767a\u306e\u53ef\u80fd\u6027\u3068\u3057\u3066\u306f\u3001DOM \u3092\u64cd\u4f5c\u3059\u308b\u3088\u308a\u52b9\u7387\u7684\u306a\u65b9\u6cd5\u3001\u65b0\u3057\u3044 Web \u6a19\u6e96\u3068\u306e\u7d71\u5408\u306e\u6539\u5584\u3001HTML \u4ed5\u69d8\u81ea\u4f53\u306e\u7d99\u7d9a\u7684\u306a\u9032\u5316\u306a\u3069\u304c\u6319\u3052\u3089\u308c\u307e\u3059\u3002<\/p>\n<p>\u8208\u5473\u6df1\u3044\u9032\u884c\u4e2d\u306e\u958b\u767a\u3068\u3057\u3066\u3001\u518d\u5229\u7528\u53ef\u80fd\u306a\u30ab\u30d7\u30bb\u30eb\u5316\u3055\u308c\u305f HTML \u30bf\u30b0\u306e\u4f5c\u6210\u3092\u53ef\u80fd\u306b\u3059\u308b Web \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u6bb5\u968e\u7684\u306a\u63a1\u7528\u304c\u6319\u3052\u3089\u308c\u307e\u3059\u3002\u3053\u308c\u306f\u3001DOM \u8981\u7d20\u3092\u30ab\u30d7\u30bb\u30eb\u5316\u3059\u308b\u624b\u6bb5\u3092\u63d0\u4f9b\u3059\u308b Shadow DOM \u3068\u5bc6\u63a5\u306b\u7d50\u3073\u3064\u3044\u3066\u3044\u307e\u3059\u3002<\/p>\n<h2>\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8 \u30aa\u30d6\u30b8\u30a7\u30af\u30c8 \u30e2\u30c7\u30eb (DOM) \u3068\u30d7\u30ed\u30ad\u30b7 \u30b5\u30fc\u30d0\u30fc<\/h2>\n<p>\u30d7\u30ed\u30ad\u30b7 \u30b5\u30fc\u30d0\u30fc\u306f\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u3068\u30b5\u30fc\u30d0\u30fc\u306e\u9593\u3067\u8981\u6c42\u3068\u5fdc\u7b54\u3092\u8ee2\u9001\u3059\u308b\u4ef2\u4ecb\u8005\u3067\u3059\u3002DOM \u306f\u4e3b\u306b\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u5074\u306e Web \u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306e\u69cb\u9020\u3068\u64cd\u4f5c\u306b\u95a2\u4fc2\u3057\u3066\u3044\u307e\u3059\u304c\u3001\u30d7\u30ed\u30ad\u30b7 \u30b5\u30fc\u30d0\u30fc\u306f\u30cd\u30c3\u30c8\u30ef\u30fc\u30af \u30ec\u30d9\u30eb\u3067\u52d5\u4f5c\u3057\u307e\u3059\u3002<\/p>\n<p>\u305f\u3060\u3057\u3001\u30d7\u30ed\u30ad\u30b7 \u30b5\u30fc\u30d0\u30fc\u304c Web \u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u5909\u66f4\u3059\u308b\u30b7\u30ca\u30ea\u30aa\u3067\u306f\u3001\u3053\u306e 2 \u3064\u306e\u5171\u901a\u70b9\u304c\u898b\u3089\u308c\u307e\u3059\u3002\u305f\u3068\u3048\u3070\u3001\u30d7\u30ed\u30ad\u30b7 \u30b5\u30fc\u30d0\u30fc\u306f\u3001Web \u30da\u30fc\u30b8\u304c\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306b\u5230\u9054\u3059\u308b\u524d\u306b\u3001\u305d\u306e\u30da\u30fc\u30b8\u306e DOM \u8981\u7d20\u3092\u8ffd\u52a0\u3001\u524a\u9664\u3001\u307e\u305f\u306f\u5909\u66f4\u3067\u304d\u307e\u3059\u3002\u3053\u308c\u306f\u3001\u30b9\u30af\u30ea\u30d7\u30c8\u306e\u633f\u5165\u3001\u4e0d\u8981\u306a\u8981\u7d20\u306e\u524a\u9664\u3001\u30ed\u30fc\u30ab\u30ea\u30bc\u30fc\u30b7\u30e7\u30f3\u3084\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u306e\u76ee\u7684\u3067\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u5909\u66f4\u306a\u3069\u3001\u3055\u307e\u3056\u307e\u306a\u76ee\u7684\u3067\u4f7f\u7528\u3067\u304d\u307e\u3059\u3002<\/p>\n<h2>\u95a2\u9023\u30ea\u30f3\u30af<\/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 \u30c9\u30ad\u30e5\u30e1\u30f3\u30c8: \u30c9\u30ad\u30e5\u30e1\u30f3\u30c8 \u30aa\u30d6\u30b8\u30a7\u30af\u30c8 \u30e2\u30c7\u30eb (DOM)<\/a><\/li>\n<li><a href=\"https:\/\/dom.spec.whatwg.org\/\" target=\"_new\" rel=\"noopener nofollow\">W3C DOM \u6a19\u6e96<\/a><\/li>\n<li><a href=\"https:\/\/javascript.info\/dom\" target=\"_new\" rel=\"noopener nofollow\">JavaScript \u60c5\u5831: DOM<\/a><\/li>\n<li><a href=\"https:\/\/developers.google.com\/web\/updates\/2018\/09\/inside-browser-part1\" target=\"_new\" rel=\"noopener nofollow\">Google \u30a6\u30a7\u30d6\u306e\u57fa\u790e: \u30d6\u30e9\u30a6\u30b6\u306e\u4ed5\u7d44\u307f<\/a><\/li>\n<\/ul>\n<p>\u3053\u306e\u6982\u8981\u3067\u306f\u3001\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8 \u30aa\u30d6\u30b8\u30a7\u30af\u30c8 \u30e2\u30c7\u30eb (DOM)\u3001\u305d\u306e\u8d77\u6e90\u3001\u4ed5\u7d44\u307f\u3001\u7279\u5fb4\u3001\u4eca\u5f8c\u306e\u767a\u5c55\u306e\u53ef\u80fd\u6027\u306b\u3064\u3044\u3066\u5305\u62ec\u7684\u306b\u7406\u89e3\u3067\u304d\u307e\u3059\u3002DOM \u306f\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6 Web \u958b\u767a\u306e\u57fa\u790e\u3067\u3042\u308a\u3001Web \u30c6\u30af\u30ce\u30ed\u30b8\u306e\u9032\u6b69\u306b\u4f34\u3063\u3066\u5f15\u304d\u7d9a\u304d\u91cd\u8981\u306a\u5f79\u5272\u3092\u679c\u305f\u3057\u307e\u3059\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\/jp\/wp-json\/wp\/v2\/wiki\/476958","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oneproxy.pro\/jp\/wp-json\/wp\/v2\/wiki"}],"about":[{"href":"https:\/\/oneproxy.pro\/jp\/wp-json\/wp\/v2\/types\/wiki"}],"version-history":[{"count":0,"href":"https:\/\/oneproxy.pro\/jp\/wp-json\/wp\/v2\/wiki\/476958\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oneproxy.pro\/jp\/wp-json\/wp\/v2\/media\/468251"}],"wp:attachment":[{"href":"https:\/\/oneproxy.pro\/jp\/wp-json\/wp\/v2\/media?parent=476958"}],"curies":[{"name":"\u3046\u30fc\u3093","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}