DOM 정보

2628 단어 JavaScript

개시하다


저는 엔지니어 1학년 학생입니다.
나는 매일 공부하는 필기로 꾸준히 기사를 쓰고 싶다.
이번엔 덤이라고 써.

DOM이란??


Doocument Object Model의 생략
HTML 및 XML 문서에 대한 프로그래밍 인터페이스
참조: https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model/Introduction
는 스크립트 언어를 사용하여 HTML 및 XML을 조작하는 구조입니다.

DOM 트리란??


DOM에서 HTML 및 XML은 트리 계층으로 처리됩니다.
계층 구조를 DOM 트리라고 합니다.
예를 들어 다음 HTML의 경우
<body>
<div>
    <p id="cat">ねこ<p>
    <p>いぬ</p>
</div>
<div>
    <p>コアラ<p>
    <p>カンガルー</p>
</div>
</body>
DOM 트리는 다음과 같습니다.

노드란??


DOM 트리의 요소는 Node입니다.
방금 쓴 DOM 트리 구조의div,p 등 각 요소 중 하나는 모두 Node입니다.
div 라벨을 기준으로 볼 때 바디는 부모 노드이고 p는 하위 노드이다.

자바스크립트 기반 DOM 작업 예시

<script>
  var animal = document.getElementById("cat");
  animal.textContent = "ぱんだ";
  console.log(animal);
</script>
방금 기술한 HTML에서 id = "cat"의 p 요소를 얻습니다
내용도 고양이부터 시작된 개작 컨트롤러에 나타난다.
간단하지만 이상은 p 노드를 얻어 내용을 개작하는 DOM 조작례입니다.

총결산


처음 공부할 때 DOM의 생각을 잘 이해하지 못했다
다시 한 번 보니 평소 DOM을 조작하고 있었다.
나는 앞으로도 반드시 명확하고 모호한 단어의 정의를 해야 한다고 생각한다.

좋은 웹페이지 즐겨찾기