JavaScript学習メモ(18) ページ内の要素コードを取得する_基礎知識

1. 要素の

getElementById() メソッドを取得します。要素の ID を通じて要素を取得します。要素の ID を取得するパラメーターを受け入れます。ID が存在しない場合は、null を返します。
Beフォーム要素の名前と他の要素の ID が同じにならないように注意してください。IE8 より前の IE ブラウザでは、このメソッドを使用して要素の name 属性を通じて要素を取得します。
次の要素を例に挙げます。 >

ID が "myDiv" の div コンテンツ

var document.getElementById("myDiv"); //"myDiv" は大文字と小文字が区別されます。要素のタグ名を取得し、要素のタグ名を取得する 1 つのパラメータを受け入れ、0 個以上を含む NodeList を返します。

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

var Images = document.getElementsByTagName("img "); // ページ内のすべての 要素を取得します

alert(images.length) ; // 画像の数
alert(images[0].src); //最初の画像要素の src
alert(images.item(0).src); //上記と同じ


getElementsByName() メソッドは、要素の name 属性を通じて要素を取得します。要素の name 属性を取得するために 1 つのパラメータを受け入れます。ラジオ ボタンを取得するためによく使用されます。

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

;label for="colorRed">





var radios = document.getElementsByName("color "); //すべてのラジオ ボタンを取得しますname="color"



2. 要素の子ノードまたは要素の子ノードとその子孫ノードを取得します



コードをコピーします コードは次のとおりです:
プロジェクト 1
li>プロジェクト 2

プロジェクト 3



注: IE は、
3 つの子ノード (それぞれ 3 つの要素)


• プロジェクト 1
• プロジェクト 2
• プロジェクト 3
ul>
どのブラウザでも子が 3 つあると考えられますノード

要素の子ノードを取得します:




コードをコピー
コードは次のとおりです: var ul = document.getElementById("myList"); for (var i=0,len = ul.childNodes.length; i
if ( ul) .childNodes.length[i].nodeType == 1) { //nodeType == 1 は、ノードがテキスト ノードではなく要素ノードであることを示します
//特定の操作を実行します
}
}


要素の子ノードとその子孫ノードを取得します:




コードをコピー
コードは次のとおりです。 var ul = document.getElementById("myList"); var items = ul.getElementsByTagName("li"); // li の li も取得されます。 >
3 ノードの属性を通じて他のノードを検索します。
nextSibling 属性は、現在のノードの次の兄弟ノードを指します。
previousSibling 属性は、現在のノードの前の兄弟ノードを指します。
firstChild 属性は、次のノードを指します。最初の子ノード、lastChild 最後の子ノードを指します
childNodes はすべての子ノード (実際には NodeList オブジェクト) を保存します。これには、最初の子ノードにアクセスするために someNode.childNodes[0] などの角かっこメソッドを通じてアクセスできます
parentNode 属性は親ノードを指します

ノードの関係は次のとおりです:


NodeList は配列オブジェクトです。配列に変換できます。関数は次のとおりです

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

function converToArray (nodes) {
var arrary = null;
try {
array = Array.prototype.slice.call (nodes,0);
}
catch (ex) {
array = new Array();
for (var i=0,len=nodes.length ; iarray.push (nodes[i]);
}
}
戻り配列;

var div = document.getElementById("side");
alert(converToArray( div.childNodes));