# Html Element 노드다루기

# getElementsByTagName

**getElementsByTagName()**는 문서 전체 또는 특정 노드에서 ()안의 매개변수 값 엘리먼트를 찾을 수 있습니다.

# 문법 & 예제

//문법
document.getElementsByTagName("tagname");

//예제
//p태그를 가진 두번째 요소를 선택
var example1 = document.getElementsByTagName("p")[1];
//p태그를 가진 두번째 요소안의 strong 태그를 가진 요소를 선택
var example2 = example1.getElementsByTagName("strong");

# getElementsByClassName

getElementsByClassName은 클래스의 이름을 알고 있거나 이 클래스가 적용된 엘리먼트를 문서 전체에서 찾고 싶을때 사용합니다.

<div class="section1">div</div>
var section1s = document.getElementsByClassName("section1");

for (var i = 0; i < section1s.length; i++) {
  var section1 = section1s.item(i);
  section1.style.border = "1px solid #0000ff";
}

# getElementsByClassName

getElementsByClassName은 클래스의 이름을 알고 있거나 이 클래스가 적용된 엘리먼트를 문서 전체에서 찾고 싶을때 사용합니다.

<div class="section1">div</div>
var section1s = document.getElementsByClassName("section1");

for (var i = 0; i < section1s.length; i++) {
  var section1 = section1s.item(i);
  section1.style.border = "1px solid #0000ff";
}

# getElementById

getElementById 는 문서 전체에서 id 값으로 특정 엘리먼트를 찾습니다.

<!DOCTYPE html>
<html>
  <body>
    <p>The first p element in the document.</p>
    <p>Another p element.</p>

    <p>
      Click the button to get the HTML content of the first p element (index 0)
      in this document.
    </p>

    <button onclick="myFunction()">Try it</button>

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

    <script>
      function myFunction() {
        var nodelist = document.getElementsByTagName("P").item(0).innerHTML;
        document.getElementById("demo").innerHTML = nodelist;
      }
    </script>
  </body>
</html>

# childNodes

  • 자식 노드를 모두 구하고 싶을 때

    • 특정 엘리먼트의 하위 노드인 자식 노드에 접근 하고 싶을 때 childNodes를 사용 합니다.
  • 자식 노드의 N번째 노드에 접근 하고 싶을 때

    var node = page.childNodes[N];
    //또는
    var node = page.childNodes.item(N);
    
<!--바디태그의 첫번째 자식 노드인 p 태그가 Changed! 바뀐다.-->
<!DOCTYPE html>
<html>
  <body>
    <p>This is the first p element in body.</p>

    <p>
      Click the button to change the HTML content of the body element's first
      child node (index 0).
    </p>

    <button onclick="myFunction()">Try it</button>

    <script>
      function myFunction() {
        document.body.childNodes.item(0).innerHTML = "Changed!";
      }
    </script>
  </body>
</html>
  • 첫번째 자식 노드 접근

    • firstChlid를 사용하여 첫번째 자식 노드에 접근합니다.
    요소:first-child {
      속성: 속성값;
    }
    
    .header: first-child {
      background-color: #8e44ad;
    }
    
  • 마지막 자식 노드 접근

    • lastChild를 사용하여 마지막 자식 노드에 접근합니다.

# parentNode

  • 특정 엘리먼트의 부모노드에 접근할 때 parentNode를 사용합니다.

    var header = document.getElementById("header");
    
    header.parentNode.style.border = "4px solid #ff0000";
    

# previousSibling & nextSibling

  • 형제노드를 찾을 때 사용하는 방법으로 previousSibling : 앞 형제 노드, nextSibling : 뒤 형제노드에 접근 합니다
var content = document.getElementById("content");

content.previousSibling.previousSibling.style.border = "4px solid #ff0000";

content.nextSibling.nextSibling.style.border = "4px solid #ff0000";

참조 (opens new window)

#JS
노경환
이 글이 도움이 되셨다면! 깃헙 스타 부탁드립니다 😊😄
최근변경일: 3/25/2024, 12:16:11 PM