DOM(Document Object model)
The Document Object model, or DOM, is the standard programming interface recommended by the Organization for the processing of extensible flag languages. On a Web page, objects that organize pages (or documents) are organized in a tree structure that represents the standard model for objects in a document called the DOM. The Document Object model dates back to the late 1990 's "browser Wars" between Microsoft and Netscape, which gave the browser powerful features in order to make life and death in JavaScript and JScript. Microsoft has added a number of proprietary things to Web technology, including VBScript, ActiveX, and Microsoft's own DHTML format, making it impossible for many Web pages to be displayed using non-Microsoft platforms and browsers. Dom is the masterpiece of the time.
1. Find elements
① Direct Lookup
document.getElementById gets a label based on the ID document.getelementsbyname Gets a collection of tags based on the Name property Document.getelementsbyclassname gets a collection of tags based on the class attribute document.getElementsByTagName gets a collection of tags based on the tag name
② Indirect lookup
ParentNode //parent node childnodes// All child nodes FirstChild //first child node LastChild //Last child node nextsibling // Next sibling node previoussibling //Previous sibling node parentelement //parent node tag element children// All child tags firstelementchild / /first child tag element lastelementchild //Last child tag element nextelementtsibling //Next sibling tag element previouselementsibling // Previous sibling tag element
2. Operation
① content
InnerText text outertextinnerhtml HTML content innerhtml value
② Property
Attributes //Get all Tag Properties setattribute (Key,value) //Set tag Properties GetAttribute (Key) //Get specified Tag property/*var ATR = Document.createattribute ("Class"), Atr.nodevalue= "Democlass";d Ocument.getelementbyid (' N1 '). Setattributenode (ATR );*/
<! DOCTYPE html>functionCheckall (ths) {varTB = document.getElementById (' TB '); varTRS =Tb.childnodes; for(vari = 0; i<trs.length; i++){ varCURRENT_TR =Trs[i]; if(current_tr.nodetype==1){ varINP = current_tr.firstElementChild.getElementsByTagName (' input ') [0]; Inp.checked=true; } } } functionCancelall (ths) {varTB = document.getElementById (' TB '); varTRS =Tb.childnodes; for(vari = 0; i<trs.length; i++){ varCURRENT_TR =Trs[i]; if(current_tr.nodetype==1){ varINP = current_tr.firstElementChild.getElementsByTagName (' input ') [0]; Inp.checked=false; } } } functionReversecheck (ths) {varTB = document.getElementById (' TB '); varTRS =Tb.childnodes; for(vari = 0; i<trs.length; i++){ varCURRENT_TR =Trs[i]; if(current_tr.nodetype==1){ varINP = current_tr.firstElementChild.getElementsByTagName (' input ') [0]; if(inp.checked) {inp.checked=false; }Else{inp.checked=true; } } } } </script></body>Demo
Demo
3. Extended Exercise
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Title</title></Head><Body> <DivID= "I1">I'm i1.</Div> <a>Aaaaa</a> <a>bbbbb</a> <a>Ccccc</a></Body></HTML>
Practice the HTML file
Get Id>document.getelementbyid (' I1 ');< <div id=? " I1, I am i1?</div> Get content >document.getelementbyid (' i1 ') .innertext< "I am i1"//re-assigned >document.getelementbyid (' I1 '). InnerText = ' New content ' < new content '//Get TagName collection >document.getelementsbytagname (' a '); <[<a>?aaaaa?</a>?, <a>? Bbbbb?</a>?, <a>?ccccc?</a>?] Gets the collection of specified index elements >document.getelementsbytagname (' a ') [1]< <a>?bbbbb?</a>? Re-assigning a single element >document.getelementsbytagname (' a ') [1].innertext = 66666;<66666//Assigns a value to all files in the collection >tags = document.getElementsByTagName (' a '); <[<a>?aaaaa?</a>?, <a>?66666?</a>?, <a>? Ccccc?</a>?] >for (var i=0;i<tags.length;i++) {tags[i].innertext=99999;} <99999>tags<[<a>?99999?</a>?, <a>?99999?</a>?, <a>?99999?</a>?]
Python development "frontend": DOM