Js DOM node in some operation methods

DOM

What is the DOM

DOM: Document object model. DOM provides a structured representation of a document and defines how to access the document structure through scripts. The goal is to create a specification that allows JS to manipulate HTML elements.

The DOM is made up of nodes.

The parsing process

Once the HTML is loaded, the rendering engine generates a DOM tree from the HTML document in memory, and getElementById is used to retrieve the element nodes in the DOM. Then you modify the attributes of that element.

DOM tree (Everything is a node)

The DOM data structure is as follows:

As you can see above, in HTML, everything is a node: (very important) element node: HMTL tag. Text node: Text in a tag (such as Spaces between tabs, newlines) Attribute node: : attribute of the tag The entire HTML document is a document node. All nodes are objects

What can DOM do

• Find the object (element node)
• Sets the attribute value of the element
• Sets the style of the element
• Dynamically create and delete elements
• Event trigger response: event source, event, event driver

DOM node acquisition

The way to get a DOM node is actually the way to get an event source

To operate on an element node, you must first find that node. There are three ways to get a DOM node:

var div1 = document.getElementById("box1"); / / way: through a single tag id for var arr1 = document. The getElementsByTagName (" div1 "); / / second way: by tag name tag array, so there s var arr2 = document. GetElementsByClassName (" hehe "); // Get the tag array from the class name, so there is sCopy the code

Since methods two and three get the tag array, it is customary to iterate through it before using it.

Special case: Only 1 value in array. Even so, this value is wrapped in an array. This value is obtained as follows:

document.getElementsByTagName("div1")[0]; / / to take the first element of the array document. The getElementsByClassName (" hehe ") [0]; // Take the first element in the arrayCopy the code

Get DOM access relationships

The nodes of the DOM are not isolated, so they can be accessed through the relative relationships between DOM nodes. As follows:

Node access relationships exist in the form of attributes.

Visit relationship between father and brother in JS:

The parentNode and children attributes are used as parentNode and children. The following are introduced respectively.

Get the parent node

The caller is the node. A node has only one parent, which is called

Node. ParentNodeCopy the code

(1) nextSibling:

Refers to the next node (including label, empty document, and newline nodes)Copy the code

Firefox, Google, IE9+ versions: all refer to the next node (including tabs, empty documents, and line feeds).

IE678 version: Indicates the next element node (label).

(2) nextElementSibling:

Firefox, Google, IE9+ versions: all refer to the next element node (TAB). Summary: To get the next element node, we can use nextSibling in IE678 and nextElementSibling in Firefox Google IE9+, so combining these two attributes, we can write:

Next siblings. = node nextElementSibling | | node. NextSibling

It’s previous

(1) previousSibling:

Firefox, Google, IE9+ versions: all refer to the previous node (including tabs, empty documents, and line feeds). IE678 version: refers to the previous element node (label).

(2) previousElemntSibling:

Firefox, Google, IE9+ versions: all refer to the previous element node (tag). Summary: To get the previous element node, we can use previousSibling in IE678 and previousElementSibling in Firefox After IE9+.

= a brother before node. PreviousElementSibling | | node. PreviousSibling

3. Add: Obtain any sibling node:

Parentnode. children[index]; // Get a single child node

1, the first child | the first child node:

(1) firstChild:

Firefox, Google, IE9+ versions: all refer to the first child node (including tabs, empty documents, and line feeds).

IE678 version: refers to the first child element node (label).

(2) firstElementChild:

Firefox, Google, IE9+ versions: all refer to the first child element node (tag). Summary: to get the firstChild node, we can use firstChild in IE678 and firstElementChild in firefox after IE9+. Combining these two attributes, we can write:

The first child node =. FirstElementChild | | node. FirstChild

2, the last child node | the last child node:

(1) lastChild:

Firefox, Google, IE9+ versions: All refer to the last child node (including tabs, empty documents, and line feeds).

IE678 version: Refers to the last child element node (label).

(2) lastElementChild:

Firefox, Google, IE9+ versions: all refer to the last child element node (tag). Summary: to get the lastChild element node, we can use lastChild in IE678 and lastElementChild in firefox after IE9+. So, combining the two attributes, we can write:

The last child node = node. LastElementChild | | node. LastChild gets the child nodes of the all

