Home > Developer > JavaScript
Trees and branchesDom 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).
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)
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
