> 웹 프론트엔드 > JS 튜토리얼 > DOM 노드의 속성은 무엇입니까?

DOM 노드의 속성은 무엇입니까?

清浅
풀어 주다: 2018-11-23 15:04:34
원래의
3092명이 탐색했습니다.

이 글은 DOM 노드의 속성에 대한 지식을 공유할 것이며, 이는 특정 참조 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

DOM 노드는 카테고리에 따라 서로 다른 속성을 갖습니다. 예를 들어, 라벨의 요소 노드 는 링크와 관련된 속성을 가지며, 라벨은 입력과 관련된 속성을 갖습니다. 텍스트 노드는 요소 노드와 다르지만 모든 DOM 노드가 단일 계층을 형성하기 때문에 이들 사이에는 공통 속성과 메서드가 많이 있습니다. 각 DOM 노드는 해당 내장 클래스에 속합니다.

구조적 계층 구조(트리 모양)

(1) 루트는 EventTarget으로 Node가 상속하고 다른 DOM 노드도 이를 상속합니다.

(2) EventTarget은 루트 "추상" 클래스이며 이 클래스의 객체는 절대 생성되지 않습니다. 왜냐하면 모든 노드의 기초이므로 모든 DOM 노드가 지원하기 때문입니다.

(3) 노드도 "추상" 클래스입니다. class , DOM 노드의 기초로 사용됩니다. 핵심은 parentNode, nextSibling, childNodes 등입니다. 마찬가지로 Node는 클래스 객체를 생성하지 않지만 텍스트 노드의 경우 Text, 요소 노드의 경우 Element와 같이 Node에서 특정 노드를 상속하는 일부 클래스가 있습니다.

(4) Element DOM 요소의 기본입니다. getElementsByTagName, querySelector 등과 같은 메소드를 제공합니다.

nodeType 속성

은 노드의 유형을 나타내며, 이 div의 모든 요소 노드만 반환합니다.

nodeType을 호출하여 숫자

요소 노드(일반적으로 열린 태그와 닫힌 태그가 있는 요소 쌍을 나타냄) - 1

Attribute 노드(요소 노드의 특성) - 2

Text 노드(텍스트를 렌더링하는 데 사용되는 DOM의 일부) - 3

Comment 노드(댓글 부분) node) —— 8

document —— 9

DocumentFragment —— 11

<div>
<p>123</p>
<i></i>
<span></span>
</div>	
<script type="text/javascript">
var div=document.getElementsByTagName("div")[0];
</script>
로그인 후 복사
로그인 후 복사

Image 6.jpg

nodeName 속성

DOM 노드가 주어지면 태그 이름을 다음에서 읽을 수 있습니다. nodeName 또는 tagName 속성 ;

참고: tagName 속성은 Element 노드에만 적용되며 nodeName 노드는 정의된 Node 노드에 상대적입니다.

<div>
<p>123</p>
<i></i>
<span></span>
</div>	
<script type="text/javascript">
	var div=document.getElementsByTagName("div")[0];
</script>
로그인 후 복사

Image 9.jpg

nodeValue attribute

텍스트 텍스트 노드 또는 Comment 노드 텍스트 콘텐츠, 읽기 및 쓰기 가능

<div>
<p>123</p>
<i></i>
<span></span>
</div>	
<script type="text/javascript">
var div=document.getElementsByTagName("div")[0];
</script>
로그인 후 복사
로그인 후 복사

Image 10.jpg

요약: 위 내용은 이 기사의 전체 내용입니다. DOM 속성을 배울 수 있기를 바랍니다. .

위 내용은 DOM 노드의 속성은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