{"id":11816,"date":"2021-12-29T22:24:40","date_gmt":"2021-12-29T13:24:40","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=11816"},"modified":"2021-12-29T22:25:28","modified_gmt":"2021-12-29T13:25:28","slug":"htmlelement%eb%a5%bc-%ed%86%b5%ed%95%9c-%ec%82%ac%ec%9a%a9%ec%9e%90-%ec%a0%95%ec%9d%98-%ec%bb%b4%ed%8f%ac%eb%84%8c%ed%8a%b8-%ea%b0%9c%eb%b0%9c%ec%8b%9c-%ec%9e%90%ec%8b%9d-%ec%a0%91%ea%b7%bc","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=11816","title":{"rendered":"HTMLElement\ub97c \ud1b5\ud55c \uc0ac\uc6a9\uc790 \uc815\uc758 \ucef4\ud3ec\ub10c\ud2b8 \uac1c\ubc1c\uc2dc \uc790\uc2dd \uc811\uadfc"},"content":{"rendered":"<p>\uba3c\uc800 \ub2e4\uc74c\uacfc \uac19\uc774 HTMLElement\ub97c \uc0c1\uc18d\ubc1b\uc544 \uc0ac\uc6a9\uc790 \uc815\uc758 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4. \uc774 \uc18c\uc2a4\ub294 \uc678\ubd80 js \ud30c\uc77c\uc5d0 \uc874\uc7ac\ud569\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nclass TEST extends HTMLElement {\r\n    constructor() {\r\n        super();\r\n    }\r\n\r\n    connectedCallback() {\r\n        console.log(this.querySelectorAll(\"div\"));\r\n    }\r\n}\r\n\r\ncustomElements.define(\"my-test\", TEST);\r\n<\/pre>\n<p>\uc774\uc81c \uc704\uc758 \ucf54\ub4dc\uac00 \ub2f4\uae34 js \ud30c\uc77c\uc744 \ub2e4\uc74c \uc6f9 \ud398\uc774\uc9c0\uc5d0 \ud3ec\ud568\uc2dc\ud0ac \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">\r\n<script src=\"geoservice-web-components.js\"><\/script>\r\n<\/pre>\n<p>\uc6f9 \ud398\uc774\uc9c0\uc5d0\uc11c \ub2e4\uc74c\ucc98\ub7fc \uc815\uc758\ud55c \uc0ac\uc6a9\uc790 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ud0dc\uadf8\ub97c \ud1b5\ud574 \ucd94\uac00\ud560 \uc218 \uc788\uad6c\uc694.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">\r\n<my-test>\r\n    <div><\/div>\r\n    <div><\/div>\r\n<\/my-test>\r\n<\/pre>\n<p>\uc885\uad6d\uc5d0\ub294 TEST \ud074\ub798\uc2a4 \ucf54\ub4dc\uc758 7\ubc88 \uc904\uc5d0 \uc758\ud574 my-test \ud0dc\uadf8\uc758 \uc790\uc2dd div\uac00 2\uac1c\uc774\ubbc0\ub85c \ucf58\uc194\uc5d0 \uc544\ub798\ucc98\ub7fc \ucd9c\ub825\ub418\uc5b4\uc57c \ud569\ub2c8\ub2e4.<\/p>\n<p><code>NodeList(2)\u00a0[div, div]<code><\/p>\n<p>\ud558\uc9c0\ub9cc NodeList\u00a0[]\ub85c \ud45c\uc2dc\ub429\ub2c8\ub2e4. \uc989, \uc790\uc2dd\uc744 \ubc1c\uacac\ud560 \uc218 \uc5c6\ub2e4\uac00 \ub429\ub2c8\ub2e4. \uc774\uc720\ub294 \uc6f9\ud398\uc774\uc9c0\uc758 \ubaa8\ub4e0 DOM \uad6c\uc131 \ud2b8\ub9ac\uac00 \uc644\uc131\ub418\uc9c0 \uc54a\uc740 \uc0c1\ud0dc\uc5d0\uc11c js \ud30c\uc77c\uc774 \uc2e4\ud589\ub418\uc5c8\uae30 \ub54c\ubb38\uc778\ub370\uc694. \uc815\uc0c1\uc801\uc73c\ub85c \ucc98\ub9ac\ud558\uae30 \uc704\ud574\uc11c js \ud30c\uc77c\uc758 \uc2e4\ud589\uc744 DOM \uad6c\uc131 \ud2b8\ub9ac\uac00 \uc644\uc131\ub418\uae30 \uc804\uae4c\uc9c0 \uc9c0\uc5f0(defer)\uc2dc\ucf1c\uc918\uc57c \ud569\ub2c8\ub2e4. \uc544\ub798\ucc98\ub7fc js \ud30c\uc77c\uc744 \uc6f9 \ud398\uc774\uc9c0\uc5d0 \ud3ec\ud568\uc2dc\ud0a4\ub294 \ucf54\ub4dc\ub97c \uc218\uc815\ud558\uba74 \ub429\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">\r\n<script src=\"geoservice-web-components.js\" defer><\/script>\r\n<\/pre>\n<p>\ub3d9\uae30\ud654 \ubb38\uc81c\uc778\ub370.. \uc774\ub7f0 \ub3d9\uae30\ud654 \ucc98\ub9ac\ub97c \uc704\ud55c defer \uc0ac\uc6a9\uc740 \uaec4\ub044\ub7fd\uc2b5\ub2c8\ub2e4\ub9cc.. \uc5ec\ud2bc \uc774\ub807\uac8c \ud558\uba74 \uc790\uc2dd \uc694\uc18c\uc5d0 \uc811\uadfc \uac00\ub2a5\ud558\uac8c \ub429\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\uba3c\uc800 \ub2e4\uc74c\uacfc \uac19\uc774 HTMLElement\ub97c \uc0c1\uc18d\ubc1b\uc544 \uc0ac\uc6a9\uc790 \uc815\uc758 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4. \uc774 \uc18c\uc2a4\ub294 \uc678\ubd80 js \ud30c\uc77c\uc5d0 \uc874\uc7ac\ud569\ub2c8\ub2e4. class TEST extends HTMLElement { constructor() { super(); } connectedCallback() { console.log(this.querySelectorAll(&#8220;div&#8221;)); } } customElements.define(&#8220;my-test&#8221;, TEST); \uc774\uc81c \uc704\uc758 \ucf54\ub4dc\uac00 \ub2f4\uae34 js \ud30c\uc77c\uc744 \ub2e4\uc74c \uc6f9 \ud398\uc774\uc9c0\uc5d0 \ud3ec\ud568\uc2dc\ud0ac \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc6f9 \ud398\uc774\uc9c0\uc5d0\uc11c \ub2e4\uc74c\ucc98\ub7fc \uc815\uc758\ud55c \uc0ac\uc6a9\uc790 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ud0dc\uadf8\ub97c \ud1b5\ud574 \ucd94\uac00\ud560 \uc218 \uc788\uad6c\uc694. \uc885\uad6d\uc5d0\ub294 &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=11816\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;HTMLElement\ub97c \ud1b5\ud55c \uc0ac\uc6a9\uc790 \uc815\uc758 \ucef4\ud3ec\ub10c\ud2b8 \uac1c\ubc1c\uc2dc \uc790\uc2dd \uc811\uadfc&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-11816","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/11816","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11816"}],"version-history":[{"count":4,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/11816\/revisions"}],"predecessor-version":[{"id":11820,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/11816\/revisions\/11820"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11816"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=11816"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=11816"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}