KnowHub

ドキュメントノード

概要

「document」ノード オブジェクトはドキュメント全体を表し、各 Web ページには独自の「document」オブジェクトがあります。 window.document プロパティはこのオブジェクトを指します。ブラウザが HTML ドキュメントの読み込みを開始するとすぐにオブジェクトが存在し、直接使用できるようになります。

「document」オブジェクトはさまざまな方法で取得できます。

  • 通常の Web ページの場合は、document または window.document を直接使用します。
  • iframe フレーム内の Web ページは、iframe ノードの contentDocument 属性を使用します。
  • XMLHttpRequest オブジェクトの responseXML 属性を使用して、Ajax 操作によって返されるドキュメント。
  • 内部ノードの ownerDocument 属性。

document オブジェクトは、EventTarget インターフェイスと Node インターフェイスを継承し、ParentNode インターフェイスに混合されます。これは、これらのインターフェイスのメソッドを「document」オブジェクトで呼び出すことができることを意味します。さらに、document オブジェクトには独自のプロパティとメソッドが多数あります。

プロパティ

ショートカットのプロパティ

次のプロパティは、ドキュメント内のノードへのショートカットです。

(1)document.defaultView

document.defaultView プロパティは、document オブジェクトが属する window オブジェクトを返します。現在のドキュメントが window オブジェクトに属していない場合、このプロパティは null を返します。

document.defaultView === ウィンドウ // true

(2)ドキュメント.doctype

HTML ドキュメントの場合、「ドキュメント」オブジェクトには通常 2 つの子ノードがあります。最初の子ノードは document.doctype で、これは文書型宣言 (DTD) ノードである <DOCTYPE> ノードを指します。 HTMLの文書型ノードは一般的に<!DOCTYPE html>と書きます。 Web ページが DTD を宣言していない場合、このプロパティは「null」を返します。

var doctype = document.doctype;
doctype // "<!DOCTYPE html>"
doctype.name // "html"

通常、d​​ocument.firstChild はこのノードを返します。

(3)document.documentElement

document.documentElement プロパティは、現在のドキュメントのルート要素ノード (ルート) を返します。これは通常、「document」ノードの 2 番目の子であり、「document.doctype」ノードの直後にあります。 HTML Web ページのこの属性は通常、<html> ノードです。

(4)ドキュメント.ボディ、ドキュメント.ヘッド

document.body プロパティは <body> ノードを指し、document.head プロパティは <head> ノードを指します。

これら 2 つの属性は常に存在します。Web ページのソース コードで <head> または <body> が省略された場合、ブラウザーが自動的に作成します。さらに、これら 2 つの属性は書き込み可能です。値を変更すると、すべての子ノードが削除されるのと同じになります。

(5)document.scrollingElement

document.scrollingElement プロパティは、ドキュメントのスクロール要素を返します。つまり、文書全体がスクロールするときに、どの要素がスクロールするのかということです。

標準モードでは、このプロパティはドキュメント document.documentElement (つまり <html>) のルート要素を返します。互換性 (quirk) モードでは、<body> 要素が返されます。要素が存在しない場合は、null が返されます。

//ページをブラウザの一番上までスクロールします
document.scrollingElement.scrollTop = 0;

(6)document.activeElement

document.activeElement プロパティは、現在フォーカスがある DOM 要素を返します。通常、この属性は <input>、<textarea>、<select> およびその他のフォーム要素を返します。現在フォーカス要素がない場合は、<body> 要素または null を返します。

(7)document.fullscreenElement

document.fullscreenElement プロパティは、現在全画面状態で表示されている DOM 要素を返します。フルスクリーンでない場合、このプロパティは「null」を返します。

もし （
  document.fullscreenElement &&
  document.fullscreenElement.nodeName == 'ビデオ'
) {
  console.log('全画面でビデオを再生');
}

上記のコードでは、document.fullscreenElement を使用して、<video> 要素が全画面状態かどうかを確認し、ユーザーの動作を判断できます。

ノード コレクションのプロパティ

次のプロパティは、ドキュメント内の特定の要素のコレクションを表す HTMLCollection インスタンスを返します。これらのコレクションは動的であり、元のノードに対する変更はすぐにコレクションに反映されます。

(1)ドキュメント.リンク

document.links プロパティは、現在のドキュメント内の href 属性が設定されているすべての <a> ノードと <area> ノードを返します。

//ドキュメント内のすべてのリンクを印刷します
var リンク = document.links;
for(var i = 0; i < links.length; i++) {
  console.log(リンク[i]);
}

(2)ドキュメント.フォーム

document.forms プロパティは、すべての <form> フォーム ノードを返します。

var selectForm = document.forms[0];

上記のコードは、ドキュメントの最初の形式を取得します。

位置番号の使用に加えて、id 属性と name 属性を使用してフォームを参照することもできます。

/* HTMLコードは以下の通り
  <form name="foo" id="bar"></form>
*/
document.forms[0] === document.forms.foo // true
document.forms.bar === document.forms.foo // true

(3)ドキュメント.画像

document.images プロパティは、ページ上のすべての <img> 画像ノードを返します。

var imglist = document.images;

