This is the 20th day of my participation in the August More Text Challenge.

Node operation

Three basic properties of a node

NodeType nodeType

● The element node nodeType is 1

● The nodeType of the attribute node is 2

● The text node nodeType is 3. (Text nodes include text, Spaces, line feeds, etc.)

NodeName nodeName

Node value nodeValue

The node hierarchy

Node. parentNode, obtains the parentNode of the nearest level. Returns null if it cannot be found (child element is retrieved first)

ParentNode. ChildNodes: returns a collection of childNodes containing the specified node, including element nodes, text nodes, etc. (the parent element must be obtained first). If you only want element nodes, you need special processing, so childNodes is generally not recommended

● Child node parentNode.children, which is a read-only property, returns all child element nodes (in the form of a pseudo-array). It returns only child nodes, not other types of nodes

Low access elements. The first child of the node parentNode firstChild, can not find it returns null, pay attention to is to return all the child nodes, contains the element node, a text node

Low to get the first child node parentNode. FirstElementChild (have compatibility problems, ie 9 more than just support)

Parentnode. lastChild returns null if not found

Low for the last child node parentNode. LastElementChild (compatibility)

Get sibling nodes

node.nextSibling

● Returns the next sibling of the current element, or null if it cannot be found. The returned node contains all types of nodes

node.previousSibling

● Returns the last sibling of the current element

node.nextElementSibling

● Returns the next sibling of the current element.

Low node. PreviousElementSibling

● Returns the last sibling of the current element

Low parentNode. FirstElementChild and parentNode. LastElementChild have compatibility problems, ie 9 or more support

Dynamically create element nodes

● Document.createElement (‘tagName’), only create is not visible, also need to add nodes

Add a node

● Node.appendChild (child) adds a node to the end of the collection of children of the specified parent node (similar to CSS after pseudo-elements)

● Node.insertbefore (Child) Adds a node to the front of the specified child of the parent node (similar to the before pseudo-element of CSS)

Remove nodes

● node.removechild (child) : Deletes a child node of the parent node. Returns the deleted node

Copy the node

Node.clonenode () returns a copy of the node on which the method was called

● If there is no parameter in parentheses or if the parameter is false, it is a shallow copy and only the node itself is cloned.

● Node.clonenode (true) copies the node itself and all its children (both labels and contents)

Create and add node – > element. InsertAdjacentHTML (position, text)

Low element. InsertAdjacentHTML – Web API interface reference | MDN (mozilla.org)

● Position Insert position

● Text Inserts content (in string form)

d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
Copy the code