ホームページ > 記事 > ウェブフロントエンド > node_javascript スキルの兄弟、親、子要素を取得するための JS メソッド
node_javascript スキルの兄弟、親、子要素を取得するための JS メソッド
- WBOYオリジナル
- 2016-05-16 17:04:511561ブラウズ
まず、JQUERY メソッドよりもはるかに面倒な JS 取得メソッドについて説明します。JQUERY メソッドは後で比較するために使用します。
JS メソッドは JQUERY よりもはるかに面倒です。主な理由は、FF ブラウザが改行を DOM 要素として扱うためです。
ネイティブ JS は、ID テストを持つ要素の下にある子要素を取得します。利用可能:
var a = docuemnt.getElementById("test").getElementsByTagName("div"); これは問題ありません
現時点では a.length=2;
しかし、別の方法を使用すると
var b =document.getElementById("test").childNodes;
現時点では、IE ブラウザでは b.length は問題なく、2 のままですが、FF ブラウザでは改行も要素として扱うため、4 になります。
ここでは、これらの要素を走査し、スペースとテキストであるすべての要素を削除する必要があります。
function del_ff(elem){
var elem_child = elem.childNodes;
for(var i=0; i
{elem.removeChild(elem_child)
}
}
}
上記の関数は、ノードがある場合に子要素を走査します。テキストである要素を入力し、テキスト タイプ ノードのノード値が空です。彼を削除してください。
nodeNames はノードのノード タイプを取得できます。/s/ は JS の空でない文字の正規表現です。前に追加してください！ 、空の文字
を意味します。test() メソッドは、文字列が特定のパターンに一致するかどうかを確認するために使用されます。構文は次のとおりです: RegExpObject.test(string)
文字列 string に RegExpObject に一致するテキストが含まれている場合は true を返し、それ以外の場合は false を返します。
nodeValue は、このノードの値を取得することを意味します。
removeChild は、要素の子要素を削除します。
の後、息子、父、兄弟などのプロパティを呼び出す前に、上記の関数を呼び出してスペースをクリアします
<script><br>関数 dom() {<br>var s= document.getElementById("test");<br>del_ff(s); //スペースをクリーンアップします <br>var chils= s.childNodes; // s<br>var par=s.parentNode; // s<br>var ns=s.nextSbiling; の親ノードを取得します。 // s の次の兄弟ノードを取得します<br>var ps=s.previousSbiling; // s の前の兄弟ノードを取得します<br>var fc=s.firstChild; // s<br>var lc の最初の子ノードを取得します。 =s .lastChile // s の最後の子ノードを取得します。 <p>}<br></script>
以下では、JQUERY の親ノード、子ノード、兄弟ノードを検索する方法を紹介します
jQuery.parent(expr) 親ノードを見つけるには、$("span").parent() や $("span").parent(".class") などのフィルタリング用の expr を渡すことができます。
jQuery.parents(expr)。jQuery.parents(expr) に似ていますが、親要素に限定されず、すべての祖先要素を検索します。
jQuery.children(expr)。すべての子ノードを返します。このメソッドは直接の子ノードのみを返し、すべての子孫ノードを返しません。
jQuery.contents() は、ノードとテキストを含む以下のすべてのコンテンツを返します。このメソッドとchildren()の違いは、空白のテキストを含めることも
として扱われることです。jQuery オブジェクトが返され、children() はノードのみを返します
jQuery.prev()、すべての兄弟ノードではなく、前の兄弟ノードを返します
jQuery.prevAll()、以前のすべての兄弟ノードを返します
jQuery.next()、すべての兄弟ノードではなく、次の兄弟ノードを返します
jQuery.nextAll()、後続のすべての兄弟ノードを返します
jQuery.siblings()、前後関係なく兄弟ノードを返します
jQuery.find(expr) は jQuery.filter(expr) とはまったく異なります。 jQuery.filter() は、jQuery オブジェクトの初期コレクションの一部をフィルターで除外します。jQuery.find() の戻り結果には、$("p")、find("span など) の初期コレクションの内容は含まれません。 ") 、
要素から開始して を見つけます。これは $("p span")
と同等です。