wiki:html:html_note:html_dom_getelementsbyclassname_method

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

--- wiki:html:html_note:html_dom_getelementsbyclassname_method [2021/04/07 13:45]
emblim98
+++ wiki:html:html_note:html_dom_getelementsbyclassname_method [2023/01/13 18:44] (현재)
@@ 줄 93: / 줄 93: @@
 </code>
+====예제====
+%%HTMLCollection%% 오브젝트의 length 속성을 사용하여, 문서에 %%class="example"%%이 있는 요소가 몇 개 있는지 확인합니다.\\
+<code javascript>
+<!DOCTYPE html>
+<html>
+<body>
+    <div class="example">
+        A div element with class="example"
+    </div>
+    <div class="example">
+        Another div element with class="example"
+    </div>
+    <p class="example">A p element with class="example"</p>
+    <p>Click the button to find out how many elements with class "exmple" there are in this document.</p>
+    <button onclick="myFunction()">Try it!</button>
+    <p><strong>Note:</strong>The getElementsByClassName() method is not supported in Internet Explorer 8 and earlier versions.</p>
+    <p id="demo"></p>
+    <script>
+        function myFunction() {
+            var x = document.getElementsByClassName("example");
+            document.getElementById("demo").innerHTML = x.length;
+        }
+    </script>
+</body>
+</html>
+</code>
+====예제====
+%%class="example"%%을 가진 모든 요소들의 배경색을 변경합니다.\\
+<code javascript>
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        .example {
+            border: 1px solid #000;
+            margin: 5px;
+        }
+    </style>
+</head>
+<body>
+    <div class="example">
+        A div with class="example"
+    </div>
+    <div class="example">
+        Another div with class="example"
+    </div>
+    <p class="example">This is a p element with class="example".</p>
+    <p>This is a <span class="example">span</span> element with class="example" inside another p element.</p>
+    <p>Click the button to change the background color of all elements with class="example"</p>
+    <button class="example" onclick="myFunction()">Try it!</button>
+    <p><strong>Note:</strong>The getElementsByClassName() method is not supported in Internet Explorer 8 and eralier versions.</p>
+    <script>
+        function myFunction() {
+            var x = document.getElementsByClassName("example");
+            var i;
+            for (i = 0; i < x.length; i++) {
+                x[i].style.backgroundColor = "red";
+            }
+        }
+    </script>
+</body>
+</html>
+</code>

/volume1/web/dokuwiki/data/attic/wiki/html/html_note/html_dom_getelementsbyclassname_method.1617770733.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)