DOM 요소 접근 및 속성 가져오기

DOM에 접근하기

① id 선택자로 접근

document.getElementById("header");
// id 명이 header인 요소 선택

② class 선택자로 접근

document.getElementsByClassName("content");
// class 명이 content인 모든 요소 선택

③ 태그 선택자로 접근

document.getElementsByTagName("p");
// p 태그를 사용한 모든 요소에 접근

④ 그 외의 방법

querySelector("#header");
// id 선택자처럼 반환값이 1개라면 querySelector()

querySelector(".content");
// class나 태그 선택자처럼 반환값이 여러 개일 경우 querySelectorAll()

querySelector()나 querySelectorAll()을 사용 시

DOM 트리의 텍스트, 속성 노드까지 자유롭게 제어 가능 👍

(두 메소드의 반환값은 노드 또는 노드 리스트)

🚨 querySelector(.content); 로 작성하게 되면 해당 클래스 이름을 사용한 여러 요소 중 첫 번째 요소만 반환

 

  <h1 id="header">여기는 헤더입니다.</h1>
  <p class="content">Lorem ipsum dolor sit</p>
  <p class="content">Lorem ipsum dolor sit amet consectetur</p>
  <p class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  <p class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque quo soluta voluptas</p>

  <script>
    console.log(document.querySelector("#header")); // #header 선택
    console.log(document.querySelectorAll(".content")); // 모든 .content 선택
    console.log(document.querySelector(".content")); // 가장 첫번째 .content만 선택
  </script>

querySelector(), querySelectorAll() 사용 결과

 

 

 

요소 내용 수정하기

① innerText

텍스트 내용 표시 (단순히 내용을 삽입하거나 수정할 때)

② innerHTML

HTML 태그까지 반영하여 표시 (html 태그를 반영하여 내용을 삽입하거나 수정할 때)

  <button onclick="innText()">innerText로 표시하기</button>
  <!-- 버튼 클릭 시 innText()함수 동작 -->
  <button onclick="innHTML()">innerHTML로 표시하기</button>
  <!-- 버튼 클릭 시 innHTML()함수 동작 -->
  <h1>현재 시각 : </h1>
  <div id="current"></div>

  <script>
    let now = new Date();

    function innText() {
      document.getElementById("current").innerText = now;
      // id가 current인 요소에 now 넣기
    }

    function innHTML() {
      document.getElementById("current").innerHTML = "<em><b>" + now + "</b></em>";
      // id가 current인 요소에 em, b 태그 반영하여 now 넣기
    }
  </script>

innerText() 결과

 

innerHTML() 결과

 

 

 

 

속성 접근 및 수정

속성 접근

getAttribute("속성명");

 

  <img src="images/coffee-pink.jpg" alt="컵" id="cup" width="300" height="300" onclick="displaySrc()">
  <!-- img 클릭 시 displaySrc() 함수 동작 -->
  <script>
	function displaySrc() {
	    let cup = document.querySelector("#cup"); // 아이디가 cup인 요소 가져오기
	    console.log("이미지 소스 : " + cup.getAttribute("src"));
            // 요소의 src 속성 가져오기
            console.log("이미지 크기 : 가로 " + cup.getAttribute("width") + " 세로 " + cup.getAttribute("height"));
            // 요소의 width 속성과 height 속성 가져오기
	}	
</script>

getAttribute() 결과

 

속성 수정

setAttribute("속성명", "값");

  <img src="images/coffee-pink.jpg" alt="컵" id="cup" width="300" height="300" onclick="changeSrc()">

  <script>
        function changeSrc() {
            let cup = document.querySelector("#cup");
            cup.setAttribute("width", 500); // cup의 width 속성을 500으로 변경
            console.log("속성 변경 완료");
        }
</script>

setAttribute() 결과

 

 

 

 

 

 

Do it! HTML+CSS+자바스크립트 웹 표준의 정석 교재를 참고하여 작성했다.