ホームページ  >  記事  >  ウェブフロントエンド  >  DOM でのノードの属性と操作の概要_基礎知識

DOM でのノードの属性と操作の概要_基礎知識

WBOY
WBOYオリジナル
2016-05-16 18:53:11920ブラウズ

属性:
1.nodeName
ノード名。tagName に相当します。属性ノードは属性名を返し、テキスト ノードは #text を返します。ノード名は読み取り専用です。
2 .nodeType
値: 1、要素ノード、2、属性ノード、3、テキスト ノード。 nodeType は読み取り専用です。
3 .nodeValue
このノードの値を示す文字列を返します。要素ノードは null を返し、属性ノードは属性値を返し、テキスト ノードはテキストを返します。 nodeValue は読み取りおよび書き込み可能ですが、要素ノードに書き込むことはできません。通常、テキスト ノードの値を設定するためにのみ使用されます。
4 .childNodes
子ノードの配列を返します。テキスト ノードと属性ノードの childNodes は常に null です。 hasChildNodes() を使用して、子ノードが存在するかどうかを確認できます。読み取り専用属性。ノードの削除および追加には、childNodes 配列を操作するメソッドは使用できません。
5 .firstChild
最初の子ノードを返します。テキスト ノードと属性ノードには子ノードがないため、空の配列が返されます。これは、これら 2 つのノードに対する特別な処理です。要素ノードの場合、子ノードがない場合は null が返されます: firstChild=childNodes[0]。
6 .lastChild
最後の子ノードを返します。戻り値はfirstChildと同じです。三者扱いについては上記を参照してください。同等の等式があります: lastChide=childNodes[childNodes.length-1]
7 .nextSibling()
ノードの次の兄弟ノードを返します。次の兄弟ノードがない場合は、null を返します。読み取り専用のプロパティであり、アプリケーションから変更することはできません。
8 .previousSibling()
ノードの前の兄弟ノードを返します。同上。
9 .parentNode()
ノードの親ノードを返します。 document.parentNode() は null を返します。それ以外の場合は、要素ノードのみが子ノードを持ち、document 以外のノードには親ノードがあるため、要素ノードが返されます。 parentNode()、これも読み取り専用です。


操作:
1. ノードを作成します
createElement('tagName');
例: var oP=document.createElement('p' ) ;

タグを作成しました。
2. テキスト ノードを作成します
createTextNode('text');
例: var oText=document.createTextNode('This is a paragh!'); 🎜 >3. 子ノードを追加します
appendChild(o); ここで、o はノード オブジェクトです。 例: document.body.appendChildNode(o);
document.forms[0].appendChildNode(o) を本文の最後に追加します。フォームの終わり 内部の終わりが追加され、その合計 oP がノード オブジェクトになります。

4. ドキュメントフラグメントを作成します

createDocumentFragment(); 例: var oF=document.createDocumentFragment();
5. 🎜 >removeChild(oP);
例: document.body.removeChild(oP) は、ボディから oP ノード オブジェクトを削除します。
6. ノードを置き換えます
replaceChid(newOp, targetOp); ターゲット ノード targetOp を newOp に置き換えます
例: document.body.replayChild(oPa,oPb).ps: ? それほど特殊なのでしょうか? 呼び出し元が document.body なのはなぜですか?まず覚えておいてください、干渉しないでください。 ——置き換えられるものは body の子ノードでなければなりません。 document.body を置き換えるのに他の要素を使用することもできます。前提は同じです。置き換えられるものはこの要素の子ノードである必要があります。
7. ノード
insertAfter(newOp,targetOp); 8. 属性ノードを設定または取得します。 🎜>setAttribute('key','value');
getAttribute('key','value')
9. ノードをコピーします。
cloneNode(true/false)

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