This time I share the operation of jquery, that is, the operation of jquery on the dom. In html, html can be a dom node, that is, any content in the entire html is a dom node, and if you want to operate or modify the html, you only need to select the dom node. The selector of jquery can select these nodes very effectively, and the operation part of jquery can easily operate the nodes, and what I want to share is the operation (action) of jquery.
1. DOM operation in js
1. DOM creation
The DOM node can correspond to each part in the html, when you want to know the type of the current part of the DOM node, you can use
nodeType
For creating nodes, there are
document.createElement; document.creatTextNode;
It can be written like this:
var elment1 = document.createElement('div');
var element2 = document.createElement('input');
var node = document.createTextNode('hello world!';
2. DOM query
ele.parentElement;//Get the parent element
ele.parentNode;//Get the parent node
ele.children;//Get child nodes
ele.getElementsByTagName('');//Query child elements by attribute name
ele.getElementsByClassName('');//Query child elements by class name
ele.firstElementChild;//The first child element node of the ele element
ele.lastElementChild;//The last child element node of the ele element
ele.nextElementSibling;//The next sibling element node of the ele element
ele.previousElementSibling;//The previous sibling element node of the ele element
3. DOM changes
ele.appendChild(el);//Add child elements ele.removeChild(el);//Remove child elements ele.replaceChild(el1, el2);//Replace child elements parentElement.insertBefore(newElement, referenceElement);//Insert child elements
4. Attribute operation
el.getAttribute('');//Get attribute
el.setAttribute('');//Set attribute
el.hasAttribute('');//Judgment attribute
el.removeAttribute('');//Remove attribute
5. About innerHTML and outerHTML.
innerHTML // Inner html outerHTML // external html innerText//Inner text outerText//Inner text <div id='home'><p>text page</p></div>//<div></div> is the outerHTML part, <p></p> is the innerHTML part, text page these text parts It is the innerText part, and the change of the outerText part will change the tab page, and the innerText part only changes the text part
2. Some simple dom operations in jquery
Give an html code first
<p title='Car'>Your favorite sports car brand</p>
<ul>
<li title='Audi'>Audi</li>
<li title='Ferrari'>Ferrari</li>
<li title='Rolls Royce'>Rolls Royce</li>
</ul>
//The dom tree of a general web page is like this: html is divided into head sub and body sub; head is divided into meta sub, title sub, style sub
Etc., the body includes the ul, and the ul includes the li, and so on.
// find text and nodes
$('ul li:eq(1)').text()//Find the text content of the second li element in ul
$('p').attr('title')//Get the attribute title of the p element node
//create element node
$('ul').append($('<li></li>'))//Add li element to ul
//create text node
$('ul').append($('<li>BMW</li>'))//Add nodes and text
//create attribute node
$('ul').append($('<li title=BMW>BMW</li>'))//Create an attribute node and add
//In addition to append, there is appendTo(), which is the opposite of the append statement, which is $(a).append(b)
is to add a to b; prepend(), this statement is to prepend the content to each element. Others are prependTo(), after(), insertAfter(), before(), insertBefore().
// delete node
$('ul li:eq(1)').remove();//Remove the second element in ul which is Ferrari
//What if you want to move a node? Two steps: 1. delete first, 2. add later
$('ul li:eq(1)').detach();//It also deletes the node, but the difference from the above is that this will not delete the matching element, just remove it, and its shadow still exists in the database
$('ul li:eq(1)').empty();//Clear the node, you can clear all descendant nodes in the element
//copy node
$('ul li').click(fucntion){
$(this).clone(true).appendTo('ul');//Copy the currently clicked node and add it and its function to the ul element. If you don't write true in clone, it just appends the currently clicked node, and has no function
}
//replace node
replaceWith()//Replace all matching elements with the specified HTML or DOM elements
$('p').replaceWith("<strong>What is your least favorite sports car?"<strong>);//Replace the title attribute in the p tag and the content of the p tag in the web page with your least favorite sports car?
$("<strong>What is your least favorite fruit?</strong>").replaceAll('p')//The same function as the above code, but the order is turned over.