The article uses a sample application to demonstrate DOM methods and properties and how to attach handlers to DOM events.
The World Wide Web Consortium (WWW) has defined the Document Object Model (DOM) in different spec groups (DOM 1, Dom 2, and DOM level 3). The DOM represents HTML or XML as a tree that consists of nodes with different levels of properties and methods. Using the client language such as JavaScript, you can add, modify, delete, and attach events to nodes in the tree, resulting in interactive, dynamic Web pages.
The behavior of modifying the DOM using Client script language (JAVASCRIPT) is called Dom scripting. DOM scripting is used instead of the generic term dynamic HTML (DHTML), which is used in web development to represent the construction of interactive Web pages that use HTML, CSS, and JavaScript.
This article explores the most commonly used methods and properties in the DOM API. Use a detailed example to show how to use JavaScript to traverse the DOM. Use a more complex model to illustrate where to consider events and listeners. Learn how to use JavaScript libraries to interact with the DOM.
DOM scripting
In the DOM terminology, document represents the root. Represented in JavaScript as window.document, or simply as document (because it is attached to a Window object). This is the starting point for JavaScript implementations. Listing 1 shows an example of an HTML fragment.
Listing 1. HTML Code
<body> <p id= "PARAGRAPH1" > <span>this is some text</span> <a href= "/index.html" Click here ">click here</a> <p></body>From the DOM perspective, the P tag in the above example is represented by the DOM Element interface. It is the parent tag of the span label and a label. The span label and a label are sibling tags.
Suppose you want to get the href attribute of the code locator point in Listing 1. An easy way to access an element in the DOM is to use the getElementById method. The following code string shows part of a document interface definition that contains a getElementById signature written with an interface Definition language (IDL): Element getElementById (in Domstring elementid).
JavaScript implements the Domstring interface using a String object, so the method accepts the element ID as a string and takes it as a parameter. In the sample fragment, the only element with the id attribute is the p tag, so you can use the var paragraph = document.getElementById ("paragraph1"); Retrieve it.
You can use the ChildNodes property to get the anchor point embedded in the P tag. This property belongs to the Node interface and returns an object of type NodeList. In JavaScript, the object is an array object. Array objects have no methods, such as pop () or push (), but they have the length attribute. The object returned from the ChildNodes property is not any different from the node element (HTML tag), text node, or annotation node. If you just look for node elements, you can consider the children attribute. Regardless of the text and annotation nodes, it is more satisfying than childnodes for our purposes. In this example, the anchor point is the second child node of the paragraph, and you can use var aelement = paragraph.children[1]; Get。
Given an element, to get the value of the href attribute, you can use the GetAttribute method to pass the property name as a parameter (in this case, href). The IDL definition section containing the GetAttribute method is: Domstring getattribute (in Domstring name).
In this example, you can implement the above interface like this: var ahref = Aelement.getattribute ("href"); "Index.html".
As in JavaScript, you can link methods. To get the value of the a label's href attribute by one line, use: var ahref = document.getElementById ("paragraph1"). Children[1].getattribute ("href"); index.html * *.
Exploring DOM Scripting: sample Applications
This section explores some of the features of DOM scripting. The Sticky Notes sample application is an interactive Web page that allows users to add "Sticky" comments without reloading the page. Figure 1 shows the page.
Figure 1. Sticky Notes Application Front-End
The HTML code for the page shown in Figure 1 is shown in Listing 2. In Listing 2 the head tag is a reference to CSS and JS files. In the Body tab you can already see the structure of the annotations in the page: the textarea tag and the anchor point that triggers the new annotation creation.
Listing 2. HTML Code
<! DOCTYPE html><html> <head> <meta charset=utf-8 "> <title> Dom Scripting </title> < Link rel= "stylesheet" href= "Css/master.css"/> <script src= "js/script.js" ></script> </head> < body> <div class= "wrappers" > <h1> Sticky Notes </h1> <div class= "Links" > <textarea id= " Contentarea "cols=" > </textarea> <a href= "/random.html" class= "Add" >click here</a> >to add a sticky note</span> </div> <div id= "notes" > <div class= "Note" > <p> this be a note </p> </div> </div> </div> </body></html>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
