차이

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

--- wiki:html:html_note:html_dom_getelementsbyclassname_method [2021/04/07 12:04]
emblim98
+++ wiki:html:html_note:html_dom_getelementsbyclassname_method [2023/01/13 18:44] (현재)
@@ 줄 11: / 줄 11: @@
   * [[https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp|HTML DOM getElementsByClassName() Method]]
 \\
+지정 클래스 이름을 가진 모든 요소들을 가져옵니다.\\
+====예제====
+<code javascript>
+<!DOCTYPE html>
+<html lang="en">
+<body>
+    <div class="example">First div element with class="example".</div>
+    <div class="example">Second div element with class="example".</div>
+    <p>Click the button to change the text of the first div element with class="example" (index 0).</p>
+    <button 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");
+            x[0].innerHTML = "Hello World!";
+        }
+    </script>
+</body>
+</html>
+</code>
+=====Definition and Usage=====
+%%getElementsByClassName()%% 메서드는 지정된 클래스 이름을 가진 문서의 모든 요소 컬렉션을 %%HTMLCollection%% 오브젝트로 반환합니다.\\
+\\
+%%HTMLCollection%% 오브젝트는 __노드 컬렉션__<sup>a collection of nodes</sup>을 나타냅니다.\\
+노드는 인덱스 번호로 액세스할 수 있습니다. 인덱스는 0에서 시작합니다.\\
+\\
+**Tip:**\\
+%%HTMLCollection%% 개체의 길이 속성을 사용하여 지정된 클래스 이름을 가진 요소의 수를 확인한 다음\\
+모든 요소를 반복하고 원하는 정보를 추출할 수 있습니다.\\
+=====Syntax=====
+<code javascript>
+document.getElementsByClassName(classname)
+</code>
+=====Parameter Values=====
+| Parameter  | Type    | Description                                                          |
+^ classname  ^ String  ^ 필수이며, 가져오려는 요소들의 클래스 이름입니다.                         ^
+^    :::     ^  :::    ^ 여러 개의 클래스 이름을 검색하려면, "test demo"처럼 공백으로 구분합니다.  ^
+=====Technical Details=====
+반환 값:\\
+반환하는 값은 %%HTMLCollection%% 오브젝트이며, 지정된 클래스 이름을 가진 요소 컬렉션을 나타냅니다.\\
+반환된 컬렉션의 요소들은 소스 코드에서 보여지는 대로 정렬됩니다.\\
+====예제====
+"example" 클래스와 "color" 클래스를 모두 가진 요소들을 모두 가져옵니다.\\
+<code javascript>
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        div {
+            border: 1px solid #000;
+            margin: 5px;
+        }
+    </style>
+</head>
+<body>
+    <div class="example">
+        <p>P element in first div with class="example". Div's index is 0.</p>
+    </div>
+    <div class="example color">
+        <p>P element in first div wikth class="example color". Div's index is 0.</p>
+    </div>
+    <div class="exmple color">
+        <p>P element in second div with class="example color". Div's index is 1.</p>
+    </div>
+    <p>Click the button to change the background color of the first div element with the classes "exmaple" and "color".</p>
+    <button onclick="myFunction()">Try it</button>
+    <p><strong>Note:</strong> The getElementsByClassName() method is not supported in Internet Explorer 8 and earlier version.</p>
+    <script>
+        function myFunction() {
+            var x = document.getElementsByClassName("example color");
+            x[0].style.backgroundColor = "red";
+        }
+    </script>
+</body>
+</html>
+</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>
 \\
 \\
 {{tag>오션 HTML DOM getElementsByClassName() Method}}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

차이

문서 도구