JavaScript Note 03--Document Object model (Doc object models, referred to as DOM)

Source: Internet
Author: User
Tags tag name

Dom technology allows the user page to dynamically change, such as the ability to dynamically display or hide an element, change their properties, add an element, and so on, Dom technology makes the page interactivity greatly enhanced. [1] The DOM is actually a document model that is described in an object-oriented manner. The DOM defines the objects that are required to represent and modify the document, the behavior and properties of those objects, and the relationships between those objects. You can think of the DOM as a tree representation of the data and structure on the page, although the page may not be implemented in this way. With JavaScript, you can refactor the entire HTML document. You can add, remove, change, or rearrange items on a page. To change something on a page, JavaScript needs to get access to all the elements in the HTML document. This portal, along with the methods and properties for adding, moving, changing, or removing HTML elements, is obtained through the Document Object Model (DOM). 

Trees and branches

HTML is an XML-like structure because the elements form a parent node with child nodes, just like the branches of a tree. There is a root element ( html ) that contains the branches head and body , each of which has its own branch office. Therefore, the DOM is also called the dom tree .

modifying the DOM by selecting an element and changing some elements is often done in JavaScript. to access the DOM from JavaScript, use that document object. It is provided by the browser and allows the code on the page to interact with the content.

We can get HTML elements in various ways, such as ID, tag name, class name, CSS selector, etc.

<!DOCTYPE HTML><HTML>    <Head>        <MetaCharSet= "UTF-8">        <title></title>        <styletype= "Text/css">                        /*CSS Selector Example*/. Important{                            }#myHeader{                            }                    </style>    </Head>    <Body>        <!--ID Example -        <H1ID= "MyHeader">Hello world!</H1>                 <!--here are 3 H2 tags -        <H2>Headerone</H1>        <H2>Headertwo</H2>        <H2>Headertree</H3>                    <!--Class Example -        <Pclass= "Important">Note that this is an important paragraph.</P>                        <!--JavaScript Code -        <Scripttype= "Text/javascript">            //Get DOM element            varMyHeader=document.getElementById ('MyHeader'); //single quotation marks            varHeaders=document.getElementsByTagName ('H2'); varimportants=Document.getelementsbyclassname ('Important'); //returns a DOM element consisting of a arrays            varMyHeader2=Document.queryselector ('#myHeader'); //returns only one element            varimportants2=Document.queryall (. Important); //manipulating DOM elements                    </Script>    </Body></HTML>

Then through the JS code to manipulate them, to implement dynamic Web pages.

Content Source: http://htmldog.com/guides/javascript/intermediate/thedom/

            

JavaScript Note 03--Document Object model (Doc object models, referred to as DOM)

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.