{"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\/kr\/wiki\/document-object-model-dom\/","title":{"rendered":"DOM(\ubb38\uc11c \uac1c\uccb4 \ubaa8\ub378)"},"content":{"rendered":"<p>DOM(\ubb38\uc11c \uac1c\uccb4 \ubaa8\ub378)\uc740 \uac1c\ubc1c\uc790\uac00 JavaScript\uc640 \uac19\uc740 \uc2a4\ud06c\ub9bd\ud305 \uc5b8\uc5b4\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc6f9 \ubb38\uc11c\uc640 \uc0c1\ud638 \uc791\uc6a9\ud560 \uc218 \uc788\ub3c4\ub85d \ud558\ub294 \uc911\uc694\ud55c \uc778\ud130\ud398\uc774\uc2a4\uc785\ub2c8\ub2e4. HTML\uc774\ub098 XML\uacfc \uac19\uc740 \uc6f9 \ubb38\uc11c\uc758 \ucf58\ud150\uce20\uc5d0 \ub300\ud55c \uad6c\uc870\uc801, \uacc4\uce35\uc801, \ub17c\ub9ac\uc801 \ubcf4\uae30\ub97c \ud2b8\ub9ac \uad6c\uc870\ub85c \ub098\ud0c0\ub0c5\ub2c8\ub2e4.<\/p>\n<h2>\ubb38\uc11c \uac1c\uccb4 \ubaa8\ub378(DOM)\uc758 \ud0c4\uc0dd<\/h2>\n<p>DOM\uc758 \uac1c\ub150\uc740 \ub354 \ub9ce\uc740 \ub300\ud654\ud615 \uc6f9 \ucf58\ud150\uce20\ub97c \ud5c8\uc6a9\ud574\uc57c \ud558\ub294 \ud544\uc694\uc131\uc758 \uacb0\uacfc\ub85c 1990\ub144\ub300 \uc911\ud6c4\ubc18\uc5d0 \ucc98\uc74c \ub4f1\uc7a5\ud588\uc2b5\ub2c8\ub2e4. \ub3d9\uc801 \uc6f9\uc0ac\uc774\ud2b8\uc758 \ucd9c\ud604\uacfc JavaScript\uc758 \uad11\ubc94\uc704\ud55c \uc0ac\uc6a9\uc73c\ub85c \uc778\ud574 \uc2a4\ud06c\ub9bd\ud2b8\uac00 \ubb38\uc11c \uad6c\uc870, \uc2a4\ud0c0\uc77c \ubc0f \ucf58\ud150\uce20\ub97c \ubcc0\uacbd\ud560 \uc218 \uc788\ub294 \ubaa8\ub378\uc774 \ud544\uc694\ud588\uc2b5\ub2c8\ub2e4. W3C(World Wide Web Consortium)\ub294 \uc774\ub7ec\ud55c \ubaa9\uc801\uc744 \uc704\ud574 \ud45c\uc900\ud654\ub41c API\ub97c \ub9cc\ub4dc\ub294 \uc791\uc5c5\uc744 \ub9e1\uc558\uace0 \uacb0\uacfc\uc801\uc73c\ub85c DOM\uc774 \uac1c\ubc1c\ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\ucd5c\ucd08\uc758 \ud45c\uc900 DOM \ub808\ubca8\uc778 DOM \ub808\ubca8 1\uc740 1998\ub144 W3C\uc5d0 \uc758\ud574 \ub3c4\uc785\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \uc774\ub294 \ubb38\uc11c\uc758 \uc77c\ubd80\ub97c \ubcc0\uacbd\ud558\ub294 \uc218\ub2e8\uc744 \ud3ec\ud568\ud558\uc5ec \uc804\uccb4 HTML \ub610\ub294 XML \ubb38\uc11c\uc5d0 \ub300\ud55c \ud3ec\uad04\uc801\uc778 \ubaa8\ub378\uc744 \uc81c\uacf5\ud588\uc2b5\ub2c8\ub2e4.<\/p>\n<h2>DOM(\ubb38\uc11c \uac1c\uccb4 \ubaa8\ub378) \ud655\uc7a5<\/h2>\n<p>DOM\uc740 \ubcf8\uc9c8\uc801\uc73c\ub85c \ud504\ub85c\uadf8\ub7a8\uacfc \uc2a4\ud06c\ub9bd\ud2b8\uac00 \ubb38\uc11c\uc758 \ucf58\ud150\uce20, \uad6c\uc870 \ubc0f \uc2a4\ud0c0\uc77c\uc5d0 \ub3d9\uc801\uc73c\ub85c \uc561\uc138\uc2a4\ud558\uace0 \uc5c5\ub370\uc774\ud2b8\ud560 \uc218 \uc788\ub3c4\ub85d \ud558\ub294 \ud50c\ub7ab\ud3fc\uc774\uc790 \uc5b8\uc5b4 \uc911\ub9bd\uc801\uc778 \uc778\ud130\ud398\uc774\uc2a4\uc785\ub2c8\ub2e4.<\/p>\n<p>DOM\uc740 \uc694\uc18c, \uc18d\uc131, \ud14d\uc2a4\ud2b8 \ub4f1 \ubb38\uc11c\uc758 \uc77c\ubd80\ub97c \ub098\ud0c0\ub0b4\ub294 \ub178\ub4dc \uacc4\uce35\uc73c\ub85c \uad6c\uc131\ub429\ub2c8\ub2e4. \uc774\ub7ec\ud55c \ub17c\ub9ac\uc801 \ud2b8\ub9ac \uad6c\uc870\ub97c \ud1b5\ud574 \ubb38\uc11c \ub0b4\uc6a9\uc744 \uc27d\uac8c \ud0d0\uc0c9\ud558\uace0 \uc870\uc791\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\uc6f9 \ubb38\uc11c\ub294 \ubaa8\ub450 \uc18d\uc131\uacfc \uba54\uc11c\ub4dc\ub97c \uac16\uace0 \uc788\uace0 \ub2e4\ub978 \uac1c\uccb4\ub97c \ud3ec\ud568\ud560 \uc218 \uc788\ub294 \uac1c\uccb4 \ud2b8\ub9ac\ub85c \ubaa8\ub378\ub9c1\ub429\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4 HTML \ubb38\uc11c\ub294 &quot;body&quot;, &quot;div&quot;, &quot;span&quot;, &quot;p&quot;\uc640 \uac19\uc740 \uc694\uc18c\uc640 \ud574\ub2f9 \uc18d\uc131 \ubc0f \ud14d\uc2a4\ud2b8 \ucf58\ud150\uce20\ub97c \ub098\ud0c0\ub0b4\ub294 \uac1c\uccb4\ub85c \ubcc0\ud658\ub429\ub2c8\ub2e4.<\/p>\n<h2>DOM(\ubb38\uc11c \uac1c\uccb4 \ubaa8\ub378) \uc791\ub3d9 \ubc29\uc2dd<\/h2>\n<p>DOM\uc758 \ub0b4\ubd80 \uad6c\uc870\ub294 \ub178\ub4dc \ud2b8\ub9ac\ub85c \uad6c\uc131\ub429\ub2c8\ub2e4. \ucd5c\uc0c1\uc704 \ub178\ub4dc\ub294 <code data-no-translation=\"\">Document<\/code> \uc804\uccb4 \ubb38\uc11c\ub97c \ub098\ud0c0\ub0b4\ub294 \ub178\ub4dc\uc785\ub2c8\ub2e4. \uc774 \uc544\ub798\uc5d0\ub294 <code data-no-translation=\"\">Element<\/code> \ub178\ub4dc\ub294 \ud398\uc774\uc9c0\uc758 HTML \uc694\uc18c\uc5d0 \ud574\ub2f9\ud569\ub2c8\ub2e4. <code data-no-translation=\"\">Attribute<\/code> \ub178\ub4dc\ub294 \uc694\uc18c\uc758 \uc18d\uc131\uc744 \ubcf4\uc720\ud558\uba70, <code data-no-translation=\"\">Text<\/code> \ub178\ub4dc\ub294 \uc694\uc18c\uc758 \ud14d\uc2a4\ud2b8 \ucf58\ud150\uce20\ub97c \ubcf4\uc720\ud569\ub2c8\ub2e4.<\/p>\n<p>\uc774 \uacc4\uce35 \uad6c\uc870\ub97c \ud1b5\ud574 \uac1c\ubc1c\uc790\ub294 \ubb38\uc11c \ud2b8\ub9ac\ub97c \ud0d0\uc0c9\ud558\uace0 API \uba54\uc11c\ub4dc\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub178\ub4dc\ub97c \uc120\ud0dd, \uc0dd\uc131, \uc218\uc815 \ub610\ub294 \uc0ad\uc81c\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\ub2e4\uc74c\uc740 HTML \ubb38\uc11c\uac00 DOM \ud2b8\ub9ac\ub85c \ud45c\uc2dc\ub418\ub294 \ubc29\uc2dd\uc5d0 \ub300\ud55c \uc608\uc785\ub2c8\ub2e4.<\/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>\uc218\ud559<\/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>\ucf54\ub4dc \ubcf5\uc0ac<\/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>DOM(\ubb38\uc11c \uac1c\uccb4 \ubaa8\ub378)\uc758 \uc8fc\uc694 \uae30\ub2a5<\/h2>\n<ol>\n<li>\n<p><strong>\ud2b8\ub9ac \uad6c\uc870<\/strong>: DOM\uc740 \ud0d0\uc0c9, \uc120\ud0dd, \uc870\uc791\uc744 \uac04\ub2e8\ud558\uace0 \uc9c1\uad00\uc801\uc73c\ub85c \ub9cc\ub4dc\ub294 \ub17c\ub9ac\uc801 \ud2b8\ub9ac \uad6c\uc870\ub85c \ubb38\uc11c\ub97c \ub098\ud0c0\ub0c5\ub2c8\ub2e4.<\/p>\n<\/li>\n<li>\n<p><strong>\uc5b8\uc5b4 \uc911\ub9bd\uc801<\/strong>: DOM\uc740 \ud2b9\uc815 \ud504\ub85c\uadf8\ub798\ubc0d \uc5b8\uc5b4\uc5d0 \ubb36\uc5ec \uc788\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. \uc774\ub294 HTML, XML \ubc0f \uae30\ud0c0 \ubb38\uc11c \uc720\ud615\uc758 \uac1c\uccb4\ub97c \ud45c\ud604\ud558\uace0 \uc0c1\ud638 \uc791\uc6a9\ud558\uae30 \uc704\ud55c \uaddc\uce59\uc785\ub2c8\ub2e4.<\/p>\n<\/li>\n<li>\n<p><strong>\ub3d9\uc801 \uc561\uc138\uc2a4 \ubc0f \uc5c5\ub370\uc774\ud2b8<\/strong>: DOM\uc744 \uc0ac\uc6a9\ud558\uba74 \ud504\ub85c\uadf8\ub7a8\uc774 \ubb38\uc11c\uc758 \ucf58\ud150\uce20, \uad6c\uc870 \ubc0f \uc2a4\ud0c0\uc77c\uc5d0 \ub3d9\uc801\uc73c\ub85c \uc561\uc138\uc2a4\ud558\uace0 \uc5c5\ub370\uc774\ud2b8\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<\/li>\n<li>\n<p><strong>\ud45c\uc900\ud654\ub428<\/strong>: DOM\uc740 W3C \ud45c\uc900\uc73c\ub85c, \ub2e4\uc591\ud55c \ube0c\ub77c\uc6b0\uc800\uc640 \ud50c\ub7ab\ud3fc\uc5d0\uc11c \uad11\ubc94\uc704\ud55c \uc218\uc6a9\uacfc \ud638\ud658\uc131\uc744 \ubcf4\uc7a5\ud569\ub2c8\ub2e4.<\/p>\n<\/li>\n<\/ol>\n<h2>DOM(\ubb38\uc11c \uac1c\uccb4 \ubaa8\ub378)\uc758 \uc720\ud615<\/h2>\n<p>DOM \uc0ac\uc591\uc740 \uc5ec\ub7ec &quot;\ub808\ubca8&quot;\uacfc &quot;\ubaa8\ub4c8&quot;\ub85c \ub098\ub204\uc5b4\uc838 \uc788\uc73c\uba70, \uac01\uac01\uc740 \uc774\uc804 \uc0ac\uc591\uc5d0 \ud2b9\uc9d5\uacfc \uae30\ub2a5\uc744 \ucd94\uac00\ud569\ub2c8\ub2e4. \uc8fc\uc694 \uc720\ud615\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<table>\n<thead>\n<tr>\n<th>DOM \ub808\ubca8\/\uc720\ud615<\/th>\n<th>\uac04\ub2e8\ud55c \uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>DOM \ub808\ubca8 1<\/strong><\/td>\n<td>\uc694\uc18c \ubc0f \ud574\ub2f9 \uc18d\uc131\uc744 \uc870\uc791\ud558\ub294 \ubc29\ubc95\uc744 \ud3ec\ud568\ud558\uc5ec \uc804\uccb4 HTML \ub610\ub294 XML \ubb38\uc11c\uc5d0 \ub300\ud55c \uae30\ubcf8 \ubaa8\ub378\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/td>\n<\/tr>\n<tr>\n<td><strong>DOM \ub808\ubca8 2<\/strong><\/td>\n<td>\ub124\uc784\uc2a4\ud398\uc774\uc2a4 \ucc98\ub9ac, CSS\ub97c \uc9c0\uc6d0\ud558\ub294 \uc2a4\ud0c0\uc77c \ubaa8\ub4c8, \ud14c\uc774\ube14, \uc774\ubca4\ud2b8 \ub4f1\uc744 \ucc98\ub9ac\ud558\ub294 \uba87 \uac00\uc9c0 \uc0c8\ub85c\uc6b4 \uc778\ud130\ud398\uc774\uc2a4\uc640 \uac19\uc740 \uae30\ub2a5\uc774 \ub3c4\uc785\ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/td>\n<\/tr>\n<tr>\n<td><strong>DOM \ub808\ubca8 3<\/strong><\/td>\n<td>XPath \ubc0f \ud0a4\ubcf4\ub4dc \uc774\ubca4\ud2b8 \ucc98\ub9ac\uc5d0 \ub300\ud55c \uc9c0\uc6d0\uc774 \ucd94\uac00\ub418\uace0 \ubb38\uc11c \ub85c\ub4dc \ubc0f \uc800\uc7a5\uc744 \uc704\ud55c \uc778\ud130\ud398\uc774\uc2a4\uac00 \ub3c4\uc785\ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/td>\n<\/tr>\n<tr>\n<td><strong>DOM \ub808\ubca8 4<\/strong><\/td>\n<td>\uc885\uc18d\uc131\uc744 \uc904\uc5ec \ud575\uc2ec DOM\uc744 \ub2e8\uc21c\ud654\ud558\uace0 \ube44\ub3d9\uae30 \uc791\uc5c5\uc5d0 \ub300\ud55c \uc57d\uc18d\uc744 \ub3c4\uc785\ud588\uc73c\uba70 \ub354 \uc26c\uc6b4 \ub178\ub4dc \uc870\uc791\uc744 \uc704\ud574 \uc0c1\uc704 \uae30\ub2a5\uacfc \uac19\uc740 \ub354 \ub9ce\uc740 \uae30\ub2a5\uc744 \ucd94\uac00\ud588\uc2b5\ub2c8\ub2e4.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>DOM(\ubb38\uc11c \uac1c\uccb4 \ubaa8\ub378) \ud65c\uc6a9<\/h2>\n<p>DOM\uc740 JavaScript\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc6f9\ud398\uc774\uc9c0\ub97c \uc870\uc791\ud560 \ub54c\ub9c8\ub2e4 \uc0ac\uc6a9\ub429\ub2c8\ub2e4. \uc774\ub294 \uc218\ub9ce\uc740 \uc6f9 \uae30\uc220\uc758 \uae30\ubcf8 API\uc785\ub2c8\ub2e4.<\/p>\n<p>\uac1c\ubc1c\uc790\ub294 DOM\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc804\uccb4 \ud398\uc774\uc9c0\ub97c \ub2e4\uc2dc \ub85c\ub4dc\ud560 \ud544\uc694 \uc5c6\uc774 \uc6f9 \ud398\uc774\uc9c0\uc758 \ubaa8\uc591, \ub290\ub08c \ubc0f \ucf58\ud150\uce20\ub97c \ub3d9\uc801\uc73c\ub85c \ubcc0\uacbd\ud558\ubbc0\ub85c \ub300\ud654\ud615 \ubc0f \ubc18\uc751\ud615 \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\uac00 \uac00\ub2a5\ud569\ub2c8\ub2e4.<\/p>\n<p>\uadf8 \uac15\ub825\ud568\uc5d0\ub3c4 \ubd88\uad6c\ud558\uace0 DOM\uc5d0\ub3c4 \ubb38\uc81c\uac00 \uc5c6\ub294 \uac83\uc740 \uc544\ub2d9\ub2c8\ub2e4. \ud2b9\ud788 \ud06c\uac70\ub098 \ubcf5\uc7a1\ud55c \uc6f9 \ubb38\uc11c\uc758 \uacbd\uc6b0 \uc8fc\uc758 \uae4a\uac8c \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uc73c\uba74 \uc18d\ub3c4\uac00 \ub290\ub824\uc9c8 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc81c\ub300\ub85c \ucd5c\uc801\ud654\ub418\uc9c0 \uc54a\uc740 DOM \uc870\uc791\uc73c\ub85c \uc778\ud574 \ud398\uc774\uc9c0 \ub80c\ub354\ub9c1 \uc18d\ub3c4\uac00 \ub290\ub824\uc9c0\uace0 \uc778\ud130\ud398\uc774\uc2a4\uac00 \uc751\ub2f5\ud558\uc9c0 \uc54a\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \ubb38\uc81c\ub97c \ud574\uacb0\ud558\uae30 \uc704\ud574 \uac1c\ubc1c\uc790\ub294 \ud6a8\uc728\uc801\uc778 DOM \uc870\uc791\uc744 \uc704\ud574 \ub354 \ub192\uc740 \uc218\uc900\uc758 API\ub97c \uc81c\uacf5\ud558\ub294 jQuery, React \ub610\ub294 Vue.js\uc640 \uac19\uc740 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub098 \ud504\ub808\uc784\uc6cc\ud06c\ub97c \uc0ac\uc6a9\ud558\ub294 \uacbd\uc6b0\uac00 \ub9ce\uc2b5\ub2c8\ub2e4.<\/p>\n<h2>DOM \ud2b9\uc131 \ubc0f \uc720\uc0ac \uc6a9\uc5b4\uc640\uc758 \ube44\uad50<\/h2>\n<table>\n<thead>\n<tr>\n<th>\uc6a9\uc5b4<\/th>\n<th>\uc124\uba85<\/th>\n<th>\ube44\uad50<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>DOM<\/strong><\/td>\n<td>\ubb38\uc11c\uc758 \uad6c\uc870\uc801 \ud45c\ud604\uc744 \uc81c\uacf5\ud558\uace0 \uac1c\ubc1c\uc790\uac00 \ubb38\uc11c\uc758 \ub0b4\uc6a9\uacfc \uc2dc\uac01\uc801 \ud45c\ud604\uc744 \uc870\uc791\ud560 \uc218 \uc788\ub3c4\ub85d \ud558\ub294 HTML \ubc0f XML \ubb38\uc11c\uc6a9 API\uc785\ub2c8\ub2e4.<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td><strong>CSSOM<\/strong><\/td>\n<td>CSSOM(CSS \uac1c\uccb4 \ubaa8\ub378)\uc740 DOM\uacfc \uc720\uc0ac\ud558\uc9c0\ub9cc \ud2b9\ud788 CSS\uc6a9 CSS \uc2a4\ud0c0\uc77c \ub9f5\uc785\ub2c8\ub2e4. DOM\uc5d0 \uc801\uc6a9\ub41c \uc2a4\ud0c0\uc77c\uc2dc\ud2b8\uc640 \uc2a4\ud0c0\uc77c\uc744 \uc870\uc791\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/td>\n<td>DOM\uc774 \ubb38\uc11c \uad6c\uc870\uc5d0 \uc911\uc810\uc744 \ub450\ub294 \ubc18\uba74 CSSOM\uc740 \ud504\ub808\uc820\ud14c\uc774\uc158 \uacc4\uce35\uc5d0 \uc911\uc810\uc744 \ub461\ub2c8\ub2e4.<\/td>\n<\/tr>\n<tr>\n<td><strong>\uc100\ub3c4\uc6b0 DOM<\/strong><\/td>\n<td>\uc6f9 \uad6c\uc131 \uc694\uc18c \uad6c\ud604\uc744 \uc704\ud574 DOM \ud2b8\ub9ac\uc758 \uc77c\ubd80\ub97c \ucea1\uc290\ud654\ud558\ub294 \uba54\ucee4\ub2c8\uc998\uc785\ub2c8\ub2e4. DOM\uc758 \uc77c\ubd80\ub97c \uaca9\ub9ac\ud558\uc5ec \uae30\ubcf8 \ubb38\uc11c \ud2b8\ub9ac\uc5d0\uc11c &quot;\uc228\uae41\ub2c8\ub2e4&quot;.<\/td>\n<td>\uc77c\ubc18 DOM\uacfc \ub2ec\ub9ac Shadow DOM\uc740 \uc2a4\ud0c0\uc77c\uacfc \ub3d9\uc791 \ucea1\uc290\ud654\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>DOM(\ubb38\uc11c \uac1d\uccb4 \ubaa8\ub378)\uacfc \uad00\ub828\ub41c \ubbf8\ub798\uc758 \uad00\uc810<\/h2>\n<p>\uc6f9 \uae30\uc220\uc774 \uacc4\uc18d \ubc1c\uc804\ud568\uc5d0 \ub530\ub77c DOM API\ub3c4 \ud655\uc7a5\ub418\uace0 \uac1c\uc120\ub420 \uac00\ub2a5\uc131\uc774 \ub192\uc2b5\ub2c8\ub2e4. \uc7a0\uc7ac\uc801\uc778 \ud5a5\ud6c4 \uac1c\ubc1c\uc5d0\ub294 DOM\uc744 \uc870\uc791\ud558\ub294 \ubcf4\ub2e4 \ud6a8\uc728\uc801\uc778 \ubc29\ubc95, \uc0c8\ub85c\uc6b4 \uc6f9 \ud45c\uc900\uacfc\uc758 \ud5a5\uc0c1\ub41c \ud1b5\ud569, HTML \uc0ac\uc591 \uc790\uccb4\uc758 \uc9c0\uc18d\uc801\uc778 \ubc1c\uc804\uc774 \ud3ec\ud568\ub429\ub2c8\ub2e4.<\/p>\n<p>\uc9c4\ud589 \uc911\uc778 \ud765\ubbf8\ub85c\uc6b4 \uac1c\ubc1c \uc911 \ud558\ub098\ub294 \uc7ac\uc0ac\uc6a9 \uac00\ub2a5\ud558\uace0 \ucea1\uc290\ud654\ub41c HTML \ud0dc\uadf8\ub97c \uc0dd\uc131\ud560 \uc218 \uc788\ub294 \uc6f9 \uad6c\uc131 \uc694\uc18c\uc758 \uc810\uc9c4\uc801\uc778 \ucc44\ud0dd\uc785\ub2c8\ub2e4. \uc774\ub294 DOM \uc694\uc18c\ub97c \ucea1\uc290\ud654\ud558\ub294 \ubc29\ubc95\uc744 \uc81c\uacf5\ud558\ub294 Shadow DOM\uacfc \ubc00\uc811\ud558\uac8c \uc5f0\uacb0\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<h2>DOM(\ubb38\uc11c \uac1c\uccb4 \ubaa8\ub378) \ubc0f \ud504\ub85d\uc2dc \uc11c\ubc84<\/h2>\n<p>\ud504\ub85d\uc2dc \uc11c\ubc84\ub294 \ud074\ub77c\uc774\uc5b8\ud2b8\uc640 \uc11c\ubc84 \uac04\uc5d0 \uc694\uccad\uacfc \uc751\ub2f5\uc744 \uc804\ub2ec\ud558\ub294 \uc911\uac1c\uc790\uc785\ub2c8\ub2e4. DOM\uc740 \uc8fc\ub85c \ud074\ub77c\uc774\uc5b8\ud2b8 \uce21 \uc6f9 \ubb38\uc11c\uc758 \uad6c\uc870 \ubc0f \uc870\uc791\uacfc \uad00\ub828\uc774 \uc788\uc9c0\ub9cc \ud504\ub85d\uc2dc \uc11c\ubc84\ub294 \ub124\ud2b8\uc6cc\ud06c \uc218\uc900\uc5d0\uc11c \uc791\ub3d9\ud569\ub2c8\ub2e4.<\/p>\n<p>\uadf8\ub7ec\ub098 \ud504\ub85d\uc2dc \uc11c\ubc84\uac00 \uc6f9 \ubb38\uc11c\uc758 \ub0b4\uc6a9\uc744 \uc218\uc815\ud560 \uc218 \uc788\ub294 \uc2dc\ub098\ub9ac\uc624\uc5d0\uc11c \ub450 \uac00\uc9c0\uc758 \uad50\ucc28\uc810\uc744 \ucc3e\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4 \ud504\ub85d\uc2dc \uc11c\ubc84\ub294 \uc6f9 \ud398\uc774\uc9c0\uac00 \ud074\ub77c\uc774\uc5b8\ud2b8\uc5d0 \ub3c4\ub2ec\ud558\uae30 \uc804\uc5d0 DOM \uc694\uc18c\ub97c \ucd94\uac00, \uc81c\uac70 \ub610\ub294 \uc218\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub294 \uc2a4\ud06c\ub9bd\ud2b8 \uc0bd\uc785, \uc6d0\uce58 \uc54a\ub294 \uc694\uc18c \uc81c\uac70, \ud604\uc9c0\ud654 \ub610\ub294 \uc0ac\uc6a9\uc790 \uc815\uc758 \ubaa9\uc801\uc73c\ub85c \ucf58\ud150\uce20 \uc218\uc815 \ub4f1 \ub2e4\uc591\ud55c \uc774\uc720\ub85c \uc0ac\uc6a9\ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<h2>\uad00\ub828\ub41c \ub9c1\ud06c\ub4e4<\/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 \uc6f9 \ubb38\uc11c: \ubb38\uc11c \uac1c\uccb4 \ubaa8\ub378(DOM)<\/a><\/li>\n<li><a href=\"https:\/\/dom.spec.whatwg.org\/\" target=\"_new\" rel=\"noopener nofollow\">W3C DOM \ud45c\uc900<\/a><\/li>\n<li><a href=\"https:\/\/javascript.info\/dom\" target=\"_new\" rel=\"noopener nofollow\">JavaScript \uc815\ubcf4: DOM<\/a><\/li>\n<li><a href=\"https:\/\/developers.google.com\/web\/updates\/2018\/09\/inside-browser-part1\" target=\"_new\" rel=\"noopener nofollow\">Google \uc6f9 \uae30\ucd08: \ube0c\ub77c\uc6b0\uc800 \uc791\ub3d9 \ubc29\uc2dd<\/a><\/li>\n<\/ul>\n<p>\uc774 \uac1c\uc694\ub294 DOM(\ubb38\uc11c \uac1c\uccb4 \ubaa8\ub378), \uadf8 \uae30\uc6d0, \uc791\ub3d9 \ubc29\uc2dd, \ud2b9\uc131 \ubc0f \uc9c4\ud654 \uac00\ub2a5\uc131\uc5d0 \ub300\ud55c \ud3ec\uad04\uc801\uc778 \uc774\ud574\ub97c \uc81c\uacf5\ud574\uc57c \ud569\ub2c8\ub2e4. DOM\uc740 \ub300\ud654\ud615 \uc6f9 \uac1c\ubc1c\uc758 \ucd08\uc11d\uc73c\ub85c \ub0a8\uc544 \uc788\uc73c\uba70 \uc6f9 \uae30\uc220\uc774 \ubc1c\uc804\ud568\uc5d0 \ub530\ub77c \uacc4\uc18d\ud574\uc11c \uc911\uc694\ud55c \uc5ed\ud560\uc744 \ud560 \uac83\uc785\ub2c8\ub2e4.<\/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\/kr\/wp-json\/wp\/v2\/wiki\/476958","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oneproxy.pro\/kr\/wp-json\/wp\/v2\/wiki"}],"about":[{"href":"https:\/\/oneproxy.pro\/kr\/wp-json\/wp\/v2\/types\/wiki"}],"version-history":[{"count":0,"href":"https:\/\/oneproxy.pro\/kr\/wp-json\/wp\/v2\/wiki\/476958\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oneproxy.pro\/kr\/wp-json\/wp\/v2\/media\/468251"}],"wp:attachment":[{"href":"https:\/\/oneproxy.pro\/kr\/wp-json\/wp\/v2\/media?parent=476958"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}