for(var i = 0; i < imglist.length; i++) {
  if (imglist[i].src === 'banner.gif') {
    // ...
  }
}

上記のコードは、すべての img タグの中から特定の画像を検索します。

(4)document.embeds、document.plugins

document.embeds プロパティと document.plugins プロパティは両方とも、すべての <embed> ノードを返します。

(5)ドキュメント.スクリプト

document.scripts プロパティはすべての <script> ノードを返します。

var scripts = document.scripts;
if (scripts.length !== 0 ) {
  console.log('現在の Web ページにはスクリプトがあります');
}

(6)document.styleSheets

document.styleSheets プロパティは、Web ページに埋め込まれた、または導入された CSS スタイル シートのコレクションを返します。詳細については、「CSS 操作」の章を参照してください。

(7) まとめ

document.styleSheets プロパティを除き、上記の他のすべてのコレクション プロパティは HTMLCollection インスタンスを返します。 document.styleSheets プロパティは StyleSheetList インスタンスを返します。

document.links HTMLCollection のインスタンス // true
document.images HTMLCollection のインスタンス // true
document.forms HTMLCollection のインスタンス // true
document.embeds HTMLCollection のインスタンス // true
document.scripts HTMLCollection のインスタンス // true

HTMLCollection インスタンスは配列のようなオブジェクトであるため、上記のプロパティには length 属性があり、角括弧演算子を使用してメンバーを参照できます。メンバーに「id」または「name」属性がある場合、これら 2 つの属性の値を使用して、「HTMLCollection」インスタンスでこのメンバーを参照することもできます。

// HTMLコードは以下の通り
// <フォーム名="myForm">
document.myForm === document.forms.myForm // true

ドキュメントの静的情報属性

次のプロパティはドキュメント情報を返します。

(1)document.documentURI、document.URL

document.documentURI プロパティと document.URL プロパティは両方とも、現在のドキュメントの URL を表す文字列を返します。違いは、documentURI は Document インターフェースから継承し、すべてのドキュメントに使用できるのに対し、URL は HTMLDocument インターフェースから継承し、HTML ドキュメントにのみ使用できることです。

ドキュメント.URL
// http://www.example.com/about

document.documentURI === document.URL
// 真実

