The file object model, or DOM, is the standard programming interface recommended by the Organization for the processing of extensible flag languages.
DOM Programming: You can manipulate all the HTML tags, to find, operate! He's also part of JavaScript.
1. Find the element:
Direct Lookup
document.getElementById (' id ') to find the specified ID, then we can do the operation
<Body> <DivID= ' Id1 '>Hello</Div> <Scripttype= "Text/javascript"> varI=document.getElementById ('ID1');//find the label for ID bit ID1I.innertext='Tom';//label content re-assigned valueDocument.getelementsbyname ('name'); //gets a collection of tags based on the Name property, similar to Id,name, which assigns a name to an element, but differs from the ID, not must be unique.Document.getelementsbyclassname ('ClassName'); //get a collection of tags based on the class propertydocument.getElementsByTagName ('Div'); //gets the tag collection element based on the tag name#nav; //Elements of the Id=nav element are selected through the CSS selectorDiv; //all <div> elements select elements from CSS selectors. Warning; //all elements containing warnning in the class attribute select elements from the CSS selector //You can also use the property selector:P[lang='en']; //all passages in English such as <p lang= ' en ' > *[Name='Tom'] //all elements that contain attributes of Name=tom //Combined use:Div, #log//all <div> elements, as well as elements of Id=log //all the elements in the document, document.all ()document.all[0] //the first element in a documentdocument.all["NavBar"] //ID or the element name is not NavBar </Script></Body>
2. Indirect search
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
3. Differences between nodes and elements
4. Registration Events
Events: Like having a "button", what happens when you click, what happens when you double-click, this is called an event!
Registration: First This button, when you click on the action, the above event to make him appear the effect we want, first we have to bind the event and function, and then register them to the specified label
Common events:
The example code is as follows:
Write an input tag, first bind the event and function, and when you click on the button it will automatically execute the binding function:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Shuaige_js_file</title> <!--importing JavaScript scripting methods - <!--<script type= "Text/javascript" src= "T1.js" ></script> - <style>. color_red{Background-color:Red; } </style></Head><Body> <DivID= "Id_1"> </Div> <!--the following input tag: OnClick is an event he is equal to a function, that is, the event and function to bind, applied to the label is registered to the label - <inputtype= "button"onclick= "edit ();"value= "Modify" /> <Scripttype= "Text/javascript"> functionedit () {varI=document.getElementById ('id_1'); I.classname= 'color_red'; } </Script></Body></HTML>
"Python Road Day16" The DOM, JQuery of the front-end knowledge article
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
