javascript_javascript スキルで DOM の基本プロパティについて詳しく説明します。

構造とコンテンツの属性

ノードタイプ

すべてのノードにはタイプがあり、合計 12 種類のノードがあります。

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

インターフェースノード {
// NodeType
const unsigned short ELEMENT_NODE = 1;
const unsigned short ATTRIBUTE_NODE = 2;
const unsigned short TEXT_NODE = 3;
const unsigned short CDATA_SECTION_NODE = 4;
const unsigned short ENTITY_REFERENCE_NODE = 5;
const unsigned short ENTITY_NODE = 6;
const unsigned short PROCESSING_INSTRUCTION_NODE = 7;
const unsigned short COMMENT_NODE = 8;
const unsigned short DOCUMENT_NODE = 9;
const unsigned short DOCUMENT_TYPE_NODE = 10;
const unsigned short DOCUMENT_FRAGMENT_NODE = 11;
const unsigned short NOTATION_NODE = 12;
...
}

最も重要な 2 つのノードは、要素ノード (1) とテキスト ノード (3) です。残りはほとんど使用されません。
たとえば、すべての子要素ノードをリストする場合、それを反復処理し、childNodes[i].nodeType != 1 を使用して検出できます。
以下は実装コードです:

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

許可された読者:

• ジョン


• ボブ

<スクリプト>
var childNodes = document.body.childNodes
for(var i=0; i if (childNodes[i].nodeType != 1) continue
アラート(childNodes[i])
}

*考え中
次のコードは何を要求しますか:

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

<スクリプト>
アラート(document.body.lastChild.nodeType)

ノード名、タグ名

nodeName と tagName の両方にノードの名前が含まれます。
document.body

の場合

alert( document.body.nodeName ) // BODY
HTML 内のすべてのノード名は大文字になります。

nodeName が大文字でない場合
この状況は比較的まれですが、興味がある場合は以下をお読みください。
おそらくすでにご存じのとおり、ブラウザには HTML モードと __XML モードという 2 つの解析方法があります。通常は HTML スキーマが使用されますが、XMLHttpRequest__ テクノロジーを使用して XML 文書を取得する場合は、XML スキーマが使用されます。
XML モードは、XHTML ドキュメントの Content-Type が xmlish に設定されている場合、Firefox でも使用されます。
ノード名は __XML スキーマに保存されるため、body または bOdY が表示される場合があります。
したがって、XMLHttpRequest__ テクノロジを介して XML がサーバーから HTML ドキュメントにロードされる場合、ノード名は保持されます。

NodeName と __tagName__ は要素に対して同じです。
ただし、nodeName 属性は非要素ノードにも存在し、これらのノードでは特別な値を持ちます:

alert(document.nodeName) // #document
ほとんどのノード タイプには tagName 属性がなく、IE のアノテーション ノードの tagName は ! です。
したがって、一般に、nodeName は tagName よりも意味があります。ただし、tagName は簡易版のようなものなので、要素ノードのみを扱う場合に使用できます。

innerHTML

innerHTML は HTML5 標準の一部です。詳細についてはリンクを参照してください
これにより、ノードのコンテンツへのテキストによるアクセスが可能になります。次の例では、document.body のすべてのコンテンツを出力し、新しいコンテンツに置き換えます。

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

段落

そして div

<スクリプト>
alert( document.body.innerHTML ) // 現在のコンテンツを読み取ります
Document.body.innerHTML = 'やったー!' // 内容を置き換えます

innerHTML には有効な HTML が含まれます。ただし、ブラウザは不正な形式の HTML も解析できます。
innerHTML はどの要素ノードでも使用できます。とてもとても便利です。

innerHTML ピットフォールズ

innerHTML は見た目ほど単純ではありません。初心者を待ち受けるいくつかの罠があり、経験豊富なプログラマーでも回避できない場合があります。

IE の __table__ ノードの innerHTML は読み取り専用です
IE では、COL、COLGROUP、FRAMESET、HEAD、HTML、STYLE、TABLE、TBODY、TFOOT、THEAD、TITLE、TR およびその他の要素の innerHTML は読み取り専用です。
TD を除き、IE の table タグ内のすべての innerHTML タグは読み取り専用です。

innerHTML を追加できません
ステートメントの構成から判断すると、innerHTML は次のような追加操作を実行できます。

chatDiv.innerHTML = "

こんにちは !

"
chatDiv.innerHTML = "調子はどうですか?"
しかし、実際に何が起こったのか:

1. 古いコンテンツは削除されます

2. 新しいコンテンツが解析されて挿入されます。コンテンツは追加されず、再生成されます。

したがって、= 操作の後に、smile.gif を含むすべての画像とその他のリソースが再ロードされます。

幸いなことに、innerHTML を使用せずにコンテンツを更新する他の方法があるため、上記の問題は発生しません。

ノード値

innerHTML は要素ノードに対してのみ有効です。
他のタイプのノードの場合は、nodeValue 属性を使用してコンテンツを取得します。次の例は、テキスト ノードとコメント ノードでどのように動作するかを示しています。

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

テキスト

<スクリプト>
for(var i=0; i アラート(document.body.childNodes[i].nodeValue)
}

In the above example, some warnings are empty because of blank nodes. Note that nodeValue === null for SCRIPT nodes. That's because SCRIPT is an element node. For element nodes, use innerHTML.

Summary

nodeType
 Node type. The most important thing is that the element node is 1, the text node is 3, and it is read-only.
nodeName/tagName
  The label name in uppercase letters. For non-element nodes, nodeName will also have a special value, which is read-only.
innerHTML
 The content of the element node, writable.
nodeValue
 The content of the text node, writable.
DOM nodes have other attributes depending on their type. For example, the INPUT tag has value and __checked__ attributes. A attributes have href and so on.

The above is the entire content of this article, I hope you all like it.