Home > Developer > JavaScript
How does Dom read and manage Html files? First, you must understand the source code structure of html.
If you have learned or written Html, you will be clear at a glance. I want to explain that the source code structure of Html is hierarchical, and there is a parent-child or adjacent relationship between the tag and the cup sign. it is not hard to see that the HTML Tag is the top-level. top. it can also be understood as the root of the html file. the second is the Head and Body labels. the two labels are adjacent. it can also be understood as a sibling relationship. but they all belong to html sub-tags or sub-elements. then the Body tag contains Table, Div, and Div. the three tags can be understood as the sub-tag or sub-element of the Body. the Body is the parent and the child. the same applies to Head labels. in addition, the first div contains another div. the second div contains some text content. their relationship is also a parent-child relationship. dom uses the relational structure of Html source code. and cleverly walk freely in your html source code. like a martial arts master. give full play to his "lingbo micro-step ". see the following code. the code structure is consistent. the difference is that several additional buttons are used to execute some dom command operations. after running The mysterious and wonderful world of Dom !!!
<Html> <pead> <title> This is the title of a webpage </title> <link/> <meta/> <body> <table border = "1"> <table> text content <input type = "button" value = "pop-up html Tag" onclick = "alert_HTML () "/> <input type =" button "value =" pop-up body tag "onclick =" alert_Body () "/> <input type =" button "value =" pop-up head label "onclick =" alert_Head () "/> <input type =" button "value =" Modify webpage title "onclick =" up_Title () "/> <input type =" button "value =" change table "onclick =" up_Table () "/> <input type =" button "value =" get the first div and its child element "onclick =" get_Div () "/> <input type =" button "value =" Change text content in the second div "onclick =" up_div_text () "/> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
The code example demonstrated above is a little tedious. It is not the best way to use Dom, but it is enough to let you know how Dom works.
The following shows how Dom can quickly access a tag. this allows you to quickly find a tag you want from thousands of html tags. for example, you can add an ID attribute for your html Tag. there is a getElementById method in the Dom. this method can quickly find the tag Based on the ID attribute value of the html Tag. then, change or perform other operations.
The following code adds only one id attribute value for the table and the first div. Use getElementByid to quickly add content to the sub-div of the able and the first div.
<Html> <pead> <title> This is the title of the webpage </title> <link/> <meta/> <body> <table id = "a" border = "1"> <table> text content <input type = "button" value = "change table" onclick = "up_table () "/> <input type =" button "value =" write text to the subdiv of the first div "onclick =" up_div () "/> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
The preceding two examples use the following methods of Dom:
Document: Reference to the current entire Html page
DocumentElement: Get the root element in the html and xml files. The html Tag is always returned in the Html file. The top-level element is always returned in the xml file.
GetElementsByTagName: obtains all the same tag elements in the webpage based on the specified tag name. for example, table, or div. all table elements or div elements in the webpage are found. returns references to these elements in an array-like manner.
GetElementById: searches for tag elements based on the specified tag id value and returns a reference to the tag.
ChildNodes: obtains all child tag elements under a tag, that is, the child element. It returns references to all child elements in an array-like manner.
InsertRow: Add a row to the table
InsertCell: adds a column to a table row.
This tutorial only describes one part of the 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
