Node

The structure of a document in the DOM is represented by nodes, and all elements (objects) are called nodes. There are many types of nodes. The total Node object is called Node, and Node is divided into 10 subtypes. The CharacterData object of the subtypes is further subdivided.In the DOM, all parts of a document are called nodes, such as the HTML, body, image, text, various tags, and tag attributes in an HTML file. Node types are distinguished by NodeType. NodeType is an attribute of the Node interface object with 12 values:The Node interface is the parent interface of multiple Node types. It starts by defining attributes (including method attributes) common to all nodes. These attributes can be divided into three main categories: attribute classes, judgment classes and operation classes. The browser automatically generates DOM objects from loaded HTML files so that you can manipulate them in JS, and Node is the master interface to all of these generated DOM objects. In other words, all browser-generated DOM objects will contain all of the properties in Node.

1. Attributes Class attributes

Node attributes can be divided into two types of attributes, one is read and write, the other is read-only. There are three main read and write properties: nodeValue, textContent and userData. NodeValue indicates the nodeValue. For example, the nodeValue of the Text node is the value of the node itself. TextContent represents the textContent contained in the node. For example, the textContent of all children of the div node is the textContent of the div node. UserData is a value that we can set ourselves on the node. Using userData is like treating the node as a normal object and then operating on the iQI property. The operations on userData are performed using the serUserData and getUserData methods, which are not currently supported by most browsers. Example code:

<body>
    <div id="a">this is a text box.<div>inner box</div></div>
    <script>
        var div_a = document.getElementById("a");
        console.log(div_a.firstChild.nodeValue); // this is a text box.
        console.log(div_a.textContent); // this is a text box.inner box

        div_a.setUserData("userData", {name: 'zzh', sex: 'male'});
        console.log(JSON.stringify(div_a.getUserData("userData")));
    </script>
</body>
Copy the code

The read-only properties of a Node include the following:

  • NodeType: indicates the nodeType
  • NodeName: indicates the nodeName
  • Attributes: A collection of attribute nodes that the node contains
  • ParentNode: indicates the parentNode of a node
  • ChildNodes: A collection of all children of a node
  • FirstChild: the firstChild of a node
  • LastChild: the lastChild of a node
  • PreviousSibling: the previous node of the node
  • NextSiblind: The next node of the node
  • OwnerDocument: the document in which the node resides

2. Determine the class attributes

  • Node. isEqualNode(arg): Checks whether two nodes are equal. The parameter is node type
  • Node. isSameNode(other): Checks whether the nodes are the same. The parameter is node type
  • Node. isSupported(feature, version): determines whether a feature isSupported
  • Node.haschildnodes (): Checks whether child nodes are included
  • Node.hasattributes (): Determines whether attributes are included
  • Node.com pareDocumentPosition (otherNode) : the position relationship between two nodes and parameters to another node

3. Operate class attributes

Node operation class attributes mainly include six method attributes:

  • Node. appendChild(newChild) : Adds child nodes
  • Node. cloneNode(deep): cloneNode
  • Node. insertBefore(newChild, refChild): Inserts a child before the specified child
  • Node. removeChild(oldChild): Removes a child node
  • Node. replaceChild(newChild, oldChild): Replaces child nodes
  • Node.normalize (): Normalize documents (mainly merging adjacent Text nodes)

Element

An Element node is a tag used in a document. Tags such as HTML, body, and div are Element nodes. The Element node contains tagName, attribute, attributeNode, and getElementsByTagName methods. Attribute refers to the attribute value of a node, and attributeNode refers to the province of the attribute node. Both have corresponding methods for querying, obtaining, setting, and deleting:

  • HasAttribute (name): Determines whether a node attribute with a specified name is included
  • GetAttribute (name): Obtains the value of the node attribute
  • SetAttribute (name,value): Sets the value of a node attribute
  • RemoveAttribute (name): Deletes the node attribute with the specified name
  • GetAttributeNode (name): Gets the specified attribute node by name
  • SetAttributeNode (newAttr): Sets a new attribute node
  • RemoveAttributeNode (oldAttr): Deletes an attribute node

Attr

The Attr node represents the attribute type of the node, which is commonly used in the tag, including the following six attributes:

  • Name: the property name
  • Value: indicates the value of an attribute
  • OwnerElement: The Element node on which the attribute resides
  • Spcified: Whether the property is specified, return true if the display is set, false if the default is used
  • IsId: Id attribute or not. This is a new attribute in DOM3. It is not browser-friendly, only Safari can return the correct result.
  • SchemaTypeInfo: Namespace specific, mainly for XML

Text

The Text node is the node that represents the Text type, which is the problem we usually use directly. It inherits from the CharacterData interface, and CharacterData interface inherits from the Node interface:

Character

The Character interface contains seven properties:

  • AppendData (ARG): Add data to the tail
  • InsertData (offset, ARG): Inserts data at the specified position
  • DeleteData (offset, count): deletes data ata specified position
  • ReplaceData (offset, count, arG): replaces data ata specified location
  • SubstringData (offset, count): intercepts data ata specified position

Text

The Text node itself has a wholeText property and three method properties:

  • WholeText: represents the Text formed by all Text nodes adjacent to the Text node
  • ReplaceWholeText: // not supported
  • IsElementContentWitespace: / / not supported
  • SplitText: Used to split a Text node into two Text nodes at a specified location

Comment

The Comment node represents a Comment type node that inherits CharacterData and has no attributes of its own

Document

The Document node is not a node that exists directly in the Html file, it represents the entire Document, all other nodes are underneath it, and it contains attributes:

  • AdoptNode (source): Adds a node from another document to the current document
  • ImportNode (importedNode, deep): Imports a node
  • CreateAttribute (name): Creates an attribute node
  • CreateComent (Data): Creates a comment node
  • CreateDocumentFragment (): Creates a DocumentFragment node
  • CreateElement (tagName): Creates an Element node
  • CreateTextNode (data): Creates a Text node
  • RenameNode (node, namespanceURI, newName): Changes the node name
  • GetElementById (ID): Gets the Element node using the ID
  • GetElementByTagName (TagName) : gets all nodes by TagName
  • Doctype: indicates the DocumentType
  • DocumentElement: Gets the Element root node, for example, HTML
  • InputEncoding: Coding mode
  • Implementation: obtain DOMImplementation
  • StrictErroChecking: Whether to enforce error checking. It can be read and written

DocumentFragment

The DocumentFragment Node represents the Document fragment Node, which is a lightweight Document that inherits from Node and has no properties of its own. When inserting multiple nodes, you can use the DocumentFragment first and then insert it into the DOM to avoid frequent DOM manipulation.

The exception object

Auxiliary object

  • DOMImplementation: Document-independent interface that checks to see if features of the specified version are supported, gets the specified version, creates a DocumentType, creates a Document.
  • NamedNodeMap: Obtains the number of nodes, the specified node by name, adds the specified node to the Map, deletes the specified node by name, and obtains the node by serial number.
  • NodeList: Similar to NamedNodeMap, except that NodeList contains nodes in order.

I would be honored if this article could be of any help to you. It would be a great honor if the article was liked by you.

Personal wechat: iotzzh Public account: front-end wechat personal website: www.iotzzh.com