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

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.

====== HTML DOM getElementById() Method ======
<WRAP left notice 80%>
  * description : HTML DOM getElementById() Method
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-04-07
</WRAP>
<WRAP clear></WRAP>
\\
====Source of the article==== 
  * [[https://www.w3schools.com/jsref/met_document_getelementbyid.asp|HTML DOM getElementById() Method]]
\\
지정한 ID가 있는 요소를 가져옵니다.
<code javascript>
<!DOCTYPE html>
<html>
<body>
    <p id="demo">Click the button to change the text in this paragraph.</p>
    <button onclick="myFunction()">Try it!</button>
    <script>
        function myFunction() {
            document.getElementById("demo").innerHTML = "Hello World";
        }
    </script>
</body>
</html>
</code>

=====Definition and Usage=====
%%getElementById()%% 메서드는 지정 값을 가진 ID 속성의 요소를 반환합니다.\\
\\
이 방법은 %%HTML%% %%DOM%%에서 가장 일반적인 방법 중 하나이며, 문서의 요소를 조작하거나 문서 정보를 가져올 때 마다 사용됩니다.\\
\\
지정 ID를 가진 요소가 없으면 null을 반환합니다.\\
\\
ID는 페이지 내에서 고유해야 합니다. 그러나 지정 ID를 가진 요소가 둘 이상 있는 경우,\\ 
%%getElementById()%% 메서드는 소스 코드의 첫 번째 요소를 반환합니다.\\
=====Syntax=====
<code javascript>
document.getElementById(elementID)
</code>

=====Parameter Values=====
| Parameter  | Type    | Description                                 |
^ elementID  ^ String  ^ 필수입니다. 가져오려는 해당 요소의 ID 속성 값  ^

=====Technical Details=====
반환 값:\\
반환하는 값은 __요소 오브젝트__<sup>Element Object</sup>이며, 이것은 지정 ID를 가진 요소를 나타냅니다.\\
지정된 ID를 가진 요소가 없으면 %%null%%을 반환합니다.\\
====예제====
%%id="demo"%%를 가진 해당 요소를 가져와 컬러를 변경합니다.\\
<code javascript>
<!DOCTYPE html>
<html>
<body>
    <p id="demo">Click the button to change the color of this paragraph.</p>
    <button onclick="myFunction()">Try it!</button>
    <script>
        function myFunction() {
            var x = document.getElementById("demo");  // Get the element with id="demo"
            x.style.color = "crimson";                // Change the color of the element
        }
    </script>
</body>
</html>
</code> 
\\
\\
{{tag>오션 HTML DOM getElementById() Method}}

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

사용자 도구

사이트 도구

문서 도구