DOM이란 무엇입니까?
3554 단어 webdevjavascripthtmldom
DOM에는 3가지 유형이 있습니다.
HTML DOM은 HTML의 표준입니다. HTML DOM은 개체, 속성, 메서드 및 이벤트를 정의합니다.
HTML 요소를 조작하기 위한 HTML DOM만 있으면 됩니다.
HTML DOM은 JavaScript 또는 다른 언어인 JavaScript로 조작할 수 있습니다. DOM은 JS의 일부가 아니지만 사용할 수 있습니다.
모든 HTML 요소는 객체입니다.
# HTML is document element, child of root node.
<html>
<head> # HEAD is a child of document element.
<title> Welcome! </title>
</head>
<body> # BODY is a child of document element.
<p> Hello, programming world! </p>
</body>
</html>
HTML 문서는 노드 트리로 구성되어 DOM으로 표현됩니다. 필요에 따라 추가, 제거, 수정으로 조작할 수 있습니다.
문서는 루트 노드입니다. 루트 노드는 HTML이라는 자식입니다. HTML 요소는 루트 노드의 자식인 문서 요소로 명명됩니다.
<html>
<head>
<title>Welcome!</title>
<script>
console.log(document.getElementById('hello').innerHTML)
</script>
</head>
<body onload="alert('Welcome to my home page!');">
<p id="hello">Hello, programming world!</p>
</body>
</html>
다양한 방법으로 요소에 액세스하고 문서를 조작할 수도 있습니다. 예를 들어 위와 같이 본문이 로드되는 동안 경고를 보내거나 해당 ID로 요소에 도달할 수 있습니다. 샘플은 다양할 수 있지만 간단히 무엇이든 할 수 있습니다. 보안 문제를 방지하기 위해 문서에 대한 기능을 비활성화할 수도 있습니다. 전체 액세스는 XSS와 같은 치명적인 취약점을 유발할 수 있습니다.
함수를 작성하여 새 요소를 만들 수 있습니다. 예를 들어 작은 기능이 있는 간단한 드롭다운 목록을 만들어 보겠습니다. 이전에는 my_select라는 ID가 지정된 빈 목록이 있습니다. 창이 로드되면 함수가 실행되어 9에 도달할 때까지 드롭다운 목록을 채웁니다.
<html>
<head>
<script>
window.onload = function() {
const select_element = document.getElementById("my_select");
for(let i=0; i< 10; i++){
let option = document.createElement("option");
option.text=`Option ${i}`;
select_element.add(option);
}
}
</script>
</head>
<body>
<select id="my_select"></select>
</body>
</html>
위의 코드를 복사&붙여넣기로 자유롭게 시도하고 DOM 조작을 시작할 수 있습니다. 너는 무엇이든 할 수있어; 배경 변경, 요소 숨기기, 표 만들기 등 원하는 대로!
Node와 Element (같지 않나요?)
노드와 요소의 구별은 쉽지만 차이점을 모르면 혼란스러울 것입니다. DOM 트리의 모든 개체는 노드로 이름이 지정됩니다. 노드는 기본 제공되거나 "div"와 같은 HTML 태그 중 하나일 수 있으며 요소는 특정 유형의 노드입니다.
노드 기능은 하위 클래스에 따라 다르며 Node 객체와 같은 것은 없으며 일반적인 유형의 요소입니다. 주요 항목은 Document, Element 및 DocumentFragment입니다.
노드는 DOM 트리의 다른 노드와 관계가 있습니다. 아래 샘플에서 HTML 노드는 BODY의 부모 노드이고 BODY는 HTML의 자식 노드입니다. HEAD 및 BODY 노드는 둘 다 HTML과 동일한 부모를 갖기 때문에 형제입니다.
<html>
<head>
</head>
<body>
</body>
</html>
getElementById(), querySelector()는 객체의 요소 유형을 반환합니다.
getElementsByTagName(), querySelectorAll()은 노드 모음을 반환합니다.
[원천]
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
https://www.javascripttutorial.net/javascript-dom/
Reference
이 문제에 관하여(DOM이란 무엇입니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ozersubasi/what-is-dom--5o0텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
