티스토리 뷰

LANGUAGE/JAVA SCRIPT

[JAVA SCRIPT] DOM

진심스테이크 2018. 10. 16. 11:50

 

DOM (Document Object Model) : HTML 문서 객체

 

1. HTML DOM

- 웹 페이지가 로드되면 브라우저는 페이지의 문서 객체 모델 (DOM)을 만든다

 

HTML DOM 객체 트리

 

- 객체 모델을 사용하면 자바스크립트는 동적 HTML을 만드는데 필요한 기능들

  ㉠ 자바스크립트는 페이지의 모든 HTML 요소와 속성을 변경 및 제거 할 수 있다.

  ㉡ 자바스크립트는 페이지의 모든 기존 HTML 이벤트에 반응할 수 있다.

  ㉢ 자바스크립트는 페이지의 모든 CSS 스타일을 변경할 수 있다.

  ㉣ 자바스크립트는 페이지의 새로운 HTML 이벤트를 생성할 수 있다.

 

 

- HTML DOM 메서드는 HTML 요소에서 수행할 수 있는 작업이며, 속성은 사용자가 설정하거나 변경할 수 있는 HTML 요소의 값임

- DOM에서 모든 HTML 요소는 객체로 정의됨

<body>
  <p id="intro">Hello World!</p>
  <script>
    var myElement = document.getElementById("intro");
    document.write("The text from the intro paragraph is " + myelement.innerHTML);
  </script>
</body>

<!-- 
document : 문서 객체
getElementById : 메서드
innerHTML : 속성
 -->

 

 

HTML DOM 객체

1. getElementById(id)

- DOM에서 HTML 요소를 찾는 가장 일반적이고 쉬운 방법은 id 요소를 사용하는 것

 

2. getElementByTagName(name)

- 특정 태그를 찾아줌

<body>
  <p>Hello World!</p>
  <p>The DOM is very useful!</p>
  <p id="demo"></p>
  <script>
    var x = document.getElemenyByTagName("p"); //모든 <p> 태그를 찾음
  </script>
</body>

 

3. getElementByClassName(name)

- 동일한 클래스 이름을 가진 모든 HTML 요소를 찾음

<body>
  <p class="intro">Hello World!</p>
  <p class="intro">The DOM is very useful!</p>
  <p class="intro">1234567890</p>
  <script>
    var x = document.getElemenyByClassName("intro"); //class="intro"인 모든 요소의 목록을 반환
  </script>
</body>

 

4. querySelectorAll( )

- 지정된 요소 선택기(ID, 클래스 이름, 유형, 속성, 속성 값 등)와 일치하는 모든 HTML 요소를 찾아줌

<body>
  <p class="intro">Hello World!</p>
  <p class="intro">The DOM is very useful!</p>
  <p class="intro">1234567890</p>
  <p id="demo"></p>
  <script>
    var x = document.querySelectorAll("p.intro"); // 태그가 <p>이고 class="intro"인 경우
  </script>
</body>

 

 

                                                  HTML 요소 내용 변경

 메서드

설명

element.innerHTML = new html content 

HTML 요소의 내용을 변경 

element.attribute = new value 

HTML 요소의 속성 값을 변경 

element.setAttribute(attribute, value) 

HTML 요소의 속성 값을 변경 

element.style.property = new style

HTML 요소의 스타일을 변경 

 

                                                 HTML 요소 추가/삭제

 메서드

설명 

 document.createElement(element)

HTML 요소 생성 

document.removeChild(element) 

HTML 요소 제거 

document.appendChild(element)

HTML 요소 추가 

document.replaceChild(elemenet) 

HTML 요소 교환 

document.write(text) 

HTML 출력 스트림에 쓰기 

 

 

 

 

 

저작자표시 비영리 변경금지

'LANGUAGE > JAVA SCRIPT' 카테고리의 다른 글

[JAVA SCRIPT] CONST, LET, VAR  (0) 2018.12.15
[JAVA SCRIPT] ARROW FUNCTION - 화살표 함수  (0) 2018.10.22
[JAVA SCRIPT] OBJECT - 객체  (0) 2018.10.14
[JAVA SCRIPT] FUNCTION - 함수  (0) 2018.10.11
[JAVA SCRIPT] ARRAY - 배열  (0) 2018.10.11
댓글