JavaScript Handouts (iii)

DOM: With JS script to dynamically modify HTML

DOM Model
---------------------------------------------------------
HTML documents have only one root node, others are child nodes, and eventually form a structured document. The DOM provides a way to access structured documents, but DOM is not a technique, it's just a thought of accessing structured documents. Based on this idea, each language has its own DOM parser.

DOM Models and HTML documents
---------------------------------------------------------
Although JS is not a purely object-oriented language, Dom has found a complete set of inheritance systems for common HTML elements.
A common inclusion relationship between HTML elements. Some HTML elements can be nested between each other, and some are not.

Accessing HTML elements
---------------------------------------------------------
Two ways: Access HTML elements (document.getElementById ()) based on ID, access HTML elements using node relationships (access using parent-child, sibling relationships)

Accessing form controls
Options for accessing the list box, drop-down menu

modifying HTML elements
---------------------------------------------------------
Modify the node (content, properties, CSS styles). Modifying HTML elements is usually done by modifying several of the following common properties:
InnerHTML: such as Xx.innerhtml=document.getelementbyid ("Celval"). Value;
Value
ClassName:
Style
Options[index]:

Adding HTML elements
---------------------------------------------------------
Two-step: 1) Create/copy node; 2) Add node
var a=document.createelement ("Divxxx");
var Ajax=ul.firstchild.nextsibling.clonenode (false)
Ul.insertbefore (Ajax,ul.firstchild);

Add Table content Dynamically

Delete HTML elements
---------------------------------------------------------
Delete node: removechild

Traditional DHTML Model
---------------------------------------------------------
The DOM not only accesses and updates the content and structure of the page, but also manipulates the style of the document. JS uses the traditional DHTML model to access and update HTML pages before the DOM appears. More powerful than Dhtml,dom, it provides an access model for the entire HTML document, which transforms the document into a tree structure, with each node in the trees corresponding to the HTML element.

Using the Window object
---------------------------------------------------------
The Window object is the top-level object that the entire JS script runs.
Access history: Historical properties.
Access page URL:
Client Screens Information: Screen properties
Popup new window: window.open ()
With timer:
Navigator and location: for example
for (Var propname in Window.navigator)
{
Window.navigator[propname];
}
HTML5 New Geolocation properties: getcurrentposition,watchcurrentposition

Using the Document Object
---------------------------------------------------------
The Document object is both an instance of the HTMLDocument class and an object in the DHTML model.

JavaScript Handouts (iii)