Dom introductory tutorial diagram recommended_DOM

So how does Dom read and manage Html files? First of all, you must understand the source code structure of html. Look at the picture

If you have ever studied or written Html, then you will understand the above picture clearly. What I want to explain is that the source code structure of Html is hierarchical, and there is also a parent-child or adjacent relationship between tags and tags. It is not difficult to see from the above picture that the HTML tag is the top level. The top one. It can also be understood as the root of the html file. Followed by the Head and Body tags. These two labels are adjacent. It can also be understood as a brotherly relationship. But they all belong to html sub-tags or sub-elements. Then the Body tag contains Table, Div, Div. You can understand these three tags as sub-tags or sub-elements of Body. The Body is the father and they are the son. The same applies to the tags contained in Head. In addition, the first div contains another div. The second div contains some text content. Their relationship is also that of father and son. Dom takes advantage of this relationship structure of Html source code. And cleverly walk freely in your html source code. Like a martial arts master. Use his "Lingbo Weibu" to your heart's content. Look at the code below. The code structure is consistent with the picture above. The difference is that there are a few more buttons to perform some DOM command operations. After running it, you will enter the mysterious and wonderful world of Dom! ! !

<title>This is the title of the page</title> <link> <meta> <table border="1"><table> <div><div></div></div> <div>Text content</div> <input type="button" value="弹出html标签" onclick="alert_HTML()"> <input type="button" value="弹出body标签" onclick="alert_Body()"> <input type="button" value="弹出head标签" onclick="alert_Head()"> <input type="button" value="修改网页标题" onclick="up_Title()"> <input type="button" value="更改表格" onclick="up_Table()"> <input type="button" value="获取第一个div和他的子元素" onclick="get_Div()"> <input type="button" value="更改第二个div中的文本内容" onclick="up_div_text()"> <br><input onclick="runEx('runcode4351')" type="button" value="运行代码"><input onclick="doCopy('runcode4351')" type="button" value="复制代码"> <input onclick="doSave(runcode4351)" type="button" value="保存代码"> <a href="http://www.jb51.net/article/23421.htm" title="查看具体详情" target="_blank">[Ctrl A Select All Note: </a>If you need to introduce external Js, you need to refresh to execute ]<br> <br>The code example demonstrated above. A little complicated. Not the best way to use Dom. But it's enough for you to understand how Dom works. <br>The following will demonstrate how Dom can quickly access a tag. It allows you to quickly find the tag you want among thousands of html tags. For example, you can add an ID attribute to your html tag. There is a getElementById method in Dom. This method can quickly find this tag based on the ID attribute value of the html tag. Then make changes or other operations to it. <br>In the following code, I only add an id attribute value to the table and the first div. Use getElementByid to quickly add content to the able and the child divs of the first div <div class="htmlarea"><textarea id="runcode96065"> <title> </title>This is the title of the page<link> <meta> <table id="a" border="1"> <table> <div id="b"> <div></div> </div> <div> </div>Text content<input type="button" value="更改table" onclick="up_table()"> <input type="button" value="为第一个div的子div写入文本" onclick="up_div()"> <br> <input onclick="runEx('runcode96065')" type="button" value="运行代码"><input onclick="doCopy('runcode96065')" type="button" value="复制代码"><input onclick="doSave(runcode96065)" type="button" value="保存代码"> <a href="http://www.jb51.net/article/23421.htm" title="查看具体详情" target="_blank"> </a>[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute <br>]<br> <br>In the above two examples The following methods of Dom are used respectively: <br>document: a reference to the current entire Html web page <br>documentElement: get the root element in the html and xml files. Html tags are always returned in html files. Always return the top-level element in the xml file <br>getElementsByTagName: Get all the same tag elements in the web page based on the specified tag name. Such as: table, or div. It will find all table elements or all div elements in the web page. Returns references to these elements in an array-like manner. <br>getElementById: Based on the specified tag id value. to find the label element. And returns a reference to the tag <br>childNodes: Gets all the child tag elements under a certain tag, which is what I call child elements. And returns references to all child elements in an array-like manner <br>insertRow: Adds a row to the table <br>insertCell: Adds a column to a row of the table <script type="text/javascript"> function alert_HTML(){ //弹出html标签函数 var html = document.documentElement; alert(html.tagName); } function alert_Body(){ //弹出body标签函数 var body = document.body; alert(body.tagName); } function alert_Head(){//弹出head标签函数， var html = document.documentElement; //head是html标签中的第一个子元素 //childNodes可以获取某一标签内的所有子元素 var head = html.childNodes[0].tagName; alert(head); } function up_Title(){ //注意title标签内的＂这是网页的标题＂将被改变． document.title = "Web圈提提供的Dom图解入门教程"; } function up_Table(){//为表格添加行，添加列并写入文本内容 var Table = document.getElementsByTagName("table")[0];//获取网页内第一个表格 var Tr = Table.insertRow(0);//为表格添加一行 var Td = Tr.insertCell(0);//为新建的行，添加一列 Td.innerHTML = "我是表格中的文本"; //利用innerHTML属性向td写入文本 } function get_Div(){//获取第一个div和他的孩子 var div = document.getElementsByTagName("div")[0]; alert("我是第一个"+div.tagName); var child_div = div.childNodes[0];//虽然是子div,但是按解析顺序他在该页内是第二个出现的div, alert("我是第一个div的子元素．我也是"+child_div.tagName); } function up_div_text(){ var div = document.getElementsByTagName("div")[2];//其实如果按解析顺序该div在本页应该是第3个， div.innerHTML = "欢迎阅读web圈提供的Dom图解入门教程．www.jb51.net 作者：康董"; } </script> This introductory tutorial only explains part of the Dom knowledge, please learn more about Dom<script type="text/javascript"> function up_table(){//更改table函数 var Table = document.getElementById("a");//根据id获取标签元素 var Tr = Table.insertRow(0); var Td = Tr.insertCell(0); Td.innerHTML = "欢迎光临Web圈，网址：www.web666.net"; } function up_div(){//为第一个div的子div添加文本内容 var div = document.getElementById("b"); div.childNodes[0].innerHTML="我是子div，我被写入文本了"; } </script>Author: Kang Dong Source: Www.Web666.Net</table> </table>