DOM向けJavaScriptアプリケーション解析(2)_DOM

実際、ネイティブ JS にもこれらの属性があります。 JQ とほぼ同じですが、少し少ないです。ただし、JQ よりも使用するのが少し面倒です。主な原因は FF ブラウザです。FF では改行が DOM 要素として扱われるためです。たとえば、

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

ネイティブ JS を使用して、要素の下の dom 子要素として ID を取得します。最初の章で説明したメソッドは var a = document.getElementById("dom").getElementsByTagName("div"); です。これは問題ありません。はい、alert(a.length) プロンプトは 2 になりますが、ここでは別のメソッドを使用して、前の章で説明した var b = document.getElementById("dom").childNodes を取得します。 )IE ブラウザでは問題なく 2 のままですが、FF ブラウザでは 4 であることが表示されます。これは、FF が改行を要素として扱うためです。
JS を使用するには、これらの属性を処理する必要があります。アイデアの処理は、これらの要素をたどるだけで簡単に行えます。タイプがスペースとテキストである要素をすべて削除します。処理関数はこんな感じです

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

function del_space( elem){
var elem_child = elem.childNodes;
for(var i=0;iif(elem_child.nodeName == "#text" && !/S /.test( elem_child.nodeValue))
{elem.removeChild(elem_child)}
}}

この関数について説明します
var elem_child = elem.childNodes; 🎜>Pass 受信した elem 要素の子要素が elem_child にスローされます。

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

for(var i=0;iif(elem_child.nodeName == "#text" && !/S/.test(elem_child.nodeValue) )
{elem.removeChild (elem_child)}
}


これらの子要素を反復処理します。これらの要素にテキストのノード タイプがあり、このテキスト タイプ ノードのノード値が空である場合。削除してください
(nodeName は、このノードのノード タイプを取得するために使用される JS の属性です。/S/ は、JS の非 null 文字の正規表現です。先頭に感嘆符を追加します)のは null 文字であることを意味します。Test は、その内部のものと外部のものを比較するメソッドです。removeChild は、このノード内の値を取得するメソッドでもあります。これらの属性を呼び出す前に、この関数を呼び出してスペースをクリアするだけで済みます。たとえば、



コードをコピーします

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

;/div>

var a = ドキュメント。 getElementById("dom");
del_space(a); スペースをクリーンアップする関数を呼び出します。
var b = a.childNodes; a の親ノードを取得します。
var d = a.nextSbiling; a
var e = a.previousSbiling の前の兄弟ノードを取得します。 ; a
の最初の子ノードを取得します。 var g = a.lastChild a

の最後の子ノードを取得します。


(さらに、 var b = a.childNodes; も配列を取得します。たとえば、最初のノードを使用する場合は、childNodes[1] になります。 on)

DOM の取得はここで終わりです。次の章では、DOM 要素の操作方法を説明します。