This is the fourth day of my participation in Gwen Challenge

After systematically learning BOM last time, I finally had time to continue systematically learning DOM after a few days. Compared with BOM, DOM content was obviously more, so I planned to sort it out separately.

DOM (Document Object Model) is an API for HTML and XML documents. It describes documents in a hierarchical node tree and provides a series of methods for adding, deleting, modifying, and searching documents.

Because the DOM is a tree, you first need to know its node types to get an idea of what it looks like.

1. Node

Node is the interface defined by DOM1. This interface will be implemented by all Node types of DOM. It has the following common properties and methods:

  • NodeType: indicates the nodeType. There are 12 values:
    • Node.ELEMENT_NODE(1)
    • Node.ATTRIBUTE_NODE(2)
    • Node.TEXT_NODE(3)
    • Node.CDATA_SECTION_NODE(4)
    • Node.ENTITY_REFERENCE_NODE(5)
    • Node.ENTITY_NODE(6)
    • Node.PROCESSING_INSTRUCTION_NODE(7)
    • Node.COMMENT_NODE(8)
    • Node.DOCUMENT_NODE(9)
    • Node.DOCUMENT_TYPE_NODE(10)
    • Node.DOCUMENT_FRAGMENT_NODE(11)
    • Node.NOTATION_NODE(12)
  • NodeName: indicates the nodeName
  • NodeValue: nodeValue
  • ChildNodes: NodeList object that holds childNodes, which is an array of classes
  • AppendChild: Adds a node to 􏳦􏳧 of the childNodes list
  • More methods are no longer listed and can be queried in the MDN documentation

2. Document

NodeType = 9 for the entire document, usually using its instance document, which has some common attributes and antimethods:

  • Document.documentelement: HTML node
  • Document. title: The title node, which is the text displayed in the title bar
  • Document. body: the body node
  • Document. URL: indicates the URL of the address bar
  • Document.getelementbyid: Gets nodes by ID
  • Document. querySelector: Gets a node through a selector
  • Document. write: Dynamically writes HTML to a document
  • More methods are no longer listed

3. Element

NodeType = 1 specifies the elements that make up the document node. NodeType = 1

  • HTMLDivElement: Div element
  • HTMLImageElement: Image element
  • HTMLTableElement: Table element
  • More methods are no longer listed

4. Text

Represents the text node, nodeType = 3, that is, the text wrapped without tags in the DOM tree.

5. Comment

NodeType = 8 indicates a comment.

6. CDATASection

For XML documents only, nodeType = 4 represents the CDATA section.

7. DocumentType

Contains information about the doctype, nodeType = 10, that is, HTML top <! DOCTYPE HTML >.

8. DocumentFragment

The “virtual” node, nodeType = 11, has no corresponding tag in the document, similar to react. Fragment.

9. Attr

NodeType = 2; for example, width, height, etc.

The above is the basic type of DOM nodes. For each type, there are corresponding increase, deletion, change and check methods. In this way, through API, a DOM tree can be fully operated to operate documents.

What good is this abstraction? Imagine that without DOM, we could only manipulate documents by string matching, which is inefficient and error-prone, and DOM provides a complete and efficient way to do so.