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

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
======JavaScript HTML DOM Elements======
<WRAP left notice 80%>
  * description : JavaScript HTML DOM Elements
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-03-22
</WRAP>
<WRAP clear></WRAP>
\\
=====Source of the article==== 
[[https://www.w3schools.com/js/js_htmldom_elements.asp|JavaScript HTML DOM Elements]]\\
\\
%%여기에서는 HTML 페이지에서 HTML 요소를 찾고, 접근하는 방법을 확인합니다.%%\\
\\
=====Finding HTML Elements=====
%%종종 JavaScript로 HTML 요소를 조작하기를 원하는 경우가 있습니다.%%\\
\\
그러기 위해, 요소를 먼저 찾아야 합니다. 이것을 하는 여러 가지 방법을 아래와 같습니다.\\
   * id로 HTML 요소를 찾기
   * 태그 명으로 HTML 요소를 찾기
   * 클래스 명으로 HTML 요소를 찾기
   * CSS 선택자(Selectors)로 HTML 요소를 찾기
   * HTML 오브젝트 컬렉션으로 HTML 요소를 찾기
   * 
=====Finding HTML Element by Id=====
DOM에서 HTML 요소를 찾는 가장 쉬운 방법은 요소 id를 사용하는 것입니다.\\
\\
하기 예제에서는 ''id="intro"''로 요소를 찾고 있습니다.\\
====예제====
<HTML>
<body>

   <h2>Finding HTML Elements by Id</h2>

   <p id="intro">Hello World!</p>
   <p>This example demonstrates the <b>getElementById</b>method.</p>

   <p id="demo"></p>

   <script>
       var myElement = document.getElementById("intro"); 
       document.getElementById("demo").innerHTML = "The text from the intro paragraph is " + myElement.innerHTML;
    </script>
</body>
</HTML>
\\
요소가 발견될 경우, 메서드는 myElement에 오브젝트로 해당 요소를 반환합니다.\\
\\
오소가 발견되지 않는 경우, myElement는 ''null''을 반환합니다.\\
\\
=====Finding HTML Elements by Tag Name=====
%%하기 예제에서 모든 ''<p>'' 요소들을 찾습니다.%%\\
====예제====
<HTML>
<body>
    <h2>Finding HTML Elements by Tag Name</h2>

    <p>Hello Sherlock Homes</p>
    <p>This example demonstrates the <b>getElementByTagName</b> method.</p>

    <p id="demo"></p>

    <script>
        var x = document.getElementsByTagName("p");
        document.getElementById("demo").innerHTML = 'The text in first paragraph (index 0) is: ' + x[0].innerHTML;
    </script>
</body>
</HTML>
\\
하기 예제에서 ''id="main"''을 가진 요소를 찾은 후에 ''main'' 내부에 있는 모든 ''<p>'' 요소들을 찾습니다.\\
====예제====
<HTML>
<body>
    <h2>Finding HTML Elements by Tag Name</h2>

    <div id="main">
        <p>The DOM is very useful.</p>
        <p>This exmaple demonstrates the <b>getElementsByTagName</b> method.</p>
    </div>

    <p id='demo'></p>

    <script>
        var x = document.getElementById("main");
        var y = x.getElementsByTagName('p');
        document.getElementById('demo').innerHTML = 'The first paragraph (index 0) inside "main" is: ' + y[0].innerHTML;
    </script>
</body>
</HTML>
\\
=====Finding HTML Elements by Class Name=====
동일한 클래스 명으로 모든 %%HTML%% 요소를 찾을 경우, ''getElementsByClassName()''를 사용합니다.\\
\\
하기 예제는 ''class="intro"''를 가진 모든 요소들의 목록을 반환합니다.\\
====예제====
<HTML>
<body>
    <h2>Finding HTML Elements by Class Name</h2>

    <p>Hello World!</p>

    <p class="intro">The DOM is very useful.</p>
    <p class="intro">This example demonstrates the <b>getElementsByClassName</b> method.</p>

    <p id="demo"></p>

    <script>
        var x = document.getElementsByClassName("intro");
        document.getElementById("demo").innerHTML = 'The first paragraph (index 0) with class="intro": ' + x[1].innerHTML;
    </script>
</body>
</HTML>
\\
**클래스 명으로 요소를 찾는 것은 인터넷 익스플로러 8과 이전 버전에서는 작동하지 않습니다.**
=====finding HTML Elements by CSS Selectors=====
지정 CSS 선택자 (id, class, names, types, attributes, values of attributes 등등)에 일치하는 모든 HTML 요소들을 찾을 경우, ''querySelectorAll()'' 메서드를 사용합니다.\\
\\
하기 예제는 ''class="intro"''를 가진 모든 ''<p>''요소 목록을 반환합니다.\\
====예제====
<HTML>
<body>
    <h2>Finding HTML Elements by Query Selector</h2>

    <p>Hello World!</p>

    <p class="intro">The DOM is very useful.</p>
    <p class="intro">This example demonstrates the <b>getElementsByClassName</b> method.</p>

    <p id="demo"></p>

    <script>
        var x = document.querySelectorAll("p.intro");
        document.getElementById("demo").innerHTML = 'The first paragraph (index 0) with class="intro": ' + x[0].innerHTML;
    </script>
</body>
</HTML>
\\
**클래스 명으로 요소를 찾는 것은 인터넷 익스플로러 8과 이전 버전에서는 작동하지 않습니다.**
=====Finding HTML Elements by HTML Object Collections=====
하기 예제는 형식 컬렉션(form collection)에서 ''id="frm1''을 가진 형식 요소(form element)를 찾고 모든 요소의 값을 표시합니다.\\
====예제====
<HTML>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Finding HTML Elements Using document.forms</title>
</head>
<body>
    <h2>Finding HTML Elements Using document.forms</h2>
    <form id="frm1" action="/action_page.php">
        First name: <input type="text" name="fname" value="Donald"><br>
        Last name: <input type="text" name="lname" value="Duck"><br>
        <br>
        <input type="submit" value="Submit">
    </form>
    <p>Click "Try it!!!" to display the value of each element in the form.</p>
    <button onclick="myFunction()">Try it!!!</button>
    <p id="demo"></p>
    <script>
        function myFunction() {
            var x = document.forms["frm1"];
            var text = "";
            var i;
            for (i = 0; i < x.length; i++) {
                text += x.elements[i].value + "<br>";
            }
            document.getElementById("demo").innerHTML = text;
        }
    </script>
</body>
</HTML>






{{tag>오션, JavaScript HTML DOM Elements,}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
