DOM 프로그래밍 아트4
2678 단어 dom
<div id="header" title="this is test title">
first child node
<br />
second child node
<p>this is footer</p>
</div>
<div id="content">content .....</div>
<div id="footer">footer</div>1. 모든div 객체 획득
var div = document.getElementsByTagName("div");
2. 헤더 노드 획득
var header = document.getElementsByTagName("div")[0];
혹은
var header = document.getElementById("header");
3. 헤더 노드 대상의 상용 속성(childNodes, nodeType, nodeValue, firstChild, lastChild)
4.childNodes//요소의 모든 하위 노드 읽어들이기
header.childNodes.length //return 5
header.childNodes[0]//return first child node 텍스트 노드
header.childNodes[1]//return
요소 노드
header.childNodes[2]//return second child node 텍스트 노드
header.childNodes[3]//return
this is footer
요소 노드header.childNodes[4]//return Text 객체
노드의 세 가지 유형: 텍스트 노드, 요소 노드, 속성 노드
노드 유형을 nodeTyoe로 판단하기;
원소 노드의 nodeTyoe 속성 값은 1이다.
속성 노드의 nodeTyoe 속성 값은 2입니다.
텍스트 노드의 nodeTyoe 속성 값은 3입니다.
5.footer 노드의 텍스트 값 얻기
var footer = document.getElementById("footer");
footer.nodeValue //return null
왜?
이 요소의 텍스트는 다른 노드이기 때문에 DOM에서 요소의 첫 번째 하위 노드입니다. 즉, footer의 텍스트 값을 얻으려면 첫 번째 하위 노드의nodeValue 속성 값을 검색해야 합니다.
footer.childNodes[0].nodeValue //footer
footer.childNodes[0] == footer.firstChild //return true;
자, 오늘은 이만
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
JavaScript DOM 조작③ 「태그명을 키로 요소를 취득」이 기사에서는 JavaScript DOM 작업 "태그 이름을 키로 요소 가져오기" 에 대해 설명한다. 역할 HTML 내의 지정된 태그명을 가지는 요소를 취득하는 메소드 구문 구문은 다음과 같다. index.js 보충...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
