JavaScript DOM node and document type

Last Update:2016-11-23 Source: Internet

Author: User

Tags tag name

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

The following example takes this HTML document structure as an example:

<! DOCTYPE html>
　　
Get a collection of child nodes: ChildNodes ()var ul = document.getElementById ("contents"); for (var i= 0; i < ul.childNodes.length; i++) {  if (ul.childnodes[i]. NodeType = = "1") {    console.log (ul.childnodes[i].id);  }}
Operation Result:
li_1 li_2 li_3
Determine the type of node with NodeType, a table below that represents different types of corresponding values (commonly used):

 
  
  
   
    
    type 
    value 
    
   
  
   
    
    Element 
    1 
    
    
    Text 
    3 
    
    
    Comment 
    8 
    
    
    Document 
    9 
    
   
 
 
In the example above, the node includes the text type and the element type, so determine if it is an element type.
Get the parent node of the element: ParentNode ()var li = document.getElementById ("li_1"); Console.log (li.parentNode.id);
Operation Result:
conments
Get neighboring sibling nodes
PreviousSibling: Get previous sibling node
NextSibling: Get Next sibling node
var P1 = document.getElementById ("p_1"); Console.log (p1.previousSibling.id); Console.log (p1.nextSibling.id);
Operation Result:
contentsp_2
We look at the HTML code, why the <p> label to be placed behind the UL, here is for the convenience of testing, IE and other browsers here to behave differently, for other browsers, ul the child element is actually 7, and IE is 3, we see is really only 3 Li, Other browsers think of the line-break between Li and Li as having a text node, so there are 7 of nodes.
Get the child nodes
FirstChild: Get the first child node
LastChild: Get the last child node
<p id= "Demo2" ><strong id= "strong_1" ></strong><a id= "a" ></a><strong id= "Strong_2" ></strong></p>var p = document.getElementById ("Demo2"); Console.log (p.firstchild.id); Console.log ( P.lastchild.id);
Operation Result:
strong_1strong_2
Determine if there are child nodes: HasChildNodes ()
Returns true if there are child elements, otherwise, false
Inserting nodes at the end of a child node: appendchild ()var newNode = document.createelement ("div"), newnode.id = "NewNode"; var Getdemo = document.getElementById ("Demo1"); Getdemo.appendchild (NewNode); Console.log (getDemo.lastChild.id);
Operation Result:
newNodeInserting a node in front of a child node: InsertBefore ()
 
 
  
   
   InsertBefore (parameter 1, parameter 2) 
    
    Parameter 1: the node to be inserted 
    Parameter 2: node, which represents the insertion of a node in front of this node, or null if it is inserted at the end 
    
  
 
 
var newNode = document.createelement ("div"), newnode.id = "NewNode"; var Getdemo = document.getElementById ("Demo1"); Getdemo.insertbefore (Newnode,document.getelementbyid ("contents")); Console.log (getdemo.childnodes[1].id);
Operation Result:
newNodeReplace child node: ReplaceChild ()
 
 
  
   
   ReplaceChild (parameter 1, parameter 2) 
    
    Parameter 1: the node to be inserted 
    Parameter 2: Indicates the node to be replaced 
    
  
 
 
Refer to the example of InsertBefore ().
Delete child node: removechild ()
 
 
  
   
   RemoveChild (parameter 1) 
    
    Parameter 1: The node to be deleted 
    
  
 
 Clone node: CloneNode ()
 
 
  
   
   Node.clonenode (True|false) 
    
    Node: cloned nodes 
    Pass in a parameter, if true, then deep copy (along with the child nodes), if False, then shallow copy, copy only the node itself. 
    
  
 
 
var ul = document.getElementById ("contents"), var deepclone = Ul.clonenode (True), var shadowclone = Ul.clonenode (false); Console.log (deepClone.childNodes.length); Console.log (shadowClone.childNodes.length);
Operation Result:
70
If the value is not passed, shallow cloning is used by default.
Document Type document's properties
 
 
  
   
   Document.documentelement point to  Element
    Document.body point to <body> Element
 Document.doctype point to <!DOCTYPE> Element
 
  
   
 
Properties of the HTMLDocument
 
   
    
    Document.title get the title of the document 
    Document. URL to get the full URL 
    Document.domain Get domain Name 
    Document.referrer get the URL of the source page 
    
  Find element
 
   
    
    document.getElementById (ID) lookup by ID, return a node 
    document.getElementsByTagName (tabname) Search by tag name, return a collection 
    Document.getelementsbyname (name), which is found by name, returns a collection that only the HTMLDocument type has 
    
  Write
 
   
    
    document.write () 
    
  
Example:
document.write ("<div>Hi,Michael!</div>");
var newNode = document.createelement ("div"); newnode.innerhtml = "hi,michael!"; document.write (newnode.innerhtml);
The result of the above two pieces of code is the same.

 
   
    
    Document.writeln () 
    
  
Just like write (), except that it wraps itself.
JavaScript DOM node and document type

type	value
Element	1
Text	3
Comment	8
Document	9

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