So how does DOM read and manage HTML files? First you have to understand the HTML source structure. Look at the picture
If you've ever learned or written HTML, you'll have a clear view of the diagram above. What I want to explain is that the source structure of HTML is layered, and there is a parent-child or neighboring relationship between the label and the Cup signature. It's not hard to see that the HTML tag is the top of the chart. At the top. Can also be understood as the root of an HTML file. followed by head and body tags. The two labels are adjacent. It can also be understood as a brotherly relationship. But they all belong to the child tags of HTML or are called child elements. The body tag then contains the Table,div,div. These three tags you can understand as the body of the child tag or child elements. The body is the father and they are the son. The head contains the same label. Another div is included in the first Div. The second div contains some textual content. Their relationship is also a parent-child relationship. Dom is the kind of relational structure that leverages HTML source code. And clever in your HTML source code to walk freely. Like a martial arts master general. To unleash his "limbo." Look at the code below. The code structure is consistent with the above image. The difference is a few more buttons to perform some DOM instruction operations. After running, you walk into the mysterious and wonderful world of DOM!!!
<ptml> <pead> <title> This is the title of the page </title> <link/> <meta/> <body> <table Border= "1" ><table> <div><div></div></div> <div> text content </div> <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 the page title "onclick=" Up_title () "/> <input type=" button "value=" Change Table "onclick=" up_table () "/> <input type=" Button "Value=" gets the first div and his child elements "onclick=" Get_div () "/> <input type=" button "value=" Changes the text content in the second Div "onclick=" Up_ Div_text () "/> </body> </ptml> <script type=" Text/javascript "> Function alert_html () {//pop-up HTML tag letter Number of var html = document.documentelement; alert (html.tagname); function Alert_body () {//pop-up body tag functions var body = document.body; alert (body.tagname); function Alert_head () {//Pop-up head tag function, var html = document.documentelement; The head is the first child element in the HTML tag//childnodes can get all the child elements within a label var head = Html.childnodes[0].tagname; Alert (head); The function Up_title () {//Note that "This is the title of the page" within the title tag will be changed. Document.title = "Introductory tutorial on DOM diagrams provided by web circles"; function up_table () {///Add row to table, add column and write text content var table = document.getelementsbytagname ("table") [0];//gets the first table in the page var Tr = T Able.insertrow (0);//Add a row to the table var Td = Tr.insertcell (0);//For the new row, add a column td.innerhtml = "I am the text in the table"; Use the innerHTML property to write to TD text} function Get_div () {//Get first Div and his child var Div = document.getElementsByTagName ("Div") [0]; Alert ("I am the first" +div.tagname); var child_div = div.childnodes[0];//is a child div, but in parse order he is the second occurrence of the div in the page, alert ("I am the child of the first Div.") I am also "+child_div.tagname"; function Up_div_text () {var div = document.getelementsbytagname ("div") [2];//in fact, if the div in the parse order is the 3rd on this page, div.innerhtml = " Welcome to the introductory tutorial on Dom diagrams provided by the Web circle. Www.jb51.net Author: Kang Dong "; } </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
The code instance shown above. A little cumbersome. is not the best way to use DOM. But it's enough to give you an idea of how DOM works.
The following is a demonstration of how the DOM quickly accesses a label. Allows you to quickly find one of the tags you want in thousands of HTML tags. For example, you can add an id attribute to 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 make changes or other actions to it.
The following code I only add an id attribute value for the table and the first Div. Use getElementById to quickly add content to the able and the child div of the first Div
<textarea id="runcode98538"><ptml> <pead> <title> This is the title of the page </title> <link/> <meta/> <body> <ta Ble id= "A" border= "1" ><table> <div id= "B" ><div></div></div> <div> text content </ div> <input type= "button" value= "Change Table" onclick= "up_table ()"/> <input type= "button" value= " Write the text for the child Div of the first div "onclick=" up_div () "/> </body> </ptml> <script type=" Text/javascript "> function Up_table () {//Change table function var table = document.getElementById ("a");//Get tag element var Tr = Table.insertrow (0) based on ID; var Td = Tr.insertcell (0); td.innerhtml = "Welcome to the Web Circle, url: www.web666.net"; The function Up_div () {//) adds text content to the child div of the first div var div = document.getElementById ("B"); Div.childnodes[0].innerhtml= "I am a child div, I was written to the text"; } </script></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
The following methods of Dom are used in the two examples above:
Document: Reference to the current entire HTML page
DocumentElement: Gets the root element in the HTML and XML files. HTML tags are always returned in an HTML file. Always return the topmost element in an XML file
getElementsByTagName: Gets all the same label elements in the Web page based on the specified label name. Such as: table, or Div. You will find all the table elements in the Web page, or all the DIV elements. Returns a reference to these elements in an array-like manner.
getElementById: Based on the specified label ID value. To find the tag element. and returns a reference to the label
ChildNodes: Get all the child tag elements under a label, which is what I call the child element. and returns a reference to all child elements in an array-like manner
InsertRow: Add one row to the table
InsertCell: Adds a column to a row in a table
This introductory tutorial only covers a part of the DOM knowledge, please learn more about DOM
Author: Kang Dong from: Www.Web666.Net
