1. DOM 소개
1. DOM 소개
DOM은 HTML/XHTML에 특별히 적용되는 문서 개체 모델을 말합니다. 소프트웨어 개발자라면 이를 웹페이지의 API라고 생각할 수 있습니다. DOM은 웹 페이지의 각 요소를 객체로 처리하므로 웹 페이지의 요소를 컴퓨터 언어로 얻거나 편집할 수도 있습니다. 예를 들어 JavaScript는 DOM을 사용하여 웹 페이지를 동적으로 수정할 수 있습니다.
1.2 작업 개체에 따라 DOM 분류
작업 개체에 따라 Core DOM, XML DOM 및 HTML DOM으로 나눌 수 있습니다.
Core Dom: 모든 구조화된 문서의 표준 모델인 Core Dom입니다.
XML DOM: XML 요소에서 작동하는 XML 문서용 표준 모델입니다.
HTML DOM: HTML 요소에서 작동하는 HTML 문서용 표준 모델입니다.
1.3, DOM 함수
① 요소 쿼리
② 요소의 조상, 형제, 후손 쿼리
3 요소 속성 가져오기 및 수정
④ 요소 내용 가져오기 및 수정
⑤ 요소 생성, 삽입 및 삭제
2. DOM 노드
문서의 모든 콘텐츠는 HTML에서 전체 문서, 각 태그, 각 태그의 속성 및 텍스트와 같이 노드(노드)로 표시될 수 있습니다. 노드로 사용됩니다.
2.1. 노드 분류
① 문서 노드(Document): 전체 XML 및 HTML 문서
② 요소 노드(Element): 각 XML 및 HTML 요소
3 속성 노드(Attr): 각 XML 및 HTML 요소 속성
4 Text 노드(Text): 각 XML 및 HTML 요소의 텍스트
⑤ Comment 노드(Comment): 각 주석
참고: 여기서 Document 노드는 일반적인 용어로 XMLDocument 와 HTMLDocument 로 나눌 수 있습니다. 마찬가지로 Element는 XMLElement와 HTMLElement로 나눌 수도 있습니다.
2.2. HTML DOM 노드 계층
노드는 상위 노드, 형제 노드, 하위 노드 등 서로 계층적 관계를 갖습니다.
(1) 예:
HTML 문서를 HTML DOM 노드 트리로 변환
(2) 다이어그램 분석 예
1)
요소의 상위 노드는2)
요소와 요소는 형제 노드입니다.3)
3. HTML DOM 노드 속성
innerHTML, innerText, nodeName, nodeValue 및 nodeType 등과 같은 HTML DOM 노드 속성을 소개합니다.
3.1.innerHTML: HTML 코드 형식으로 노드의 내용을 가져오거나 설정합니다.
설명: HTML 형식으로 innerHTML 속성에 할당하면 HTML 형식으로 표시됩니다. 예: node.innerHTML="" 은 버튼을 표시합니다.
예:
document.getElementById('div').innerHTML="<input type='button' value='按钮' />"; // 设置div元素的innerHTML为一个按钮 document.getElementById('div').innerHTML; // => <input type='button' value='按钮' /> :以HTML格式返回节点的内容
3.2, innerText: 노드의 텍스트 내용을 가져오거나 설정합니다.
Description: 노드의 내용을 텍스트 문자열 형식으로 가져오거나 설정합니다.
예 1:
HTML 형식 콘텐츠 할당 문자열로 표시됩니다. " " .
예 2:
콘텐츠를 가져올 때 텍스트 콘텐츠만 가져옵니다.
document.getElementById('div').innerText; // => "文本1 文本2"
console.log( document.nodeName ); // => #document:文档节点 console.log( document.body.nodeName ); // => BODY:元素节点 console.log( document.getElementById('div').nodeName ); // => DIV:元素节点 console.log( document.getElementById('div').attributes.style.nodeName ); // => style:属性节点
3.4, nodevalue : 노드 값 가져오기 또는 설정
설명: 문서 노드 및 요소 노드의 이 속성은 null을 반환하며 읽기 전용입니다.
예:
console.log( document.nodeValue ); // => null:文档节点 console.log( document.body.nodeValue ); // => null:元素节点 console.log( document.getElementById('div').nodeValue ); // => null:元素节点 console.log( document.getElementById('div').attributes.style.nodeValue ); // => width:200px;height:100px;border:1px solid black;:style属性的值 document.getElementById('div').attributes.style.nodeValue = ' width:200px;height:200px'; // 设置style属性的值
설명:
예:
console.log( document.nodeType ); // => 9:文档节点 console.log( document.body.nodeType ); // => 1:元素节点 console.log( document.getElementById('div').nodeType ); // => 1:元素节点 console.log( document.getElementById('div').attributes.style.nodeType ); // => 2:属性节点
4. HTML 요소 노드 가져오기 방법
文档节点(document)、元素节点可以通过getElementById、getElementsByName、getElementsByClassName以及getElementsByTagName方法获取元素节点。
4.1、getElementById(id) :获取指定ID的元素
参数:
①id {string} :元素ID。
返回值:
{HtmlElement} 元素节点对象。若没有找到,返回null。
注意:
① HTML元素ID是区分大小写的。
② 若没有找到指定ID的元素,返回null。
③ 若一个父节点下面有多个相同ID元素时,默认选取第一个(而不是层级最高的)。
示例:
document.getElementById('div'); // => 获取ID为div的元素
4.2、getElementsByName(name) :返回一个包含指定name名称的的元素数组
参数:
① name {string} :name名称。
返回值:
{Array} 符合条件的元素数组。若没有找到符合条件的,返回空数组。
示例:
document.getElementsByName('Btn'); // 返回一个name为btn的元素数组
4.3、getElementsByClassName(className) :返回一个包含指定class名称的的元素数组
参数:
① className {string} :class名称。
返回值:
{Array} 符合条件的元素数组。若没有找到符合条件的,返回空数组。
示例:
document.getElementsByClassName('show'); // 返回一个class包含show的元素数组
4.4、getElementsByTagName(elementName) :返回一个指定标签名称的的元素数组
参数:
① elementName {string} :标签名称。如:div、a等等
返回值:
{Array} 符合条件的元素数组。若没有找到符合条件的,返回空数组。
示例:
document.getElementsByTagName('div'); // 返回一个标签为div的元素数组
相关推荐:html教程
위 내용은 HTML DOM이 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!