Documentオブジェクトの共通メソッド_基礎知識

1. getElementById(id)
要素の ID を介して要素にアクセスします。これは、DOM 内のページ要素にアクセスするための基本的な方法です。たとえば、次のようになります。次の例では、DOM レイヤーをたどることなく、DIV の ID を使用してすぐにアクセスできます。

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

h

テスト用です。

var div=document; .getElementById('divid');
alert(div.nodeName);


この関数を使用する場合は、要素の ID が一意でない場合は、最初の A 修飾要素。
IE6 では、input、checkbox、radio などの要素名が指定された ID と一致する場合、それらにもアクセスされます
。たとえば、次の例では、取得された要素は input です。 🎜>

コードをコピー


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

<script> =document.getElementById('divid' ); </script>

2. getElementsByName(name)

name という名前の要素の配列を返します。IE6 では、要素 ID がこの名前と一致する場合、この要素も含まれ、getElementsByName() は次のような要素オブジェクトにのみ使用されます。入力、ラジオ、チェックボックスなど。
以下の例のように、georges 配列の長さは 0 である必要があります。




コードをコピー

コードは次のとおりです。
div name= "george">f

f

3 . getElementsByTagName(tagname) getElementByTagName は DOCUMENT または要素に使用できます。 getElementsByTagName は、指定されたタグ名を持つ子要素のリスト (配列) を返します。この配列を反復処理して、個々の子要素を取得できます。非常に大規模な DOM 構造を扱う場合、このアプローチにより構造全体を簡単に絞り込むことができます。

コードをコピー


コードは次のとおりです。


head>

<script> <STRONG>function start() { // タグ名が body であるすべての要素を取得します (もちろん、ページごとに 1 つだけ) 🎜>myDocumentElements =document.getElementsByTagName("body"); <BR>myBody=myDocumentElements.item(0); <BR>// ボディのサブ要素のすべての P 要素を取得します <div class="codetitle">myBodyElements=myBody.getElementsByTagName("p "); <span>//2 番目の P 要素を取得します<a style="CURSOR: pointer" data="41932" class="copybut" id="copybut41932" onclick="doCopy('code41932')">myP=myBodyElements.item(1); <U>//この要素のテキストを表示しますalert(myP.firstChild.nodeValue); } </script>

hi

hello




DOM 要素の共通メソッド

1. )
現在のノード オブジェクトにノードを追加します。ページにコンテンツを動的に追加するためによく使用されます。
たとえば、次のように div にテキスト ノードを追加します。




コードをコピーします


コードは次のとおりです。 🎜>

document.getElementById("test").appendChild(newdiv)
> ;
上記の例では、newdiv.innerHTML="A new div" を使用して DIV にテキストを追加することもできます。
ただし、innerHTML は DOM に属しません。
2. 🎜>現在のノードを削除し、 の子ノードは削除されたノードを返します。削除したノードはドキュメント ツリー内の他の場所に挿入できます

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

子供

現在のノードのコピーされたノードをコピーして返します。コピーされたノードは孤立したノードであり、ドキュメント ツリー内にありません。 ID 属性を含む元のノードの属性値をコピーするため、この新しいノードをドキュメントに追加する前に、ID 属性を一意になるように必ず変更してください。もちろん、ID の一意性が重要でない場合は、処理する必要はありません。
このメソッドは Boolean パラメーターをサポートします。 deepBoolean が true に設定されている場合、ノード内のテキストを含む、現在のノードのすべての子ノードがコピーされます。

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

p=document.getElementById("mypara")
p.parentNode.appendChild(pclone); 🎜>4 , replaceChild(newChild, oldChild)
現在のノードの子ノードを別のノードで置き換えます
例:

コードをコピー

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

span

> ; var newel=document.createElement("p"); text=document.createTextNode( "ppppp"); newel.appendChild("adiv").replaceChild(newel, oldel); >

5. insertBefore(newElement, targetElement)
targetElement が null に設定されている場合、新しいノードは最後の子ノードとして挿入されます。 targetElement の前に最も近い子ノードとして挿入する必要があります。




コードをコピー


コードは次のとおりです。

スパン id= "lovespan">欲しいものは何でも欲しい!

