Add, delete, modify and query DOM node operations
document.write() can add nodes to the document
But there is a fatal problem, which will empty all the original nodes of the document
Therefore, it is not recommended to use
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } </style> <script src="DomReady.js"></script> </head> <body> This is the original node~ <script> myReady(function(){ document.write("This is document.write Created node!"); }); </script> </body> </html>
create series method:
document.createElement create element node
document.createTextNode create text node
document.createComment create comment node
document.createDocumentFragment create document fragment node
. appendChild() append child element
Document.body.insertbefore (the node to be inserted, the insertion location); insert the node before the specified location
. firstChild first child element node
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } </style> <script src="DomReady.js"></script> </head> <body> <ul id="list"></ul> <script> myReady(function(){ var comment=document.createComment("This is the annotation"); var ul=document.getElementById("list"); var li=null; var fragment=document.createDocumentFragment(); for(var i=0;i<3;i++){ li=document.createElement("li"); li.appendChild(document.createTextNode("item"+(i+1))); fragment.appendChild(li); } ul.appendChild(fragment); document.body.insertBefore(comment,ul); }); </script> </body> </html>
In IE6-8, createElement can be used to create elements that do not exist in the document
It can be used to make html5shiv, and it can be used for lower version IE compatible HTML tag elements
. split() string to array
Only ie will execute the content in IE conditional compilation statement / * @ cc_on @ * / and other browsers will process according to comments and will not execute, which can be used to distinguish whether it is IE browser or not
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } article{ font-size:14px; color:orange; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ (function(){ if(!/*@cc_on!@*/0) return; //All html5 New elements var elements="abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(", "); //Get length var len=elements.length; //Add these elements in a loop while(len--){ document.createElement(elements[i]); } })();//Anonymous function self executing can avoid global pollution }); </script> </head> <body> <article>This is html5 element</article> </body> </html>
The above is an error. html5shiv code cannot be written in domReady, because the element creation needs to be completed before the dom tree is loaded
Here is the correct way
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } article{ font-size:14px; color:orange; } </style> <script src="DomReady.js"></script> <script> (function(){ if(!/*@cc_on!@*/0) return; //All html5 New elements var elements="abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(", "); //Get length var len=elements.length; //Add these elements in a loop while(len--){ document.createElement(elements[len]); } })();//Anonymous function self executing can avoid global pollution </script> </head> <body> <article>This is html5 element</article> </body> </html>
How to create nodes efficiently
innerHTML
outerHTML
innerText
outerText
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } </style> <script src="DomReady.js"></script> </head> <body> <ul id="list"></ul> <script> var ul=document.getElementById("list"); var str="<li>item1</li>"+ "<li>item2</li>"+ "<li>item3</li>"; ul.innerHTML=str; </script> </body> </html>
Limitations on using innerHTML:
In ie6-8, it is required that no space should appear on the leftmost side of the string, otherwise it will be removed
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } div{ border:2px solid pink; background:#abcdef; } </style> <script src="DomReady.js"></script> </head> <body> <div id="box"></div> <script> var box=document.getElementById("box"); var str=" This is a sentence~"; box.innerHTML=str; </script> </body> </html>
For most browsers, script added using this method is invalid and will not execute
script is a scope free element, which will be deleted when added with innerHTML
Therefore, script must be selected after the scoped element
And you need to add the defer attribute to the script
This method is effective in IE6-8, but still invalid in higher versions of IE and other browsers
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } div{ border:2px solid pink; background:#abcdef; } </style> <script src="DomReady.js"></script> </head> <body> <div id="box"></div> <script> var box=document.getElementById("box"); var str="<input type='hidden'><script defer>alert('hello~');<\/script>"; box.innerHTML=str; </script> </body> </html>
Elements such as style meta link cannot be created separately
Unless it is also placed after a scoped element, such as < input type = "hidden" >
And only valid in IE6-8
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } </style> <script src="DomReady.js"></script> </head> <body> <div id="box"></div> <script> var box=document.getElementById("box"); var str="<input type='hidden'><style>body<\/style>"; box.innerHTML=str; </script> </body> </html>
The difference between innerHTML and outerHTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } </style> <script src="DomReady.js"></script> </head> <body> <div id="box"><b>cat</b></div> <script> console.log(box.innerHTML);//<b>cat</b> console.log(box.outerHTML);//<div id="box"><b>cat</b></div> </script> </body> </html>
innerText extracts all text nodes in an element
Only text
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } </style> <script src="DomReady.js"></script> </head> <body> <div id="box">start~<b>cat~</b>End~</div> <br> <div id="new1"></div> <div id="new2"></div> <script> console.log(box.innerText);//start~cat~End~ console.log(box.innerHTML);//start~<b>cat~</b>End~ var new1=document.getElementById("new1"); new1.innerHTML="<b>adopt innerHTML Added</b>"; var new2=document.getElementById("new2"); new2.innerText="<b>adopt innerText Added</b>"; </script> </body> </html>
innerText is not supported in earlier versions of firefox
Use: textContent compatible
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } </style> <script src="DomReady.js"></script> </head> <body> <div id="box">start~<b>cat~</b>End~</div> <script> //Obtain innerText function getInnerText(ele){ return (typeof ele.textContent=="string")?ele.textContent:ele.innerText; } //Set up innerText function setInnerText(ele,text){ if(typeof ele.textContent=="string"){ ele.textContent=text; }else{ ele.innerText=text; } } console.log(getInnerText(box)); setInnerText(box,"This is through setInnerText Set text") </script> </body> </html>
outerText is the same as innerText when getting
It will replace its own elements when setting, so it is not recommended to use
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } </style> <script src="DomReady.js"></script> </head> <body> <div id="box">start~<b>cat~</b>End~</div> <script> console.log(box.outerText); box.outerText="This is through outerText Set text"; </script> </body> </html>
