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을 조작하고 있었다.
나는 앞으로도 반드시 명확하고 모호한 단어의 정의를 해야 한다고 생각한다.
Reference
이 문제에 관하여(DOM 정보), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ecoyamas/items/4984c584299b17c4a482
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<body>
<div>
<p id="cat">ねこ<p>
<p>いぬ</p>
</div>
<div>
<p>コアラ<p>
<p>カンガルー</p>
</div>
</body>
<script>
var animal = document.getElementById("cat");
animal.textContent = "ぱんだ";
console.log(animal);
</script>
Reference
이 문제에 관하여(DOM 정보), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ecoyamas/items/4984c584299b17c4a482텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
