Dom_DOMの子要素と兄弟要素を操作するコード

まず、サブ要素とは何かを正しく理解する必要があります。たとえば、Webページにspanタグを書きました。 そして、span に「Welcome to the Script House」というテキスト コンテンツを記述します。このテキスト コンテンツは、span の子要素になります。 Span が div に含まれている場合も同様です。この場合、span は div の子要素になります。次のコードを見てください:

<title>サブ要素の正しい理解</title> <div><span>スクリプト ハウスへようこそ</span></div>
[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります ]

上記のコードから、「Welcome to the Script House」とspanが両方ともdivに含まれていることがわかります。ただし、div 内のテキスト「Welcome to the Script House」を直接引用することはできません。何が言いたいかというと、子要素を取得する際、レベルを越えた取得はできないということです。 子要素は直接の親要素によってのみ参照できます。同様に、この div も body タグの子要素とみなされます。ただし、本文でspanタグを直接取得することはできません。本体で div を取得してから、span を取得する必要があります。以下の例を参照してください:

<title>子要素を正しく取得します</title> <div><span>スクリプト ハウスへようこそ</span></div> <input type="button" value="获取div" onclick="get_div()"> <input type="button" value="获取span" onclick="get_span()"> <input type="button" value="获取文字" onclick="get_text()">
[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります

]

Dom で取得されるものをリストします。 子要素のいくつかのメソッド:

現在の要素の最初の子要素を取得するメソッドは次のとおりです: firstChild
現在の要素の最後の子要素を取得するメソッドis: lastChild
現在の要素の子要素を取得します。 すべての子要素のメソッドは次のとおりです: childNodes
ヒント: 子要素を処理するとき。スペースの問題が発生します。上記のコードはbodyとdivの間にあるためです。 divとspanの間に改行がないため、この問題は回避できます。ただし、常に改行なしでコードを入力したり記述したりできるわけではありません。 FFなどのブラウザでは行間にスペース要素が形成されます。これらのスペースは有効な要素として扱われます。以下を参照してください。スペース フィルタリングのための Dom テクニック
サブ要素について理解します。兄弟要素とは何かについてもう一度話しましょう。文字通りに理解できるはずです。いわゆる兄弟要素とは、実際には同じ親要素を持つ要素を兄弟要素と呼ぶことを意味します。以下のコードを見てください:

<title></title>兄弟要素を理解する <div> <div></div> <span></span><a></a> </div>
[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります

]

上記のコードは次のことを示しています。 div タグに div、span、a などの要素が含まれる場合、これらに含まれる div、span、a はすべて同じ親要素に含まれるため、互いに兄弟要素と呼ぶことができます。
兄弟間で要素を取得する方法を示しましょう:

<title></title>兄弟要素を理解する <div> <div></div> <span id="s"></span><a></a> </div>
[Ctrl A すべて選択 注:

外部 Js を導入する必要がある場合は、 を実行するために更新する必要があります]
上記のコードでは、span 要素の id 属性を設定しました。まだご存じないかもしれませんが、要素をすばやく取得したい場合は、要素に id 属性を設定する必要があります。次に、getElementById メソッドを使用して、id 属性の値に基づいてそれを取得します。
span 要素を取得した後、次の Dom メソッドを使用して、span の前の兄弟要素 div を取得し、次の兄弟要素 a

Dom でpreviousSibling メソッドを使用して、現在の要素を取得します。兄弟要素
Dom の nextSibling メソッドを使用して、現在の要素の次の兄弟要素を取得します
FF ブラウジングの場合、兄弟要素を取得するときにスペースの問題も発生します。この記事の空間フィルタリングの Dom スキルを参照してください。子要素と兄弟要素を正しく理解または操作できる必要があります。転載する場合は、以下の情報を必ず保管してください。
この記事の著作権：Web Circle 第一アドレス：http://www.web666.net/dom/dom_6.html