Home > Developer > JavaScript
The DOM is the abbreviation of document Object model, the Chinese name is the documentation object models, is the standard programming interface recommended by the organization to handle Extensible Markup language, if you are interested in the standard details, please refer to the article "Document Object Model" above the wiki Wikipedia. This article describes the basic JavaScript operations on the DOM.
JavaScript gets DOM element 1. getElementById (ID)This is the most straightforward and common way to get elements through the id attribute of the DOM element.
Getting DOM elements using the getElementById (ID) method requires that the id attribute of all tags in our HTML document cannot be duplicated (the ID should not be duplicated for a well-accustomed programmer), and if the element's ID is not unique, the first element of that ID name is taken.
Let's look at an example:
<!DOCTYPE HTML><HTMLLang= "en"xmlns= "http://www.w3.org/1999/xhtml"><Head> <MetaCharSet= "Utf-8" /> <title>Javascript DOM Operation Example-Takeoff network</title> <Scripttype= "Text/javascript"> functionBtn_onclick () {varEle=document.getElementById ("message"); Ele.innertext= "Welcome to the Takeoff Network! "; } </Script></Head><Body> <spanID= "message"></span> <inputtype= "button"value= "Show Message"onclick= "Btn_onclick ()" /></Body></HTML>
In the code above, I defined a span with ID message, which is used to display the message. An input label of type button is defined and the OnClick event is added to the button, and the Btn_onclick () method is called when the button is clicked.
The Btn_onclick () method gets the element with the ID message, and then modifies the element's InnerText property to the message we want to display.
Run the code and see how it works!
2. Getelementsbyname (name)This is through the name to get a bunch of elements (as an array), see the element behind a small s to know that the ID is the HTML document requires unique, name can not be unique, such as checkbox, radio and other places will use more than Input uses the same name to identify whether it is a grouping.
Note that Getelementsbyname (name) is only used to obtain elements such as input, radio, checkbox, etc., such as <input name= "MyRadio" type= "Radio"/>.
3. getElementsByTagName (tagname)See this method to know that this is also to get a bunch of elements (as an array), is obtained by tagname is the tag name. You can iterate through this array to get each individual element.
When a DOM structure is large, it can be used to effectively narrow the scope of the search
JavaScript creates DOM nodesJavaScript uses the Document.createelement (TagName) method to create a node.
<!DOCTYPE HTML><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /> <title>Javascript DOM Operation Example-Takeoff network</title> <Scripttype= "Text/javascript"> functionBtn_onclick () {varDivmain=Document.createelement ("Div"); Document.body.appendChild (Divmain); varElespan=Document.createelement ("span"); Elespan.innertext= "Welcome to the Takeoff Network! "; Divmain.appendchild (Elespan); } </Script></Head><Body> <inputtype= "button"value= "Execute code"onclick= "Btn_onclick ()" /></Body></HTML>
In this code, we execute the above code by clicking the button.
In the first sentence of the code, we create a div node by calling the Document.createelement (TagName) method, and attach the node to the body.
It then creates a span node and attaches the span node to the above Div, displaying a message by changing the InnerText property of the span.
If the element is created but not attached to the document node, the node is not displayed in the browser window.
JavaScript removes DOM elementsIn JavaScript, use Ele.removechild (node) to remove node from ChildNodes.
<Div> <span>Span1</span> <span>Span2</span></Div><Scripttype= "Text/javascript"> varElespan=Document.body.getElementsByTagName ("span")[0]; EleSpan.parentNode.removeChild (Elespan);</Script>JavaScript replaces DOM elements
Replace the DOM element with Ele.replacechild (Newnode,oldnode) in JavaScript and replace OldNode with NewNode.
<Div> <span>Span1</span> <span>Span2</span></Div><Scripttype= "Text/javascript"> vareleSpan3=Document.createelement ("span"); Elespan3.innertext= "span3"; varElespan=Document.body.getElementsByTagName ("span")[0]; EleSpan.parentNode.replaceChild (Elespan);</Script>
The content of this article involves JavaScript's most basic additions, modifications, deletions, and fetches of the DOM, and in later chapters I'll cover more JavaScript operations on DOM elements, thanks for your attention!
JavaScript DOM Operations
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
