jsとjquery_javascriptスキルで親要素、子要素、兄弟要素を取得する実装方法

まず、JQUERY メソッドよりもはるかに面倒な JS 取得メソッドについて説明します。後で、比較のために JQUERY メソッドを使用します。

JS メソッドは JQUERY よりもはるかに面倒です。主な理由は、

FF ブラウザが改行を DOM 要素として扱うためです。

ネイティブ JS は、ID テストを持つ要素の下にある子要素を取得します。利用可能:

例:

🎜>

var a = docuemnt.getElementById("dom").getElementsByTagName_r("div"); これは問題ありません

現時点では a.length=3;

しかし、今ではそれを取得する別の方法があります。それは、前の章で述べた var b = document.getElementByIdx_x("dom").childNodes です。この方法であれば、alert(b.length) は問題ありません。 IE ブラウザではまだ 3 ですが、FF ブラウザではプロンプトは 4 です。これは、FF が改行を要素として扱うためです。

JS を使用するには、これらの属性を処理する必要があります。アイデアの処理は、これらの要素をたどるだけで簡単に行えます。タイプがスペースとテキストである要素をすべて削除します。処理関数はこんな感じ

コードをコピー コードは次のとおりです。function del_space(エレム){

var elem_child = elem.childNodes;//パラメータ要素のすべての子要素を取得します
（var i = 0; i＆lt; elem_child.length; i）{// traverse child elements}ノード値は空です。彼を削除してください。

nodeNames はノードのノード タイプを取得できます。/s/ は JS の空でない文字の正規表現です。前に追加してください！ 、空の文字

を意味します。

test() メソッドは、文字列が特定のパターンに一致するかどうかを確認するために使用されます。構文は次のとおりです。 RegExpObject.test(string)

文字列 string に RegExpObject に一致するテキストが含まれている場合は true を返し、それ以外の場合は false を返します。

nodeValue は、このノードの値を取得することを意味します。

removeChild は、要素の子要素を削除します。

ここがポイントです！

コードをコピー

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

<script><span> function dom(){<a style="CURSOR: pointer" data="41466" class="copybut" id="copybut41466" onclick="doCopy('code41466')"> var a = document.getElementByIdx_x_x("dom");<u> del_space(a); スペースを削除する関数を呼び出します </u> var b = a .childNodes; a のすべての子ノードを取得します; </a> var c = a.parentNode; a</span> var の次の兄弟ノードを取得します。 e = a .previousSbiling; の前の兄弟ノードを取得します。 var f = a.firstChild; </p> <div class="codebody" id="code41466"> の最初の子ノードを取得します。 var g = a.lastChild; }<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") に相当する p 要素を探し始めます

——————————————2014 1-9————————————————

上記は、js と jquery を解決して親子要素などを取得するためにインターネットから選択した方法ですが、解決する際にはまだ問題が発生します。

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

js获取节点dom操作

接口	nodeType常量	nodeType值	备注
Element	Node.ELEMENT_NODE	1	元素节点
Text	Node.TEXT_NODE	3	文本节点
Document	Node.DOCUMENT_NODE	9	document
Comment	Node.COMMENT_NODE	8	注释的文本
DocumentFragment	Node.DOCUMENT_FRAGMENT_NODE	11	document片断
Attr	Node.ATTRIBUTE_NODE	2	节点属性

インターフェース

方法	描述
createAttribute()	用指定的名字创建新的Attr节点。
createComment()	用指定的字符串创建新的Comment节点。
createElement()	用指定的标记名创建新的Element节点。
createTextNode()	用指定的文本创建新的TextNode节点。
getElementById()	返回文档中具有指定id属性的Element节点。
getElementsByTagName()	返回文档中具有指定标记名的所有Element节点。

属性	描述
attributes	如果该节点是一个Element，则以NamedNodeMap形式返回该元素的属性。
childNodes	以Node[]的形式存放当前节点的子节点。如果没有子节点，则返回空数组。
firstChild	以Node的形式返回当前节点的第一个子节点。如果没有子节点，则为null。
lastChild	以Node的形式返回当前节点的最后一个子节点。如果没有子节点，则为null。
nextSibling	以Node的形式返回当前节点的兄弟下一个节点。如果没有这样的节点，则返回null。下一个兄弟节点
nodeName	节点的名字，Element节点则代表Element的标记名称。
nodeType	代表节点的类型。
parentNode	以Node的形式返回当前节点的父节点。如果没有父节点，则为null。
previousSibling	以Node的形式返回紧挨当前节点、位于它之前的兄弟节点。如果没有这样的节点，则返回null。上一个兄弟节点

nodeType常量

ノードタイプ值

注

要素

ノード.ELEMENT_NODE

1

元素节点

テキスト

Node.TEXT_NODE

3

文本节点

ドキュメント

ノード.DOCUMENT_NODE

9

ドキュメント

コメント

ノード.COMMENT_NODE

8

注釈の文章

ドキュメントフラグメント

ノード.DOCUMENT_FRAGMENT_NODE

11

文書切断

属性

ノード.ATTRIBUTE_NODE

2

节点プロパティ

方法	説明
createAttribute()	指定された名前を使用して新しい Attr ポイントが作成されます。
createComment()	指定された文字を使用して新しいコメント ポイントを作成します。
createElement()	指定されたマーク名を使用して新しい要素ポイントが作成されます。
createTextNode()	指定されたテキストを使用して新しい TextNode ポイントが作成されます。
getElementById()	は、指定された id プロパティを持つテキストボックス内の要素ポイントを返します。
getElementsByTagName()	は、指定されたマーク名を持つすべての要素ポイントをテキストに返します。

TR>

プロパティ	説明
属性	そのノードが要素の場合、NamedNodeMap の形式でその要素のプロパティが返されます。
子ノード	は、現在のノードの子ノードを Node[] の形式で保存します。子ノードがない場合は、空の数の集合を返します。
firstChild	はノードの形式で現在のノードの最初の子ノードを返します。子ノードがない場合は null になります。
最後の子	はノードの形式で現在のノードの最後の子ノードを返します。子ノードがない場合は null になります。
次の兄弟	は、ノードの形式で現在のノードの兄弟の次のノードを返します。そのようなノードがない場合は、null を返します。下の兄弟のノード
ノード名	ポイントの名前、要素ポイントは要素のマーク名を表します。
ノードタイプ	ポイントの種類を表します。
親ノード	ノードの形式で現在のノードの父ノードが返されます。父ノードがない場合はnullになります。
前の兄弟	は、ノードの形式で、現在のノードの直前にある兄弟ノードを返します。そのようなノードがない場合は、null を返します。 上の兄弟ノード

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。