ノードタイプ
nodeType
ここにいくつかの重要なnodeType値があります:
1:要素要素
2:attr
3:テキストテキスト
8:コメント
9:ドキュメントドキュメント
nodename、nodevalue
ノード関係
ChildNodes:各ノードには、NodeListオブジェクトを保持するChildNodesプロパティがあります
FirstChild:子育てに相当[0]
LastChild:ChildNodes.length-1に相当します
同時に、リスト内の各ノードの前後および次へのプロパティを使用して、同じリストの他のノードにアクセスできます。
操作ノード
appendChild()
AppendChild()メソッドは、ChildNodesリストの最後にノードを追加するために使用されます。ノードを追加した後、新しいノードの関係ポインター、親ノード、および子のノードの最後の子ノードがそれに応じて更新されます。
insertbefore()
INSERTBEFORE()メソッドは、挿入するノードと参照するノードの2つのパラメーターを受け入れます。
//挿入後、それは最後の子ノードになりますnode returnednode.somenode.insertbefore(newnode、null); //挿入後、それは最初のノードreturnnode = somenode.insertbefore(newnode、somenode.firstchild)になります。
checheChild()
checheChild()2つのパラメーター、挿入するノードと交換するノードを受け入れます
var returnednode = somenode.replacechild(newNode、somenode.firstchild);
removechild()
ノードを交換しないでのみ、削除します。
var ortionfirstchild = somenode.removechild(somenode.firstchild);
cloneNode()
アイテム1
アイテム2
アイテム3
var deeplist = mylist.clonenode(true); console.log(deeplist.length); // 3var shallowlist = mylist.clonenode(false); console.log(shallowlist.childnodes.length); // 0
ドキュメントタイプ
ドキュメントノードには次の特性があります。
文書の子供
var html = document.documentlement; // <html> console.log(html === document.childnodes [0])への参照を取得します。 // trueconsole.log(html === document.firstchild); // 真実
ドキュメント情報
//ドキュメントのタイトルを取得var originaltitle = document.title; //ドキュメントタイトルdocument.title = "new Page Title"; //完全なurlvar url = document.url; //ドメイン名var domain = document.domain; // urlvar referrer = document.referrer; //ページがp2p.wrox.comから来ていると仮定します。 //成功したdocument.domain = "nczonline.net"; // 失敗した
document.getElementByID( "myElement");結果は、以下に示すように<inupt>要素を返します。
最良の方法は、フォームの名前属性を他の要素のIDと同じにしないことです。
<入力型= "テキスト" name = "myElement" value = "text field"> <div id = "myElement"> a div>
特別コレクション
ドキュメントライティング
<html> <head> <title> document.write()例3 </title> </head> <body> <script type = "text/javascript"> document.write( "<script type =/" text/javascript/"src =/" file.js/">") + "<// script>"); </script> </body> </html>
文字列<//スクリプト>は、外部スクリプトタグのクローズドタグとは見なされないため、ページに不要なコンテンツはありません。
要素タイプ
要素ノードには次の特性があります。
要素のタグ名にアクセスするには、nodename属性またはtagname属性を使用できます。
<div id = "mydiv"> </div> var div = document.getElementById( "myDiv"); console.log(div.tagname); // divconsole.log(div.nodename); // divif(element.tagname == "div"){//このように比較することはできません、エラーを作成するのは簡単です} if(element.tagname.tolowercase == "div"){//これは(任意のドキュメントの場合)}}}}機能を取得します
操作特性には、getattribute()、setattribute()、およびremoveattribute()の3つの主要なDOMメソッドがあります。
getattribute()に渡された属性名は、実際の属性名と同じであることに注意してください。印象:クラスの属性値を取得するには、「クラス名」の代わりに「クラス」に渡す必要があります。
var div = document.getElementById( "mydiv"); console.log(div.getAttribute( "class")); // bd
要素を作成します
document.createelement()メソッドを使用して、新しい要素を作成します。
要素の子供
操作を実行する前に、次の例に示すように、通常、nodeTypeプロパティを最初に確認する必要があります。
for(var i = 0; len = element.childnodes.length; i <len; i ++){if(element.childnodes [i] .nodetype == 1){//操作を実行}}}テキストタイプ
テキストノードには次の特性があります。
テキストノードを作成します
document.createTextNode()を使用して、新しいテキストノードを作成できます。
正規化されたテキストノード
ノーマライズ()
テキストノードを分割します
splittext()
コメントタイプ
コメントノードには次の特性があります。
Dom Operation Technology
操作フォーム
// tablevar table = document.createelement( "table"); table.border = 1; table.width = "100%"; // tbodyvar tbody = document.createelement( "tbody"); table.appendchild(tbody); //最初の行を作成するtbody.insertrow(0); tbody.rows [0] .insertcell(0); tbody.rows [0] .cells [0] .appendChild(document.createTextNode( "cell 1,1"); tbody.rows [0] .insertcell(1); tbody.rows [0] .cells [1] 2,1 "); // 2番目の行Tbody.insertrow(01); tbody.rows [1] .insertcell(0); tbody.rows [1] .cells [0] .appendchild(document.createTextNode(" cell)を作成します1,2 ")); tbody.Rows [1] .insertcell(1); tbody.rows [1] .cells [1] .appendChild(document.createTextNode(" cell 2,2 ")); document.body.appendChild(表);
セレクターAPI
querySelector()メソッド
//ボディ要素を取得var tbody = document.queryselector( 'body'); // id "mydiv" var mydiv = document.queryselector( "#mydiv"); //クラスで最初の要素を取得する "selected" selected = document.queryselector( "。selected"); document.body.queryselector( "img.button");
QuerySeLectorAll()メソッド
//すべての<em>要素を<div>(getelementsbytagname( "em")に類似)var ems = document.getElementbyid( "mydiv")。 document.queryselectorall( "p strong");
HTML5
クラス関連の拡張機能
getElementsByClassName()メソッド:
この方法は、ドキュメントオブジェクトとすべてのHTML要素を介して呼び出すことができます。
//クラスに「ユーザー名」と「現在」を含むすべての要素を取得します。クラス名の順序は重要ではありませんvar allcurrentusernames = document.getElementsbyclassname( "username current"); // class "mydiv" mydiv "selected = document.getelementbyid(" mydiv ")。
フォーカス管理
HTML5は、DOMフォーカスの管理を支援する機能も追加します。 1つ目はDocument.ActiveElementプロパティで、現在フォーカスを獲得しているDOMの要素を常に指します。
var button = document.getElementById( "mybutton"); button.focus(); alert(document.activeElement === button); // 真実
デフォルトでは、ドキュメントが読み込まれた場合、document.activeElementはdocument.activeElementにdocument.body要素を参照して保存されます。ドキュメントの読み込み中、document.activeElementの値はnullです。
さらに、document.hasfocus()メソッドが追加されました。これは、ドキュメントが焦点を獲得したかどうかを判断するために使用されます。
var button = document.getElementById( "mybutton"); botton.focus(); alert(document.hasfocus()); // 真実