JavaScript knowledge points collection: obtaining elements and nodes

[Related recommendations: javascript video tutorial, web front-end]

Get the element

• through the ID ( getElementById )
• through the name attribute ( getElementsByName )
• through the tag name ( getElementsByTagName )
• through the class name ( getElementsByClassName )
• Get an element through the selector ( querySelector )
• through the selector A group of elements ( querySelectorAll )
• method of getting html ( document.documentElement )
• method of getting body ( document.body )

1. Get by ID (getElementById)

// 1 Get element node // by id (find elements by id, Case sensitive, if there are multiple ids, only the first one will be found)
    document.getElementById('p1');

• The context must be a document.
• Parameters must be passed. The parameters are of string type and are used to obtain the id of the element.
• The return value only obtains one element, and returns null if it is not found.

2. Find elements by class name (getElementsByClassName)

// Search for elements by class name. Separate multiple class names with spaces to get an HTMLCollection (a collection of elements with a length attribute, and you can access an element inside through the index number)
    var cls = document.getElementsByClassName('a b');
    console.log(cls);

• The parameter is the class name of the element.
• The return value is an array-like array. If not found, an empty array is returned

3. Through the name attribute (getElementsByName)

// Search through the name attribute and return a NodeList (a node collection with a length attribute that can be accessed through the index number)
   var nm = document.getElementsByName('c');
    console.log(nm);

4. By tag name (getElementsByTagName)

// Find elements by tag name and return an HTMLCollection
    document.getElementsByTagName('p');

• The parameter is to get the tag name attribute of the element, which is not case-sensitive.
• The return value is a class array. If not found, an empty array is returned.

5. Get an element through the selector (querySelector)

The document.querySelector('.animated')

• parameter is the selector, such as: "p.className".
• Return a single node, if there are multiple matching elements, return the first

6. Get a set of elements through the selector (querySelectorAll)

document.querySelector('.animated')

• The return value is a class array

to get the node

in the Document Object Model (DOM) ), each node is an object. DOM nodes have three important attributes

: 1. nodeName: the name of the node

2. nodeValue: the value of the node

3. nodeType: the type of the node

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

• The nodeName of the element node is the same as the label name.
• 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 text node The nodeValue is the text
• attribute of the node. The nodeValue is the value of the attribute.

3. nodeType attribute: the type of the 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
• Comment 8
• Document 9

Create a node:

1. Create a node: createElement('')

// Create an element. It is just created and not added to the html. It needs to be used in conjunction with appendChild. var elem = document.createElement('p');
    elem.id = 'test';
    elem.style = 'color: red';
    elem.innerHTML = 'I am a newly created node';
    document.body.appendChild(elem);

2. Insert node: appendChild ()

• usage is: parent.appendChild(child)
• will add the child node to the end of the parent.
• If the child node originally exists, the original node will be removed. Add the new node to the end, but the event will remain

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

2-1. Insert node: insertBefore()

• usage is parent.insertBefore(newNode,refNode);

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

Delete node

1. Delete node: removeChild

• usage is: parent.removeChild(child)
• If you delete a child node that is not a parent element, an error will be reported

var op=document.body.getElementsByTagName("p ")[0];
         op.parentNode.removeChild(op);

Clone node

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

• Clone node (needs to accept a parameter to indicate whether to copy the element)

// Clone node (needs to accept a parameter to indicate whether to copy

element)
    var form = document.getElementById('test');
    var clone = form.cloneNode(true);
    clone.id = 'test2';
    document.body.appendChild(clone);

Replace node

1. Replace node method node.replace(new,old)

var oOldp=document.body.getElementsByTagName("p")[0];
       oOldp.parentNode.replaceChild(oNewp,oOldp);

of the document fragment box

• : When adding a large number of nodes to a document, it will be very slow if added one by one. In this case, you can use document fragments to add them to the document at once.
• Syntax: document. createDocumentFragment();
• hosting node

(function()
    {
        var start = Date.now();
        var str = '', li;
        var ul = document.getElementById('ul');
        var fragment = document.createDocumentFragment();
        for(var i=0; i<10000; i++)
        {
            li = document.createElement('li');
            li.textContent = ''+i+'th child node';
            fragment.appendChild(li);
        }
        ul.appendChild(fragment);
        console.log('Time consuming:'+(Date.now()-start)+'milliseconds'); // 63 milliseconds})();

[Related recommendations: javascript video tutorials, web front-end]

The above are JavaScript knowledge points Organize the details of obtaining elements and nodes. For more information, please pay attention to other related articles on the source code network!