JavaScript DOM-1 DHTML Overview DOM overview

Source: Internet
Author: User

I. Overview of DHTML


About DHTML

-dhtml:dynamic HTML, Dynamic HTML, not a technology, standard, or specification, but a Web page technology, language standard integration of the existing, to create a re-download can still be able to change the effect of page elements in real time page design concept

-Features of DHTML

-Dynamically changing page elements

-Interact with users, etc.

-The DHTML object model includes BOM and DOM

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M00/7E/55/wKioL1b86BKw3CorAAAVtwvw_DM340.png "title=" Web.png "alt=" Wkiol1b86bkw3coraaavtwvw_dm340.png "/>


DHTML Object Model

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M00/7E/59/wKiom1b857CizdrQAAGsZmHIPoY401.png "title=" Web.png "alt=" Wkiom1b857cizdrqaagszmhipoy401.png "/>

BOM and DOM

-The Bom:browser object model, the browser objects models, is used to access and manipulate browser windows so that JavaScript has the ability to "talk" to the browser

-By using the BOM, you can move the window, change the status bar text, and perform other actions that are not directly associated with the page content

-No relevant standards, but are widely supported


-Dom:document object model, Document object support models for manipulating documents

-Defines a standard way to access and manipulate HTML documents

-Manipulate the contents of the HTML document by manipulating the DOM tree

-Operating standards related to the definition of the organization


Ii. Overview of the DOM


DOM Overview

-DOM is the standard for World Wide Web Consortium, an interface between neutral platforms and languages that allows programs and scripts to dynamically access and update the content, structure, and style of documents

-The DOM standard is divided into 3 different parts

-Core DOM-a standard model for any structured document

-XML DOM-a standard model for XML documents

-HTML DOM-Standard Model for HTML documents

-HTML DOM: An object model for HTML documents

-When a Web page is loaded, the browser creates a Document object model of the page

-Through the DOM, you can access all the HTML elements, along with the text and attributes they contain

-You can modify and delete the content, as well as create new elements

-All nodes in the document make up a document tree (or node tree)

-Document object is the root of a tree of documents


Document Object

-the browser's built-in JS interpreter creates a corresponding document object for each loaded HTML document

-By using the Document object, you can access all the elements in the HTML page from the script


DOM node tree

-All nodes in an HTML document make up a document tree (or node tree)

-Each element, attribute, text, and so on in an HTML document represents a node in the tree

-The entire document is a document node

-Each HTML tag is an element node

-text that is contained in an HTML element is a text node

-Each HTML attribute is an attribute node (attribute nodes)

-Comments belong to note nodes (comment node)

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M00/7E/5A/wKiom1b87gqARbQdAABzupM3rg0547.png "title=" Web.png "alt=" Wkiom1b87gqarbqdaabzupm3rg0547.png "/>

-Tree root as Document object

-Manipulate the entire node tree through the Document object

-All nodes in a tree node are related to each other

-Parent Node

-Subnodes (child node)

-Brother Node (sibling)

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/7E/5A/wKiom1b87qPSSdwvAAB9ZUUCp38037.png "title=" Web.png "alt=" Wkiom1b87qpssdwvaab9zuucp38037.png "/>

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M02/7E/56/wKioL1b8717CVDFpAADfSexmNBA141.png "title=" Web.png "alt=" Wkiol1b8717cvdfpaadfsexmnba141.png "/>


DOM operations

-With a programmable object model, JavaScript has the ability to create dynamic HTML

-Find nodes

-Read node information

-Modify node information

-Create a new node

-delete Node

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M00/7E/56/wKioL1b8772y0bhyAABY4D46bGI791.png "title=" Web.png "alt=" Wkiol1b8772y0bhyaaby4d46bgi791.png "/>650" this.width=650; "src=" http://s2.51cto.com/wyfs02/M00/ 7e/56/wkiol1b8782iync8aafdsudlf8m376.png "title=" Web.png "alt=" Wkiol1b8782iync8aafdsudlf8m376.png "/>



Summary: This chapter covers the JavaScript Dom DHTML Overview DOM overview


This article from the "Technical Exchange" blog, declined reprint!

JavaScript DOM-1 DHTML Overview DOM overview

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.