Dom 소개 튜토리얼 다이어그램 권장_DOM

그렇다면 Dom은 HTML 파일을 어떻게 읽고 관리합니까? 먼저 HTML의 소스코드 구조를 이해해야 합니다. 그림을 보세요

Html을 공부하거나 작성해 본 적이 있다면 위 그림을 명확하게 이해할 수 있을 것입니다. 제가 설명하고 싶은 것은 HTML의 소스 코드 구조가 계층적이며, 태그와 태그 사이에도 부모-자식 또는 인접 관계가 있다는 것입니다. 위 그림을 보면 HTML 태그가 최상위 수준이라는 것을 쉽게 알 수 있습니다. 가장 높은 것. html 파일의 루트로 이해될 수도 있습니다. 그 뒤에 Head 및 Body 태그가 옵니다. 이 두 레이블은 인접해 있습니다. 형제관계로도 이해될 수 있다. 그러나 이들은 모두 html 하위 태그 또는 하위 요소에 속합니다. 그런 다음 Body 태그에는 Table, Div, Div가 포함됩니다. 이 세 가지 태그는 Body의 하위 태그 또는 하위 요소로 이해될 수 있습니다. 몸은 아버지이고 그들은 아들입니다. Head에 포함된 태그에도 동일하게 적용됩니다. 또한 첫 번째 div에는 다른 div가 포함되어 있습니다. 두 번째 div에는 일부 텍스트 콘텐츠가 포함되어 있습니다. 그들의 관계는 아버지와 아들의 관계이기도 하다. Dom은 HTML 소스 코드의 이러한 관계 구조를 활용합니다. 그리고 HTML 소스 코드에서 영리하게 자유롭게 걸어보세요. 무술 고수처럼요. 그의 "Lingbo Weibu"를 마음껏 사용하십시오. 아래 코드를 보세요. 코드 구조는 위 그림과 일치합니다. 차이점은 일부 DOM 명령 작업을 수행하기 위한 버튼이 몇 개 더 있다는 것입니다. 실행하고 나면 신비롭고 놀라운 돔의 세계로 들어가게 됩니다! ! !

<title>페이지 제목입니다</title> <link> <meta> <table border="1"><table> <div><div></div></div> <div>텍스트 콘텐츠</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 참고: </a>외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]<br> <br> 위에서 설명한 코드 예제. 조금 복잡합니다. Dom을 사용하는 가장 좋은 방법은 아닙니다. 하지만 Dom이 어떻게 작동하는지 이해하는 것만으로도 충분합니다. <br>다음은 Dom이 태그에 빠르게 액세스하는 방법을 보여줍니다. 수천 개의 HTML 태그 중에서 원하는 태그를 빠르게 찾을 수 있습니다. 예를 들어 html 태그에 ID 속성을 추가할 수 있습니다. Dom에는 getElementById 메소드가 있습니다. 이 방법은 html 태그의 ID 속성 값을 기반으로 이 태그를 빠르게 찾을 수 있습니다. 그런 다음 변경하거나 다른 작업을 수행합니다. <br>다음 코드에서는 테이블과 첫 번째 div에 id 속성 값만 추가합니다. getElementByid를 사용하여 첫 번째 div의able 및 하위 div에 콘텐츠를 빠르게 추가하세요 <div class="htmlarea"><textarea id="runcode96065"> <title> </title>페이지 제목입니다<link> <meta> <table id="a" border="1"> <table> <div id="b"> <div></div> </div> <div> </div>텍스트 콘텐츠<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 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. <br>]<br> <br>In 위의 두 가지 예 Dom의 다음 메소드가 각각 사용됩니다. <br>document: 현재 전체 Html 웹 페이지에 대한 참조 <br>documentElement: html 및 xml 파일에서 루트 요소를 가져옵니다. Html 태그는 항상 html 파일로 반환됩니다. 항상 XML 파일의 최상위 요소를 반환합니다. <br>getElementsByTagName: 지정된 태그 이름을 기반으로 웹 페이지에서 동일한 태그 요소를 모두 가져옵니다. 예: 테이블 또는 div. 웹 페이지의 모든 테이블 요소 또는 모든 div 요소를 찾습니다. 배열과 같은 방식으로 이러한 요소에 대한 참조를 반환합니다. <br>getElementById: 지정된 태그 ID 값을 기반으로 합니다. 레이블 요소를 찾으려면. 그리고 <br>childNodes 태그에 대한 참조를 반환합니다. 특정 태그 아래의 모든 하위 태그 요소를 가져옵니다. 이를 하위 요소라고 부릅니다. 그리고 배열과 같은 방식으로 모든 하위 요소에 대한 참조를 반환합니다. <br>insertRow: 테이블에 행을 추가합니다. <br>insertCell: 테이블의 행에 열을 추가합니다. <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> 이 소개 튜토리얼에서는 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>작성자: 강동 출처: Www.Web666.Net</table> </table>