Discuss in detail the basic properties of DOM in javascript_javascript skills

Structure and content attributes

nodeType

All nodes have types, and there are a total of 12 types of nodes.

Copy code The code is as follows:

interface Node {
// NodeType
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;
...
}

The two most important nodes are the element node (1) and the text node (3). The rest are rarely used.
For example, when listing all child element nodes, we can iterate over it and use childNodes[i].nodeType != 1 to detect.
The following is the implementation code:

Copy code The code is as follows:

Allowed readers:

• John


• Bob

<script> <br /> var childNodes = document.body.childNodes<br /> for(var i=0; i<childNodes.length; i ) {<br /> if (childNodes[i].nodeType != 1) continue<br /> alert(childNodes[i])<br /> }<br /> </script>

*Thinking
What will the following code prompt:

Copy code The code is as follows:

<script><br /> alert(document.body.lastChild.nodeType)<br /> </script>

nodeName, tagName

Both nodeName and tagName contain the name of the node.
For document.body

alert( document.body.nodeName ) // BODY
All nodeNames in HTML will be capitalized.

When nodeName is not capitalized
This situation is relatively rare, if you are curious you can read below.
As you probably already know, browsers have two ways of parsing: HTML mode and __XML mode. Usually the HTML schema is used, but when the XMLHttpRequest__ technology is used to obtain an XML document, the XML schema is used.
XML mode is also used in Firefox when the Content-Type of an XHTML document is set to xmlish.
Node names will be preserved in __XML schema, so body or bOdY may appear.
Therefore, if XML is loaded from the server into an HTML document via the XMLHttpRequest__ technology, the node name will be preserved.

NodeName and __tagName__ are the same for elements.
But the nodeName attribute also exists in non-element nodes, and it has a special value in these nodes:

alert(document.nodeName) // #document
Most node types do not have a tagName attribute, and the tagName of annotation nodes in IE is !.
Therefore, nodeName is generally more meaningful than tagName. But tagName is like a simplified version, so you can use it when you are only dealing with element nodes.

innerHTML

innerHTML is part of the HTML5 standard, please see the link for details
It allows textual access to node content. The following example will output all the contents of document.body and replace it with the new content.

Copy code The code is as follows:

The paragraph

And a div

<script><br /> alert( document.body.innerHTML ) // read current contents<br /> Document.body.innerHTML = 'Yaaahooo!' // replace contents<br /> </script>

innerHTML will contain valid HTML. But browsers can also parse malformed HTML.
innerHTML can be used in any element node. It's very, very useful.

innerHTML pitFalls

innerHTML is not as simple as it looks. It has some traps that await newbies, and sometimes even experienced programmers cannot avoid them.

The innerHTML of the __table__ node in IE is read-only
In IE, innerHTML in COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR and other elements is read-only.
Except for TD, all innerHTML tags in the table tag in IE are read-only.

innerHTML cannot be appended
Judging from the composition of the statement, innerHTML can perform append operations, such as:

chatDiv.innerHTML = "

Hi !

"
chatDiv.innerHTML = "How you doing?"
But what actually happened:

1. Old content is cleared

2. The new content is parsed and inserted. The content is not appended, it is regenerated.

Therefore, all pictures and other resources will be reloaded after the = operation, including smile.gif.

Fortunately, there are other ways to update content that do not use innerHTML and therefore do not have the problems mentioned above.

nodeValue

innerHTML is only valid for element nodes.
For other types of nodes, they use the nodeValue attribute to obtain content. The following example shows how it works on text nodes and comment nodes.

Copy code The code is as follows:

The text

<script><br /> for(var i=0; i<document.body.childNodes.length; i ) {<br /> alert(document.body.childNodes[i].nodeValue)<br /> }<br /> </script>

위 예에서는 빈 노드로 인해 일부 경고가 비어 있습니다. SCRIPT 노드의 경우 nodeValue === null입니다. SCRIPT가 요소 노드이기 때문입니다. 요소 노드의 경우 innerHTML을 사용합니다.

요약

노드 유형
 노드 유형. 가장 중요한 것은 요소 노드가 1이고 텍스트 노드가 3이며 읽기 전용이라는 것입니다.
노드이름/태그이름
  라벨 이름은 대문자입니다. 요소가 아닌 노드의 경우 nodeName에는 읽기 전용인 특수 값도 있습니다.
내부HTML
 요소 노드의 내용, 쓰기 가능.
노드값
 쓰기 가능한 텍스트 노드의 콘텐츠입니다.
DOM 노드에는 유형에 따라 다른 속성이 있습니다. 예를 들어 INPUT 태그에는 value 및 __checked__ 속성이 있습니다. 속성에는 href 등이 있습니다.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.