구조 및 컨텐츠 특성
Nodetype
모든 노드에는 유형이 있으며 총 12 가지 유형의 노드가 있습니다.
코드 사본은 다음과 같습니다.
인터페이스 노드 {
// nodetype
서명되지 않은 짧은 요소 _node = 1;
서명되지 않은 짧은 속성 _node = 2;
서명되지 않은 짧은 텍스트 _node = 3;
const unsigned short cdata_section_node = 4;
const unsigned 짧은 Entity_Reference_node = 5;
서명되지 않은 짧은 엔티티 _node = 6;
const unsigned 짧은 프로세스 _instruction_node = 7;
서명되지 않은 짧은 주석 _node = 8;
서명되지 않은 짧은 문서 _node = 9;
const unsigned 짧은 document_type_node = 10;
const unsigned 짧은 document_fragment_node = 11;
서명되지 않은 짧은 표기 _node = 12;
...
}
가장 중요한 두 노드는 요소 노드 (1)와 텍스트 노드 (3)입니다. 나머지는 거의 사용되지 않습니다.
예를 들어, 모든 자식 요소 노드를 나열 할 때, 우리는 그것을 반복하고 Childnodes [i] .nodeType! = 1을 사용하여 감지 할 수 있습니다.
구현 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
<body>
<div> 허용 독자 : </div>
<ul>
<li> 존 </li>
<li> 밥 </li>
</ul>
<!-주석 노드->
<cript>
var childnodes = document.body.childnodes
for (var i = 0; i <childnodes.length; i ++) {
if (childnodes [i] .nodeType! = 1) 계속하십시오
경고 (Childnodes [i])
}
</스크립트>
</body>
*생각하다
다음 코드 프롬프트는 무엇입니까?
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<body>
<cript>
Alert (document.body.lastchild.nodeType)
</스크립트>
</body>
</html>
Nodename, Tagname
Nodename과 Tagname에는 노드 이름이 포함되어 있습니다.
Document.body의 경우
ALERT (document.body.nodename) // body
HTML의 모든 NodeNames는 대문자로 표시됩니다.
Nodename이 대문자가되지 않은 경우
이 상황은 드물다. 궁금하다면 다음을 읽을 수 있습니다.
브라우저가 구문 분석하는 두 가지 방법 인 HTML 패턴과 __xml 패턴이 있다는 것을 이미 알고있을 것입니다. 일반적으로 HTML 스키마가 사용되지만 XMLHTTPREQUEST__ 기술이 XML 문서를 얻는 데 사용되면 XML 스키마가 사용됩니다.
XHTML 문서의 컨텐츠 유형이 XMlish로 설정 될 때 XML 패턴은 Firefox에서도 사용됩니다.
__xml 모드에서는 노드 이름이 유지되므로 신체 또는 신체가 나타날 수 있습니다.
따라서 xmlhttprequest__ 기술을 통해 XML에서 HTML 문서가 서버에서로드되면 노드 이름이 유지됩니다.
Nodename과 __tagname__는 요소에 대해 동일합니다.
그러나 비 요소 노드에는 NodeName 속성도 있으며, 여기에는 특수 값이 있습니다.
alert (document.nodename) // #document
대부분의 노드 유형은 태그 이름 속성이 없으며 노드의 태그 이름은 IE IS!에 주석이 붙습니다.
따라서 일반적으로 말하면 Nodename은 Tagname보다 더 의미가 있습니다. 그러나 Tagname은 단순화 된 버전과 같으므로 요소 노드 만 처리 할 때 사용할 수 있습니다.
innerhtml
InnerHTML은 HTML5 표준의 일부입니다. 자세한 내용은 링크를 참조하십시오
텍스트의 노드 컨텐츠에 액세스 할 수 있습니다. 다음 예제는 문서의 모든 내용을 출력하여 새 컨텐츠로 대체합니다.
코드 사본은 다음과 같습니다.
<body>
<p> 단락 </p>
<div> 및 div </div>
<cript>
alert (document.body.innerhtml) // 현재 내용을 읽습니다
document.body.innerhtml = 'yaaahoo!' // 내용을 교체합니다
</스크립트>
</body>
InnerHTML에는 효율적인 HTML이 포함됩니다. 그러나 브라우저는 또한 변형 된 HTML을 구문 분석 할 수 있습니다.
innerhtml은 모든 요소 노드에서 사용할 수 있습니다. 매우 유용합니다.
InnerHtml 함정
InnerHtml은 보이는 것만 큼 단순하지 않습니다. 초보자를 기다리는 함정이 있으며 때로는 경험이 풍부한 프로그래머는 피할 수 없습니다.
IE의 __table__ 노드의 내부 html은 읽기 전용입니다.
즉, InnerHTML은 COL, ColGroup, Frameset, Head, HTML, HTML, Style, Table, Tfood, Thead, Tit, TR 및 기타 요소에서 읽기 전용입니다.
IE의 테이블 태그에서, InnerHTML은 TD를 제외하고는 읽기 전용입니다.
InnerHtml을 추가 할 수 없습니다
문의 구조에서 InnerHTML은 다음과 같은 추가 작업을 수행 할 수 있습니다.
chatdiv.innerhtml += "<div> hi <img src = 'smile.gif'/>! </div>"
chatdiv.innerhtml += "어떻게 지내십니까?"
그러나 실제로 수행 된 것 :
1. 오래된 내용이 지워집니다
2. 새 컨텐츠는 구문 분석 및 삽입됩니다. 내용이 추가되지 않았으며 재생되었습니다.
따라서 Smile.gif를 포함한 += 작동 후에 모든 이미지 및 기타 리소스가 다시로드됩니다.
다행히도 내부를 사용하지 않는 콘텐츠를 업데이트하는 다른 방법이 있으므로 위에서 언급 한 문제는 없습니다.
nodevalue
innerhtml은 요소 노드에만 유효합니다.
다른 유형의 노드의 경우 NoDevalue 속성을 사용하여 컨텐츠를 얻습니다. 다음 예제는 텍스트 노드 및 주석 노드에서 작동하는 방법을 보여줍니다.
코드 사본은 다음과 같습니다.
<body>
텍스트
<!-댓글->
<cript>
for (var i = 0; i <document.body.childnodes.length; i ++) {
ALERT (document.body.childnodes [i] .nodevalue)
}
</스크립트>
</body>
위의 예에서는 빈 노드로 인해 일부 경고가 비어 있습니다. 스크립트 노드의 경우 noDevalue === null입니다. 스크립트는 요소 노드이기 때문입니다. 요소 노드, InnerHtml을 사용하십시오.
요약
Nodetype
노드 유형. 가장 중요한 것은 요소 노드가 1이고 텍스트 노드는 3이고 읽기 전용이라는 것입니다.
Nodename/Tagname
캡 태그 이름. 비 요소 노드의 경우 NoDename은 읽기 전용 특수 값도 갖습니다.
innerhtml
요소 노드의 내용을 작성할 수 있습니다.
nodevalue
텍스트 노드의 내용을 작성할 수 있습니다.
DOM 노드에는 유형에 따라 다른 속성이 있습니다. 예를 들어, 입력 태그에는 값과 __checked__ 속성이 있습니다. A 속성에는 Href 등이 있습니다.
위의 것은이 기사에 관한 모든 것입니다. 나는 당신이 그것을 좋아하기를 바랍니다.