Dom入門チュートリアル図 推奨_DOM

では、Dom はどのようにして HTML ファイルを読み取り、管理するのでしょうか?まずはhtmlのソースコード構造を理解する必要があります。画像を見てください

HTML を勉強したり書いたりしたことがあるなら、上の図をはっきりと理解できるでしょう。説明したいのは、HTMLのソースコード構造は階層構造になっており、タグとタグの間にも親子関係や隣接関係があるということです。上の図から、HTML タグが最上位であることがわかります。一番上です。 HTML ファイルのルートとしても理解できます。続いて Head タグと Body タグが続きます。これら 2 つのラベルは隣接しています。兄弟関係としても理解できます。ただし、それらはすべて HTML のサブタグまたはサブ要素に属します。次に、Body タグには Table、Div、Div が含まれます。これら 3 つのタグは、Body のサブタグまたはサブ要素として理解できます。肉体は父親であり、彼らは息子です。 Headに含まれるタグも同様です。さらに、最初の div には別の div が含まれています。 2 番目の div にはテキスト コンテンツが含まれています。彼らの関係は父と息子の関係でもあります。 Dom は、HTML ソース コードのこの関係構造を利用します。そして、HTML ソース コード内を賢く自由に歩き回れます。武道の達人みたいに。彼の「霊宝威武」を思う存分使いこなしてください。以下のコードを見てください。コード構造は上の図と一致しています。違いは、一部の DOM コマンド操作を実行するためのボタンがさらにいくつかあることです。実行すると、そこは神秘的で素晴らしい 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 すべて選択 注: </a>外部 Js を導入する必要がある場合は、更新して実行する必要があります ]<br> <br>上記のコード例。少し複雑です。 Dom を使用する最良の方法ではありません。ただし、Dom がどのように機能するかを理解するには十分です。 <br>以下は、Dom がタグに素早くアクセスする方法を示します。数千の HTML タグの中から必要なタグをすばやく見つけることができます。たとえば、HTML タグに ID 属性を追加できます。 Dom には getElementById メソッドがあります。このメソッドは、html タグの ID 属性値に基づいてこのタグを迅速に見つけることができます。次に、それに変更やその他の操作を加えます。 <br>次のコードでは、テーブルと最初の div に id 属性値のみを追加します。 getElementByid を使用して、最初の div <div class="htmlarea"><textarea id="runcode96065"> の有効 div と子 div にコンテンツをすばやく追加します。 <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 すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります <br>]<br> <br>上記の 2 つの例では、次の Dom メソッドがそれぞれ使用されます。 <br>document: 現在の Html Web ページ全体への参照 <br>documentElement: html ファイルと xml ファイルのルート要素を取得します。 HTML タグは常に HTML ファイル内で返されます。常に XML ファイルの最上位要素を返します。<br>getElementsByTagName: 指定されたタグ名に基づいて、Web ページ内のすべての同じタグ要素を取得します。例: table、div。 Web ページ内のすべての table 要素またはすべての 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 の一部のみを説明します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>著者: Kang Dong 出典: Www.Web666.Net</table> </table>