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

This article shows you how to get the nodes of the html file by javascript. The content is concise and easy to understand, which will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

The operating environment of this tutorial: windows7 system, javascript1.8.5 version, Dell G3 computer.

1. Get it through the document node (directly)

Case study:

One, two, three, four.

1.1 through ID

Syntax: document.getElementById ("id attribute value")

Features: get the element according to the ID value and return the element object; (id unique)

Example:

Var one=document.getElementById ("one"); console.log (one)

1.2 sign by tag

Syntax: document.getElementsByTagName ("tag name")

Features: the tag name gets the element, and what is returned is a pseudo array in which multiple DOM objects are saved.

Example:

Var li=document.getElementsByTagName ("li") console.log (li)

1.3 through the name value

Syntax: document.getElementsByName ("value of name attribute")

Features: get the element according to the value of the name attribute, and return a pseudo array in which multiple DOM objects are saved.

Example:

Var name1=document.getElementsByName ("name1") [0]; console.log (name1)

1.4 through class

Syntax: document.getElementsByClassName ("name of class style")

Features: get the element according to the name of the class style, and the return is a pseudo array in which multiple DOM objects are saved.

Example:

Var classname=document.getElementsByClassName ("classname") [0]; console.log (classname); / /

1.5 through the selector

Syntax: document.querySelector ("name of selector")

Features: get the element according to the selector, and return an element object

Example:

Var que1=document.querySelector ("# one"); console.log (que1); / /

1.6 through all selectors

Syntax: document.querySelectorAll ("name of selector")

Features: according to the selector to get the element, what is returned is a pseudo array in which multiple DOM objects are saved

Example:

Var queall=document.querySelectorAll ("li"); console.log (queall); / /

1.7 Special element acquisition

Syntax: doucumnet.body

Feature: return body element object

Example:

Var body=document.body; console.log (body)

1.8 HTML element acquisition

Syntax: document.documentElement

Features: html element object

Example:

Var dc=document.documentElement; console.log (dc)

two。 Through the parent node

(generally, when the parent node has been obtained, the child bytes are obtained through the parent node.)

One, two, three, four, five, this is the second div, this is the third div.

2.1 get the first node

Syntax:

Document.getElementById ("test"). FirstElementChild;document.getElementById ("test") firstChild

Features: get the first node

Example:

Var box=document.getElementById ("digbox"). FirstElementChild; console.log (box); var box1=document.getElementById ("digbox"). FirstChild; console.log (box1)

2.2 get the last child node

Syntax:

Document.getElementById ("test"). LastElementChild;;document.getElementById ("test") lastChild

Feature: get the last child node

Example:

Var box2= document.getElementById ("digbox"). LastElementChild; console.log (box2); var box3= document.getElementById ("digbox"). LastChild; console.log (box3)

2.3 get all child nodes

Syntax:

Document.getElementById ("test"). Children [0]; document.getElementById ("test"). ChildNodes;document.getElementById ("test"). ChildElementCount

Features: get all child nodes

Example:

Var box4= document.getElementById ("digbox"). Children [0]; console.log (box4); var box5= document.getElementById ("digbox"). ChildNodes; console.log (box5); var box6= document.getElementById ("digbox"). ChildElementCount; console.log (box6)

2.4 get direct child nodes

Syntax: document.getElementById ("id")

Features: obtaining direct child nodes

Example:

Var box7= document.getElementById ("digbox"); console.log (box7)

2.5 get the node of the corresponding attribute

Syntax: document.getElementById ("id") .getElementsByClassName ("ul")

Features: nodes that get corresponding attributes (can be ID,class, attributes, tags) are commonly used

Example:

Var box8= document.getElementById ("digbox") .getElementsByClassName ("ul"); console.log (box8)

3. Get through the sibling node

This is the first label.

This is the second label.

This is the third label.

3.1 get the previous node of the current node

Syntax:

Document.getElementById ("id"). PreviousElementSibling;document.getElementById ("id") previousSibling

Feature: returns the previous node of the specified node. If there is no previousSibling node, the return value is null.

Example:

Var box1=document.getElementById ("box2"). PreviousElementSibling; console.log (box1); var box2=document.getElementById ("box2"). PreviousSibling; console.log (box2)

3.2 get the latter node of the current node

Syntax:

Document.getElementById ("id"). NextSiblingdocument.getElementById ("id") nextElementSibling

Feature: returns the node immediately after the specified node. If there is no nextSibling node, the return value is null.

Example:

Var box3=document.getElementById ("box2"). NextElementSibling; console.log (box3); var box4=document.getElementById ("box2"). NextSibling; console.log (box4)

4. Through the child node

4.1 obtain parent nodes through child nodes

This is the second label.

Syntax: document.getElementById ("id") [xss_clean]

Feature: returns the parent node of the specified node, or null if the specified node does not have a parent node.

Example:

Var box=document.getElementById ("box2") [xss_clean]; console.log (box)

What are the characteristics of JavaScript? 1. Js belongs to an explanatory scripting language. 2. With the support of most browsers, js can run on multiple platforms and has cross-platform characteristics. 3. Js is a weakly typed scripting language that does not make strict requirements on the data types used. It is able to type conversion, simple and easy to use. 4. Js language is highly secure, and it can only browse information or interact dynamically through the browser, so as to effectively prevent the loss of data. 5, object-based scripting language, js can not only create objects, but also use existing objects.

The above is how javascript gets the nodes of html files. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are 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.