Summary of native JavaScript and jQuery manipulation of DOM elements

DOM (Document Object Model) is the document object model. Usually, browsers convert HTML or XML documents into a collection of object models (ie DOM tree), and JavaScript can operate on DOM nodes to achieve the desired effect. The following summarizes the methods of native JS and Jq to operate DOM nodes.

①Native JS to DOM node

Node type (base class)

nodeType: node type, if it is an element, the value is 1;

nodeName, nodeValue: For element nodes, nodeName is the label name, and nodeValue is null;

firstChild, lastChild: Select the first child node or the last child node of the element node;

appendChild(a), insertBefore(a): insert the child node a at the end or the beginning of the element node;

removeChild(a): remove child node a;

replaceChild(a,b): Replace the child node b under the element node with the new node a;

document type (document_node)

The document.documentElement property points to the html tag element

The document.body property points to the body tag element

getElementById( ): Get the element by id;

getElementsByTagName( ): Get elements by tag name;

getElementsByName( ): Get elements by name;

getElementsByClassName( ): Get elements by class name;

element type (element_node)

tagName: element tag name;

id：ID名；

className：class名；

getAttribute(a): Get the value of the a attribute;

setAttribute(a): Set the value of the a attribute;

removeAttribute(a): remove the value of the a attribute;

createElement(tag): Create an element with a tag named tag;

text type (text_node)

createTextNode(text): Create a text node whose content is text;

documentfragment类型（document_fragment_node）

createDocumentFragment(): Create a virtual node, build a discrete DOM block in the virtual node, and finally add it to the required position;

Example: Click the button to generate a div and display the nth paragraph, n changes with the number

html

<div id='btntake'>
<button onclick="divAdd()">click to add</button>

</div>

var p = 1 ;

var btn = document .getElementById ( 'btntake' );

function divAdd(){

var oFragment = document.createDocumentFragment();

var odiv = document.createElement('div');

var otext = document .createTextNode( ' th ' + p + ' paragraph ' );

odiv.className = 'blue background';

odiv.appendChild(otext);

oFragment.appendChild(odiv);

btn.appendChild(oFragment);

p++;

};

②Jq to DOM nodes

Insert a node inside an element

append(): Append content inside the element, such as $('#B').append('< p >A</p >'); // Append a paragraph to the element with id B ;

prepend(): Prepend content inside the element, such as $('#B').prepend('<p>A</p>'); add a paragraph before the content of the element whose id is B ;

Insert a node outside an element

after(): Insert content after the element, such as $('#B').after('< p >A</p >'); // Add a paragraph after the element with id B ;

before(): Insert content before the element, such as $('#B').before('< p >A</p >'); // Add a paragraph to the front of the element with id B ;

Delete, copy and replace nodes

empty(): deletes the child nodes in the element without deleting the element;

remove(): remove the entire element;

clone(true/false): clone the matching element, when true, copy all elements and their event processing, when false, only copy the matching element but not the event;

replaceWith(): replace element

Summary of native JavaScript and jQuery manipulation of DOM elements

Guess you like