본문 바로가기
JavaScript

17장 예제 - DOM 요소에 접근하고 속성 가져오기(1)

쥬크버그 2023. 4. 13. 00:49

1. getElementById() 메서드 

 

 - 특정한 id가 포함된 DOM 요소에 접근 

 - 요소명.getElementByld("id명")

 

2. getElementsByClassName() 메서드

 

 - 지정한 class 선택자 이름이 들어있는 DOM  요소에 접근

 - 요소명.getElementsByClassName("class명")

 - 반환하는 요소가 2개 이상일 수도 있음

 - 클래스 이름이 같은 DOM 요소들이 HTML Collection 객체로 저장

 

3. getElementsByTagName() 메서드

 

- 태그명을 사용한 DOM 요소에 접근

- 요소명.getElementsByTagName("태그명")

- 반환하는 요소가 2개 이상일 수도 있음

- 태그 이름이 같은 DOM 요소들이 HTML Collection 객체로 저장

 

4. querySelector() , querySelectorAll() 메서드 

 

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

 - 반환값 1개 -> querySelector() -> 노드.querySelector(선택자)

 - 반환값 2개 이상 ->querySelectorAll() -> 노드.querySelectorAll(선택자 또는 태그)

 - 반환값 : 노드 or 노드리스트(노드를 한꺼번에 여러개 저장한 것)

 

5. innerText, innerHTML 프로퍼티 

 

 - 웹 요소의 내용을 수정 

 - innerText -> 텍스트 내용 표시  -> 요소.innerText = 내용

   innerHTML -> HTML 태그까지 반영하여 표시 -> 요소.innerHTML = 내용

 

- innerText, innerHTML 프로퍼티 사용하기 

<!DOCTYPE html>
<html lang="ko">
<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>innerText, innerHTML 프로퍼티 사용하기 </title>
  <style>
    button:hover {
      background-color:antiquewhite;
    }
  </style>
</head>
<body>
  <button onclick="inntext()">innerText로 표시하기</button>
  <button onclick="innhtml()">innerHTML로 표시하기</button>
  <h1>현재시각:</h1>
  <div id="current"></div>

  <script>
    var now = new Date();

    function inntext() {
      document.getElementById("current").innerText = now;
    }
    function innhtml() {
      document.getElementById("current").innerHTML="<em>"+now+"</em>";
    }
  </script>
 
</body>
</html>
 

'JavaScript' 카테고리의 다른 글

17장 예제 - DOM 요소에 접근하고 속성 가져오기 (3)  (0) 2023.04.13
17장 예제 - DOM 요소에 접근하고 속성 가져오기 (2)  (2) 2023.04.13
17장 예제 - 문서객체모델 (DOM) 알아보기  (0) 2023.04.12
16장 마무리 문제 2  (0) 2023.04.12
16장 마무리 문제 1  (0) 2023.04.12

'JavaScript' Related Articles

티스토리툴바