1 분 소요

1. getElmentById()

  • Document.getElementById() 메서드는 주어진 문자열과 일치하는 [id](https://developer.mozilla.org/ko/docs/Web/API/Element/id) 속성을 가진 요소를 찾고, 이를 나타내는 [Element`](https://developer.mozilla.org/ko/docs/Web/API/Element) 객체를 반환한다. ID는 문서 내에서 유일해야 하기 때문에 특정 요소를 빠르게 찾을 때 유용하다.

    function changeColor(newColor) {
  const elem = document.getElementById('para');
  elem.style.color = newColor;
}

2. getElementsByClassName()

  • Element의 메소드 getElementsByClassName() 는 주어진 클래스를 가진 모든 자식 엘리먼트의 실시간 [HTMLCollection`](https://developer.mozilla.org/ko/docs/Web/API/HTMLCollection) 을 반환한다.

  • id 속성을 사용하여 접근하는 getElementById() 와 달리 getElementsByClassName() 은 Elements 이므로 컬렉션 객체를 반환한다.

  • 따라서 여러 개중 첫 번째에 접근하기 위해 [0]과 같은 배열의 요소애 접근하는 것처럼 하나를 특정해 줘야 한다.

    const myFirstClass = document.getElementsByClassName('myClass')[0];

    <!DOCTYPE html>
<html lang="en">
  <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" />
    <script src="./main.js" defer></script>
    <title>Document</title>
  </head>
  <body>
    <main>
      <section>
        <article id="myClass">여기에 접근하고 싶습니다</article>
        <article id="myClass">여기가 아닙니다</article>
        <article class="myClass">여기가 아닙니다</article>
      </section>
    </main>
    <footer>
      <small id="contactEmail">wecode@myemail.com</small>
    </footer>
  </body>
</html>
  

    const myFirstClass_0 = document.getElementsByClassName("myClass")[0];
const myFirstClass_1 = document.getElementsByClassName("myClass")[1];
const myFirstClass = document.getElementsByClassName("myClass");
const contactEmail = document.getElementById("contactEmail");
  
console.log(myFirstClass_0.innerHTML); // "여기에 접근하고 싶습니다"
//태그 전체를 가져온다.
console.log(myFirstClass_1); // <article class="myClass">여기가 아닙니다</article>
  
console.log(myFirstClass)
// HTMLCollection(3) [article.myClass, article.myClass, article.myClass]
0: article.myClass
1: article.myClass
2: article.myClass
length: 3
[[Prototype]]: HTMLCollection
contactEmail.style.color = "green"; // 글자색을 초록색으로 변경

3. getElementsByTagName()

  • Element의 메소드 getElementsByClassName() 는 주어진 클래스를 가진 모든 자식 엘리먼트의 실시간 [HTMLCollection`](https://developer.mozilla.org/ko/docs/Web/API/HTMLCollection) 을 반환한다.

  • 이 함수는 태그의 있는 div, li, p 와 같은 특정 태그명을 가지고 있는 element 의 집합을 가져오는 함수이다.

  • 따라서 반환되는 값은 HTML컬렉션 객체이며 for문 등을 사용하여 element 객체를 사용할수있다.

    HTML 태그는 위와 동일하다.

const tag_1 = document.getElementsByTagName("article")[0];
const tag = document.getElementsByTagName("article");

console.log(tag_1);  //<article id="myClass">여기에 접근하고 싶습니다</article>
console.log(tag_1.innerHTML); //여기에 접근하고 싶습니다
console.log(tag);  
    //HTMLCollection(3) [article#myClass, article#myClass, article.myClass, myClass: article#myClass]
    0: article#myClass
    1: article#myClass
    2: article.myClass
    myClass: article#myClass
length: 3
[[Prototype]]: HTMLCollection
console.log(tag.innerHTML);  //undefined

4. querySelector()

  • Document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다.

  • 특정 name,id,class를 제한하지 않고 css선택자를 사용하여 요소를 찾습니다.

    const el = document.querySelector(".myclass"); //class
const ev = document.querySelector("#class"); //id
const ev = document.querySelector("class"); //tag

    첫 번째 요소 반환!!!!

5. querySelectorAll()

  • querySelectorAll() 는 지정된 셀렉터 그룹에 일치하는 다큐먼트의 엘리먼트 리스트를 나타내는 정적(살아 있지 않은) [NodeList`](https://developer.mozilla.org/ko/docs/Web/API/NodeList) 를 반환합니다.
  • 반환객체가 nodeList이기에 for문 또는 forEach문을 사용합니다.
//다큐먼트에서 모든 <p> 엘리먼트의 NodeList를 얻으려면
var matches = document.querySelectorAll("p");
//예시
const abc = document.querySelectorAll("article");
const abcd = document.querySelectorAll("article")[0];

console.log(abc);

/*
NodeList(3) [article#myClass, article#myClass, article.myClass]
0: article#myClass
1: article#myClass
2: article.myClass
length: 3
[[Prototype]]: NodeList*/

console.log(abcd);  //<article id="myClass">여기에 접근하고 싶습니다</article>
console.log(abcd.innerHTML); //여기에 접근하고 싶습니다

카테고리:

업데이트:

댓글남기기

참고