JavaScript DOM Operations

Source: Internet
Author: User
Tags tag name tagname

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 nodes

JavaScript 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 elements

In 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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.