は、スクリプトを通じて onClick 関数をトリガーするために使用できます。 >

コードをコピー


コードは次のとおりです。


<script> <BR>function wow() { <BR>alert( 「マウスをクリックしていないようです。」 div> <BR><script type="text/javascript"> </script>

var div = document.getElementById("test");
🎜>

DOM 要素の属性: (以下は一般的に使用されます。IE5.0 以降は mozllia でサポートされています)

1. childeNodes はすべての子ノード オブジェクトを返します。たとえば、 コードをコピー

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

僧侶が水を持っています。

2 人の僧侶が水を運ぶ。

3 人の僧侶には飲む水がありませんでした。

var msg=””
var mylist=document.getElementById("mylist")
for (i=0; ivar tr=mylist.childNodes[i];
for(j=0;jvar td=tr.childNodes[j];
msg =td.innerText;
}
alert(msg); 🎜>

2. innerHTML
これは事実上の標準であり、w3c DOM には属しませんが、DOM をサポートするほとんどすべてのブラウザーがこの属性をサポートします。この属性を使用すると、要素の HTML を簡単に変更できます。

コードをコピー

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

新規人間、何？ ！

window.onload=function(){

document.getElementsByTagName("p")[0] .innerHTML="新しい新しい人間、何?!
}



3.要素のスタイル オブジェクトへの参照。これを通じて、個々のスタイルを取得および変更できます。
たとえば、次のスクリプトは要素の背景色を変更できます
document.getElementById("test").style.backgroundColor=" yellow"

4. firstChild は最初の子ノードを返します
5. lastChild は最後の子ノードを返します
6.parentNode は親ノードのオブジェクトを返します。
7. nextSibling は、次の兄弟ノードのオブジェクトを返します。
8.PreviousSibling は、前の兄弟ノードのオブジェクトを返します。
9. nodeName は、英語の大文字を使用してノードの HTML タグ名を返します。 P, FONT
例:




コードをコピー

コードは次のとおりです: < ;div id='test'> ;ddd

<script> if (document.getElementById("test").nodeName=="DIV") </script>

alert("これはa DIV");

最初の例:
DOM1.0 JavaScript を使用して HTML テーブルを動的に作成します。

コードをコピーします

コードは次のとおりです。 title>サンプルコード <script> </script>function start() {

//body

var mybody=document.getElementsByTagName("body").item の参照を取得します(0);
// 要素を作成します
mytable = document.createElement("TABLE");
// ; element
mytablebody = document.createElement("TBODY");
//行と列を作成します
for(j=0;j// を作成します;> ;Element
mycurrent_row=document.createElement("TR");
for(i=0;i// element
mycurrent_cell=document.createElement("TD");
//テキスト要素を作成します
currenttext=document.createTextNode("セルは行 " j "、列 " i); 🎜>//Put 新しいテキスト要素がセル TD に追加されます
mycurrent_cell.appendChild(currenttext);
// セル TD を行 TR に追加します
// セル TD を行 TR に追加します
mycurrent_row.appendChild(mycurrent_cell);
}
// TBODY に行 TR を追加
mytablebody.appendChild(mycurrent_row)
// TABLE に追加mytable.appendChild(mytablebody);
// BODY に TABLE を追加します
mybody.appendChild(mytable)
// mytable のボーダー属性を 2 に設定します
mytable.setAttribute("border", " 2");


>


まず、table 要素を作成します。
次に、TABLE 要素の子要素となる TBODY 要素を作成します。
しかし、現在、それらの間には接続がありません。
次に、ループを使用して、TBODY 要素の子となる TR 要素を作成します。
TR ごとに、ループを使用して TR の子である TD 要素を作成します。
各 TD に対して、テキスト ノード要素を作成します。
これで、TABLE、TBODY、TR、TD およびテキスト要素が作成されましたが、それらの間には階層的な
関係が確立されていません。次に、各オブジェクトを逆の順序でその親ノードに追加します。
mycurrent_cell.appendChild(currenttext);
mycurrent_row.appendChild(mycurrent_cell);
mytable.appendChild(mytablebody); :
BODY

TABLE

TBODY

TR--------TR---- --- -----------TR

TD-----TD-----TD TD-----TD-----TD TD-- --- TD-----TD