構造とコンテンツのプロパティ
nodeType
すべてのノードにはタイプがあり、合計12種類のノードがあります。
コードコピーは次のとおりです。
インターフェイスノード{
// nodeType
const unsigned short element_node = 1;
const unsigned short stoltibute_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)です。残りはめったに使用されません。
たとえば、すべての子要素ノードをリストする場合、それを反復し、子育て[i] .nodetype!= 1を使用して検出できます。
これが実装コードです:
コードコピーは次のとおりです。
<body>
<div>許可読者:</div>
<ul>
<li>ジョン</li>
<li>ボブ</li>
</ul>
<! - コメントノード - >
<スクリプト>
var Childnodes = document.body.childnodes
for(var i = 0; i <childnodes.length; i ++){
if(childnodes [i] .nodetype!= 1)続行します
アラート(チャイルドノード[i])
}
</script>
</body>
*考える
次のコードは何ですか:
コードコピーは次のとおりです。
<!doctype html>
<html>
<body>
<スクリプト>
アラート(document.body.lastchild.nodetype)
</script>
</body>
</html>
nodename、tagname
nodenameとtagnameの両方にノードの名前が含まれています。
document.body用
alert(document.body.nodename)// body
HTMLのすべてのNodenamesが大文字になります。
nodenameが大文字になっていない場合
この状況はまれです。あなたが興味があるなら、あなたは以下を読むことができます。
ブラウザが解析する方法は2つの方法があることをすでに知っているでしょう:HTMLパターンと__XMLパターン。通常、HTMLスキーマが使用されますが、XMLHTTPREQUEST__テクノロジーを使用してXMLドキュメントを取得すると、XMLスキーマが使用されます。
XHTMLドキュメントのコンテンツタイプがXMlishに設定されている場合、XMLパターンはFirefoxでも使用されます。
__XMLモードでは、ノード名が保持されるため、ボディまたはボディが表示される場合があります。
したがって、XMLからHTMLドキュメントがXMLHTTPREQUEST__テクノロジーを介してサーバーからロードされると、ノード名が保持されます。
nodenameと__tagname__は要素で同じです。
ただし、非エレメントノードには、特別な値があるnodename属性もあります。
alert(document.nodename)// #ddocument
ほとんどのノードタイプにはtagname属性がなく、ノードのtagnameはIEで注釈が付けられています。
したがって、一般的に言えば、nodenameはtagnameよりも意味があります。しかし、Tagnameは簡素化されたバージョンのようなものなので、要素ノードのみを処理する場合は、使用できます。
innerhtml
innerhtmlはHTML5標準の一部です。詳細については、リンクをご覧ください
テキスト内のノードコンテンツへのアクセスが可能になります。次の例では、document.body.bodyのすべての内容を出力し、それらを新しいコンテンツに置き換えます。
コードコピーは次のとおりです。
<body>
<p>段落</p>
<div>およびdiv </div>
<スクリプト>
alert(document.body.innerhtml)//現在の内容を読み取ります
document.body.innerhtml = 'yaaahoo!' //コンテンツを交換します
</script>
</body>
innerhtmlには効率的なHTMLが含まれます。しかし、ブラウザは変形したHTMLを解析することもできます。
innerhtmlは、任意の要素ノードで使用できます。とても便利です。
innerhtmlの落とし穴
innerhtmlは、見た目ほど単純ではありません。初心者を待っているいくつかの落とし穴があり、時には経験豊富なプログラマーがそれを避けることができません。
IEの__Table__ノードのinnerhtmlは読み取り専用です
IEでは、innerhtmlは、col、colgroup、frameset、head、html、スタイル、テーブル、tbody、tfoot、thead、title、tr、およびその他の要素で読み取り専用です。
IEのテーブルタグでは、TDを除いてInnerHTMLは読み取り専用です。
innerhtmlは追加できません
ステートメントの構造から、innerhtmlは次のような追加操作を実行できます。
chatdiv.innerhtml += "<div> hi <img src = 'smile.gif'/>!</div>"
chatdiv.innerhtml += "お元気ですか?"
しかし、実際に行われたこと:
1.古いコンテンツがクリアされています
2。新しいコンテンツが解析されて挿入されます。コンテンツは追加されておらず、再生されました。
したがって、すべての画像およびその他のリソースは、smile.gifを含む +=操作の後にリロードされます。
幸いなことに、innerhtmlを使用しないコンテンツを更新する他の方法があるため、上記の問題はありません。
Nodevalue
innerhtmlは、要素ノードに対してのみ有効です。
他のタイプのノードについては、Nodevalueプロパティを使用してコンテンツを取得します。次の例では、テキストノードとコメントノードでどのように機能するかを示します。
コードコピーは次のとおりです。
<body>
テキスト
<! - コメント - >
<スクリプト>
for(var i = 0; i <document.body.childnodes.length; i ++){
alert(document.body.childnodes [i] .nodevalue)
}
</script>
</body>
上記の例では、空白のノードのためにいくつかの警告が空です。スクリプトノードのnodevalue === nullに注意してください。これは、スクリプトが要素ノードであるためです。要素ノード、innerhtmlを使用します。
要約します
nodeType
ノードタイプ。最も重要なことは、要素ノードが1、テキストノードが3で、読み取り専用であることです。
nodename/tagname
キャップタグ名。非エレメントノードの場合、nodenameには特別な値があり、読み取り専用です。
innerhtml
要素ノードのコンテンツを書き込むことができます。
Nodevalue
テキストノードのコンテンツを書くことができます。
DOMノードには、そのタイプに応じて他の属性がいくつかあります。たとえば、入力タグには値と__checked__属性があります。 A属性にはHREFなどがあります。
上記はこの記事のすべてです。あなたがそれを気に入ってくれることを願っています。