“This is the fourth day of my participation in the First Challenge 2022. For details: First Challenge 2022”

Knowledge about

What is the Dom

DOM=DocumentObjectModel, a DocumentObjectModel, DOM allows you to access and modify the content and structure of a document in a platform-independent and language-independent way

You can think of it as the browser parsing an HTML document into an object.

It’s like a tree. For example, there will be and at the bottom and then all the other labels are the numbers and the leaves on the tree.

Node types

There are nine types of nodes

Element Node node.element_node (1) Attribute Node Node.ATTRIBUTE_NODE(2) Text Node node.text_node (3) CDATA Node node.cdatA_section_node (4) Entity reference name Node node.entry_reference_node (5) Entity name Node node.entity_node (6) Processing instruction Node node.processing_instruction_node (7) Comment Node Node.COMMENT_NODE(8) Document Node node.document_node (9) Document type Node node.document_type_node (10) Document fragment Node Node.document_fragment_node (11) DTD declaration Node node.notation_node (12)

Node traversal

The tree starts at the document node and continues to branch out from there until it reaches all the text nodes at the lowest level of the tree.

The three difference

The innerText, nodeValue, and textContent apis all take a single textContent.

<div id="app"> Fruit <! <div style="display: none;" </p> </p> </div>Copy the code

nodeValue

NodeValue can only take the contents of text nodes.

const app = document.getElementById('app')
console.log(app.nodeValue) // null
Copy the code

Fruit is a text node under div.

const app = document.getElementById('app')
console.log(app.childNodes[0].nodeValue) // null
console.log(app.childNodes[1].nodeValue) // null
Copy the code

It is actually only valid for CDATA fragments, comment, Processing Instruction nodes, or text nodes.

InnerHTML with the innerText

The difference between the two apis is the content from the start to the end, with Html tags removed or not.

const app = document.getElementById('app')
console.log(app.innerHTML) // null
console.log(app.innerText) // null
Copy the code

textContent

This is a relatively new API that may cause incompatibility issues in previous ie8 browsers.

The textContent property sets or returns the textContent of the specified node, along with all of its descendants.

The difference from innerText

  • Gets the text in style= “display: None”
  • Gets the text in the style tag
  • Not parsing HTML is faster and better performance

The interview guide

This problem actually I also not quite can, compare ashamed indeed. But the feeling from learning this question is that understanding these basic apis has many advantages to understanding the framework’s source code, such as the twelve node types.