ドキュメントのアンカー ポイント (#anchor) が変更されると、両方のプロパティもそれに応じて変更されます。

(2)ドキュメント.ドメイン

「document.domain」プロパティは、プロトコルとポートを除いた現在のドキュメントのドメイン名を返します。たとえば、Web ページの URL が「http://www.example.com:80/hello.html」の場合、「document.domain」属性は「www.example.com」と等しくなります。ドメイン名を取得できない場合、このプロパティは「null」を返します。

document.domain は基本的に読み取り専用のプロパティですが、1 つの例外があります。セカンダリ ドメイン名を持つ Web ページの場合、対応する上位レベル ドメイン名として document.domain を設定できます。たとえば、現在のドメイン名が「a.sub.example.com」の場合、「document.domain」属性を「sub.example.com」または「example.com」に設定できます。変更後、同じ「document.domain」を持つ 2 つの Web ページは、Cookie の設定など、互いのリソースを読み取ることができます。

さらに、「document.domain」を設定すると、ポートが「null」に変更されます。したがって、document.domain を設定して通信が実行される場合、ポートが同じになるように両方の Web ページでこの値を設定する必要があります。

(3)ドキュメントの場所

「Location」オブジェクトは、ブラウザによって提供されるネイティブ オブジェクトであり、URL 関連の情報と操作メソッドを提供します。このオブジェクトは、window.location および document.location プロパティを通じて取得できます。

このオブジェクトの詳細については、「ブラウザ モデル」セクションの「位置オブジェクト」の章を参照してください。

(4)document.lastModified

document.lastModified プロパティは、現在のドキュメントが最後に変更された時刻を示す文字列を返します。ブラウザごとに戻り値や日付形式が異なります。

document.lastModified
// "2018/03/07 11:18:27"

document.lastModified プロパティの値は文字列であるため、直接比較に使用できないことに注意してください。 Date.parse メソッドは、これを Date インスタンスに変換して、2 つの Web ページを比較します。

var lastVisitedDate = Date.parse('01/01/2018');
if (Date.parse(document.lastModified) > lastVisitedDate) {
  console.log('Webページが変更されました');
}

ページ上に JavaScript で生成されたコンテンツがある場合、document.lastModified プロパティは常に現在の時刻を返します。

(5)ドキュメント.タイトル

document.title プロパティは、現在のドキュメントのタイトルを返します。デフォルトでは、<title> ノードの値が返されます。ただし、このプロパティは書き込み可能であり、変更されると、変更された値が返されます。

document.title = '新しいタイトル';
document.title // "新しいタイトル"

(6)document.characterSet

document.characterSet プロパティは、UTF-8、ISO-8859-1 などの現在のドキュメントのエンコーディングを返します。

(7)ドキュメント.リファラー

document.referrer プロパティは、現在のドキュメントの訪問者がどこから来たのかを示す文字列を返します。

ドキュメント.リファラー
// "https://example.com/パス"

ソースを取得できない場合、またはユーザーが別の Web ページからクリックする代わりに URL を直接入力した場合、document.referrer は空の文字列を返します。

document.referrer の値は、HTTP ヘッダーの Referer フィールドと常に一致します。ただし、「document.referrer」には 2 つの「r」が付いていますが、ヘッダー情報の「Referer」フィールドには 1 つの「r」しかありません。

(8)document.dir

document.dir はテキストの方向を示す文字列を返します。可能な値は 2 つだけです。「rtl」は、アラビア語の場合のように、テキストが右から左にあることを意味します。「ltr」は、英語や英語を含むほとんどのスクリプトの場合と同様に、テキストが左から右にあることを意味します。中国人。

(9)document.compatMode

compatMode 属性は、ブラウザーがドキュメントを処理するモードを返します。可能な値は、BackCompat (下位互換性モード) および CSS1Compat (厳密モード) です。

一般に、明示的な DOCTYPE が Web ページ コードの最初の行 (<!doctype html> など) に設定されている場合、document.compatMode の値は CSS1Compat になります。

ドキュメントステータス属性

(1)ドキュメント.非表示

document.hidden プロパティは、現在のページが表示されるかどうかを示すブール値を返します。ウィンドウが最小化されたり、ブラウザのタブが切り替えられたりすると、ページが非表示になり、document.hidden が true を返します。

この属性は、Page Visibility API によって導入され、通常はこの API と組み合わせて使用​​されます。

(2)document.visibilityState

document.visibilityState はドキュメントの可視性状態を返します。

可能な値は 4 つあります。

  • visible: ページは表示されます。ページが部分的に表示されている可能性があることに注意してください。つまり、ページはフォーカス ウィンドウではなく、他のウィンドウによって前面が部分的にブロックされています。
  • hidden: ページが表示されないか、ウィンドウが最小化されているか、ブラウザが別のタブに切り替えられている可能性があります。
  • prerender: ページはレンダリング状態にあり、ユーザーには表示されません。
  • unloaded: ページはメモリからアンロードされました。

この属性は、ページの読み込み中に特定のリソースが読み込まれないようにするために使用したり、ページが表示されないときに一部のページ機能を停止したりすることができます。

(3)document.readyState

document.readyState プロパティは、現在のドキュメントの状態を 3 つの可能な値で返します。

  • loading: HTML コードをロードする段階 (解析はまだ完了していません)
  • interactive: 外部リソースの読み込みフェーズ
  • complete: ロードが完了しました

この属性を変更するプロセスは次のとおりです。

  1. ブラウザは HTML ドキュメントの解析を開始し、document.readyState プロパティは loading と等しくなります。
  2. ブラウザは、HTML ドキュメント内で async または defer 属性を持たない <script> 要素を検出すると、解析を停止し、この時点で document.readyState スクリプトの実行を開始します。属性は依然として「loading」と同じです。
  3. HTML ドキュメントの解析が完了し、document.readyState プロパティが interactive になります。
  4. ブラウザは、画像、スタイル シート、フォント ファイルなどの外部リソースがロードされるのを待ちます。すべてがロードされると、document.readyState プロパティが complete になります。

次のコードは、Web ページが正常に読み込まれたかどうかを確認するために使用されます。

//基本的なチェック
if (document.readyState === 'complete') {
  // ...
}

//ポーリングチェック
var 間隔 = setInterval(function() {
  if (document.readyState === 'complete') {
    クリアインターバル(間隔);
    // ...
  }
}, 100);

さらに、状態が変化するたびに「readystatechange」イベントがトリガーされます。

ドキュメント.クッキー

document.cookie 属性はブラウザの Cookie を操作するために使用されます。詳細については、「ブラウザ モデル」セクションの「Cookie」の章を参照してください。

document.designMode

document.designMode プロパティは、現在のドキュメントが編集可能かどうかを制御します。この属性には on と off の 2 つの値のみがあり、デフォルト値は off です。 「オン」に設定すると、ユーザーはドキュメント全体の内容を編集できるようになります。

次のコードは、「iframe」要素内のドキュメントの「designMode」属性をオンにして、ドキュメントを WYSIWYG エディタに変えます。

// HTMLコードは以下の通り
// <iframe id="editor" src="about:blank"></iframe>
var editor = document.getElementById('editor');
editor.contentDocument.designMode = 'on';

document.currentScript

document.currentScript 属性は、<script> 要素の埋め込みスクリプトまたは読み込まれた外部スクリプトでのみ使用され、現在のスクリプトが配置されている DOM ノード、つまり <script> の DOM ノードを返します。要素。

<script id="foo">
  コンソール.log(
    document.currentScript === document.getElementById('foo')
  ）; // 真実
</script>

上記のコードでは、document.currentScript が <script> 要素ノードです。

ドキュメント.実装

document.implementation プロパティは DOMImplementation オブジェクトを返します。このオブジェクトには 3 つのメソッドがあり、主に現在のドキュメントから独立して新しい Document オブジェクトを作成するために使用されます。

  • DOMImplementation.createDocument(): XML ドキュメントを作成します。
  • DOMImplementation.createHTMLDocument(): HTML ドキュメントを作成します。
  • DOMImplementation.createDocumentType(): DocumentType オブジェクトを作成します。

以下は HTML ドキュメントの作成例です。

var doc = document.implementation.createHTMLDocument('タイトル');
var p = doc.createElement('p');
p.innerHTML = 'hello world';
doc.body.appendChild(p);

document.replaceChild(
  doc.document要素、
  document.documentElement
);

上記のコードでは、最初のステップとして、新しい HTML ドキュメント doc を生成し、次に document.documentElement をそのルート要素 doc.documentElement に置き換えます。これにより、現在のドキュメントの内容がすべて消えて「hello world」になります。

方法

document.open()、document.close()

document.open メソッドは現在のドキュメントのすべてのコンテンツをクリアし、ドキュメントを document.write メソッドがコンテンツに書き込むことができる状態にします。

document.close メソッドは、document.open() によって開かれたドキュメントを閉じるために使用されます。

document.open();
document.write('hello world');
document.close();

document.write()、document.writeln()

document.write メソッドは、現在のドキュメントにコンテンツを書き込むために使用されます。

Web ページの最初のレンダリング段階では、書き込みのためにページが閉じられていない限り (つまり、document.close() が実行されない限り)、document.write によって書き込まれたコンテンツは、既存のコンテンツ。

// ページには「helloworld」が表示されます
document.open();
document.write('こんにちは');
document.write('ワールド');
document.close();

document.write は HTML コードとして解析され、エスケープされないことに注意してください。

document.write('<p>hello world</p>');

上記のコードでは、document.write が <p> を HTML タグとして解釈します。

ページが解析され (DOMContentLoaded イベントが発生した後)、write メソッドが呼び出された場合、まず open メソッドを呼び出して現在のドキュメントの内容をすべて消去してから書き込みます。

document.addEventListener('DOMContentLoaded', function (event) {
  document.write('<p>Hello World!</p>');
});

// と同等
document.addEventListener('DOMContentLoaded', function (event) {
  document.open();
  document.write('<p>Hello World!</p>');
  document.close();
});

ページのレンダリング中に write メソッドが呼び出された場合、open メソッドは自動的には呼び出されません。 (「open」メソッドは呼び出されていますが、「close」メソッドはまだ呼び出されていないと理解できます。)

<html>
<本文>
こんにちは
<script type="text/javascript">
  document.write("世界")
</script>
</body>
</html>

上記のWebページをブラウザで開くと「hello world」が表示されます。

document.write は、JavaScript 言語が標準化される前に存在したメソッドであり、現在では、ドキュメントにコンテンツを書き込むためのより多くの標準準拠の方法があります (innerHTML 属性に値を割り当てるなど)。したがって、特別な状況を除いて、document.write メソッドの使用は避けるようにしてください。

document.writeln メソッドは、出力コンテンツの末尾に改行文字が追加されることを除いて、write メソッドとまったく同じです。

document.write(1);
document.write(2);
// 12

document.writeln(1);
document.writeln(2);
// 1
// 2
//

「writeln」メソッドは ASCII コードに改行を追加することに注意してください。これは HTML Web ページにレンダリングするときには機能しません。つまり、Web ページには改行が表示されません。 Web ページ上の改行は、明示的に「」と記述する必要があります。

document.querySelector()、document.querySelectorAll()

document.querySelector メソッドは CSS セレクターをパラメーターとして受け取り、セレクターに一致する要素ノードを返します。複数のノードが一致基準を満たす場合、最初に一致したノードが返されます。一致するノードが見つからない場合は、「null」が返されます。

var el1 = document.querySelector('.myclass');
var el2 = document.querySelector('#myParent > [ng-click]');

document.querySelectorAll メソッドは、指定されたセレクターに一致するすべてのノードを含む NodeList オブジェクトを返す点を除いて、querySelector と似ています。

elementList = document.querySelectorAll('.myclass');

これら 2 つのメソッドのパラメーターは、カンマで区切られた複数の CSS セレクターにすることができ、CSS セレクターの規則と一致するセレクターの 1 つと一致する要素ノードを返します。

varmatches = document.querySelectorAll('div.note, div.alert');

上記のコードは、class 属性が note または alert である div 要素を返します。

どちらの方法でも、複雑な CSS セレクターがサポートされています。

// data-foo-bar 属性が someval に等しい要素を選択します
document.querySelectorAll('[data-foo-bar="someval"]');

// myForm フォーム内の検証に合格しないすべての要素を選択します
document.querySelectorAll('#myForm :invalid');

// クラスに無視が含まれる要素を除く div 要素を選択します
document.querySelectorAll('DIV:not(.ignore)');

// div、a、scriptの3種類の要素を同時に選択
document.querySelectorAll('DIV, A, SCRIPT');

ただし、CSS 疑似要素セレクター (:first-line や :first-letter など) および疑似クラス セレクター (:link や :visited など) はサポートされていません。疑似要素と疑似クラスを選択することはできません。

querySelectorAll メソッドのパラメータが文字列 * の場合、ドキュメント内のすべての要素ノードが返されます。さらに、querySelectorAll の戻り結果は動的コレクションではなく、要素ノードの変更をリアルタイムで反映しません。

最後に、これら 2 つのメソッドは、document オブジェクトで定義されるだけでなく、要素ノードでも定義されます。つまり、要素ノードで呼び出すこともできます。

document.getElementsByTagName()

document.getElementsByTagName() メソッドは HTML タグ名を検索し、条件を満たす要素を返します。戻り値は配列のようなオブジェクト (HTMLCollection インスタンス) であり、HTML ドキュメントの変更をリアルタイムで反映できます。一致する要素がない場合は、空のセットが返されます。

var paras = document.getElementsByTagName('p');
parasinstanceofHTMLCollection // true

上記のコードは、現在のドキュメントのすべての「p」要素ノードを返します。

HTML タグ名では大文字と小文字が区別されないため、getElementsByTagName() メソッドのパラメータも大文字と小文字が区別されません。さらに、返された結果では、各メンバーの順序はドキュメント内での出現順序になります。

* を渡すと、ドキュメント内のすべての HTML 要素を返すことができます。

var allElements = document.getElementsByTagName('*');

要素ノード自体も、要素の子孫要素のうち条件を満たす要素を返す getElementsByTagName メソッドを定義していることに注意してください。つまり、このメソッドは「document」オブジェクトだけでなく、任意の要素ノードでも呼び出すことができます。

var firstPara = document.getElementsByTagName('p')[0];
var spans = firstPara.getElementsByTagName('span');

上記のコードは、最初の p 要素内のすべての span 要素を選択します。

document.getElementsByClassName()

document.getElementsByClassName() メソッドは、指定された条件を満たす class 名を持つすべての要素を含む配列のようなオブジェクト (HTMLCollection インスタンス) を返します。要素の変更は、返される結果にリアルタイムで反映されます。

var 要素 = document.getElementsByClassName(names);

class は予約語であるため、JavaScript は常に className を使用して CSS の class を表します。

パラメータには、スペースで区切られた複数の「クラス」を指定できます。

var elements = document.getElementsByClassName('foo bar');

上記のコードは、foo と bar の両方のクラスを持つ要素を返します。 foo と bar の順序は重要ではありません。

通常モードでは、CSS class は大文字と小文字が区別されることに注意してください。 (「quirks モード」では、大文字と小文字は区別されません。)

getElementsByTagName() メソッドと同様に、getElementsByClassName() メソッドは、document オブジェクトだけでなく、任意の要素ノードでも呼び出すことができます。

// ドキュメント以外のオブジェクトに対して呼び出されます
var 要素 = rootElement.getElementsByClassName(names);

document.getElementsByName()

document.getElementsByName() メソッドは、name 属性を持つ HTML 要素 (<form>、<radio>、<img>、<frame>、< など) を選択するために使用されます。 embed> や <object> など）は、同じ name 属性を持つ要素が複数存在する可能性があるため、配列のようなオブジェクト (NodeList インスタンス) を返します。

// フォームは <form name="x"></form> です。
var form = document.getElementsByName('x');
Forms[0].tagName // "フォーム"

document.getElementById()

document.getElementById() メソッドは、指定された id 属性に一致する要素ノードを返します。一致するノードが見つからない場合は、「null」が返されます。

var elem = document.getElementById('para1');

このメソッドのパラメータでは大文字と小文字が区別されることに注意してください。たとえば、ノードの id 属性が main の場合、document.getElementById('Main') は null を返します。

document.getElementById() メソッドと document.querySelector() メソッドは両方とも要素ノードを取得できます。違いは、document.querySelector() メソッドのパラメーターが CSS セレクター構文 document.getElementById' を使用することです。 () メソッドのパラメータは要素の id 属性です。

document.getElementById('myElement')
document.querySelector('#myElement')

上記のコードでは、どちらのメソッドも id を持つ要素を myElement として選択できますが、document.getElementById() の方が document.querySelector() よりもはるかに効率的です。

さらに、このメソッドは「document」オブジェクトでのみ使用でき、他の要素ノードでは使用できません。

document.elementFromPoint()、document.elementsFromPoint()

document.elementFromPoint() メソッドは、ページ上の指定された位置にある最上位の要素ノードを返します。

var 要素 = document.elementFromPoint(50, 50);

上記のコードは、(50, 50) の座標位置にある最上位の HTML 要素を選択します。

elementFromPoint メソッドの 2 つのパラメータは、現在のビューポートの左上隅を基準とした横座標と縦座標 (ピクセル単位) です。その位置の HTML 要素が返されない場合 (テキスト ボックスのスクロールバーなど)、その親要素 (テキスト ボックスなど) が返されます。座標値が意味を持たない場合(負の値やビューポートサイズを超える場合など)は、nullが返されます。

document.elementsFromPoint() は、指定された座標 (ビューポートを基準とした) にあるすべての要素の配列を返します。

var 要素 = document.elementsFromPoint(x, y);

document.createElement()

document.createElement メソッドは、要素ノードを生成し、そのノードを返すために使用されます。

var newDiv = document.createElement('div');

「createElement」メソッドのパラメータは要素のタグ名、つまり要素ノードの「tagName」属性です。HTML Web ページでは大文字と小文字が区別されません。つまり、同じタイプのノードが返されます。パラメータが div または DIV の場合。パラメータに山かっこ (つまり、「<」と「>」) が含まれている場合、エラーが報告されます。

document.createElement('<div>');
// DOMException: 指定されたタグ名 ('<div>') は有効な名前ではありません

document.createElement のパラメータにはカスタム タグ名を指定できることに注意してください。

document.createElement('foo');

document.createTextNode()

document.createTextNode メソッドは、テキスト ノード (Text インスタンス) を生成し、そのノードを返すために使用されます。その引数はテキスト ノードの内容です。

var newDiv = document.createElement('div');
var newContent = document.createTextNode('Hello');
newDiv.appendChild(newContent);

上記のコードは、新しい div ノードとテキスト ノードを作成し、テキスト ノードを div ノードに挿入します。

このメソッドにより、返されたノードが HTML コードではなくブラウザによってテキストとしてレンダリングされます。したがって、ユーザー入力を表示し、XSS 攻撃を回避するために使用できます。

var div = document.createElement('div');
div.appendChild(document.createTextNode('<span>Foo & bar</span>'));
console.log(div.innerHTML)
// &lt;span&gt;フー&バー&lt;/span&gt;

上記のコードでは、createTextNode メソッドが大なり記号と小なり記号をエスケープして、ユーザー入力に悪意のあるコードが含まれている場合でも正しく表示できるようにしています。

このメソッドは一重引用符と二重引用符をエスケープしないため、HTML 属性に値を割り当てるために使用できないことに注意してください。

関数escapeHtml(str) {
  var div = document.createElement('div');
  div.appendChild(document.createTextNode(str));
  div.innerHTML を返します。
};

var userWebsite = '" onmouseover="alert(\'derp\')" "';
var profileLink = '<a href="' +scapeHtml(userWebsite) + '">ボブ</a>';
var div = document.getElementById('target');
div.innerHTML = プロフィールリンク;
// <a href="" onmouseover="alert('derp')" "">ボブ</a>

上記のコードでは、createTextNode メソッドが二重引用符をエスケープしないため、onmouseover メソッドがコードに挿入されます。

document.createAttribute()

document.createAttribute メソッドは、新しい属性ノード (Attr インスタンス) を生成し、それを返します。

var 属性 = document.createAttribute(name);

「document.createAttribute」メソッドのパラメータ「name」は属性の名前です。

var ノード = document.getElementById('div1');

var a = document.createAttribute('my_attrib');
a.value = 'newVal';

ノード.setAttributeNode(a);
// または
node.setAttribute('my_attrib', 'newVal');

上記のコードは「div1」ノードで、「newVal」の値を持つ「my_attrib」属性を挿入します。

document.createComment()

document.createComment メソッドは新しいコメント ノードを生成し、そのノードを返します。

var CommentNode = document.createComment(data);

document.createComment メソッドのパラメータは文字列であり、これがコメント ノードのコンテンツになります。

document.createDocumentFragment()

document.createDocumentFragment メソッドは、空のドキュメント フラグメント オブジェクト (DocumentFragment インスタンス) を生成します。

var docFragment = document.createDocumentFragment();

DocumentFragment はメモリ内に存在し、現在のドキュメントに属さない DOM フラグメントであり、より複雑な DOM 構造を生成し、それを現在のドキュメントに挿入するためによく使用されます。この利点は、DocumentFragment が現在のドキュメントに属していないため、それに変更を加えても Web ページが再レンダリングされず、現在のドキュメントの DOM を直接変更するよりもパフォーマンスが向上することです。

var docfrag = document.createDocumentFragment();

[1, 2, 3, 4].forEach(関数(e) {
  var li = document.createElement('li');
  li.textContent = e;
  docfrag.appendChild(li);
});

var 要素 = document.getElementById('ul');
element.appendChild(docfrag);

上記のコードでは、ドキュメント フラグメント docfrag に 4 つの <li> ノードが含まれており、これらの子ノードが現在のドキュメントに一度に挿入されます。

document.createEvent()

document.createEvent メソッドは、指定されたイベントをトリガーするために element.dispatchEvent メソッドで使用できるイベント オブジェクト (Event インスタンス) を生成します。

var イベント = document.createEvent(type);

document.createEvent メソッドのパラメータは、UIEvents、MouseEvents、MutationEvents、HTMLEvents などのイベント タイプです。

var イベント = document.createEvent('イベント');
イベント.initEvent('ビルド', true, true);
document.addEventListener('build', function (e) {
  console.log(e.type); // "ビルド"
}、 間違い）;
document.dispatchEvent(イベント);

上記のコードは、「build」という名前の新しいイベント インスタンスを作成し、イベントをトリガーします。

document.addEventListener()、document.removeEventListener()、document.dispatchEvent()

これら 3 つのメソッドは、「ドキュメント」ノードのイベントを処理するために使用されます。これらはすべて「EventTarget」インターフェースから継承します。詳細については、「EventTarget インターフェース」の章を参照してください。

//イベントリスニング機能を追加
document.addEventListener('click', リスナー, false);

//イベントリスニング関数を削除
document.removeEventListener('click', リスナー, false);

// イベントをトリガーする
var イベント = 新しいイベント('クリック');
document.dispatchEvent(イベント);

document.hasFocus()

document.hasFocus メソッドは、現在のドキュメント内の要素がアクティブ化されているか、またはフォーカスがあるかを示すブール値を返します。

var focus = document.hasFocus();

フォーカスのあるドキュメントはアクティブ化 (アクティブ) されている必要があり、その逆は当てはまらないことに注意してください。アクティブ化されたドキュメントにはフォーカスがありません。たとえば、ユーザーがボタンをクリックすると、現在のウィンドウから新しいウィンドウがポップアップした場合、新しいウィンドウはアクティブになりますが、フォーカスはありません。

document.adoptNode()、document.importNode()

document.adoptNode メソッドは、元のドキュメントまたは DocumentFragment からノードとその子ノードを削除し、現在の document オブジェクトに属し、挿入後に新しいノードを返します。挿入されたノード オブジェクトの ownerDocument プロパティは現在の document オブジェクトになり、parentNode プロパティは null になります。

var ノード = document.adoptNode(externalNode);
document.appendChild(ノード);

document.adoptNode メソッドはノードの所有権を変更するだけであり、このノードを新しいドキュメント ツリーに挿入するわけではないことに注意してください。したがって、新しいノードを現在のドキュメント ツリーに挿入するには、appendChild メソッドまたは insertBefore メソッドを使用する必要があります。

document.importNode メソッドは、元のドキュメントまたは DocumentFragment からノードとその子ノードをコピーし、それらが現在の document オブジェクトに属するようにします。コピーされたノード オブジェクトの ownerDocument プロパティは現在の document オブジェクトになり、parentNode プロパティは null になります。

var ノード = document.importNode(externalNode, deep);

document.importNode メソッドの最初のパラメータは外部ノードで、2 番目のパラメータは外部ノードが深いコピーか浅いコピーかを示すブール値です。デフォルトは浅いコピー (false) です。 2 番目のパラメータはオプションですが、このパラメータを常に保持し、「true」に設定することをお勧めします。

document.importNode メソッドは外部ノードをコピーするだけであり、ノードの親ノードは null であることに注意してください。次のステップでは、このノードを現在のドキュメント ツリーに挿入する必要があります。

var iframe = document.getElementsByTagName('iframe')[0];
var oldNode = iframe.contentWindow.document.getElementById('myNode');
var newNode = document.importNode(oldNode, true);
document.getElementById("コンテナ").appendChild(newNode);

上記のコードは、指定されたノード myNode を iframe ウィンドウからコピーし、それを現在のドキュメントに挿入します。

document.createNodeIterator()

document.createNodeIterator メソッドは子ノード イテレータを返します。

var nodeIterator = document.createNodeIterator(
  ドキュメント.ボディ、
  NodeFilter.SHOW_ELEMENT
);

上記のコードは、<body> 要素の子ノードのトラバーサを返します。

document.createNodeIterator メソッドの最初のパラメーターはトラバースされるルート ノードで、2 番目のパラメーターはトラバースされるノード タイプで、ここでは要素ノード (NodeFilter.SHOW_ELEMENT) として指定されます。いくつかの主なノード タイプは次のように記述されます。

  • すべてのノード: NodeFilter.SHOW_ALL
  • 要素ノード: NodeFilter.SHOW_ELEMENT
  • テキストノード: NodeFilter.SHOW_TEXT
  • コメントノード: NodeFilter.SHOW_COMMENT

document.createNodeIterator メソッドは、「イテレータ」オブジェクト (NodeFilter インスタンス) を返します。このインスタンスの nextNode() メソッドと previousNode() メソッドを使用して、すべての子ノードを走査できます。

var nodeIterator = document.createNodeIterator(document.body);
var pars = [];
var currentNode;

while (currentNode = nodeIterator.nextNode()) {
  pars.push(currentNode);
}

上記のコードでは、トラバーサーの nextNode メソッドを使用して、ルート ノードのすべての子ノードを配列に順番に読み取ります。 nextNode メソッドは、まずトラバーサの内部ポインタが配置されているノードを返し、次にポインタを次のノードに移動します。すべてのメンバーを調べた後、「null」が返されます。 previousNode メソッドは、まずポインタを前のノードに移動し、次にそのノードに戻ります。

var nodeIterator = document.createNodeIterator(
  ドキュメント.ボディ、
  NodeFilter.SHOW_ELEMENT
);

var currentNode = nodeIterator.nextNode();
varPreviousNode = nodeIterator.previousNode();

currentNode ===PreviousNode // true

上記のコードでは、currentNode と previousNode は両方とも同じノードを指します。

トラバーサーによって返される最初のノードは常にルート ノードであることに注意してください。

pars[0] === document.body // true

document.createTreeWalker()

document.createTreeWalker メソッドは DOM サブツリー ウォーカーを返します。これは基本的に document.createNodeIterator メソッドと似ていますが、違いは、このメソッドは TreeWalker インスタンスを返し、後者は NodeIterator インスタンスを返すことです。また、その最初のノードはルート ノードではありません。

document.createTreeWalker メソッドの最初のパラメータはトラバースするルート ノードで、2 番目のパラメータはトラバースするノードのタイプを指定します (document.createNodeIterator メソッドの 2 番目のパラメータと同じです)。

var TreeWalker = document.createTreeWalker(
  ドキュメント.ボディ、
  NodeFilter.SHOW_ELEMENT
);

var ノードリスト = [];

while(treeWalker.nextNode()) {
  nodeList.push(treeWalker.currentNode);
}

上記のコードは、<body> ノードの下にあるすべての要素ノードを走査し、それらを nodeList 配列に挿入します。

document.execCommand()、document.queryCommandSupported()、document.queryCommandEnabled()

(1)document.execCommand()

「document.designMode」プロパティが「on」に設定されている場合、ユーザーはドキュメント全体を編集できます。要素の「contenteditable」プロパティが「true」に設定されている場合、要素は編集可能です。どちらの場合も、document.execCommand() メソッドを使用してコンテンツのスタイルを変更できます。たとえば、document.execCommand('bold') はフォントを太字にします。

document.execCommand(コマンド, showDefaultUI, 入力)

このメソッドは 3 つのパラメータを受け入れます。

  • command: 実装するスタイルを示す文字列。
  • showDefaultUI: デフォルトのユーザー インターフェイスを使用するかどうかを示すブール値。常に false に設定することをお勧めします。
  • input: このスタイルの補助コンテンツを表す文字列。たとえば、ハイパーリンクを生成する場合、このパラメータはリンク先の URL です。 2 番目のパラメータが「true」に設定されている場合、ブラウザはプロンプト ボックスをポップアップ表示し、ユーザーにプロンプ​​ト ボックスにパラメータを入力するよう求めます。ただし、すべてのブラウザがこれをサポートしているわけではありません。互換性を確保するために、独自の方法でこのパラメータを取得する必要があります。
var url = window.prompt('URL を入力してください');

if (URL) {
  document.execCommand('createlink', false, url);
}

上記のコードでは、最初にユーザーはリンク先の URL を入力するよう求められ、次にハイパーリンクが手動で生成されます。 2 番目のパラメータは「false」であることに注意してください。これは、現時点ではプロンプト ボックスを自動的にポップアップする必要がないことを意味します。

document.execCommand() の戻り値はブール値です。 「false」の場合、このメソッドは有効にならないことを意味します。

ほとんどの場合、このメソッドは選択したコンテンツに対してのみ有効です。編集可能なコンテンツ領域が複数ある場合は、現在フォーカスされている要素にのみ有効です。

document.execCommand() メソッドで実行できるスタイルの変更は数多くあります。その一部を次に示します。 forwardDelete、insertText、unlink、insertImage、斜体、選択解除、insertHTML、やり直し。これらの値は最初のパラメータとして使用でき、その意味を文字通り理解するのは難しくありません。

(2)document.queryCommandSupported()

document.queryCommandSupported() メソッドは、ブラウザが document.execCommand() の特定のコマンドをサポートしているかどうかを示すブール値を返します。

if (document.queryCommandSupported('SelectAll')) {
  console.log('ブラウザは、選択された編集可能領域内のすべてのコンテンツをサポートします');
}

(3)document.queryCommandEnabled()

document.queryCommandEnabled() メソッドは、document.execCommand() のコマンドが現在利用可能かどうかを示すブール値を返します。たとえば、「太字」コマンドはテキストが選択されている場合にのみ使用でき、テキストが選択されていない場合は使用できません。

// HTMLコードは
// <input type="button" value="Copy" onclick="doCopy()">

関数 doCopy(){
  // ブラウザがコピー コマンドをサポートしているかどうか (選択したコンテンツをクリップボードにコピーします)
  if (document.queryCommandSupported('copy')) {
    copyText('こんにちは');
  }それ以外{
    console.log('ブラウザはサポートしていません');
  }
}

関数 copyText(テキスト) {
  var input = document.createElement('textarea');
  document.body.appendChild(入力);
  input.value = テキスト;
  input.focus();
  input.select();

  // 現在選択されているテキストがあるかどうか
  if (document.queryCommandEnabled('copy')) {
    var success = document.execCommand('copy');
    input.remove();
    console.log('コピーOK');
  } それ以外 {
    console.log('queryCommandEnabled は false');
  }
}

上記のコードでは、まずブラウザが「copy」コマンドをサポートしているかどうかを確認します（編集可能領域で選択したコンテンツをクリップボードにコピーできます）。サポートしている場合は、一時的なテキスト ボックスを作成し、コンテンツ「Hello」を書き込みます。その中に、選択したものを入れます。次に、選択が成功したかどうかを確認し、成功した場合は、「Hello」をクリップボードにコピーし、一時テキスト ボックスを削除します。

document.getSelection()

このメソッドは window.getSelection() を指します。「window」オブジェクトのセクションの概要を参照してください。

作者: wangdoc

アドレス: https://wangdoc.com/

ライセンス: クリエイティブ・コモンズ 3.0

前の章次の章