jsベースのDOMにおけるドキュメントオブジェクトの共通属性メソッドを詳しく解説-jsチュートリアル-php.cn

jsベースのDOMにおけるドキュメントオブジェクトの共通属性メソッドを詳しく解説

高洛峰

リリース： 2016-12-08 14:35:35

オリジナル

1276 人が閲覧しました

-----導入

ブラウザに読み込まれるすべての HTML ドキュメントは Document オブジェクトになります。

Document オブジェクトを使用すると、スクリプトから HTML ページ内のすべての要素にアクセスできます。

Property

1 document.anchors ドキュメント内のすべての Anchor オブジェクトへの参照を返します。 document.links/document.forms/document.images などもあります。

2 document.URL 現在のドキュメントの URL を返します

3 document.title 現在のドキュメントのタイトルを返します

4 document.body 戻り値body 要素のノード

メソッド

1 document.close() document.open() メソッドで開かれた出力ストリームを閉じ、選択されたデータを表示します。

<!DOCTYPE html>
<html>
<head>
<script>
function createDoc()
{
var w=window.open();
w.document.open();
w.document.write("<h1>Hello World!</h1>");
w.document.close();
}
</script>
</head>
 
<body>
<input type="button" value="New document in a new window" onclick="createDoc()">
</body>
</html>

ログイン後にコピー

2 document.createElement() 要素ノードを作成します。

<!DOCTYPE html>
<html>
<!DOCTYPE html>
<head>
</head>
<body>
  <p>hello world</p>
   
<script>
  var a = document.createElement(&#39;hr&#39;);
  document.body.appendChild(a)
 
 
</script>
</body>
</html>

ログイン後にコピー

3 document.createAttribute() 属性ノードを作成します。

<!DOCTYPE html>
<html>
<body>
 
<p id="demo">Click the button to make a BUTTON element.</p>
 
<button onclick="myFunction()">Try it</button>
 
<script>
 
function myFunction()
{
var btn=document.createElement("BUTTON");
document.body.appendChild(btn);
};
 
</script>
 
</body>
</html>

ログイン後にコピー

4 document.createTextNode() テキストノードを作成します。

<!DOCTYPE html>
<html>
<!DOCTYPE html>
<head>
</head>
<body>
  <p>hello world</p>
 
<script>
  var a = document.createTextNode(&#39;hahahah&#39;);
  document.body.appendChild(a)
 
 
</script>
</body>
</html>

ログイン後にコピー

5 document.getElementsByClassName() ドキュメント内の指定されたクラス名を持つすべての要素のコレクションを NodeList オブジェクトのコレクションとして返します。いわゆる NodeList オブジェクトコレクションは、配列に似たデータ形式であり、長さ属性のみが提供され、配列内のプッシュメソッドとポップメソッドは提供されません。

6 document.getElementById() は、指定された ID を持つ最初のオブジェクトへの参照を返します。

7 document.getElementsByName() は、指定された名前を持つオブジェクトのコレクションを返します。

8 document.getElementsByTagName() は、指定されたタグ名を持つオブジェクトのコレクションを返します。

9 document.write() は、HTML 式または JavaScript コードをドキュメントに書き込みます。注: HTML ドキュメントがロードされた後に write メソッドを使用すると、書き込みコンテンツが元の HTML ドキュメントを上書きします。

りー