Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces "how to query DOM nodes" in detail, the content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to query DOM nodes" can help you solve your doubts.

Introduction of 1.DOM Node

1. What is a node?

In a HTML document, everything is a node (HTML document itself, tags, attributes, comment content, text)

two。 What are elements?

Elements are called tags in HTML and elements in JS's DOM object (which can be understood as the object-oriented name of tags).

3.HTML tags belong to one kind of nodes, called element nodes.

4. Three elements of node

Node type: label, attribute, comment, text

Node name: P, div, class (label signature)

Value of node: one (value of attribute)

/ *

1. The content of the web page is made up of tags: loose

two。 Web content is made up of nodes: all content is nodes.

Element (tag) node: for example, div tag

Attribute node: for example, class attribute

Text node: such as the text in the label

Comment nodes: such as comments in HTML

3.DOM node operation key points remember: element node

, /

two。 Query node method

1. Query child element node: parent element .children

two。 Query the sibling element node:

Previous sibling element: element .previousElementSibling

The next sibling element: element .nextElementSibling

3. Query parent node: element [xss_clean]

3. Node operation

1. New node: document.createElement ()

(1) create an empty tag for memory: let li = document.createElement ('tag')

(2) setting content: li.innerText = 'text'

(3) add to the dom tree: parent element .appendChild (child element)

Add to the last: parent element .appendChild (child element)

Add to an element: parent element .insertBefore (child element, which element to add to)

two。 Clone the node:

Clone the element itself: element .cloneNode (false)

Clone element itself + descendant: element .cloneNode (true)

3. Delete node: parent element .removeChild (child element)

Note: elements can only remove their own child elements

Move up and down with 4.insertBefore

Add elements to the end

Add elements to the front of li2

Add elements to the front

Move li2 up

Li2 moves down

I am monitor 1.

I am monitor 2.

I am monitor 3.

I am monitor 4.

I am monitor 5.

/ * add elements

1. Can only be added to the end: parent element .appendChild (child element)

two。 Add to the front of the specified element: parent element .insertBefore (child element, which element to add to)

, /

Let ul = document.querySelector ('ul') / / parent element

Let li2 = document.querySelector ('# li2') / / li2

/ / add elements to the last

Document.querySelector ('.btn1'). Onclick = function () {

/ / newly created element

Let newLi = document.createElement ('li')

NewLi.innerText ='I'm the new one'

/ / add to the last

Ul.appendChild (newLi)

}

/ / add elements to the front of li2

Document.querySelector ('.btn2'). Onclick = function () {

/ / newly created element

Let newLi = document.createElement ('li')

NewLi.innerText ='I'm the newcomer 2'

/ / add to the front of li2

Ul.insertBefore (newLi,li2)

}

/ / add parent element to the front

Document.querySelector ('.btn3') .onclick = function () {

/ / newly created element

Let newLi = document.createElement ('li')

NewLi.innerText ='I'm the newcomer 3'

/ / add the front: add to the front of the original first element

Ul.insertBefore (newLi, ul.children [0])

}

/ / move li2 up

Document.querySelector ('.btn4') .onclick = function () {

/ * move up the train of thought: the element moves in front of its brother * /

/ / determine whether li2 is the first element. If so, it cannot be moved.

If (li2.previousElementSibling) {

Ul.insertBefore (li2, li2.previousElementSibling)

} else {

Alert ('already the first element')

}

}

/ / move li2 down

Document.querySelector ('.btn5') .onclick = function () {

/ * move down: move the element to the front of your brother's brother.

Back of younger brother = front of younger brother

, /

If (li2.nextElementSibling) {

Ul.insertBefore (li2, li2.nextElementSibling.nextElementSibling)

} else {

Alert ('already the last element')

}

}

After reading this, the article "how to query DOM nodes" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.