Shulou(Shulou.com)05/31 Report--

This article editor for you a detailed introduction of "JavaScript how to get elements and nodes", the content is detailed, the steps are clear, the details are handled properly, I hope this "JavaScript how to get elements and nodes" article can help you solve your doubts, the following follow the editor's ideas slowly in-depth, together to learn new knowledge.

Get element

Get through ID (getElementById)

Through the name property (getElementsByName)

Sign by tag (getElementsByTagName)

By class name (getElementsByClassName)

Get an element (querySelector) through the selector

Get a set of elements (querySelectorAll) through a selector

Method to get html (document.documentElement)

Method to get body (document.body)

1. Get the element node through ID (getElementById) / / 1 get the element node / / through id (find the element through id, case-sensitive, if there are multiple id only find the first one) document.getElementById ('p1')

The context must be document.

You must pass a parameter. The parameter is of type string and is the id that gets the element.

The return value only gets one element, and the return null is not found.

two。 Find the element by the class name (getElementsByClassName) / / find the element by the class name, and separate the multiple class names with spaces to get a HTMLCollection (a collection of elements with length attribute, one of which can be accessed by an index number) var cls = document.getElementsByClassName ('a b'); console.log (cls)

The parameter is the class name of the element.

The return value is a class array. No empty array was found.

3. Search through the name attribute (getElementsByName) / / through the name attribute to return a NodeList (a collection of nodes with length attributes that can be accessed through the index number) var nm = document.getElementsByName ('c'); console.log (nm); 4. Returns a HTMLCollection document.getElementsByTagName ('p') via getElementsByTagName / / lookup element via tag signature

The parameter is the tag name attribute that gets the element and is case-insensitive.

The return value is a class array. No empty array was found.

5. Get an element (querySelector) document.querySelector ('.animated') through the selector

The parameter is a selector, such as "p. ClassName".

Returns a single node, or the first if there are multiple matching elements

6. Get a set of elements (querySelectorAll) document.querySelector ('.animated') through the selector

The return value is an array of classes

Get Node

In the document object Model (DOM), each node is an object. The DOM node has three important attributes

1. NodeName: the name of the node

2. NodeValue: the value of the node

3. NodeType: type of node

1. NodeName attribute: the name of the node, which is read-only.

The nodeName of the element node is the same as the tag signature

The nodeName of the attribute node is the name of the attribute

The nodeName of the text node is always # text

The nodeName of the document node is always # document

2. NodeValue attribute: the value of the node

The nodeValue of the element node is undefined or null

The nodeValue of the text node is the text itself

The nodeValue of the attribute node is the value of the attribute

Third, nodeType attribute: the type of node, which is read-only. The following commonly used node types:

Element type node type

Element 1

Attribute 2

Text 3 space also returns 3

Note 8

Document 9

Create a node:

1. Create a node: createElement ('')

/ / create an element, but it has not been added to html. You need to use var elem = document.createElement ('p') with appendChild; elem.id = 'test'; elem.style =' color: red'; Elm [XSS _ clean] ='I am the newly created node'; document.body.appendChild (elem)

two。 Insert node: appendChild ()

The usage is: parent.appendChild (child)

The child node is added to the end of the parent

Var oNewp=document.createElement ("p"); var oText=document.createTextNode ("World Hello"); oNewp.appendChild (oText)

2-1. Insert node: insertBefore ()

The usage is parent.insertBefore (newNode,refNode)

Var oOldp=document.body.getElementsByTagName ("p") [0]; document.body.insertBefore (oNewp,oOldp); delete node

1. Delete Node: removeChild

The usage is: parent.removeChild (child)

If the child node that is not the parent element is deleted, an error will be reported.

Var op=document.body.getElementsByTagName ("p") [0]; op [XSS _ clean] .removeChild (op); clone node

1. Clone node: parent.cloneNode () false or true

Clone the node (you need to accept a parameter to indicate whether to copy the element)

/ / Clone node (you need to accept a parameter to indicate whether to copy the element) var form = document.getElementById ('test'); var clone = form.cloneNode (true); clone.id =' test2'; document.body.appendChild (clone); replace node

1. Replacement Node method node.replace (new,old)

Var oOldp=document.body.getElementsByTagName ("p") [0]; oOldp [XSS _ clean] .replaceChild (oNewp,oOldp); document fragment box

Function: when adding a large number of nodes to the document, it will be very slow if you add them one by one, so you can add document fragments to the document at one time.

Syntax: document.createDocumentFragment ()

Bearer node

(function () {var start = Date.now (); var str ='', li; var ul = document.getElementById ('ul'); var fragment = document.createDocumentFragment (); for (var iTuno; I)

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.