Home > Developer > JavaScript
I. Document Object model
DOM Document Object model, which provides an excuse to access and dynamically modify documents, with the specification of DOM specifications, supported by mainstream browsers. The DOM consists of 3 parts, namely the Coredom, the XML DOM, and the HTML DOM.
1. Core DOM: Also known as the kernel DOM, defines a standard set of objects for any structured document, including HTML, XHTML, and XML.
2. XML DOM: Defines a standard set of objects for an XML document.
3. HTML DOM: Defines a set of standard objects for HTML documents.
Second, recognize the DOM node tree.
The DOM organizes HTML documents in a tree structure, and each label or element in the document is a node, and relationships exist between each node.
Third, access the DOM node.
1, use the GetElement series method to access the specified node.
(1) getElementById (): Returns a reference to an object that has the specified ID.
<Scripttype= "Text/javascript">functionGetValue () {varx=document.getElementById ("MyHeader"); Click on the title to pop up the title's value. alert (x.innerhtml);}</Script><Body><H1ID= "MyHeader"onclick= "GetValue ()">This is the title</H1></Body></HTML>
(2) Getelementsbyname (): Returns the collection of objects with the specified name.
<Scripttype= "Text/javascript">functiongetelements () {varx=Document.getelementsbyname ("Myinput"); Gets the number of text boxes named Myinput in the page. The number is 3 alert (x.length); }</Script><inputname= "Myinput"type= "text"size= " the" /><BR/><inputname= "Myinput"type= "text"size= " the" /><BR/><inputname= "Myinput"type= "text"size= " the" /><BR/><BR/><inputtype= "button"onclick= "getelements ()"value= "How many elements are called ' myinput '?" " />
(3) getElementsByTagName (): Returns the collection of objects with the specified label name.
<Scripttype= "Text/javascript">functiongetelements () {varx=document.getElementsByTagName ("input"); Gets the text box with the label name input in the page. The number is 4 alert (x.length); }</Script><inputname= "Myinput"type= "text"size= " the" /><BR/><inputname= "Myinput"type= "text"size= " the" /><BR/><inputname= "Myinput"type= "text"size= " the" /><BR/><BR/><inputtype= "button"onclick= "getelements ()"value= "How many input elements?" />
2. Use hierarchical relationships to access nodes.
(1) Accessing the root node:
There are two special types of document properties that you can use to access the root node:
Document.documentelement: The first property returns the document root node that exists in the XML as well as in the HTML document.
Document.body: The second attribute is a special extension of the HTML page, providing direct access to the <body> tag.
(2) Accessing the parent node
ParentNode: Returns the parent node of the node.
(3) Accessing sibling nodes
FirstChild: Returns the first child node of the node. Returns null if the element has no child nodes. Text and attribute nodes do not have child nodes. If it's a Firefox browser, the empty tag will be counted. Internet Explorer does not calculate empty tags.
LastChild: Returns the last byte point of the node, same as FirstChild. If it's a Firefox browser, the empty tag will be counted. Internet Explorer does not calculate empty tags.
Iv. attribute values for operation nodes
1, the Core Dom standard method includes the following two kinds:
GetAttribute ("Property name"): Gets the value of the property.
SetAttribute ("Property name"): Sets the value of the property.
2. The HTML Dom standard method can get the DOM directly. property. For example: Img.src directly gets the image src attribute.
V. Create and ADD nodes.
CreateElement (TagName): Creates a node according to the given label name.
AppendChild (NodeName): Adds a new child node at the end of an already existing node.
InsertBefore (Newnode,oldnode): Inserts a new node before the specified node. Where the NewNode parameter is required to represent the newly inserted node; OldNode is optional.
CloneNode (deep): Copies a node. Where the deep parameter is a Boolean value, and when the value of deep is true, the specified node and all its child nodes are copied. If False, only the current node and its properties are copied.
Vi. Deleting and replacing nodes
RemoveChild (node): Deletes the specified node.
ReplaceChild (Newnode,oldnode: Replaces NewNode with OldNode.
JavaScript Basics (vi) DOM model
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
