Document Object Model , 약어 DOM, 중국어:文档对象模型)은 확장 가능한 마크업 언어 처리를 위해 W3C 조직에서 권장하는标准编程接口입니다.
DOM Tree DOM 통해 HTML 페이지를解析HTML tree树状结构와 그에 따른访问方法生成것을 말합니다. DOM Tree의 도움으로 다음 HTML 코드와 같이 HTML 페이지의 각 마크업 콘텐츠를 직접적이고简易조작할 수 있습니다
. HTML><머리>
<title>돔으로 놀기</title></head><body>
<p>나는 돔 노드입니다</p>
<p>
<p>피</p>
</p></body></html> 다음과 같이 DOM 트리로 추상화되었습니다. 
등
4가지 측면에서 설명합니다.
DOM을 얻기 위한 많은 API가 있지만 모두 매우 간단합니다.
:
document.getElementById("id name") 예:
<body>
<p id="p">나는 p 노드입니다</p>
<스크립트>
var p = document.getElementById("p");
console.log(p);
</script></body> 
콘솔을 열면 성공적으로 획득한 것을 확인할 수 있습니다.
.
document.getElementsByTagName("tag name") 예:
<body>
<p>나는 P 노드입니다</p>
<p>저도 p 노드입니다</p>
<스크립트>
var p = document.getElementsByTagName("p");
console.log(p);
for (let i = 0; i < p.length; i++) {
console.log(p[i]);
}
</script></body> 
참고 : 지정된 태그 이름을 가진 객체 컬렉션을 반환하려면 getElementsByTagName() 메서드를 사용하세요. 얻은 것은 객체 컬렉션이기 때문에 내부 요소를 조작하려면 순회해야 합니다. 참고: 이를 사용하여 얻은 요소 객체. 방법은 동적이다
.
document.getElementsByClassName("class name") 예:
<body>
<p class="p">나는 p 노드입니다</p>
<p class="p">나는 p 노드입니다</p>
<스크립트>
var p = document.getElementsByClassName("p");
console.log(p);
for (let i = 0; i < p.length; i++) {
console.log(p[i]);
}
</script></body> 
이것도 아주 간단하니 꼭 기억해두세요
HTML5 새 API를 통해 [권장] 구문을 얻습니다.
document.querySelector
"자세한 내용은 예제 보기");
document.querySelectorAll
("자세한 내용은 예제 보기");
<p class="p">나는 p 노드입니다</p>
<p class="name">배꽃</p>
<p id="info">정보</p>
<스크립트>
// 태그 이름으로 var 가져오기 p = document.querySelector("p");
// 클래스 이름을 통해 가져오려면 추가하는 것을 잊지 마세요. var qname = document.querySelector(".name");
// ID로 가져오려면 #을 추가해야 합니다.
var info = document.querySelector("#info");
// 일치하는 모든 요소를 가져오고 배열을 반환합니다. var all = document.querySelectorAll("p");
console.log(p);
console.log(qname);
console.log(정보);
for (let i = 0; i < all.length; i++) {
console.log(all[i]);
}
</script></body> 
보시다시피 HTML5의 새로운 API를 사용하는 것은 매우 유연하기 때문에 이것을 사용하는 것을 매우 좋아하고 사용하는 것이 좋습니다
.그 외에도 고유한 획득 방법이 있는 몇 가지 특수 요소가 있습니다. html 요소는
:
document.body
예:
<body>
<스크립트>
var body = document.body;
console.log(본문);
</script></body> 
보시다시피 body 요소의 모든 내용을 성공적으로 가져왔습니다.
구문 가져오기:
document.documentElement
예:
<body>;
<스크립트>
var html = document.documentElement;
console.log(html);
</script></body> 
보시다시피 전체 웹 페이지 html을 얻었습니다. 이제 DOM 획득이 끝났습니다. 이제 DOM을 생성하고 추가하는 방법을 알아
보겠습니다
DOM을 운영하는 것은 데이터를 가지고 놀고, 추가하고, 삭제하고, 수정하고, 확인하는 것과 같고, 생성하고 추가하는 것은 데이터를 추가하는 것과 같습니다. 데이터를 먼저 갖고 나서 추가하는 것도 마찬가지입니다. DOM 작업 먼저 DOM을 생성한 다음 이를 추가할 위치를 지정해야 합니다. 마지막으로 작업이 완료됩니다. DOM을 생성하는 방법과 DOM을
매우 간단합니다. 걱정하지 마세요. 하하
구문:
document.createElement("요소 이름") 예:
p 요소를 동적으로 생성하려면 다음과 같이 작성할 수 있습니다. 추론 적용
var p = document.createElement("p") 여기에는 두 가지 유형 있습니다. 상황에 따라 사용하세요. 하나는 하위 요소의 끝에 추가하고, 하나는 지정된 하위 요소 뒤에 추가하는 것
입니다
.
예
<body>
<p>
<a href="">바이두</a>
</p>
<스크립트>
var p = document.createElement("p");
p.innerText = "나는 p입니다"
var p = document.querySelector("p");
p.appendChild(p);
</script></body> 
p 요소 단락 태그를 동적으로 생성하고 "I am p"라는 텍스트를 작성합니다. 마지막으로 p 요소를 얻고 p를 p의 하위로 추가합니다. 이 추가 방법은 그림과 같습니다. 위의
:
node.insertBefore
(child, 지정된요소
);
<p>
<a href="">바이두</a>
<span>저는 스팬 남동생입니다</span>
</p>
<스크립트>
var p = document.createElement("p");
p.innerText = "나는 p입니다"
var p = document.querySelector("p");
var a = document.querySelector("a");
//a 요소 앞에 p 아래에 p를 만듭니다. p.insertBefore(p, a);
</script></body> 
이게 끝인가요? 네, 어떻게 생각하세요? 아주 간단하지 않습니까? 이제 남은 것은 더 많은 연습을 하는 것입니다. 이제 DOM을 수정하는 방법을 살펴보겠습니다.
다음과 같이 요약됩니다.
예 1: 페이지의 p 태그를 가져오고 콘텐츠를 "Zhou Qiluo"
<body>로 변경합니다.
<p>
<p></p>
</p>
<스크립트>
var p = document.querySelector("p");
p.innerText = "저우 치뤄";
</script></body> 예 2: 버튼을 클릭하여 Baidu 하이퍼링크
<body>생성
<p>
<button onclick="createBaidu()">Baidu 하이퍼링크를 생성하려면 클릭</button>
</p>
<스크립트>
함수 createBaidu() {
var p = document.querySelector("p");
var a = document.createElement("a");
a.href = "https://www.baidu.com";
a.innerText = "Baidu를 검색하면 알 수 있습니다.";
p.append(a);
}
</script></body> 
예시 3: 버튼을 클릭하면 p 태그의 텍스트 색상이 녹색으로 바뀌고 개 머리
<body>가 수동으로 변경됩니다.
<p>
<button onclick="changeColor()">클릭하면 녹색으로 변합니다</button>
<p>잠깐만 녹색으로 변하겠습니다</p>
</p>
<스크립트>
함수changeColor() {
var p = document.querySelector("p");
p.style.color = "녹색";
}
</script></body> 
node.removeChild() 메서드는 DOM에서 하위 노드를 삭제하고 삭제된 노드를 반환합니다.
구문
:
node.removeChild
(child);
<p>
<button onclick="removeP()">p를 제거하려면 클릭</button>
<p>저는 p입니다. 이제 시간이 다 되겠네요</p>
</p>
<스크립트>
함수 제거P() {
var p = document.querySelector("p");
var p = document.querySelector("p");
p.removeChild(p);
}
</script></body> 