Home > Developer > JavaScript
1. Dom is the short name of the Document Object model.
When a Web page loads, you can convert the structured document into an object tree in memory.
Simply put, Dom is not a technology, but a way of accessing structured documents. With the DOM model, we can modify, delete, and add to the DOM tree to make the structured document dynamic.
2, the node in the DOM model--the document can be said to be a collection of nodes. There are 3 types of nodes in the DOM model:
(1) Element node: Various tags are the names of these element nodes, such as <ul>, <p>, etc.;
(2) Text node: The text node is always contained inside the element node;
(3) Attribute node: Typically used to decorate an element node is called an attribute node.
3. Dom access to HTML elements:
In order to modify HTML elements dynamically, you must first access the HTML elements. The DOM provides two main ways to access HTML elements:
(1) Access to HTML elements by ID-the getElementById () method is called through the Document object to find the element with a unique id attribute value;
Here's an example:
<!DOCTYPE HTML><HTMLLang= "en"> <Head> <MetaCharSet= "Utf-8"> <Metaname= "Name"content= "Content"> <title>dom-using the getElementById method to find an element</title> <Scripttype= "Text/javascript"> functionshowcontent () {varMydiv,content,txtname; with(document) {Mydiv=getElementById ("mydiv"); Content=getElementById ("content"); Txtname=getElementById ("txtname"); } alert (mydiv.innerhtml+"\ n"+Content.value+"\ n"+txtname.value); } </Script> </Head> <Body> <DivID= "Mydiv">My div block</Div> <textareaID= "Content"rows= "3"cols= "+">Study hard.</textarea><BR> <inputtype= "text"ID= "Txtname"value= "Chen"><BR> <inputtype= "button"ID= "Btn_show"value= "Access to content of 3 elements"onclick= "showcontent ()"><BR> </Body></HTML>
(2) Use the node relationship to access HTML elements. The common properties and methods are as follows:
ParentNode: Returns the parent node of the current node;
PreviousSibling: Returns the previous sibling node of the current node;
NextSibling: Returns the next sibling node of the current node;
Childnode: Returns all child nodes of the current node;
FirstChild: Returns the first child node of the current node;
LastChild: Returns the last child node of the current node;
getElementsByTagName (TagName): Returns all child nodes of the current node with the specified label name.
Here's an example:
<!DOCTYPE HTML><HTMLLang= "en"> <Head> <MetaCharSet= "Utf-8"> <title></title> <styletype= "Text/css">#n4{Color:Red;} </style> </Head> <Body> <ulID= "Names"> <LiID= "N1">Bob</Li> <LiID= "N2">Pj</Li> <LiID= "N3">Teddy</Li> <LiID= "N4">Chariel</Li> <binID= "N5">Gabe</Li> <LiID= "N6">Dorra</Li> </ul> <inputtype= "button"value= "Parent Node"onclick= "Showcontent (current.parentnode)"> <inputtype= "button"value= "First child node"onclick= "Showcontent (current.parentNode.firstChild.nextSibling)"> <!--Note: In Firefox Google Browser, the line will also be considered a child node, if not add nextsibling, the results will be in the Firefox google browser output is undefined - <inputtype= "button"value= "Previous Node"onclick= "Showcontent (current.previousSibling.previousSibling)"> <inputtype= "button"value= "Next Node"onclick= "Showcontent (current.nextSibling.nextSibling)"> <inputtype= "button"value= "Last child node"onclick= "Showcontent (current.parentNode.lastChild.previousSibling)"> <inputtype= "button"value= "Get the number of all LI elements"onclick= "Showcount ()"> <Scripttype= "Text/javascript"> var Current=document.getElementById ("N4"); functionshowcontent (target) {alert (target.innerhtml); } /*If you put the JavaScript code in the head tag, you will get an error: Cannot read property ' parentnode ' of NULL because JavaScript is parsed, the HTML goes down from the label above Execute, statement "var Current=document.getelementbyid (" N4 "); Did not put in the function, has not resolved to the UL label, went to find N4, so will be wrong. One solution is to put the JavaScript code on the last side, just before </body>. Another workaround is to have the HTML structure loaded before it is executed. */ functionShowcount () {alert (document.getElementsByTagName ("Li"). length); } </Script> </Body></HTML>
JavaScript DOM Document Object 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
