Javascript入門第9章 Javascript DOMの概要_基礎知識-jsチュートリアル-php.cn

js-DOM 開発者として、いくつかの DOM メソッドを知っておく必要があります。

1、ノードを作成します。
createElement():
var a = document.createElement(“p”);
要素ノードを作成するため、nodeType は 1 になります。
a.nodeName は p を返します。
createElement() メソッドによって作成された新しい要素ノードはドキュメントに自動的に追加されません。これは、ドキュメントにまだ追加されていないことを意味します。自由な状態で。したがって、nodeParent 属性もありません。
ドキュメントに追加する場合は、appendChild() メソッド、insertBefore() メソッド、または replaceChild() メソッドを使用できます。もちろん、前の例では、insertAfter() メソッドを自分で作成しました。
例:
var a = document.createElement(“p”);
document.body.appendChild(a);
注: appendChild() はデフォルトでドキュメントの最後に追加されます。つまり、lastChild 子ノードです。
どこかに追加したい場合は、insertBefore() を使用できます。
要素を挿入する前に要素に属性を追加する場合。
var a = document.createElement("p");
a.setAttribute("title","my demo");
document.body.appendChild(a); 🎜 >
createTextNode():
var b = document.createTextNode(“my demo”);
テキストノードを作成するため、nodeType は 3 になります。
b.nodeName は #text を返します。
createElement() と同様に、createTextNode() で作成されたノードはドキュメントに自動的に追加されません。 appendChild() メソッド、insertBefore() メソッド、または replaceChild() メソッドを使用する必要があります。
これは createElement() と組み合わせてよく使用されますが、その理由を知っていますか? (要素ノード、テキストノード)
var mes = document.createTextNode(“hello world”);
var container = document.createElement(“p”);
container.appendChild(mes) ;
document.body.appendChild(container);

2, ノードをコピーします。
cloneNode(boolean) :
パラメータが 1 つあります。
var mes = document.createTextNode("hello world");
var container = document.createElement("p");
container.appendChild(mes); container);
var newpara =container.cloneNode(true);//true と false の違い
document.body.appendChild(newpara);
注:
true: ;aaaa

クローン。
false:

のみを複製し、内部のテキストは複製しません。
自分でサンプルを作成し、firebug を使用してそれを確認することができます。

createTextNode() などのクローン作成後の新しいノードは、ドキュメントに自動的に挿入されません。 AppendChild() は必須です。
別の注意: クローン作成後に ID が同じ場合は、setAttribute(“id”, “another_id “)
を使用して新しいノードの ID を変更することを忘れないでください。

3, ノードを挿入します。
appendChild():
要素に子ノードを追加し、最後に新しいノードを挿入します。
varcontainer = document.createElement("p");
var t = document.createTextNode("cssrain");
container.appendChild(t); );
これは、createElement()、createTextNode()、cloneNode() と組み合わせてよく使用されます。
さらに、appendChild() を使用すると、新しい要素を追加するだけでなく、ドキュメント内の既存の要素を移動することもできます。
以下の例を見てください:

msg

content

p id="aaa">aaaaaaaa

content

msg

aaaaaaaa

insertBefore() :
名前が示すように、ターゲットノードの前に新しいノードを挿入します。
Element.insertBefore( newNode , targerNode );

2 番目のパラメータが省略されている場合、デフォルトでドキュメントの末尾に追加されます。これは appendChild と同等です。 ();
insertBefore() がどのように使用されるかを見てみましょう:

1111

msg

テスト

/p>

🎜><script> var msg = document.getElementById("msg"); var aaa = document.getElementById("aaa"); ; test.insertBefore( msg , aaa ); </script>
// aaa の前に msg の ID が挿入されていることがわかりました。
Jsの内部処理方法はappendChild()と同様です。

4, ノードを削除します。
removeChild() :

;p id="b">b

p id="b">b

🎜 ><script> var b = document.getElementById("b"); c.removeChild(b); 🎜 > 注: ノードをある場所から別の場所に移動する場合、removeChild() を使用する必要はありません。 前の appendChild() と insertBefore() を使用できます。最初にノードが自動的に削除され、次に指定した場所に移動されます。 , 5、ノードを交換します。 Element.repalceChild( newNode , oldNode ); OldNode は Element の子ノードである必要があります。 <body> /p> >b c </body> var cssrain = document.getElementById("cssrain"); var msg = document.getElementById("b"); var para = document.createElement("p"); replaceChild( para , msg ); </script>

6, 属性ノードを設定/取得します。
setAttribute();//
を設定します。例:
var a = document.createElement(“p”);
a.setAttribute(“title”,”my demo”);以前に title 属性があったかどうかに関係なく、将来の値は私のデモです。

getAttribute();//
の例:
var a =document.getElementById(“cssrain”);
var b = a.getAttribute(“title”); >取得時に属性が存在しない場合は空を返します。ie と ff の戻り値が異なることに注意してください。
リターンは異なりますが、1 つの方法で判断できます。
if(a.getAttribute(“title”)){ }

7, ノードを見つけます。
getElementById();
nodeName、nodeType、parentNode、ChildNodes などのプロパティを持つオブジェクトを返します。

