Basic JavaScript DOM operation example

Last Update:2013-12-17 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Document Object Model (DOM) is an interface for intercommunication between website content and JavaScript. When JavaScript becomes the most common language, JavaScript and DOM are usually considered as independent entities. The DOM interface is used to access, traverse, and control HTML and XML documents. Below we will briefly introduce some basic JavaScript DOM operation instances, including creating, adding, deleting, cloning, and accessing nodes.

BKJIA recommended reading: The nature and operation methods of JavaScript DOM

1. getElementById (id)

This is one of the most commonly used methods to access an element through id. For example:

 
 
  
   
           <body> 
  
           <div id="myid"> 
  
           test  
  
           </div> 
  
           <script language="javascript"> 
  
           alert(document.getElementById("myid").innerHTML);  
  
           </script> 
  
           </body>

Note: If the element ID is not unique, the first element with the ID name is obtained.

2. getElementsByName (name)

This is to get a bunch of elements as an array through name. You can see that there is a small s behind the Element. The ID is required to be unique in the HTML document, and the name may not be unique, for example, in checkbox and radio, multiple inputs are used with the same name to identify whether they are in the same party. By the way, getElementsByName (name) is only used to obtain input, radio, checkbox, and other elements, such as <input name = "myradio" type = "radio"/>.

3. getElementsByTagName (tagname)

By reading this method, we can see that this is also to get a bunch of elements as an array), which is obtained through TagName, that is, the tag name. You can traverse this array to obtain each individual element. When a DOM structure is large, it can be used to effectively narrow the search scope.

 
 
  
  <Html>
  
  <Head>
  
  <Script>
  
  Function test (){
  
  Testall = document. getElementsByTagName ("body ");
  
  Testbody = testall. item (0); // obtain all the elements whose tagnames are body. Of course, each page has only one element)
  
  Testall = testbody. getElementsByTagName ("p"); // obtain all P elements of the body sub-element
  
  Testnode = testall. item (1); // obtain the second P element.
  
  Alert (testnode. firstChild. nodeValue); // display the text of this element}
  
  </Script>
  
  </Head>
  
  <Body>
  
  <P> hi </p>
  
  <P> hello </p>
  
  <Script language = "javascript">
  
  Test ();
  
  </Script>
  
  </Body>
  
  </Html>

4. appendChild (node)

Append a node to the current element.

 
 
  
   
           <body> 
  
            
            
           <div id="test"></div> 
  
           <script type="text/javascript"> 
  
           var newdiv=document.createElement("div")  
  
           var newtext=document.createTextNode("A new div")           
  
           newdiv.appendChild(newtext)  
  
           document.getElementById("test").appendChild(newdiv)  
  
           </script> 
  
           </body>

I used innerHTML to display the content in the first example. I saw the article just now and learned that innerHTMl does not belong to DOM.

5. removeChild (childreference)

Delete the subnode of the current node and return the deleted node. The deleted node can be inserted somewhere else.

 
 
  
   
           <body> 
  
           <div id="parent"><div id="child">A child</div></div> 
  
           <script language="javascript"> 
  
           var childnode=document.getElementById("child")  
  
           var removednode=document.getElementById("parent").removeChild(childnode)  
  
           </script> 
  
           </body>

6. cloneNode (deepBoolean)

Copy and return the copy node of the current node. The copy node is an isolated node. It copies the attributes of the original node. Before adding the new node to the document, modify the ID attribute as needed to ensure that the ID is unique. This method supports a Boolean parameter. When deepBoolean is set to true, all subnodes of the current node are copied, including the text in the node.

 
 
  
   
           <body> 
  
           <p id="mynode">test</p> 
  
           <script language="javascript"> 
  
           p=document.getElementById("mynode")   
  
          ppclone = p.cloneNode(true);  
  
           p.parentNode.appendChild(pclone);  
  
           </script> 
  
           </body>

7. replaceChild (newChild, oldChild)

Replace one subnode of the current node with another node.

 
 
  
   
           <body> 
  
           <div id="mynode2"> 
  
           <span id="orispan">span</span> 
  
           </div> 
  
           <script language="javascript"> 
  
           var orinode=document.getElementById("orispan");  
  
           var newnode=document.createElement("p");  
  
           var text=document.createTextNode("test ppp ");  
  
           newnode.appendChild(text);  
  
           document.getElementById("mynode2").replaceChild(newnode, orinode);  
  
           </script> 
  
           </body>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Basic JavaScript DOM operation example

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support