(1) childNodes:

Standard attributes. Returns a collection of the children of the specified element (including the element node, all attributes, and text nodes). Is the real son of W3C.

Advanced versions of Firefox, such as Google, treat newlines as child nodes as well. (Understand) usage:

Array of childNodes = parent nodes. ChildNodes; // Get all nodes.

(2) Children:

Nonstandard attributes. Returns a collection of child element nodes of the specified element. “Important”

It only returns HTML nodes, not even text nodes.

Comment nodes are included in ie 6/7/8 (in IE678, comment nodes are not written in it).

While not a standard DOM attribute, it is supported by almost all browsers, as is the innerHTML method.

Usage :(most used)

Array of child nodes = parent node. Children; // Get all nodes. Use the most. nodeType

Here’s nodeType.

NodeType == 1 represents the element node (label). Remember: Elements are tags.

NodeType == 2 Indicates that the node is an attribute node

NodeType == 3 is a text node

DOM node operations (Critical)

A node’s access relationships are attributes.

Operations on nodes are functions (methods)

Create a node

The format is as follows:

New tag (element node) = document.createElement(” tag name “);

For example, if we want to create a li tag, or an ADBC tag that does not exist, we can do this:

<script type="text/javascript"> var a1 = document.createElement("li"); Var a2 = document.createElement("adbc"); // Create a nonexistent label console.log(a1); console.log(a2); console.log(typeof a1); console.log(typeof a2); </script>Copy the code

Results:

Insert the node

There are two ways to insert a node, and they have different meanings.

Method 1:

AppendChild (new child node); A new child node is inserted at the end of the parent node.

Method 2:

InsertBefore (new child, as a reference child); Explanation:

Insert a new node before the reference node. If the reference node is null, it inserts a child node at the end of the parent node. Remove nodes

The format is as follows:

RemoveChild (child node);

Delete child node with parent node. You must specify which child node to delete.

If I want to delete my node, I can do this:

node1.parentNode.removeChild(node1); Replication node (clone node)

The format is as follows:

The node to copy. CloneNode (); // No arguments in parentheses have the same effect as false.

The node to copy. CloneNode (true);

The effect is different with or without arguments in parentheses. The explanation is as follows:

No parameter/Parameter false: Only the node itself is copied, not its child nodes.

Parameter true: copies both the node itself and all of its children.

Setting node properties You can obtain node property values, set node property values, and delete node properties.

Let’s take the following label as an example:

<img SRC ="images/1.jpg" class="image-box" title=" image "Alt =" metro view" id="a1">Copy the code

The following are introduced respectively.

1. Obtain the attribute value of the node

Method 1:

Element node. Attribute; Element node [attribute];Copy the code

Example :(get node attribute value)

<body> <img SRC ="images/1.jpg" class="image-box" title=" beautiful picture "Alt =" tube view" id="a1"> <script type="text/javascript"> var myNode = document.getElementsByTagName("img")[0]; console.log(myNode.src); console.log(myNode.className); // Note that className is className, not class console.log(myNode.title); console.log("------------"); console.log(myNode["src"]); console.log(myNode["className"]); Class console.log(myNode["title"]); </script> </body>Copy the code

Option 2 :(recommended)

Prime node. GetAttribute (” Attribute name “); Example:

console.log(myNode.getAttribute("src")); console.log(myNode.getAttribute("class")); // className console.log(myNode.getAttribute("title"));Copy the code

The difference between approach 1 and Approach 2 is that the former manipulates the tag directly, while the latter treats the tag as a DOM node. Recommended Method 2.

2. Set the node properties

Mode 1 example :(setting node attributes)

SRC = "images/2.jpg" // Change SRC property value myNode.className = "image2-box"; // Change the class nameCopy the code

Option 2 :(recommended)

Element node. SetAttribute (attribute name, new attribute value); Mode 2 example :(setting node attributes)

myNode.setAttribute("src","images/3.jpg"); myNode.setAttribute("class","image3-box"); MyNode. SetAttribute (" id ", "hello");Copy the code

3. Delete node attributes

Format:

Element node. RemoveAttribute;Copy the code

Example :(deleting node attributes)

myNode.removeAttribute("class");
myNode.removeAttribute("id");
Copy the code

The original link