getElementsByTagName() は、タグ名のすべての要素を検索します。
コレクションを返します。ループを使用して各オブジェクトを取り出すことができます。このオブジェクトには、nodeName、nodeType、parentNode、ChildNodes などのプロパティがあります。
例:
var ps = document.getElementsByTagName(“p”);
for(var i=0; i ps[i].setAttribute(“タイトル","こんにちは");
//以下も使用できます: ps.item(i).setAttribute("title","hello");
}

hasChildNodes:
名前でわかります、要素に子ノードがあるかどうかの判断です。
ブール型を返します。
テキストノードと属性ノードは子ノードを持つことができないため、その hasChildNodes は常に false を返します。
hasChildNodes は、childNodes と一緒に使用されることがよくあります。
例:

p id="b">b

🎜 ><script> var ps = document.getElementById("cssrain") if(ps.hasChildNodes){ アラート( ps.childNodes.length ) } ; ; /script> 8、DOM 属性: nodeName 属性: ノードの名前。 ノードが要素ノードの場合は、要素の名前を返します。このとき、tagName属性に相当します。 例: aaaa : p を返します。 属性ノードの場合、nodeName はこの属性の名前を返します。 テキストノードの場合、nodeName は #text 文字列を返します。 もう 1 つ言いたいのは、nodeName 属性は読み取り専用属性であり、(書き込み) 設定することはできません。 nodeType 属性: このノードのタイプを表す整数を返します。 私たちは一般的に 3 つのタイプを使用します: nodeType == 1 : 要素ノード nodeType == 2 : 属性ノード nodeType == 3 : テキストノード 覚えておきたい場合は、上記を覚えておいてください。順序は前から後ろと考えることができます。 例: test 前から後ろに読むと、最初に要素ノード、次に属性ノード、最後にテキストノードがあることがわかります。覚えておいてください。nodeType はどのような型を表しますか? nodeType 属性は、間違ったノードタイプで間違った操作が実行されないようにするために、if と組み合わせて使用されることがよくあります。 例: function cs_demo(mynode){ if(mynode.nodeType == 1){ mynode.setAttribute("title","demo"); > } コードの説明: まず、mynode の nodeType 属性をチェックして、それが表すノードが実際に要素ノードであることを確認します。 nodeName 属性と同様、これも読み取り専用属性であり、設定 (書き込み) できません。 nodeValue 属性: このノードの値である文字列を返します。 ノードが要素ノードの場合は null が返されます。(以下の注) 属性ノードの場合は、nodeValue はこの属性の値を返します。 テキストノードの場合、nodeValue はこのテキストノードのコンテンツを返します。 例: aaaaaaaaaaaaaa <SCRIPT LANGUAGE="JavaScript"> var c= document.getElementById("c" ) ; alert( c.nodeValue );//Return null </SCRIPT>
nodeValue は読み取りおよび書き込みが可能なプロパティです。ただし、要素ノードの値を設定することはできません。
以下の例を見てください:

aaaaaaaaaaaaaa

もちろん、正しい動作を保証するために、コードを追加できます:
< ;p id="c ">aaaaaaaaaaaaa

//It can be seen that if you want to set the element node, you cannot set it directly, but you must first use firstChild or lastChild, etc. and then set the nodeValue.
nodeValue is generally only used to set the value of the text node. If you want to refresh the value of an attribute node, you generally use setAttribute().

childNodes attribute: Returns an array consisting of child nodes of the element node.
Since text nodes and attribute nodes can no longer contain any child nodes,
so their childNodes property always returns an empty array.

You can use the hasChildNodes method, which is used to determine whether an element has child nodes.
or if (container.childNodes.length < 1);

childNodes is also a read-only attribute. If you want to add nodes, you can use appendChild() or insertBefore().
To delete nodes, you can use removeChild(); After the operation, the childNodes attribute will be automatically refreshed.

firstChild attribute:
Since text nodes and attribute nodes can no longer contain any child nodes,
so their firstChild attribute always returns an empty array. If there are no child nodes, null will be returned;
node.firstChild is equivalent to node.childNodes[0];
firstChild attribute is a read-only attribute.

lastChild attribute:
Since text nodes and attribute nodes can no longer contain any child nodes,
so their lastChild attribute always returns an empty array. If there are no child nodes, null will be returned;
node.lastChild is equivalent to node.childNodes[ node.childNodes.length - 1] ;
lastChild attribute is a read-only attribute.

nextSibling attribute:
Returns the next sibling node of the target node.
If there is no node behind the target node that belongs to the same parent node, nextSibling will return null;
nextSibling property is a read-only property.

previousSibling attribute:
Returns the previous sibling node of the target node.
If there is no node in front of the target node that belongs to the same parent node, previousSibling will return null;
the previousSibling property is a read-only property.

parentNode attribute:
Note: The node returned by the parentNode attribute is always an element node, because only element nodes may have child nodes.
Of course there is an exception:
document node, which has no parent node. So the parentNode property of the document node will return null;
parentNode property is a read-only property.

Okay, that’s it for the common attributes and methods of DOM. Understand the use of these methods.
I believe that everyone’s DOM programming technology will be greatly improved.

Javascript入門 第9章 Javascript DOMの概要_基礎知識

Javascript入門第9章 Javascript DOMの概要_基礎知識