javascript_javascript 기술에서 DOM의 기본 속성을 자세히 논의합니다.

구조 및 콘텐츠 속성

노드 유형

모든 노드에는 유형이 있으며, 총 12가지 유형의 노드가 있습니다.

코드 복사 코드는 다음과 같습니다.

인터페이스 노드 {
// 노드타입
const unsigned short ELEMENT_NODE = 1;
const unsigned short ATTRIBUTE_NODE = 2;
const unsigned short TEXT_NODE = 3;
const unsigned short CDATA_SECTION_NODE = 4;
const unsigned short ENTITY_REFERENCE_NODE = 5;
const unsigned short ENTITY_NODE = 6;
const unsigned short PROCESSING_INSTRUCTION_NODE = 7;
const unsigned short COMMENT_NODE = 8;
const unsigned short DOCUMENT_NODE = 9;
const unsigned short DOCUMENT_TYPE_NODE = 10;
const unsigned short DOCUMENT_FRAGMENT_NODE = 11;
const unsigned short NOTATION_NODE = 12;
...
}

가장 중요한 두 노드는 요소 노드(1)와 텍스트 노드(3)입니다. 나머지는 거의 사용되지 않습니다.
예를 들어, 모든 하위 요소 노드를 나열할 때 이를 반복하고 childNodes[i].nodeType != 1을 사용하여 감지할 수 있습니다.
구현 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

허용된 독자:

• 존


• 밥

var childNodes = document.body.childNodes
for(var i=0; i if (childNodes[i].nodeType != 1) 계속
경고(childNodes[i])
}

본문>

*생각 다음 코드는 어떤 메시지를 표시합니까?

코드 복사 코드는 다음과 같습니다.

경고(document.body.lastChild.nodeType)

본문>

노드이름, 태그이름

nodeName과 tagName 모두 노드 이름을 포함합니다.
document.body용

alert( document.body.nodeName ) // BODY
HTML의 모든 nodeName은 대문자로 표시됩니다.

nodeName이 대문자가 아닌 경우
이런 상황은 비교적 드뭅니다. 궁금하다면 아래를 읽어보세요.
이미 알고 있듯이 브라우저에는 HTML 모드와 __XML 모드라는 두 가지 구문 분석 방법이 있습니다. 일반적으로 HTML 스키마를 사용하지만 XML문서를 얻기 위해 XMLHttpRequest__ 기술을 사용하는 경우 XML 스키마가 사용됩니다.
XML 모드는 XHTML 문서의 Content-Type이 xmlish로 설정된 경우 Firefox에서도 사용됩니다.
노드 이름은 __XML 스키마에 보존되므로 body 또는 bOdY가 나타날 수 있습니다.
따라서 XMLHttpRequest__ 기술을 통해 서버에서 HTML 문서로 XML을 로드하면 노드 이름이 유지됩니다.

NodeName과 __tagName__은 요소에 대해 동일합니다.
그러나 nodeName 속성은 요소가 아닌 노드에도 존재하며 다음 노드에는 특별한 값이 있습니다.

alert(document.nodeName) // #document
대부분의 노드 유형에는 tagName 속성이 없으며 IE의 주석 노드의 tagName은 !입니다.
따라서 nodeName은 일반적으로 tagName보다 더 의미가 있습니다. 하지만 tagName은 단순화된 버전과 같기 때문에 요소 노드만 다룰 때 사용할 수 있습니다.

innerHTML

innerHTML은 HTML5 표준의 일부입니다. 자세한 내용은 링크를 참조하세요.
노드 콘텐츠에 대한 텍스트 액세스를 허용합니다. 다음 예에서는 document.body의 모든 내용을 출력하고 이를 새 내용으로 바꿉니다.

코드 복사 코드는 다음과 같습니다.

단락

그리고 div

Alert( document.body.innerHTML ) // 현재 내용 읽기
Document.body.innerHTML = '야아후!' // 내용 교체

본문>

innerHTML에는 유효한 HTML이 포함됩니다. 그러나 브라우저는 잘못된 HTML을 구문 분석할 수도 있습니다.
innerHTML은 모든 요소 노드에서 사용할 수 있습니다. 매우 유용합니다.

innerHTML 핏폴스

innerHTML은 보기만큼 간단하지 않습니다. 여기에는 초보자를 기다리는 몇 가지 함정이 있으며 때로는 숙련된 프로그래머라도 이를 피할 수 없습니다.

IE에서 __table__ 노드의 innerHTML은 읽기 전용입니다
IE에서 COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR 및 기타 요소의 innerHTML은 읽기 전용입니다.
TD를 제외하고 IE 테이블 태그의 모든 innerHTML 태그는 읽기 전용입니다.

innerHTML을 추가할 수 없습니다
명령문의 구성으로 판단하면 innerHTML은 다음과 같은 추가 작업을 수행할 수 있습니다.

chatDiv.innerHTML = "

안녕하세요 !

"
chatDiv.innerHTML = "잘 지내세요?"
그러나 실제로 일어난 일은:

1. 오래된 내용은 삭제됩니다

2. 새로운 콘텐츠가 구문 분석되어 삽입됩니다. 콘텐츠는 추가되지 않고 다시 생성됩니다.

따라서 = 작업 후에 smile.gif를 포함한 모든 사진과 기타 리소스가 다시 로드됩니다.

다행히도 innerHTML을 사용하지 않아 위에서 언급한 문제가 없는 콘텐츠를 업데이트하는 다른 방법이 있습니다.

노드값

innerHTML은 요소 노드에만 유효합니다.
다른 유형의 노드의 경우 nodeValue 속성을 사용하여 콘텐츠를 얻습니다. 다음 예제는 텍스트 노드와 주석 노드에서 작동하는 방법을 보여줍니다.

코드 복사 코드는 다음과 같습니다.

텍스트


for(var i=0; i 경고(document.body.childNodes[i].nodeValue)
}

본문>

Im obigen Beispiel sind einige Warnungen aufgrund leerer Knoten leer. Beachten Sie, dass nodeValue === null für SCRIPT-Knoten ist. Das liegt daran, dass SCRIPT ein Elementknoten ist. Verwenden Sie für Elementknoten innerHTML.

Zusammenfassung

nodeType
 Knotentyp. Das Wichtigste ist, dass der Elementknoten 1 und der Textknoten 3 ist und schreibgeschützt ist.
Knotenname/TagName
  Der Etikettenname in Großbuchstaben. Für Nicht-Element-Knoten hat nodeName auch einen speziellen Wert, der schreibgeschützt ist.
innerHTML
 Der Inhalt des Elementknotens, beschreibbar.
nodeValue
 Der Inhalt des Textknotens, beschreibbar.
DOM-Knoten haben je nach Typ andere Attribute. Beispielsweise verfügt das INPUT-Tag über die Attribute „value“ und „__checked__“. A-Attribute haben href und so weiter.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.