DOM 요소에 접근하고 속성 가져오기

DOM에 접근하기

 

• class, id, 태그 등을 선택자(selector)라고 한다.
• id 선택자로 접근하는 getElementById() 메서드
  - HTML 태그의 id 속성은 HTML 요소가 문서 안에서 중복되지 않도록 사용하는 CSS 선택자이다.
  - 특정한 id가 포함된 DOM 요소에 접근할 수 있다.
  

  요소명.getElementById("id명")
  
  // ex) document.getElementById("heading")

   
•   class값으로 접근하는 getElementsByClassName() 메서드
  - 지정한 class 선택자 이름이 들어 있는 DOM 요소에 접근한다.
  

  요소명.getElementsByClassName("class명")
  
  // ex) document.getElementsByClassName("bright")

  - class 선택자는 웹 문서 안의 여러 요소에서 사용할 수 있으므로 getElementsByClassName() 메서드를 사용하면 반환하는 요소가 2개 이상일 수 있다. 그래서 이 메서드 이름에는 반환 요소가 여러 개라는 뜻에서 Element에 s를 붙인 것이다.
  - getElementsByClassName() 메서드를 사용하게 되면 클래스 이름이 같은 DOM 요소들이 HTMLCollection 객체로 저장된다. HTMLCollection 객체는 배열과 비슷하고 배열처럼 사용할 수 있다.
• 태그 이름으로 접근하는 getElementsByTagName() 메서드
  - class나 id를 지정하지 않은 DOM 요소에 접근하려면 태그를 이용한다.
  

  요소명.getElementsByTagName("태그명")
  
  // document.getElementsByTagName("p")

  - 웹 문서 안에서 같은 태그를 사용하는 요소가 2개 이상일 수 있으므로 반환하는 값도 HTMLCollection 형태로 저장된다.
• 다양한 방법으로 접근하는 querySelector(), querySelectorAll() 메서드
  - DOM 트리의 텍스트, 속성 노드까지 자유롭게 제어하기 위해 사용한다.
  - id 선택자처럼 반환 값이 하나라면 querySelector() 메서드를 사용하고, class 선택자나 태그 이름을 사용하여 여러 값이 한꺼번에 반환될 경우 querySelectorAll() 메서드를 사용한다.
  

  노드.querySelector(선택자)
  노드.querySelectorAll(선택자 또는 태그)
  
  // querySelector("#heading") → id="heading"인 요소
  // querySelectorAll(".bright") → class="bright"인 요소

  - 선택자를 표시할 때 id 이름 앞에는 해시 기호(#)를 붙이고, class 이름 앞에는 마침표(.)를 붙인다.
    (태그는 기호 없이 태그명만 쓰면 된다.)
  - 반환 값은 노드이거나 노드 리스트이다.
    (노드 리스트는 노드를 한꺼번에 여러 개 저장한 것으로 배열과 비슷하다고 생각하면 된다.)

 

웹 요소의 내용을 수정하는 innerText, innerHTML 프로퍼티

 

• 자바스크립트에서 웹 요소의 내용도 수정할 수 있다.
• innerText 프로퍼티는 텍스트 내용을 표시하고, innerHTML 프로퍼티는 HTML 태그까지 반영하여 표시한다.
  

  요소명.innerText = 내용
  요소명.innerHTML = 내용​

속성을 가져오거나 수정하는 getAttribute(), setAttribute() 메서드

 

• 웹 요소를 문서에 삽입할 때 태그 속성을 함께 사용하면 DOM 트리에 속성 노드가 추가되면서 속성 값이 저장된다.
• 속성에 접근하려면 getAttribute() 메서드를 사용하고, 접근한 속성의 값을 바꾸려면 setAttribute() 메서드를 사용한다.
  - 속성을 가져오려면 getAttribute() 메서드에서 속성명을 지정한다.
  - setAttribute() 메서드를 사용하면 원하는 속성으로 지정할 수 있다.
    (속성 값이 이미 있다면 새로운 속성 값으로 수정하고, 아직 해당 속성이 없다면 속성과 속성 값을 새로 추가한다.)
  

  getAttribute("속성명")
  
  setAtrribute("속성명", "값")​