DOM の基本チュートリアル: DOM の使用_基礎知識

DOM (Text Object Model) のフレームワークとノードを理解した後、最も重要なことは、これらのノードを使用して HTML Web ページを処理することです

DOM ノードの場合、使用できる一連のプロパティとメソッドがあります。一般的に使用されるものには次の表があります。

完璧: http://www.w3school.com.cn/xmldom/dom_element.asp

1. アクセスノード

BOM はノードにアクセスするためのいくつかの境界メソッドを提供します。一般的に使用されるメソッドは getElementsByTagName() と getElementById() です

コードをコピーします コードは次のとおりです:

関数 searchDOM(){
var oLi = document.getElementsByTagName("li");
var j =oLi.length;
var j2 =oLi[5].tagName;
var j3 =oLi[0].childNodes[0].nodeValue;
document.write(j "
" j2 "
" j3 "
");
}

クライアント言語

• HTML


• JavaScript


• CSS

サーバー側の言語

• ASP.NET


• JSP


• PHP

document.getElementById()

コードをコピーします コードは次のとおりです:

window.onload = function(){
関数 findid(){
var j4 =oli2.tagName;
document.write(j4);
}
var oli2 = document.getElementById("inn");
oli2.onclick = findid;
}

PHP

コードをコピー コードは次のとおりです:

x=document.getElementsByTagName('div')[0];
document.write("div CSS クラス: " x.className);
document.write("
");
document.write("別の方法: ");
document.write(document.getElementById('myid').className);

//id は className
を取得します

2. ノードの種類を検出

ノードのタイプは、nodeType を通じて検出できます。このパラメーターは 12 個の整数値を返します。

document.nodeType などの式形式

本当に役立つのは、DOM (1) モデルで説明されている 3 種類のモデル ノードです

要素ノード、テキスト ノード、属性ノード

1. 要素ノードの戻り値は 1

2. 属性ノードの戻り値は 2

3. テキスト ノード テキスト ノードは値 3

を返します。

コードをコピー コードは次のとおりです:

window.onload = function(){
関数 findid(){
var j5 =oli2.nodeType;
document.write("nodeType:" j5 "
");
}
var oli2 = document.getElementById("inn");
oli2.onclick = findid;
}

CSS

戻り値: ノードタイプ: 1

これは、特定のノードを個別に処理できることを意味し、ノードを検索するときに非常に実用的です。それについては後で話します。

3. 父、息子、兄弟の関係を使用してノードを見つけます

最初のセクションのノードにアクセスするときは、ノードの childNodes 属性を使用して、要素ノードに含まれるテキスト ノードにアクセスします。

このセクションでは、ノードの親子関係を使用してノードを検索します

*このノードに含まれるすべてのノードを取得するには、hasChildNodes 属性と childNodes 属性を使用します

コードをコピーします コードは次のとおりです:

window.onload = function myDOMInspector(){
var oUl = document.getElementById("myList"); var oUl = document.getElementById("myList"); //

タグを取得します。 var DOMString = "";
                                                                                                                                                                          var oCh = oUl.childNodes;
For (var I = 0; i & lt; och.length; i) //
を参照 DOMString = oCh[i].nodeName "
";
}
document.write(DOMString);
}






• 酢豚カルビ


• 豚の丸蒸し春雨添え


• キムチフィッシュ


• 栗のローストチキン


• 麻婆豆腐