#4. DOM Manipulation

10357 단어 TILJavaScriptAPIAPI

What is the DOM?

Document Object Model의 약자로 HTML 또는 XML document와 상호작용하고 표현하는 API이다. DOM은 브라우저에서 로드되며, 노드 트리로 표현하는 document 모델이다.

DOM의 특징

Web에서 가장 많이 사용되는 API
DOM 객체는 Node객체를 상속 받는다.
HTML > Body > 하이퍼링크 또는 다른 페이지

DOM의 사용

  1. 제어할 HTML의 elements를 찾는다.
  2. elements(메소드 또는 EventListener 등)를 제어

DOM의 종류

  1. DOM Document
  2. DOM Events
  3. DOM Elements(Anchor, Area, Base ...)
    HTML codes
      <div class="container">
        <ul class="slider_container" id="slider">
          <li class="slide"><img src = "images/front.png" width = 800px></li>
          <li class="slide"><img src = "images/background1.jpg" width = 800px></li>
          <li class="slide"><img src = "images/biceps.jpg" width = 800px></li>
          <li class="slide"><img src = "images/barrel.jpg" width = 800px></li>
        </ul>

        <a href="#" id="prev">
          <i class="fas fa-arrow-left"></i>
        </a>
        <a href="#" id="next">
          <i class="fas fa-arrow-right"></i>
        </a>
      </div>

JS codes

<body>
<input type="text" value="jaypark" />
<a href="https://j-bback.github.io/MyHomepage/About.html">홈페이지</a>
</body>

input태그의 선언문은 HTMLInputElement라는 객체를 갖는다.
부모 객체는 HTMLElement -> Element -> Node -> Object 순이다.

Node 관계 API

var slideWrap = document.querySelector('.container'),
    slideContainer = document.querySelector('.slider_container'),
    slide = document.querySelectorAll('.slide')
파이썬 시작:모듈
Stncil에서 select의 이벤트 점화 테스트 쓰기 변경

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage