Javascript入門 第8章 js domノードの属性解説_基礎知識

最後の 2 つの記事では、DOM を使用してノードの作成、ノードのコピー、ノードの挿入、ノードの削除、ノードの置換、ノードの検索、属性の取得などを行う方法について説明しました。 。 。

今日は DOM 属性について話します。
実際、DOM 属性については以前にも触れたことがあります。
例:
nodeName、nodeType.... 今日は詳しく説明します。


1、nodeName 属性: ノードの名前。
ノードが要素ノードの場合は、要素の名前を返します。このとき、tagName属性に相当します。
例:

aaaa

: p を返します。
属性ノードの場合、nodeName はこの属性の名前を返します。
テキスト ノードの場合、nodeName は #text 文字列を返します。

もう 1 つ言いたいのは、nodeName 属性は読み取り専用属性であり、設定 (書き込み) できないことです。
値は大文字で返されます。

2,,nodeType 属性: このノードのタイプを表す整数を返します。
私たちは通常 3 つのタイプを使用します:
nodeType == 1 : 要素ノード
nodeType == 2 : 属性ノード
nodeType == 3 : テキストノード
覚えておきたい場合は、次のように覚えてください:
例:

test

前から後ろに読んでください: 最初に要素ノード (1)、次に属性ノードがあることがわかります。 (2)、そして最後に Text ノード (3) なので、nodeType が表すタイプを簡単に思い出すことができます。 (ちょっとしたトリックをまとめました。^_^。)

nodeType 属性は、間違ったノード タイプで間違った操作が実行されないようにするために、if と組み合わせてよく使用されます。
例:
function cs_demo(mynode){
if(mynode.nodeType == 1){
mynode.setAttribute("title","demo"); > }
コードの説明: まず、mynode の nodeType 属性をチェックして、それが表すノードが実際に要素ノードであることを確認します。
nodeName 属性と同様、これも読み取り専用属性であり、設定 (書き込み) できません。

3. nodeValue 属性: このノードの値である文字列を返します。
ノードが要素ノードの場合は null が返されます。(以下の注)
属性ノードの場合は、nodeValue はこの属性の値を返します。
テキスト ノードの場合、nodeValue はこのテキスト ノードのコンテンツを返します。
例:

aaaaaaaaaaaaaa

nodeValue は読み取りおよび書き込みが可能なプロパティです。ただし、要素ノードの値を設定することはできません。
次の例をもう一度見てください:

aaaaaaaaaaaaaa

もちろん、正しい動作を保証するために、コードを追加できます:
aaaaaaaaaaaaa
>
// 要素ノードを設定したい場合は、直接設定できないことがわかりますが、最初に firstChild または lastChild などを使用してから、nodeValue を設定する必要があります。
nodeValue は通常、テキスト ノードの値を設定するためにのみ使用されます。属性ノードの値を更新したい場合は、通常 setAttribute() を使用します。

4、childNodes 属性: 要素ノードの子ノードで構成される配列を返します。
テキスト ノードと属性ノードには子ノードを含めることができないため、
その childNodes プロパティは常に空の配列を返します。

要素に子ノードがあるかどうかを判断するために使用される hasChildNodes メソッドを使用できます。
or if (container.childNodes.length
childNodes も読み取り専用属性です。ノードを追加したい場合は、appendChild() または insertBefore() を使用できます。
ノードを削除するには、removeChild(); を使用できます。
操作後、childNodes 属性が自動的に更新されます。

5、firstChild 属性:
テキスト ノードと属性ノードには子ノードを含めることができなくなるため、
そのため、firstChild 属性は常に空の配列を返します。子ノードがない場合は、null が返されます。
node.firstChild は、node.childNodes[0] と同等です。
firstChild 属性は、読み取り専用の属性です。


6 、 lastChild 属性:
テキスト ノードと属性ノードには子ノードを含めることができなくなるため、
そのため、lastChild 属性は常に空の配列を返します。子ノードがない場合は、null が返されます。
node.lastChild は、node.childNodes[node.childNodes.length - 1] と同等です。
lastChild 属性は読み取り専用です。

7 、 nextSibling 属性:
ターゲット ノードの次の兄弟ノードを返します。
同じ親ノードに属するターゲット ノードの背後にノードがない場合、nextSibling は null を返します。
nextSibling プロパティは読み取り専用のプロパティです。

8 、previousSibling 属性:
ターゲット ノードの前の兄弟ノードを返します。
同じ親ノードに属するターゲット ノードの前にノードがない場合、previousSibling は null を返します。
previousSibling プロパティは読み取り専用のプロパティです。

9 、parentNode 属性:
注: 子ノードを持つことができるのは要素ノードだけであるため、parentNode 属性によって返されるノードは常に要素ノードです。
もちろん例外があります。
ドキュメント ノードには親ノードがありません。したがって、ドキュメント ノードのparentNode プロパティは null を返します。
parentNode プロパティは読み取り専用のプロパティです。

DOM の共通の属性とメソッドについては以上です。これらのメソッドの使用方法を理解すれば、皆さんの DOM プログラミング技術が大幅に向上すると思います。


それでもわからない場合は、Google で情報を検索してください。