Attributes example

From 582025021017c11b128879cbfa45c0e50997cd7f Mon Sep 17 00:00:00 2001 From: atyamash Date: Fri, 4 Mar 2022 18:27:55 +0900 Subject: learn/javasrcipt/client-side_webapis 内の英単語の前後に空白を追加 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../learn/javascript/client-side_web_apis/index.html | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) (limited to 'files/ja') diff --git a/files/ja/learn/javascript/client-side_web_apis/index.html b/files/ja/learn/javascript/client-side_web_apis/index.html index 2335c02956..f0d4f7740e 100644 --- a/files/ja/learn/javascript/client-side_web_apis/index.html +++ b/files/ja/learn/javascript/client-side_web_apis/index.html @@ -19,11 +19,11 @@ translation_of: Learn/JavaScript/Client-side_web_APIs ---

Web サイトやアプリケーション用にクライアント側のJavaScriptを書いていると、すぐにアプリケーションプログラミングインターフェース (Apprication Programming Interfaces、API) にでくわします。API とはブラウザやサイトが動作している OS の様々な面を操作したり、他の Web サイト、サービスから取得したデータを操作するためのプログラムされた機能です。このモジュールでは API とは何か、開発作業の中でよく見かける最もよく利用される API のいくつかについて、どのように使うかを説明していきます。

Web サイトやアプリケーション用にクライアント側の JavaScript を書いていると、すぐにアプリケーションプログラミングインターフェース (Apprication Programming Interfaces、API) にでくわします。API とはブラウザやサイトが動作している OS の様々な面を操作したり、他の Web サイト、サービスから取得したデータを操作するためのプログラムされた機能です。このモジュールでは API とは何か、開発作業の中でよく見かける最もよく利用される API のいくつかについて、どのように使うかを説明していきます。

前提条件

このモジュールをよく理解するためには、ここまでの一連のJavaScriptに関するモジュール (First steps, Building blocks と JavaScript objects) の学習をすませているべきです。これらのモジュールでは大抵簡単な API を使っていますが、その助けなしにクライアント側の JavaScript を書き上げるのは難しいからです。このチュートリアルの中では、JavaScript 言語のコア部分については十分理解しているものとして、よく使われる Web API についてもう少し詳しく探っていきます。

このモジュールをよく理解するためには、ここまでの一連の JavaScript に関するモジュール (First steps, Building blocks と JavaScript objects) の学習をすませているべきです。これらのモジュールでは大抵簡単な API を使っていますが、その助けなしにクライアント側の JavaScript を書き上げるのは難しいからです。このチュートリアルの中では、JavaScript 言語のコア部分については十分理解しているものとして、よく使われる Web API についてもう少し詳しく探っていきます。

HTML と CSS に関する基礎知識も役に立つでしょう。

@@ -35,17 +35,17 @@ translation_of: Learn/JavaScript/Client-side_web_APIs

Web API の紹介: まずはAPIを高い視点から見ていきます — これは何なのか、どう働くのか、あなたのコードでどう使うのか、どういう風に作られているのか? また様々なクラスのAPIが何なのか、どんな使い方があるのかも見ていきます。; まずは API を高い視点から見ていきます — これは何なのか、どう働くのか、あなたのコードでどう使うのか、どういう風に作られているのか? また様々なクラスの API が何なのか、どんな使い方があるのかも見ていきます。
文章の操作: Webページやアプリを書く場合に、最も多く必要になるのはWeb文書をどうかして操作する事でしょう。これは普通ドキュメントオブジェクトモデル(Document Object Model、DOM)、これはHTMLとスタイルに関する情報を{{domxref("Document")}}オブジェクトを使いまくって操作するための一連のAPIです、を用いて行ないます。この記事では、DOMの使い方を詳しく見ながら、面白い方法であなたの環境を変える事ができる興味深い他のAPIもいくつか見ていきます。; Web ページやアプリを書く場合に、最も多く必要になるのは Web 文書をどうかして操作する事でしょう。これは普通ドキュメントオブジェクトモデル(Document Object Model、DOM)、これは HTML とスタイルに関する情報を {{domxref("Document")}} オブジェクトを使いまくって操作するための一連の API です、を用いて行ないます。この記事では、DOM の使い方を詳しく見ながら、面白い方法であなたの環境を変える事ができる興味深い他の API もいくつか見ていきます。
サーバからのデータ取得: また別に、モダンなWebサイトやアプリケーションでしょっちゅう必要になるのは、サーバから個々のデータを取ってきて、新しいページ全体を読んでくることなしに、ページの一部を書き換える事です。この一見ちょっとした事が、サイトのパフォーマンスや振舞いに巨大なインパクトを与えました。この記事ではそのコンセプトを解説し、これを可能にした技術{{domxref("XMLHttpRequest")}}とFetch APIについて見ていきます。; また別に、モダンな Web サイトやアプリケーションでしょっちゅう必要になるのは、サーバから個々のデータを取ってきて、新しいページ全体を読んでくることなしに、ページの一部を書き換える事です。この一見ちょっとした事が、サイトのパフォーマンスや振舞いに巨大なインパクトを与えました。この記事ではそのコンセプトを解説し、これを可能にした技術 {{domxref("XMLHttpRequest")}} と Fetch API について見ていきます。
サードパーティ API: これまでに説明したAPIはブラウザに組込まれていますが、全てのAPIが組込まれているのではありません。グーグルマップやTwitter、Facebook、ペイパルなど、多くの巨大なWebサイトやサービスが、開発者に対して彼らのデータを利用したり(例:あなたのブログにtwitterのタイムラインを表示させる)、サービスを利用したり(例:あなたのサイトに独自のグーグルマップを表示したり、あなたのサービス利用者にFacebookでログインできたり)するためのAPIを提供しています。この記事ではブラウザAPIとサードパーティAPIの違いを見ていき、典型的な後者の使い方をお見せします。; これまでに説明した API はブラウザに組込まれていますが、全ての API が組込まれているのではありません。グーグルマップや Twitter、Facebook、ペイパルなど、多くの巨大な Web サイトやサービスが、開発者に対して彼らのデータを利用したり(例:あなたのブログに twitter のタイムラインを表示させる)、サービスを利用したり(例:あなたのサイトに独自のグーグルマップを表示したり、あなたのサービス利用者に Facebook でログインできたり)するための API を提供しています。この記事ではブラウザ API とサードパーティ API の違いを見ていき、典型的な後者の使い方をお見せします。
絵を描く: ブラウザにはグラフィックを描くためのとても強力なツールがいくつか組込まれています。SVG(Scalable Vector Graphics)言語から、HTMLの{{htmlelement("canvas")}}キャンバス要素に描画するためのAPIまで (キャンバスAPI や WebGLを参照)。この記事ではキャンバスAPIへの導入を説明し、もっと深く学習していくためのリソースをご紹介します。; ブラウザにはグラフィックを描くためのとても強力なツールがいくつか組込まれています。SVG(Scalable Vector Graphics) 言語から、HTML の {{htmlelement("canvas")}} キャンバス要素に描画するための API まで (キャンバス API や WebGLを参照)。この記事ではキャンバス API への導入を説明し、もっと深く学習していくためのリソースをご紹介します。
動画と音声の API: HTML5には文書にリッチなメディアを埋め込むための要素が備わっています — {{htmlelement("video")}} と {{htmlelement("audio")}} — それぞれに再生やシークなどの操作するための独自APIを備えています。この記事では独自の再生操作パネルを作成するような、よくある仕事をどうやればいいのかお見せします。; HTML5 には文書にリッチなメディアを埋め込むための要素が備わっています — {{htmlelement("video")}} と {{htmlelement("audio")}} — それぞれに再生やシークなどの操作するための独自 API を備えています。この記事では独自の再生操作パネルを作成するような、よくある仕事をどうやればいいのかお見せします。
クライアント側でのデータ保存: モダンなブラウザには、Webサイトに関するデータを保存し必要なときに取り出すための様々に異なる技術が実装されており、これを使ってデータを長期間保存したり、サイトをオフラインに保存したりなどなどができます。この記事ではこれらがいかに動作するのか、その基本の基本について説明します。; モダンなブラウザには、Web サイトに関するデータを保存し必要なときに取り出すための様々に異なる技術が実装されており、これを使ってデータを長期間保存したり、サイトをオフラインに保存したりなどなどができます。この記事ではこれらがいかに動作するのか、その基本の基本について説明します。

-- cgit v1.2.3-54-g00ecf From d132914ab964aec5d9394d7e11725ef5d1ce339d Mon Sep 17 00:00:00 2001 From: atyamash Date: Sat, 5 Mar 2022 17:12:02 +0900 Subject: learn/javascript/client-side_web_apis/introduction の英単語の前後に半角空白を追加 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../client-side_web_apis/introduction/index.html | 32 +++++++++++----------- 1 file changed, 16 insertions(+), 16 deletions(-) (limited to 'files/ja') diff --git a/files/ja/learn/javascript/client-side_web_apis/introduction/index.html b/files/ja/learn/javascript/client-side_web_apis/introduction/index.html index 51db397a58..20ff345db3 100644 --- a/files/ja/learn/javascript/client-side_web_apis/introduction/index.html +++ b/files/ja/learn/javascript/client-side_web_apis/introduction/index.html @@ -18,13 +18,13 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction

{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}

まずはAPIを高い視点から見ていきます — これは何なのか、どう働くのか、あなたのコードでどう使うのか、どういう風に作られているのか? また様々なクラスのAPIは何なのか、どのような使い方があるのかも見ていきます。

まずは API を高い視点から見ていきます — これは何なのか、どう働くのか、あなたのコードでどう使うのか、どういう風に作られているのか? また様々なクラスの API は何なのか、どのような使い方があるのかも見ていきます。

- + @@ -46,7 +46,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction

それと同じことで、そうですね、例えば3次元グラフィックのプログラムを JavaScript や Python のような高レベル言語で書かれた API を使ってやる方が、C や C++ のような低レベル言語から直接コンピューターの GPU やグラフィック機能を叩いてやるよりも、ずっと簡単です。

注記: API という語についてもっと詳しいことは APIの用語解説を参照して下さい。

注記: API という語についてもっと詳しいことは API の用語解説を参照して下さい。

クライアントサイド JavaScript での API

@@ -89,13 +89,13 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction

ブラウザーで読み込んだ文書を操作するための API。一番目にする例は DOM (Document Object Model) API で、 HTML と CSS を操作できます — HTML を作成したり削除したり書き換えたり、動的に新しいスタイルをページに適用したり、などなど。例えばページにポップアップウィンドウが表われたり、何か新しい中身が表示されたりする時、DOM が使われています。この種の API についてはドキュメントの操作でもっといろいろ見られます。
サーバからデータ取得をする API で Web ページの一部を書き換える事はとてもよく行なわれます。この一見ちょっとした事が、サイトのパフォーマンスや振舞いに巨大なインパクトを与えました — 在庫一覧や新しいお話一覧を書き換えたい時に、サーバからページ全体をリロードする事なしにさくっとできたら、サイトやアプリはずっと反応よく素早く感じられます。これを可能にした API には XMLHttpRequest と Fetch API が含まれています。Ajax という言葉を聞いた事があるかもしれませんが、これがこのテクニックの呼び名です。これらの API についてサーバからのデータ取得でもっといろいろ見られます。
グラフィックスを描画したり操作する API は多くのブラウザーがサポートしています — 最も知られているものには Canvas と WebGL があり、HTML の{{htmlelement("canvas")}} 要素上にあるピクセルデータを書き換えて2次元や3次元のシーンを作成するのに使えます。例えばキャンバスAPIを使って長方形や円のような形を描いたり、キャンバスに画像を読み込んだり、セピアやグレイスケールといったフィルターを適用したり、あるいは WebGL を使ってライティングやテクスチャを使った3Dシーンを作成したりできます。これらの API はよくアニメーションループを作成するAPI({{domxref("window.requestAnimationFrame()")}} など)や他のものと組み合わせて使われ、アニメやゲームのようなものの表示を定期的に書き換えるようにします。
動画と音声の API {{domxref("HTMLMediaElement")}}や Web Audio API や WebRTC のような API を使うと、マルチメディアを使ってとても面白い事ができます。音声や動画再生のための独自のコントロールUIの作成、字幕やサブタイトルのような音声トラックをビデオと一緒に表示したり、Web カメラの画像を取り込んで操作し、上述のキャンバスに表示したり Web カンファレンスに参加している他の誰かのコンピューター上に表示したり、音声トラックにイフェクト(ゲイン、ディストーション、音場効果など)をかけたりできます。
グラフィックスを描画したり操作する API は多くのブラウザーがサポートしています — 最も知られているものには Canvas と WebGL があり、HTML の {{htmlelement("canvas")}} 要素上にあるピクセルデータを書き換えて2次元や3次元のシーンを作成するのに使えます。例えばキャンバス API を使って長方形や円のような形を描いたり、キャンバスに画像を読み込んだり、セピアやグレイスケールといったフィルターを適用したり、あるいは WebGL を使ってライティングやテクスチャを使った3Dシーンを作成したりできます。これらの API はよくアニメーションループを作成する API ({{domxref("window.requestAnimationFrame()")}} など)や他のものと組み合わせて使われ、アニメやゲームのようなものの表示を定期的に書き換えるようにします。
動画と音声の API {{domxref("HTMLMediaElement")}} や Web Audio API や WebRTC のような API を使うと、マルチメディアを使ってとても面白い事ができます。音声や動画再生のための独自のコントロールUIの作成、字幕やサブタイトルのような音声トラックをビデオと一緒に表示したり、Web カメラの画像を取り込んで操作し、上述のキャンバスに表示したり Web カンファレンスに参加している他の誰かのコンピューター上に表示したり、音声トラックにイフェクト(ゲイン、ディストーション、音場効果など)をかけたりできます。
デバイス API は基本的に Web アプリで使えるような形で、今時のハードウェアデバイスのデータを操作したり取得する API です。デバイスの位置データにアクセスして地図上にあなたの居場所を書くような位置情報 API についてはすでにお話しました。他の例にはシステム通知を使って Web アプリに役に立つアップデートがあるのを知らせたり(Notifications API を参照)、ハードウェアを振動させたり(Vibration API を参照)などがあります。
クライアント側でのデータ保持 API は今多くのブラウザーに普及しつつあります。— クライアント側にデータを保存できると、ページを移動しても状態を保存したり、たとえデバイスがオフラインでも動作するようなアプリを作成したいような場合、とても役に立ちます。いくつもの選択肢があり、例えば Web Storage API を使ったキーバリューストアや、 IndexedDB API を使ったもっと複雑なテーブル型データ保存などです。

一般的なサードパーティAPI

一般的なサードパーティ API

サードパーティ API はバラエティーに富んでいます。あなたが遅かれ早かれ使うようになりそうな、世間でよく使われているものには以下のようなものがあります:

@@ -104,19 +104,19 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction

Mapquest や Google Maps API のような地図の API は、あなたのWebページ上に地図を使ったあらゆる事を可能にします。

Facebook APIスイートによって Facebook エコシステムの様々な部品を使ってあなたのアプリを強化できます。例えばアプリへのログインを Facebook のログインで行なったり、アプリ内での支払い、ターゲット広告を出したりなどです。

Telegram APIs を使用すると、ボットのサポートに加えて、Telegram チャネルのコンテンツを Web サイトに埋め込むことができます。

YouTube APIを使ってあなたのサイトに YouTube のビデオを埋め込んだり、YouTube を検索したり、プレイリストを作成したりなどなどできます。

YouTube API を使ってあなたのサイトに YouTube のビデオを埋め込んだり、YouTube を検索したり、プレイリストを作成したりなどなどできます。

Pinterest API は、Pinterest のボードとピンを管理して Web サイトに含めるためのツールを提供します。

Twilio APIはあなたのアプリで音声・ビデオ電話の機能を作成したり、SMS/MMSを送信したりなどするためのフレームワークを提供します。

Mastodon API を使用すると、Mastodon ソーシャルネットワークの機能をプログラムで操作できます。

注記: サードパーティAPIについては Programmable Web API directoryでもっと多くの情報を見られます。

注記: サードパーティ API については Programmable Web API directory でもっと多くの情報を見られます。

APIはどのように動作する?

API はどのように動作する?

異なるJavaScript APIはそれぞれに違う方法で動作しますが、普通は、共通した機能とどのように動くべきかの類似したテーマを持ちます。

異なる JavaScript APIはそれぞれに違う方法で動作しますが、普通は、共通した機能とどのように動くべきかの類似したテーマを持ちます。

オブジェクトに基づいています

@@ -207,21 +207,21 @@ volumeSlider.addEventListener('input', function() {

認識できる入口があります

APIを使うときは、その API の入口がどこなのかしっかり確認するべきです。Web Audio APIではとても単純でした — それは {{domxref("AudioContext")}} オブジェクトであり、あらゆる音声操作を行うために使用する必要があります。

API を使うときは、その API の入口がどこなのかしっかり確認するべきです。Web Audio API ではとても単純でした — それは {{domxref("AudioContext")}} オブジェクトであり、あらゆる音声操作を行うために使用する必要があります。

Document Object Model (DOM) API でも単純な入口があります — これの機能は{{domxref("Document")}} もしくは何らかの方法で影響を与えたいいHTML 要素のインスタンスにぶらさがっている場合が多く、例えば:

Document Object Model (DOM) API でも単純な入口があります — これの機能は {{domxref("Document")}} もしくは何らかの方法で影響を与えたい HTML 要素のインスタンスにぶらさがっている場合が多く、例えば:

const em = document.createElement('em'); // create a new em element
 const para = document.querySelector('p'); // reference an existing p element
 em.textContent = 'Hello there!'; // give em some text content
 para.appendChild(em); // embed em inside para

Canvas API は、諸々を操作するために使用するコンテキストオブジェクトの取得にも依存していますが、この場合は、音声コンテキストではなく描画コンテキストです。そのコンテキストオブジェクトは、描画をしたい {{htmlelement("canvas")}} 要素への参照を取得して、これの{{domxref("HTMLCanvasElement.getContext()")}} メソッドを呼ぶと作成されます:

Canvas API は、諸々を操作するために使用するコンテキストオブジェクトの取得にも依存していますが、この場合は、音声コンテキストではなく描画コンテキストです。そのコンテキストオブジェクトは、描画をしたい {{htmlelement("canvas")}} 要素への参照を取得して、これの {{domxref("HTMLCanvasElement.getContext()")}} メソッドを呼ぶと作成されます:

const canvas = document.querySelector('canvas');
 const ctx = canvas.getContext('2d');

キャンバスを使って何かやろうとする場合は何でも、コンテキストオブジェクト (これは{{domxref("CanvasRenderingContext2D")}} のインスタンスです) のプロパティやメソッドを呼んで行ないます。例えば:

キャンバスを使って何かやろうとする場合は何でも、コンテキストオブジェクト (これは {{domxref("CanvasRenderingContext2D")}} のインスタンスです) のプロパティやメソッドを呼んで行ないます。例えば:

Ball.prototype.draw = function() {
   ctx.beginPath();
@@ -238,7 +238,7 @@ const ctx = canvas.getContext('2d');

すでに学習コース中でイベントについてはお話しています、イベントの紹介 — この記事でクライアント側 Web イベントとは何か、コードの中でどのように使えるのか詳しく見てきました。もしまだクライアント側 WebAPI の仕組みがよくわからいなら、この先に進む前に記事を読み直しておく方が良いでしょう。

イベントを持たないWebAPIもありますが、ほとんどの WebAPI はいくつか持っています。イベントが発火した際に関数を実行できるイベントハンドラーのプロパティについては、リファレンス記事の独立した"イベントハンドラー"セクションとしておおよそ列挙されています。

イベントを持たない WebAPI もありますが、ほとんどの WebAPI はいくつか持っています。イベントが発火した際に関数を実行できるイベントハンドラーのプロパティについては、リファレンス記事の独立した"イベントハンドラー"セクションとしておおよそ列挙されています。

上記の Web Audio API の例では、すでにいくつかのイベントハンドラーが使用されています。

@@ -270,7 +270,7 @@ request.onload = function() {

WebAPI 機能は JavaScript や他の Web 技術と同等のセキュリティ上の配慮が必要です (例えば same-origin ポリシー) が、追加のセキュリティ機構が必要な場合もあります。例として今時の WebAPI の中にはHTTPS で配信されるページ上でしか動かないものがあり、これは機密とすべきデータをやりとりする可能性があるためです (ServiceWorkers や Push など)。

さらには、ある種のWebAPIへの呼び出しがあなたのコードにあると、ユーザに対してそれの許可を要求します。例えば、Notifications API (通知 API) はポップアップのダイアログボックスを用いて許可を要求します:

さらには、ある種の WebAPI への呼び出しがあなたのコードにあると、ユーザに対してそれの許可を要求します。例えば、Notifications API (通知 API) はポップアップのダイアログボックスを用いて許可を要求します:

-- cgit v1.2.3-54-g00ecf From 7b582dd1d008c1daee40ac27dd2f72b067438652 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 25 Feb 2022 00:44:22 +0900 Subject: Web/API/Node 以下のプロパティの文書を移行 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/node/childnodes/index.html | 101 -------------------- files/ja/web/api/node/childnodes/index.md | 101 ++++++++++++++++++++ files/ja/web/api/node/firstchild/index.html | 46 --------- files/ja/web/api/node/firstchild/index.md | 46 +++++++++ files/ja/web/api/node/lastchild/index.html | 28 ------ files/ja/web/api/node/lastchild/index.md | 28 ++++++ files/ja/web/api/node/nextsibling/index.html | 87 ----------------- files/ja/web/api/node/nextsibling/index.md | 87 +++++++++++++++++ files/ja/web/api/node/nodename/index.html | 102 -------------------- files/ja/web/api/node/nodename/index.md | 102 ++++++++++++++++++++ files/ja/web/api/node/nodetype/index.html | 88 ------------------ files/ja/web/api/node/nodetype/index.md | 88 ++++++++++++++++++ files/ja/web/api/node/nodevalue/index.html | 81 ---------------- files/ja/web/api/node/nodevalue/index.md | 81 ++++++++++++++++ files/ja/web/api/node/ownerdocument/index.html | 66 ------------- files/ja/web/api/node/ownerdocument/index.md | 66 +++++++++++++ files/ja/web/api/node/parentelement/index.html | 46 --------- files/ja/web/api/node/parentelement/index.md | 46 +++++++++ files/ja/web/api/node/parentnode/index.html | 47 ---------- files/ja/web/api/node/parentnode/index.md | 47 ++++++++++ files/ja/web/api/node/previoussibling/index.html | 42 --------- files/ja/web/api/node/previoussibling/index.md | 42 +++++++++ files/ja/web/api/node/textcontent/index.html | 113 ----------------------- files/ja/web/api/node/textcontent/index.md | 113 +++++++++++++++++++++++ 24 files changed, 847 insertions(+), 847 deletions(-) delete mode 100644 files/ja/web/api/node/childnodes/index.html create mode 100644 files/ja/web/api/node/childnodes/index.md delete mode 100644 files/ja/web/api/node/firstchild/index.html create mode 100644 files/ja/web/api/node/firstchild/index.md delete mode 100644 files/ja/web/api/node/lastchild/index.html create mode 100644 files/ja/web/api/node/lastchild/index.md delete mode 100644 files/ja/web/api/node/nextsibling/index.html create mode 100644 files/ja/web/api/node/nextsibling/index.md delete mode 100644 files/ja/web/api/node/nodename/index.html create mode 100644 files/ja/web/api/node/nodename/index.md delete mode 100644 files/ja/web/api/node/nodetype/index.html create mode 100644 files/ja/web/api/node/nodetype/index.md delete mode 100644 files/ja/web/api/node/nodevalue/index.html create mode 100644 files/ja/web/api/node/nodevalue/index.md delete mode 100644 files/ja/web/api/node/ownerdocument/index.html create mode 100644 files/ja/web/api/node/ownerdocument/index.md delete mode 100644 files/ja/web/api/node/parentelement/index.html create mode 100644 files/ja/web/api/node/parentelement/index.md delete mode 100644 files/ja/web/api/node/parentnode/index.html create mode 100644 files/ja/web/api/node/parentnode/index.md delete mode 100644 files/ja/web/api/node/previoussibling/index.html create mode 100644 files/ja/web/api/node/previoussibling/index.md delete mode 100644 files/ja/web/api/node/textcontent/index.html create mode 100644 files/ja/web/api/node/textcontent/index.md (limited to 'files/ja') diff --git a/files/ja/web/api/node/childnodes/index.html b/files/ja/web/api/node/childnodes/index.html deleted file mode 100644 index 82a90460c6..0000000000 --- a/files/ja/web/api/node/childnodes/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Node.childNodes -slug: Web/API/Node/childNodes -tags: - - API - - DOM - - DOMリファレンス - - プロパティ - - リファレンス -translation_of: Web/API/Node/childNodes ---- -

- -

Node.childNodes読み取り専用プロパティは、最初の子ノードにインデックス0が割り当てられている、指定された要素の子{{domxref("Node","nodes")}}の現在の{{domxref("NodeList")}}を返します。

- -

構文

- -

let nodeList = elementNodeReference.childNodes;
-

- -

例

- -

簡単な使用方法

- -

// 変数pargは<p>要素へのオブジェクト参照です
-
-// まず、pargが子ノードを持っているかをチェックします
-if (parg.hasChildNodes()) {
-  var children = parg.childNodes;
-
-  for (let i = 0; i < children.length; i++) {
-    // for文を使って各ノードにchildren[i]としてアクセスします
-    // 注意！ NodeListは不変ではないので、ノードを追加したり削除したりするとchildren.lengthは変化します
-  }
-}

- -

ノードから全ての子を削除する

- -

// これは一例ですが、この方法でノードからすべての子ノードを削除することができます
-// let box = document.getElementById(/**/);
-
-while (box.firstChild) {
-    // NodeListは不変ではないので、毎処理ごとにbox.firstChildは変化します
-    box.removeChild(box.firstChild);
-}

- -

注記

- -

ノードのコレクション内の項目はオブジェクトであり、文字列ではありません。node オブジェクトからデータを取得するには、そのプロパティ (たとえばelementNodeReference.childNodes[1].nodeName で名前を取得) を使用します。
-
- documentオブジェクト自体には Doctype 宣言と root 要素の2つの子があり、通常はdocumentElementと呼ばれます。（(X)HTML文書ではこれがHTML要素です）
-
- childNodesにはテキストノードやコメントノードなどの非要素ノードを含むすべての子ノードが含まれます。要素のみのコレクションを取得するには、代わりに{{domxref("ParentNode.children")}} を使用してください。

- -

仕様

- -

目的:
前提条件:	基本的なコンピューターの知識および利用能力、HTML と CSS の基本的な理解、JavaScript の基本 (第一歩、構成要素, JavaScriptオブジェクト).	基本的なコンピューターの知識および利用能力、HTML と CSS の基本的な理解、JavaScript の基本 (第一歩、構成要素, JavaScript オブジェクト).

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

仕様	ステータス	コメント
{{SpecName('DOM WHATWG', '#dom-node-childnodes', 'Node.childNodes')}}	{{Spec2('DOM WHATWG')}}	変更なし
{{SpecName('DOM3 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}	{{Spec2('DOM3 Core')}}	変更なし
{{SpecName('DOM2 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}	{{Spec2('DOM2 Core')}}	変更なし
{{SpecName('DOM1', 'level-one-core.html#ID-1451460987', 'Node.childNodes')}}	{{Spec2('DOM1')}}	初回定義

- -

ブラウザの互換性

- -

構文

+ +

let nodeList = elementNodeReference.childNodes;
+

+ +

例

+ +

簡単な使用方法

+ +

// 変数pargは<p>要素へのオブジェクト参照です
+
+// まず、pargが子ノードを持っているかをチェックします
+if (parg.hasChildNodes()) {
+  var children = parg.childNodes;
+
+  for (let i = 0; i < children.length; i++) {
+    // for文を使って各ノードにchildren[i]としてアクセスします
+    // 注意！ NodeListは不変ではないので、ノードを追加したり削除したりするとchildren.lengthは変化します
+  }
+}

+ +

ノードから全ての子を削除する

+ +

// これは一例ですが、この方法でノードからすべての子ノードを削除することができます
+// let box = document.getElementById(/**/);
+
+while (box.firstChild) {
+    // NodeListは不変ではないので、毎処理ごとにbox.firstChildは変化します
+    box.removeChild(box.firstChild);
+}

+ +

注記

+ +

ノードのコレクション内の項目はオブジェクトであり、文字列ではありません。node オブジェクトからデータを取得するには、そのプロパティ (たとえばelementNodeReference.childNodes[1].nodeName で名前を取得) を使用します。
+
+ documentオブジェクト自体には Doctype 宣言と root 要素の2つの子があり、通常はdocumentElementと呼ばれます。（(X)HTML文書ではこれがHTML要素です）
+
+ childNodesにはテキストノードやコメントノードなどの非要素ノードを含むすべての子ノードが含まれます。要素のみのコレクションを取得するには、代わりに{{domxref("ParentNode.children")}} を使用してください。

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

仕様	ステータス	コメント
{{SpecName('DOM WHATWG', '#dom-node-childnodes', 'Node.childNodes')}}	{{Spec2('DOM WHATWG')}}	変更なし
{{SpecName('DOM3 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}	{{Spec2('DOM3 Core')}}	変更なし
{{SpecName('DOM2 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}	{{Spec2('DOM2 Core')}}	変更なし
{{SpecName('DOM1', 'level-one-core.html#ID-1451460987', 'Node.childNodes')}}	{{Spec2('DOM1')}}	初回定義

+ +

ブラウザの互換性

+ +

概要

ノードのツリーの中で最初の子ノード、もしくは子ノードがなければ null を返します。ノードが Document の場合は、その直接の子のリスト内の最初のノードを返します。

構文

var childNode = node.firstChild;
-

childNode : node の最初の子ノードがあればその参照、無い場合は null

例

次の例では firstChild の使用方法と、このプロパティを使用すると空白ノードがどのように影響するかをデモンストレーションしています。Gecko DOM に於ける空白の扱われ方についてより多くの情報を得るために、{{Anch("Notes")}} も参照してください。

<p id="para-01">
-  <span>First span</span>
-</p>
-
-<script type="text/javascript">
-  var p01 = document.getElementById('para-01');
-  alert(p01.firstChild.nodeName)
-</script>

上記の例では alert は'#text'を表示します。なぜなら開始タグ の末端と の間にある空白を調整するためにテキストノードが挿入されているからです。どんな 空白、単一スペースから多数のスペース、改行、タブ等々、も #text ノードを挿入することになります。

その他の #text ノードは閉じタグ と の間に挿入されていみます。

もしこの空白がソースから取り除かれれば、#text ノードは挿入されず、span 要素は段落の最初の子ノードとなります。

<p id="para-01"><span>First span</span></p>
-
-<script type="text/javascript">
-  var p01 = document.getElementById('para-01');
-  alert(p01.firstChild.nodeName)
-</script>
-

今度は alert は 'SPAN' を表示するでしょう。

仕様書

diff --git a/files/ja/web/api/node/firstchild/index.md b/files/ja/web/api/node/firstchild/index.md new file mode 100644 index 0000000000..5a57be3ae9 --- /dev/null +++ b/files/ja/web/api/node/firstchild/index.md @@ -0,0 +1,46 @@ +--- +title: Node.firstChild +slug: Web/API/Node/firstChild +tags: + - DOM + - Gecko + - Gecko DOM Reference + - Node +translation_of: Web/API/Node/firstChild +--- +

+ {{ApiRef}}

概要

構文

var childNode = node.firstChild;
+

childNode : node の最初の子ノードがあればその参照、無い場合は null

例

<p id="para-01">
+  <span>First span</span>
+</p>
+
+<script type="text/javascript">
+  var p01 = document.getElementById('para-01');
+  alert(p01.firstChild.nodeName)
+</script>

その他の #text ノードは閉じタグ と の間に挿入されていみます。

もしこの空白がソースから取り除かれれば、#text ノードは挿入されず、span 要素は段落の最初の子ノードとなります。

<p id="para-01"><span>First span</span></p>
+
+<script type="text/javascript">
+  var p01 = document.getElementById('para-01');
+  alert(p01.firstChild.nodeName)
+</script>
+

今度は alert は 'SPAN' を表示するでしょう。

仕様書

diff --git a/files/ja/web/api/node/lastchild/index.html b/files/ja/web/api/node/lastchild/index.html deleted file mode 100644 index e7f5626f3c..0000000000 --- a/files/ja/web/api/node/lastchild/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Node.lastChild -slug: Web/API/Node/lastChild -tags: - - DOM - - Gecko - - Gecko DOM Reference - - Node -translation_of: Web/API/Node/lastChild ---- -

- {{ApiRef}}

概要

lastChild はノードの子要素の内、最後のものを返します。

構文

var last_child = element.lastChild
-

説明

lastChild として返されるのはノードです。その親が要素であるならば、子ノードは一般的に Element ノード、Text ノード、Comment ノードとなります。子要素を持たない場合は null が返されます。

例

var tr = document.getElementById("row1");  // table 要素の特定の行を取得
-var corner_td = tr.lastChild;  // 特定の行の内、最後のセルを取得
-

仕様書

{{Spec("http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-61AD09FB", "DOM Level 2: lastChild", "REC")}}
{{Spec("http://dom.spec.whatwg.org/#dom-node-lastchild", "DOM Standard: lastChild")}}

diff --git a/files/ja/web/api/node/lastchild/index.md b/files/ja/web/api/node/lastchild/index.md new file mode 100644 index 0000000000..e7f5626f3c --- /dev/null +++ b/files/ja/web/api/node/lastchild/index.md @@ -0,0 +1,28 @@ +--- +title: Node.lastChild +slug: Web/API/Node/lastChild +tags: + - DOM + - Gecko + - Gecko DOM Reference + - Node +translation_of: Web/API/Node/lastChild +--- +

+ {{ApiRef}}

概要

lastChild はノードの子要素の内、最後のものを返します。

構文

var last_child = element.lastChild
+

説明

例

var tr = document.getElementById("row1");  // table 要素の特定の行を取得
+var corner_td = tr.lastChild;  // 特定の行の内、最後のセルを取得
+

仕様書

{{Spec("http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-61AD09FB", "DOM Level 2: lastChild", "REC")}}
{{Spec("http://dom.spec.whatwg.org/#dom-node-lastchild", "DOM Standard: lastChild")}}

diff --git a/files/ja/web/api/node/nextsibling/index.html b/files/ja/web/api/node/nextsibling/index.html deleted file mode 100644 index 1ff4c13cef..0000000000 --- a/files/ja/web/api/node/nextsibling/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Node.nextSibling -slug: Web/API/Node/nextSibling -tags: - - DOM - - Gecko - - Node - - 要更新 -translation_of: Web/API/Node/nextSibling ---- -

- -

Node.nextSibling という読み取り専用プロパティは指定したノードの親の{{domxref("Node.childNodes","子ノード")}}リスト内ですぐ次にあるノードを返し、指定したノードがリストで最後の場合は null を返します。

- -

構文

- -

nextNode = node.nextSibling
-

- -

注記

- -

Geckoベースのブラウザーはソースマークアップの中で空白を表現するためにテキストノードをドキュメントに挿入します。ですので、例えば Node.firstChild や Node.previousSibling で得られるノードが、作者が取得しようとした実際の要素ではなく、空白のテキストノードを参照していることがあります。

より多くの情報を得るには『DOM 中の空白文字』と『W3C DOM 3 FAQ: Why are some Text nodes empty?』を参照してください。

- -

{{domxref("Element.nextElementSibling")}} は空白ノードを飛ばして次の要素を得るのに使われます。

- -

例

- -

<div id="div-01">Here is div-01</div>
-<div id="div-02">Here is div-02</div>
-
-<script type="text/javascript">
-var el = document.getElementById('div-01').nextSibling,
-    i = 1;
-
-console.log('Siblings of div-01:');
-
-while (el) {
-  console.log(i + '. ' + el.nodeName);
-  el = el.nextSibling;
-  i++;
-}
-
-</script>
-
-/**************************************************
-  The following is written to the console as it loads:
-
-     Siblings of div-01
-
-      1. #text
-      2. DIV
-      3. #text
-      4. SCRIPT
-
-**************************************************/

- -

上の例で、#text ノードがタグ間のマークアップ内に (つまり、要素の閉じタグと次の開始タグの間) 空白がある DOM に挿入されているのが見られます。 document.write 文で挿入された要素の間には空白が作成されません。

- -

DOM にテキストノードが入りうるのは DOM が nextSibling を使って横断される時に許可されます。注記のセクションのリソースを見てください。

- -

仕様

- -

ブラウザ実装状況

- - - -

- -

構文

+ +

nextNode = node.nextSibling
+

+ +

注記

+ +

より多くの情報を得るには『DOM 中の空白文字』と『W3C DOM 3 FAQ: Why are some Text nodes empty?』を参照してください。

+ +

{{domxref("Element.nextElementSibling")}} は空白ノードを飛ばして次の要素を得るのに使われます。

+ +

例

+ +

<div id="div-01">Here is div-01</div>
+<div id="div-02">Here is div-02</div>
+
+<script type="text/javascript">
+var el = document.getElementById('div-01').nextSibling,
+    i = 1;
+
+console.log('Siblings of div-01:');
+
+while (el) {
+  console.log(i + '. ' + el.nodeName);
+  el = el.nextSibling;
+  i++;
+}
+
+</script>
+
+/**************************************************
+  The following is written to the console as it loads:
+
+     Siblings of div-01
+
+      1. #text
+      2. DIV
+      3. #text
+      4. SCRIPT
+
+**************************************************/

+ +

DOM にテキストノードが入りうるのは DOM が nextSibling を使って横断される時に許可されます。注記のセクションのリソースを見てください。

+ +

仕様

+ +

ブラウザ実装状況

+ + + +

+ +

構文

str = node.nodeName;
-

str には指定した要素の名前が文字列の形式で入ります。
nodeName は読み取り専用の属性です。

注記

以下の異なる種類のノードの戻り値があります。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Interface	nodeName
Attr	`Attr.name` と同じ
CDATASection	"#cdata-section"
Comment	"#comment"
Document	"#document"
DocumentFragment	"#document-fragment"
DocumentType	`DocumentType.name` と同じ
Element	`Element.tagName` と同じ
Entity	実体名
EntityReference	実体参照名
Notation	記法名
ProcessingInstruction	`ProcessingInstruction.target` と同じ
Text	"#text"

例

次のマークアップ文書が与えられているとします。

<div id="d1">hello world</div>
-<input type="text" id="t"/>
-

そして、以下のスクリプトがあると考えてください。

var div1 = document.getElementById("d1");
-var text_field = document.getElementById("t");
-
-text_field.value = div1.nodeName;
-

XHTML (あるいは、他の XML 形式) の場合 text_field の値には "div" が入ります。しかし、HTML の場合 text_field の値には "DIV" が入ります。

注意: tagName プロパティが使用された場合、nodeName は tagName と同じ値になります。tagName が未定義 (undefined) の時 nodeName はテキストノードである #text を返します。

仕様

diff --git a/files/ja/web/api/node/nodename/index.md b/files/ja/web/api/node/nodename/index.md new file mode 100644 index 0000000000..65daeb1074 --- /dev/null +++ b/files/ja/web/api/node/nodename/index.md @@ -0,0 +1,102 @@ +--- +title: Node.nodeName +slug: Web/API/Node/nodeName +tags: + - DOM + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Node/nodeName +--- +

+ {{APIRef}}

+ 概要

ノードの名前を文字列で返します。

構文

str = node.nodeName;
+

str には指定した要素の名前が文字列の形式で入ります。
nodeName は読み取り専用の属性です。

注記

以下の異なる種類のノードの戻り値があります。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Interface	nodeName
Attr	`Attr.name` と同じ
CDATASection	"#cdata-section"
Comment	"#comment"
Document	"#document"
DocumentFragment	"#document-fragment"
DocumentType	`DocumentType.name` と同じ
Element	`Element.tagName` と同じ
Entity	実体名
EntityReference	実体参照名
Notation	記法名
ProcessingInstruction	`ProcessingInstruction.target` と同じ
Text	"#text"

例

次のマークアップ文書が与えられているとします。

<div id="d1">hello world</div>
+<input type="text" id="t"/>
+

そして、以下のスクリプトがあると考えてください。

var div1 = document.getElementById("d1");
+var text_field = document.getElementById("t");
+
+text_field.value = div1.nodeName;
+

XHTML (あるいは、他の XML 形式) の場合 text_field の値には "div" が入ります。しかし、HTML の場合 text_field の値には "DIV" が入ります。

仕様

diff --git a/files/ja/web/api/node/nodetype/index.html b/files/ja/web/api/node/nodetype/index.html deleted file mode 100644 index 135f0f95c7..0000000000 --- a/files/ja/web/api/node/nodetype/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Node.nodeType -slug: Web/API/Node/nodeType -tags: - - DOM - - Gecko - - Gecko DOM Reference -translation_of: Web/API/Node/nodeType ---- -

- {{ApiRef}}

概要

ノードの種類を表す整数のコードを返します。

構文

var type = node.nodeType;
-

type は以下の内の何れかの unsigned short 型の値となります。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称	値
`ELEMENT_NODE`	1
`ATTRIBUTE_NODE` {{deprecated_inline}}	2
`TEXT_NODE`	3
`CDATA_SECTION_NODE` {{deprecated_inline}}	4
`ENTITY_REFERENCE_NODE` {{deprecated_inline}}	5
`ENTITY_NODE` {{deprecated_inline}}	6
`PROCESSING_INSTRUCTION_NODE`	7
`COMMENT_NODE`	8
`DOCUMENT_NODE`	9
`DOCUMENT_TYPE_NODE`	10
`DOCUMENT_FRAGMENT_NODE`	11
`NOTATION_NODE` {{deprecated_inline}}	12

例

次の例は、ノードの最初の要素がコメントノードであるかをチェックし、そうでない場合にメッセージを表示するものです。

var node = document.documentElement.firstChild;
-
-if (node.nodeType != Node.COMMENT_NODE)
-  console.log("※社内コーディングルールに沿ったコメントを記述して下さい。");
-

仕様書

diff --git a/files/ja/web/api/node/nodetype/index.md b/files/ja/web/api/node/nodetype/index.md new file mode 100644 index 0000000000..135f0f95c7 --- /dev/null +++ b/files/ja/web/api/node/nodetype/index.md @@ -0,0 +1,88 @@ +--- +title: Node.nodeType +slug: Web/API/Node/nodeType +tags: + - DOM + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Node/nodeType +--- +

+ {{ApiRef}}

概要

ノードの種類を表す整数のコードを返します。

構文

var type = node.nodeType;
+

type は以下の内の何れかの unsigned short 型の値となります。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称	値
`ELEMENT_NODE`	1
`ATTRIBUTE_NODE` {{deprecated_inline}}	2
`TEXT_NODE`	3
`CDATA_SECTION_NODE` {{deprecated_inline}}	4
`ENTITY_REFERENCE_NODE` {{deprecated_inline}}	5
`ENTITY_NODE` {{deprecated_inline}}	6
`PROCESSING_INSTRUCTION_NODE`	7
`COMMENT_NODE`	8
`DOCUMENT_NODE`	9
`DOCUMENT_TYPE_NODE`	10
`DOCUMENT_FRAGMENT_NODE`	11
`NOTATION_NODE` {{deprecated_inline}}	12

例

次の例は、ノードの最初の要素がコメントノードであるかをチェックし、そうでない場合にメッセージを表示するものです。

var node = document.documentElement.firstChild;
+
+if (node.nodeType != Node.COMMENT_NODE)
+  console.log("※社内コーディングルールに沿ったコメントを記述して下さい。");
+

仕様書

diff --git a/files/ja/web/api/node/nodevalue/index.html b/files/ja/web/api/node/nodevalue/index.html deleted file mode 100644 index 2cfbbf795f..0000000000 --- a/files/ja/web/api/node/nodevalue/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Node.nodeValue -slug: Web/API/Node/nodeValue -tags: - - DOM - - Gecko - - Gecko DOM Reference - - Node -translation_of: Web/API/Node/nodeValue ---- -

- {{ApiRef}}

概要

ノードの値を取得または設定します。

構文

value = node.nodeValue

node.nodeValue が存在する場合、 value はノードの値を含む文字列です。

注記

document 自身は、 nodeValue は nullを返します。text

ノード、 comment ノード、CDATA ノードでは、 nodeValue はノードの中身を返します。 attribute ノードは属性値を返します。

以下の表は、様々なノードの戻り値を表しています。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Attr	attribute の値
CDATASection	CDATA Sectionの中身
コメント	commentの中身
Document	null
DocumentFragment	null
DocumentType	null
Element	null
NamedNodeMap	null
EntityReference	null
Notation	null
ProcessingInstruction	ターゲットを除く全体の内容
Text	the text nodeの中身

nodeValue が null と定義されている場合、値を設定しても効果はありません。

仕様書

DOM Level 2 Core: Node.nodeValue

diff --git a/files/ja/web/api/node/nodevalue/index.md b/files/ja/web/api/node/nodevalue/index.md new file mode 100644 index 0000000000..2cfbbf795f --- /dev/null +++ b/files/ja/web/api/node/nodevalue/index.md @@ -0,0 +1,81 @@ +--- +title: Node.nodeValue +slug: Web/API/Node/nodeValue +tags: + - DOM + - Gecko + - Gecko DOM Reference + - Node +translation_of: Web/API/Node/nodeValue +--- +

+ {{ApiRef}}

概要

ノードの値を取得または設定します。

構文

value = node.nodeValue

node.nodeValue が存在する場合、 value はノードの値を含む文字列です。

注記

document 自身は、 nodeValue は nullを返します。text

ノード、 comment ノード、CDATA ノードでは、 nodeValue はノードの中身を返します。 attribute ノードは属性値を返します。

以下の表は、様々なノードの戻り値を表しています。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Attr	attribute の値
CDATASection	CDATA Sectionの中身
コメント	commentの中身
Document	null
DocumentFragment	null
DocumentType	null
Element	null
NamedNodeMap	null
EntityReference	null
Notation	null
ProcessingInstruction	ターゲットを除く全体の内容
Text	the text nodeの中身

nodeValue が null と定義されている場合、値を設定しても効果はありません。

仕様書

DOM Level 2 Core: Node.nodeValue

diff --git a/files/ja/web/api/node/ownerdocument/index.html b/files/ja/web/api/node/ownerdocument/index.html deleted file mode 100644 index f6eef4f570..0000000000 --- a/files/ja/web/api/node/ownerdocument/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Node.ownerDocument -slug: Web/API/Node/ownerDocument -tags: - - DOM - - Gecko - - Node -translation_of: Web/API/Node/ownerDocument ---- -

- -

概要

- -

ownerDocument プロパティは、指定ノードを内包するノードツリーのトップレベルのドキュメントオブジェクトを返します。

- -

構文

- -

document = element.ownerDocument
-

- -

document : 指定要素の祖先である {{domxref("document")}} オブジェクト

- -

例

- -

var doc = p.ownerDocument; // ノード p のノードツリー上のトップレベル document オブジェクトを取得
-var html = doc.documentElement; // owner のドキュメント要素を取得
-
-alert(html); // [object HTMLHtmlElement]
-

- -

注記

- -

このプロパティによって返される document オブジェクトは、実際の HTML 文書中ですべての子ノードの属するメインオブジェクトです。document ノード自身に対しこのプロパティを用いた場合、戻り値は null となります。

- -

仕様

- - - - - - - - - - - - - - - - - - - - - - - - -

Specification	Status	Comment
{{SpecName("DOM4", "#dom-node-ownerdocument", "Node.ownerDocument")}}	{{Spec2("DOM4")}}
{{SpecName("DOM3 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}	{{Spec2("DOM3 Core")}}	No change
{{SpecName("DOM2 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}	{{Spec2("DOM2 Core")}}	Initial definition

- -

ブラウザ実装状況

- -

diff --git a/files/ja/web/api/node/ownerdocument/index.md b/files/ja/web/api/node/ownerdocument/index.md new file mode 100644 index 0000000000..f6eef4f570 --- /dev/null +++ b/files/ja/web/api/node/ownerdocument/index.md @@ -0,0 +1,66 @@ +--- +title: Node.ownerDocument +slug: Web/API/Node/ownerDocument +tags: + - DOM + - Gecko + - Node +translation_of: Web/API/Node/ownerDocument +--- +

+ +

概要

+ +

ownerDocument プロパティは、指定ノードを内包するノードツリーのトップレベルのドキュメントオブジェクトを返します。

+ +

構文

+ +

document = element.ownerDocument
+

+ +

document : 指定要素の祖先である {{domxref("document")}} オブジェクト

+ +

例

+ +

var doc = p.ownerDocument; // ノード p のノードツリー上のトップレベル document オブジェクトを取得
+var html = doc.documentElement; // owner のドキュメント要素を取得
+
+alert(html); // [object HTMLHtmlElement]
+

+ +

注記

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + + + + +

Specification	Status	Comment
{{SpecName("DOM4", "#dom-node-ownerdocument", "Node.ownerDocument")}}	{{Spec2("DOM4")}}
{{SpecName("DOM3 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}	{{Spec2("DOM3 Core")}}	No change
{{SpecName("DOM2 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}	{{Spec2("DOM2 Core")}}	Initial definition

+ +

ブラウザ実装状況

+ +

diff --git a/files/ja/web/api/node/parentelement/index.html b/files/ja/web/api/node/parentelement/index.html deleted file mode 100644 index e121601c07..0000000000 --- a/files/ja/web/api/node/parentelement/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Node.parentElement -slug: Web/API/Node/parentElement -tags: - - DOM - - Element - - Node - - Property - - parent -translation_of: Web/API/Node/parentElement ---- -

- -

Node.parentElementのread-only プロパティはDOM ノード上の親の {{domxref("Element")}} を返します。親ノードが存在しない場合や親ノードが DOM {{domxref("Element")}} で無い場合、null が返ります。

- -

構文

- -

parentElement = node.parentElement

- -

parentElementは現nodeの親elementです。型は必ずDOM {{domxref("Element")}} オブジェクトかnullです。

- -

例

- -

if (node.parentElement) {
-  node.parentElement.style.color = "red";
-}

- -

仕様

- -

{{spec("http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#parent-element", "DOM Level 4: Node.parentElement", "WD")}}

- -

ブラウザ実装状況

- -

一部のブラウザーでは、parentElementプロパティは {{domxref("Element")}} ノードでのみ定義されており、特にテキストノードに対して定義されていない場合がある点に注意して下さい。

- -

構文

+ +

parentElement = node.parentElement

+ +

parentElementは現nodeの親elementです。型は必ずDOM {{domxref("Element")}} オブジェクトかnullです。

+ +

例

+ +

if (node.parentElement) {
+  node.parentElement.style.color = "red";
+}

+ +

仕様

+ +

{{spec("http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#parent-element", "DOM Level 4: Node.parentElement", "WD")}}

+ +

ブラウザ実装状況

+ +

概要

指定されたノードの DOM ツリー内の親ノードを返します。

構文

parentNode = node.parentNode
-

parentNode : 指定ノードの親ノード。要素の親ノードは、Element ノード、Document ノード、または DocumentFragment になります。

例

if (node.parentNode) {
-  // ツリー上に既に存在しない場合を除き、
-  // ツリーからノードを削除します。
-  node.parentNode.removeChild(node);
-}

注記

parentNode は、以下のノードタイプについては null を返します : Attr 、Document 、DocumentFragment 、Entity 、Notation

また、ノードが作成された直後でまだツリーに加えられていない場合も null を返します。

ブラウザ実装状況

- -

仕様書

概要

指定されたノードの DOM ツリー内の親ノードを返します。

構文

parentNode = node.parentNode
+

parentNode : 指定ノードの親ノード。要素の親ノードは、Element ノード、Document ノード、または DocumentFragment になります。

例

if (node.parentNode) {
+  // ツリー上に既に存在しない場合を除き、
+  // ツリーからノードを削除します。
+  node.parentNode.removeChild(node);
+}

注記

parentNode は、以下のノードタイプについては null を返します : Attr 、Document 、DocumentFragment 、Entity 、Notation

また、ノードが作成された直後でまだツリーに加えられていない場合も null を返します。

ブラウザ実装状況

+ +

仕様書

概要

- -

指定のノードの親ノードの childNodes リストの中で直前のノードを返します。また、指定のノードがそのリストの中で先頭の場合は null を返します。

- -

構文

- -

previousNode = node.previousSibling;
-

- -

例

- -

// <a><b1 id="b1"/><b2 id="b2"/></a>
-
-alert( document.getElementById("b1").previousSibling ); // null
-alert( document.getElementById("b2").previousSibling.id ); // "b1"
-

- -

注記

- -

より多くの情報を得るには『DOM 中の空白文字』と『W3C DOM 3 FAQ: Why are some Text nodes empty?』を参照してください。

- -

childNode リスト内の、指定ノードの次のノードの取得には {{domxref("Node.nextSibling")}} を用います。

- -

仕様書

- -

diff --git a/files/ja/web/api/node/previoussibling/index.md b/files/ja/web/api/node/previoussibling/index.md new file mode 100644 index 0000000000..5506f5fd86 --- /dev/null +++ b/files/ja/web/api/node/previoussibling/index.md @@ -0,0 +1,42 @@ +--- +title: Node.previousSibling +slug: Web/API/Node/previousSibling +tags: + - DOM + - Gecko + - Node +translation_of: Web/API/Node/previousSibling +--- +

+ +

概要

+ +

構文

+ +

previousNode = node.previousSibling;
+

+ +

例

+ +

// <a><b1 id="b1"/><b2 id="b2"/></a>
+
+alert( document.getElementById("b1").previousSibling ); // null
+alert( document.getElementById("b2").previousSibling.id ); // "b1"
+

+ +

注記

+ +

より多くの情報を得るには『DOM 中の空白文字』と『W3C DOM 3 FAQ: Why are some Text nodes empty?』を参照してください。

+ +

childNode リスト内の、指定ノードの次のノードの取得には {{domxref("Node.nextSibling")}} を用います。

+ +

仕様書

+ +

diff --git a/files/ja/web/api/node/textcontent/index.html b/files/ja/web/api/node/textcontent/index.html deleted file mode 100644 index 3f90221d9f..0000000000 --- a/files/ja/web/api/node/textcontent/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: Node.textContent -slug: Web/API/Node/textContent -tags: - - API - - DOM - - Node - - Property - - Reference - - プロパティ -translation_of: Web/API/Node/textContent ---- -

- -

textContent は {{domxref ("Node")}} のプロパティで、ノードおよびその子孫のテキストの内容を表します。

- -

メモ: textContent と {{domxref("HTMLElement.innerText")}} は混同しやすいものですが、2つのプロパティは重要な点が異なります。

- -

構文

- -

let text = someNode.textContent
-someOtherNode.textContent = string
-

- -

値

- -

文字列または {{jsxref("null")}}

- -

説明

- -

textContent の値は状況によります。

- -

ノードが {{domxref("document")}} または {{glossary("Doctype")}} である場合、 textContent は {{jsxref("null")}} を返します。 - -
メモ: 文書全体のすべてのテキストと CDATA データを取得するには、 document.documentElement.textContent を使用する方法があります。
-
ノードが CDATA セクション、コメント、処理命令ノード、テキストノードの場合、 textContent はそのノードの内側のテキスト、すなわち {{domxref("Node.nodeValue")}} を返します。
他のノードタイプの場合、textContent は、コメントと処理命令ノードを除く、すべての子ノードの textContent 属性値を連結したものを返します。 (ノードが子を持たない場合、これは空文字列になります。)

- -

ノードの textContent を設定すると、そのノードのすべての子が取り除かれて、指定された値をもつ単一のテキストノードに置き換わります。

- -

innerText との違い

- -

Node.textContent と {{domxref("HTMLElement.innerText")}} の間の違いに混乱しないでください。名前は似ているようですが、重要な違いがあります。

- -

textContent は、 {{HTMLElement("script")}} と {{HTMLElement("style")}} 要素を含む、すべての要素の内容を取得します。一方、 innerText は「人間が読める」要素のみを示します。
textContent はノード内のすべての要素を返します。一方、 innerText はスタイルを反映し、「非表示」の要素のテキストを返しません。 -
- もっと言えば、 innerText は CSS のスタイルを考慮するので、 innerText の値を読み取ると最新の計算されたスタイルを保証するために {{glossary("Reflow", "再フロー")}} を起動します。 (再フローは計算が重いので、可能であれば避けるべきです。)
-
textContent とは異なり、 innerText を Internet Explorer (バージョン 11 まで) で変更すると、要素から子ノードを削除するだけでなく、子孫のテキストノードを完全に破棄します。他の要素または同じ要素にノードをもう一度挿入することは不可能です。

- -

innerHTML との違い

- -

{{domxref("Element.innerHTML")}} は、その名が示すとおり HTML を返します。時に、 innerHTML を使用して要素内のテキストを受け取ったり書き込んだりすることがありますが、 textContent は値が HTML として解析されないので性能が良くなります。

- -

さらに、textContent を使用することで {{glossary("Cross-site_scripting", "XSS 攻撃")}}を防ぐことができます。

- -

例

- -

以下のような HTML の断片があります。

- -

<div id="divA">This is <span>some</span> text!</div>

- -

... textContent を使用して、要素のテキストの内容を取得することができます。

- -

let text = document.getElementById('divA').textContent;
-// 変数 text の値は 'This is some text!' となります。

- -

... また、要素のテキストを設定します。

- -

document.getElementById('divA').textContent = 'This text is different!';
-// divA の HTML は次のようになります。
-// <div id="divA">This text is different!</div>
-

- -

仕様書

- - - - - - - - - - - - - - - - -

仕様書	状態	備考
{{SpecName('DOM WHATWG','#dom-node-textcontent','Node.textContent')}}	{{Spec2('DOM WHATWG')}}

- -

ブラウザーの互換性

- -

構文

+ +

let text = someNode.textContent
+someOtherNode.textContent = string
+

+ +

値

+ +

文字列または {{jsxref("null")}}

+ +

説明

+ +

textContent の値は状況によります。

+ +

ノードが {{domxref("document")}} または {{glossary("Doctype")}} である場合、 textContent は {{jsxref("null")}} を返します。 + +
メモ: 文書全体のすべてのテキストと CDATA データを取得するには、 document.documentElement.textContent を使用する方法があります。
+
ノードが CDATA セクション、コメント、処理命令ノード、テキストノードの場合、 textContent はそのノードの内側のテキスト、すなわち {{domxref("Node.nodeValue")}} を返します。
他のノードタイプの場合、textContent は、コメントと処理命令ノードを除く、すべての子ノードの textContent 属性値を連結したものを返します。 (ノードが子を持たない場合、これは空文字列になります。)

+ +

ノードの textContent を設定すると、そのノードのすべての子が取り除かれて、指定された値をもつ単一のテキストノードに置き換わります。

+ +

innerText との違い

+ +

Node.textContent と {{domxref("HTMLElement.innerText")}} の間の違いに混乱しないでください。名前は似ているようですが、重要な違いがあります。

+ +

textContent は、 {{HTMLElement("script")}} と {{HTMLElement("style")}} 要素を含む、すべての要素の内容を取得します。一方、 innerText は「人間が読める」要素のみを示します。
textContent はノード内のすべての要素を返します。一方、 innerText はスタイルを反映し、「非表示」の要素のテキストを返しません。 +
- もっと言えば、 innerText は CSS のスタイルを考慮するので、 innerText の値を読み取ると最新の計算されたスタイルを保証するために {{glossary("Reflow", "再フロー")}} を起動します。 (再フローは計算が重いので、可能であれば避けるべきです。)
+
textContent とは異なり、 innerText を Internet Explorer (バージョン 11 まで) で変更すると、要素から子ノードを削除するだけでなく、子孫のテキストノードを完全に破棄します。他の要素または同じ要素にノードをもう一度挿入することは不可能です。

+ +

innerHTML との違い

+ +

さらに、textContent を使用することで {{glossary("Cross-site_scripting", "XSS 攻撃")}}を防ぐことができます。

+ +

例

+ +

以下のような HTML の断片があります。

+ +

<div id="divA">This is <span>some</span> text!</div>

+ +

... textContent を使用して、要素のテキストの内容を取得することができます。

+ +

let text = document.getElementById('divA').textContent;
+// 変数 text の値は 'This is some text!' となります。

+ +

... また、要素のテキストを設定します。

+ +

document.getElementById('divA').textContent = 'This text is different!';
+// divA の HTML は次のようになります。
+// <div id="divA">This text is different!</div>
+

+ +

仕様書

+ + + + + + + + + + + + + + + + +

仕様書	状態	備考
{{SpecName('DOM WHATWG','#dom-node-textcontent','Node.textContent')}}	{{Spec2('DOM WHATWG')}}

+ +

ブラウザーの互換性

+ +

構文

str = node.nodeName;
-

str には指定した要素の名前が文字列の形式で入ります。
nodeName は読み取り専用の属性です。

注記

以下の異なる種類のノードの戻り値があります。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Interface	nodeName
Attr	`Attr.name` と同じ
CDATASection	"#cdata-section"
Comment	"#comment"
Document	"#document"
DocumentFragment	"#document-fragment"
DocumentType	`DocumentType.name` と同じ
Element	`Element.tagName` と同じ
Entity	実体名
EntityReference	実体参照名
Notation	記法名
ProcessingInstruction	`ProcessingInstruction.target` と同じ
Text	"#text"

例

次のマークアップ文書が与えられているとします。

<div id="d1">hello world</div>
-<input type="text" id="t"/>
-

そして、以下のスクリプトがあると考えてください。

var div1 = document.getElementById("d1");
-var text_field = document.getElementById("t");
-
-text_field.value = div1.nodeName;
-

XHTML (あるいは、他の XML 形式) の場合 text_field の値には "div" が入ります。しかし、HTML の場合 text_field の値には "DIV" が入ります。

仕様

+{{APIRef("DOM")}} + +**`nodeName`** は {{domxref("Node")}} の読み取り専用プロパティで、現在のノードの名前を文字列で返します。 + +## 値 + +文字列です。ノードの種類によって、次のような値になります。 + +- {{domxref("Attr")}} + - : {{domxref("Attr.name")}} の値で、この属性の*修飾名*です。 +- {{domxref("CDATASection")}} + - : `"#cdata-section"` という文字列です。 +- {{domxref("Comment")}} + - : `"#comment"` という文字列です。 +- {{domxref("Document")}} + - : `"#document"` という文字列です。 +- {{domxref("DocumentFragment")}} + - : `"#document-fragment"` という文字列です。 +- {{domxref("DocumentType")}} + - : {{domxref("DocumentType.name")}} の値です。 +- {{domxref("Element")}} + - : {{domxref("Element.tagName")}} の値です。これは HTML 要素であればその要素のタグの*大文字の*名前であり、 XML 要素（SVG や MathML の要素）であればその要素のタグの*小文字の*名前です。 +- {{domxref("ProcessingInstruction")}} + - : {{domxref("ProcessingInstruction.target")}} の値です。 +- {{domxref("Text")}} + - : `"#text"` という文字列です。 + +## 例 + +この例では、様々なノードのノード名を表示します。 + +```html +こちらは HTML です。 +

Hello world

+ +テキストテキスト +テキスト
+ +

+まだ出力されていません。 +``` + +また、スクリプトは以下の通りです。 + +```js +let node = document.getElementsByTagName("body")[0].firstChild; +let result = "ノード名:
"; +while (node) { + result += node.nodeName + "
"; + node = node.nextSibling +} + +const output = document.getElementById("result"); +output.innerHTML = result; +``` + +{{ EmbedLiveSample("Example", "100%", "450")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Element.tagName")}} +- {{domxref("Attr.name")}} +- {{domxref("DocumentType.name")}} +- {{domxref("ProcessingInstruction.target")}} -- cgit v1.2.3-54-g00ecf From ed6203f957a5616efa135b87368715645b251444 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 26 Feb 2022 00:16:32 +0900 Subject: 2021/11/08 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/node/childnodes/index.md | 159 +++++++++++---------------- files/ja/web/api/node/firstchild/index.md | 103 ++++++++++------- files/ja/web/api/node/lastchild/index.md | 55 +++++---- files/ja/web/api/node/nextsibling/index.md | 107 ++++++++---------- files/ja/web/api/node/nodetype/index.md | 150 ++++++++++++------------- files/ja/web/api/node/nodevalue/index.md | 136 ++++++++++------------- files/ja/web/api/node/ownerdocument/index.md | 68 ++++-------- 7 files changed, 353 insertions(+), 425 deletions(-) (limited to 'files/ja') diff --git a/files/ja/web/api/node/childnodes/index.md b/files/ja/web/api/node/childnodes/index.md index 82a90460c6..0e07d3ecb3 100644 --- a/files/ja/web/api/node/childnodes/index.md +++ b/files/ja/web/api/node/childnodes/index.md @@ -2,100 +2,73 @@ title: Node.childNodes slug: Web/API/Node/childNodes tags: - - API - - DOM - - DOMリファレンス - プロパティ - リファレンス + - 読み取り専用 +browser-compat: api.Node.childNodes translation_of: Web/API/Node/childNodes --- -

- -

構文

- -

let nodeList = elementNodeReference.childNodes;
-

- -

例

- -

簡単な使用方法

- -

// 変数pargは<p>要素へのオブジェクト参照です
-
-// まず、pargが子ノードを持っているかをチェックします
-if (parg.hasChildNodes()) {
-  var children = parg.childNodes;
-
-  for (let i = 0; i < children.length; i++) {
-    // for文を使って各ノードにchildren[i]としてアクセスします
-    // 注意！ NodeListは不変ではないので、ノードを追加したり削除したりするとchildren.lengthは変化します
-  }
-}

- -

ノードから全ての子を削除する

- -

// これは一例ですが、この方法でノードからすべての子ノードを削除することができます
-// let box = document.getElementById(/**/);
-
-while (box.firstChild) {
-    // NodeListは不変ではないので、毎処理ごとにbox.firstChildは変化します
-    box.removeChild(box.firstChild);
-}

- -

注記

- -

仕様

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

仕様	ステータス	コメント
{{SpecName('DOM WHATWG', '#dom-node-childnodes', 'Node.childNodes')}}	{{Spec2('DOM WHATWG')}}	変更なし
{{SpecName('DOM3 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}	{{Spec2('DOM3 Core')}}	変更なし
{{SpecName('DOM2 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}	{{Spec2('DOM2 Core')}}	変更なし
{{SpecName('DOM1', 'level-one-core.html#ID-1451460987', 'Node.childNodes')}}	{{Spec2('DOM1')}}	初回定義

- -

ブラウザの互換性

- -

概要

構文

var childNode = node.firstChild;
-

childNode : node の最初の子ノードがあればその参照、無い場合は null

例

<p id="para-01">
-  <span>First span</span>
-</p>
-
-<script type="text/javascript">
-  var p01 = document.getElementById('para-01');
-  alert(p01.firstChild.nodeName)
-</script>

その他の #text ノードは閉じタグ と の間に挿入されていみます。

もしこの空白がソースから取り除かれれば、#text ノードは挿入されず、span 要素は段落の最初の子ノードとなります。

<p id="para-01"><span>First span</span></p>
-
-<script type="text/javascript">
-  var p01 = document.getElementById('para-01');
-  alert(p01.firstChild.nodeName)
-</script>
-

今度は alert は 'SPAN' を表示するでしょう。

仕様書

+{{APIRef("DOM")}} + +**`firstChild`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、ツリー内におけるこのノードの最初の子、またはこのノードに子がない場合は `null` を返します。 + +このノードが {{domxref("Document")}} であった場合は、このプロパティは直接のこのリスト内で最初のノードを返します。 + +> **Note:** このプロパティはこのノードの最初の子であれば、あらゆる種類のノードを返します。 +> {{domxref("Text")}} または {{domxref("Comment")}} ノードになることがあります。 +> 他の要素の子である最初の {{domxref("Element")}} を取得したい場合は、 {{domxref("Element.firstElementChild")}} を使用することを検討してください。 + +## 値 + +{{domxref("Node")}}、または存在しなければ `null`。 + +## 例 + +次の例では `firstChild` の使用方法と、このプロパティを使用すると空白ノードがどのように影響するかを示しています。 + +```html +

+ 最初の span +

+ + +``` + +上記の例では[コンソール](/ja/docs/Web/API/console)に '#text' と表示されます。開始タグ `

` の末尾と `` タグとの間にある空白を調整するためにテキストノードが挿入されているためです。**あらゆる**[ホワイトスペース](/ja/docs/Web/API/Document_Object_Model/Whitespace)は、単一の空白から複数のスペース、改行、タブに至るまで、 1 つの `#text` ノードを生成します。 + +`#text` ノードはもう 1 つ、閉じタグ `` と `

` の間に挿入されます。 + +ホワイトスペースをソースから取り除くと、 #text ノードは挿入されず、 span 要素がその段落の最初の子になります。 + +```html +

最初の span

+ + +``` + +コンソールには 'SPAN' と表示されるようになります。 + +`node.firstChild` が `#text` や `#comment` ノードを返す問題を回避するには、 {{domxref("Element.firstElementChild")}} を使用すると最初の要素ノードのみを返すことができます。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Element.firstElementChild")}} +- {{domxref("Node.lastChild")}} diff --git a/files/ja/web/api/node/lastchild/index.md b/files/ja/web/api/node/lastchild/index.md index e7f5626f3c..9e9d386274 100644 --- a/files/ja/web/api/node/lastchild/index.md +++ b/files/ja/web/api/node/lastchild/index.md @@ -2,27 +2,38 @@ title: Node.lastChild slug: Web/API/Node/lastChild tags: - - DOM - - Gecko - - Gecko DOM Reference - - Node + - プロパティ + - リファレンス + - 読み取り専用 +browser-compat: api.Node.lastChild translation_of: Web/API/Node/lastChild --- -

- {{ApiRef}}

概要

lastChild はノードの子要素の内、最後のものを返します。

構文

var last_child = element.lastChild
-

説明

例

var tr = document.getElementById("row1");  // table 要素の特定の行を取得
-var corner_td = tr.lastChild;  // 特定の行の内、最後のセルを取得
-

仕様書

{{Spec("http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-61AD09FB", "DOM Level 2: lastChild", "REC")}}
{{Spec("http://dom.spec.whatwg.org/#dom-node-lastchild", "DOM Standard: lastChild")}}

+{{APIRef("DOM")}} + +**`lastChild`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、このノードの最後の子ノードを返します。 +親ノードが要素であった場合、子ノードはふつう、要素ノード、テキストノード、コメントノードの何れかです。 +子要素がない場合は `null` を返します。 + +## Value + +このノードの最後の子である {{domxref("Node")}}、または子ノードがなければ `null` です。 + +## 例 + +```js +const tr = document.getElementById("row1"); +const corner_td = tr.lastChild; +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Node.firstChild")}} +- {{domxref("Element.lastElementChild")}} diff --git a/files/ja/web/api/node/nextsibling/index.md b/files/ja/web/api/node/nextsibling/index.md index 1ff4c13cef..f310d8e456 100644 --- a/files/ja/web/api/node/nextsibling/index.md +++ b/files/ja/web/api/node/nextsibling/index.md @@ -2,86 +2,65 @@ title: Node.nextSibling slug: Web/API/Node/nextSibling tags: - - DOM - - Gecko - - Node - - 要更新 + - プロパティ + - リファレンス + - 読み取り専用 +browser-compat: api.Node.nextSibling translation_of: Web/API/Node/nextSibling --- -

+{{APIRef("DOM")}} -

+**`nextSibling`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、指定されたノードの親の {{domxref("Node.childNodes","childNodes")}} の中で、そのすぐ次のノードを返します。または、指定されたノードが親要素の最後の子要素である場合は `null` を返します。 -

構文

+> **Note:** ブラウザーはソースのマークアップにあるホワイトスペースを表すために、文書に {{domxref("Text")}} ノードを挿入します。 +> そのため、例えば [`Node.firstChild`](/ja/docs/Web/API/Node/firstChild) や [`Node.previousSibling`](/ja/docs/Web/API/Node/previousSibling) を使用して得たノードが、取得しようとした実際のノードではなく、ホワイトスペースのテキストノードであることがあります。 +> +> [DOM でのホワイトスペース](/ja/docs/Web/API/Document_Object_Model/Whitespace)の記事に、この動作に関する詳しい情報があります。 +> +> {{domxref("Element.nextElementSibling")}} を使用すると、ホワイトスペースのノードや要素間のテキスト、コメントなどを飛ばして次の要素を取得することができます。 +> +> 子ノードのリストで反対方向に移動する場合は、 [Node.previousSibling](/ja/docs/Web/API/Node/previousSibling) を使用してください。 -

nextNode = node.nextSibling
-

+## 値 -

注記

+現在のノードの次の兄弟ノードを表す {{domxref("Node")}}、または存在しない場合は `null` です。 -

より多くの情報を得るには『DOM 中の空白文字』と『W3C DOM 3 FAQ: Why are some Text nodes empty?』を参照してください。

+## 例 -

+```html +

こちらは div-1 です。

こちらは div-2 です。

+
+計算結果がありません。 +``` -

{{domxref("Element.nextElementSibling")}} は空白ノードを飛ばして次の要素を得るのに使われます。

+```js +let el = document.getElementById('div-1').nextSibling, +i = 1; -

例

+let result = "div-1 の兄弟要素:
"; -

<div id="div-01">Here is div-01</div>
-<div id="div-02">Here is div-02</div>
+while (el) {
+  result += i + '. ' + el.nodeName+"
";
+  el = el.nextSibling;
+  i++;
+}
 
-<script type="text/javascript">
-var el = document.getElementById('div-01').nextSibling,
-    i = 1;
+const output = document.getElementsByTagName("output")[0];
+output.innerHTML = result;
+```
 
-console.log('Siblings of div-01:');
+{{ EmbedLiveSample("Example", "100%", 500)}}
 
-while (el) {
-  console.log(i + '. ' + el.nodeName);
-  el = el.nextSibling;
-  i++;
-}
+## 仕様書
 
-</script>
+{{Specifications}}
 
-/**************************************************
-  The following is written to the console as it loads:
+## ブラウザーの互換性
 
-     Siblings of div-01
+{{Compat}}
 
-      1. #text
-      2. DIV
-      3. #text
-      4. SCRIPT
+## 関連情報
 
-**************************************************/

- -

DOM にテキストノードが入りうるのは DOM が nextSibling を使って横断される時に許可されます。注記のセクションのリソースを見てください。

- -

仕様

- -

ブラウザ実装状況

- - - -

- -

概要

ノードの種類を表す整数のコードを返します。

構文

var type = node.nodeType;
-

type は以下の内の何れかの unsigned short 型の値となります。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称	値
`ELEMENT_NODE`	1
`ATTRIBUTE_NODE` {{deprecated_inline}}	2
`TEXT_NODE`	3
`CDATA_SECTION_NODE` {{deprecated_inline}}	4
`ENTITY_REFERENCE_NODE` {{deprecated_inline}}	5
`ENTITY_NODE` {{deprecated_inline}}	6
`PROCESSING_INSTRUCTION_NODE`	7
`COMMENT_NODE`	8
`DOCUMENT_NODE`	9
`DOCUMENT_TYPE_NODE`	10
`DOCUMENT_FRAGMENT_NODE`	11
`NOTATION_NODE` {{deprecated_inline}}	12

例

次の例は、ノードの最初の要素がコメントノードであるかをチェックし、そうでない場合にメッセージを表示するものです。

var node = document.documentElement.firstChild;
-
-if (node.nodeType != Node.COMMENT_NODE)
-  console.log("※社内コーディングルールに沿ったコメントを記述して下さい。");
-

仕様書

+{{APIRef("DOM")}} + +**`nodeType`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティであり、整数値でこのノードがなんであるかを識別します。これは様々なノードの種類、例えば {{domxref("Element", "elements")}}, {{domxref("Text", "text")}}, {{domxref("Comment", "comments")}} を見分けます。 + +## 値 + +整数値で、このノードの種類を識別します。可能な値は次の通りです。 + +- `Node.ELEMENT_NODE` (`1`) + - : {{HTMLElement("p")}} や {{HTMLElement("div")}} などの {{domxref("Element")}} ノードです。 +- `Node.ATTRIBUTE_NODE` (`2`) + - : {{domxref("Element")}} の {{domxref("Attr", "Attribute")}} ノードです。 +- `Node.TEXT_NODE` (`3`) + - : {{domxref("Element")}} や {{domxref("Attr")}} の中に存在する {{domxref("Text")}} です。 +- `Node.CDATA_SECTION_NODE`(`4`) + - : `` のような {{domxref("CDATASection")}} です。 +- `Node.PROCESSING_INSTRUCTION_NODE` (`7`) + - : `` のような XML 文書の {{domxref("ProcessingInstruction")}} です。 +- `Node.COMMENT_NODE` (`8`) + - : `` のような {{domxref("Comment")}} ノードです。 +- `Node.DOCUMENT_NODE` (`9`) + - : {{domxref("Document")}} ノードです。 +- `Node.DOCUMENT_TYPE_NODE` (`10`) + - : `` のような {{domxref("DocumentType")}} ノードです。 +- `Node.DOCUMENT_FRAGMENT_NODE` (`11`) + - : A {{domxref("DocumentFragment")}} node. + +`Node.ENTITY_REFERENCE_NODE` (`5`), `Node.ENTITY_NODE` (`6`), `Node.NOTATION_NODE` (`12`) は非推奨になっており、使用されなくなっています。 + +## 例 + +## 様々な種類のノード + +```js +document.nodeType === Node.DOCUMENT_NODE; // true +document.doctype.nodeType === Node.DOCUMENT_TYPE_NODE; // true + +document.createDocumentFragment().nodeType === Node.DOCUMENT_FRAGMENT_NODE; // true + +const p = document.createElement("p"); +p.textContent = "昔々…"; + +p.nodeType === Node.ELEMENT_NODE; // true +p.firstChild.nodeType === Node.TEXT_NODE; // true +``` + +### コメント + +次の例は、ノードの最初の要素がコメントノードであるかをチェックし、そうでない場合にメッセージを表示するものです。 + +```js +const node = document.documentElement.firstChild; +if (node.nodeType !== Node.COMMENT_NODE) { + console.warn("コメントを入れてください。"); +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/node/nodevalue/index.md b/files/ja/web/api/node/nodevalue/index.md index 2cfbbf795f..2d254b0a33 100644 --- a/files/ja/web/api/node/nodevalue/index.md +++ b/files/ja/web/api/node/nodevalue/index.md @@ -2,80 +2,66 @@ title: Node.nodeValue slug: Web/API/Node/nodeValue tags: - - DOM - - Gecko - - Gecko DOM Reference - - Node + - プロパティ + - リファレンス +browser-compat: api.Node.nodeValue translation_of: Web/API/Node/nodeValue --- -

- {{ApiRef}}

概要

ノードの値を取得または設定します。

構文

value = node.nodeValue

node.nodeValue が存在する場合、 value はノードの値を含む文字列です。

注記

document 自身は、 nodeValue は nullを返します。text

ノード、 comment ノード、CDATA ノードでは、 nodeValue はノードの中身を返します。 attribute ノードは属性値を返します。

以下の表は、様々なノードの戻り値を表しています。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Attr	attribute の値
CDATASection	CDATA Sectionの中身
コメント	commentの中身
Document	null
DocumentFragment	null
DocumentType	null
Element	null
NamedNodeMap	null
EntityReference	null
Notation	null
ProcessingInstruction	ターゲットを除く全体の内容
Text	the text nodeの中身

nodeValue が null と定義されている場合、値を設定しても効果はありません。

仕様書

DOM Level 2 Core: Node.nodeValue

+{{APIRef("DOM")}} + +**`nodeValue`** は {{domxref("Node")}} インターフェイスのプロパティで、現在のノードの値を返したり設定したりします。 + +## Value + +もしあれば、現在のノードの値を含む文字列です。 +文書自身においては、 `nodeValue` は `null` を返します。 +テキスト、コメント、 CDATA ノードでは、 `nodeValue` はノードの内容を返します。 +属性ノードにおいては、属性の値が返します。 + +以下の表はノードの種類別の返値を表しています。 + +| ノード | nodeValue の値 | +| ------------------------------------ | ----------------------------------- | +| {{domxref("CDATASection")}} | CDATA セクションの中身 | +| {{domxref("Comment")}} | コメントの中身 | +| {{domxref("Document")}} | `null` | +| {{domxref("DocumentFragment")}} | `null` | +| {{domxref("DocumentType")}} | `null` | +| {{domxref("Element")}} | `null` | +| {{domxref("NamedNodeMap")}} | `null` | +| {{domxref("ProcessingInstruction")}} | 対象を除く内容物全体 | +| {{domxref("Text")}} | テキストノードの中身 | + +> **Note:** `nodeValue` が `null` になると定義されている場合は、設定しても効果がありません。 + +## 例 + +```html +

Hello world

+ +結果が出ていません。 +``` + +また、以下のスクリプトを参照してください。 + +```js +let node = document.getElementsByTagName("body")[0].firstChild; +let result = "
ノード名:
"; +while (node) { + result += node.nodeName + "の値: " + node.nodeValue + "
"; + node = node.nextSibling +} + +const output = document.getElementById("result"); +output.innerHTML = result; +``` + +{{ EmbedLiveSample("Example", "100%", "250")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/node/ownerdocument/index.md b/files/ja/web/api/node/ownerdocument/index.md index f6eef4f570..75cf471b02 100644 --- a/files/ja/web/api/node/ownerdocument/index.md +++ b/files/ja/web/api/node/ownerdocument/index.md @@ -2,65 +2,35 @@ title: Node.ownerDocument slug: Web/API/Node/ownerDocument tags: - - DOM - - Gecko - - Node + - プロパティ + - リファレンス + - 読み取り専用 +browser-compat: api.Node.ownerDocument translation_of: Web/API/Node/ownerDocument --- -

+{{APIRef("DOM")}} -

概要

+**`ownerDocument`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、このノードの最上位の文書オブジェクトを返します。 -

ownerDocument プロパティは、指定ノードを内包するノードツリーのトップレベルのドキュメントオブジェクトを返します。

+## 値 -

構文

+すべての子ノードが作成された最上位の {{domxref("Document")}} オブジェクトです。 -

document = element.ownerDocument
-

+このプロパティが文書自身のノードで使用された場合、値は `null` になります。 -

document : 指定要素の祖先である {{domxref("document")}} オブジェクト

+## 例 -

例

+```js +// 指定された "p" から、文書オブジェクトの子である最上位の HTML を取得します。 -

var doc = p.ownerDocument; // ノード p のノードツリー上のトップレベル document オブジェクトを取得
-var html = doc.documentElement; // owner のドキュメント要素を取得
+const d = p.ownerDocument;
+const html = d.documentElement;
+```
 
-alert(html); // [object HTMLHtmlElement]
-

+## 仕様書 -

注記

+{{Specifications}} -

+## ブラウザーの互換性 -

仕様

- - - - - - - - - - - - - - - - - - - - - - - - -

Specification	Status	Comment
{{SpecName("DOM4", "#dom-node-ownerdocument", "Node.ownerDocument")}}	{{Spec2("DOM4")}}
{{SpecName("DOM3 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}	{{Spec2("DOM3 Core")}}	No change
{{SpecName("DOM2 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}	{{Spec2("DOM2 Core")}}	Initial definition

- -

ブラウザ実装状況

- -

+{{Compat}} -- cgit v1.2.3-54-g00ecf From 068058eea2550a1b3da98a3a5af70bc9172d2be2 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 26 Feb 2022 00:16:32 +0900 Subject: 2021/11/08 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/node/parentelement/index.md | 49 ++++----- files/ja/web/api/node/parentnode/index.md | 80 +++++++-------- files/ja/web/api/node/previoussibling/index.md | 81 ++++++++++----- files/ja/web/api/node/textcontent/index.md | 132 ++++++++++--------------- 4 files changed, 167 insertions(+), 175 deletions(-) (limited to 'files/ja') diff --git a/files/ja/web/api/node/parentelement/index.md b/files/ja/web/api/node/parentelement/index.md index e121601c07..8aa85b65f5 100644 --- a/files/ja/web/api/node/parentelement/index.md +++ b/files/ja/web/api/node/parentelement/index.md @@ -2,45 +2,36 @@ title: Node.parentElement slug: Web/API/Node/parentElement tags: - - DOM - - Element - - Node - - Property - - parent + - プロパティ + - リファレンス + - 読み取り専用 +browser-compat: api.Node.parentElement translation_of: Web/API/Node/parentElement --- -

+{{APIRef("DOM")}} -

+**`parentElement`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、この DOM ノードの親である要素 ({{DOMxRef("Element")}}) を返します。このノードに親ノードがないか、親が DOM の {{DOMxRef("Element")}} でない場合は `null` を返します。 -

構文

+## 値 -

parentElement = node.parentElement

+現在のノードの親ノードである {{domxref("Element")}} を返します。そのようなものがない場合は `null` を返します。 -

parentElementは現nodeの親elementです。型は必ずDOM {{domxref("Element")}} オブジェクトかnullです。

+## 例 -

例

+```js +if (node.parentElement) { + node.parentElement.style.color = "red"; +} +``` -

if (node.parentElement) {
-  node.parentElement.style.color = "red";
-}

+## 仕様書 -

仕様

+{{Specifications}} -

{{spec("http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#parent-element", "DOM Level 4: Node.parentElement", "WD")}}

+## ブラウザーの互換性 -

ブラウザ実装状況

+{{Compat}} -

+## 関連情報 -

- -

概要

指定されたノードの DOM ツリー内の親ノードを返します。

構文

parentNode = node.parentNode
-

parentNode : 指定ノードの親ノード。要素の親ノードは、Element ノード、Document ノード、または DocumentFragment になります。

例

if (node.parentNode) {
-  // ツリー上に既に存在しない場合を除き、
-  // ツリーからノードを削除します。
+{{APIRef("DOM")}}
+
+**`parentNode`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、 DOM ツリー内の特定のノードの親ノードを返します。
+
+`Document` および `DocumentFragment` [ノード](/ja/docs/Web/API/Node/nodeType)には親が付くことはないので、 `parentNode` は常に `null` になります。
+ノードが生成されてからツリーに割り当てられていない場合も `null` を返します。
+
+## 値
+
+現在のノードの親に当たる {{domxref("Node")}} です。要素の親になるのは `Element` ノード、 `Document` ノード、 `DocumentFragment` ノードの何れかです。
+
+## 例
+
+```js
+if (node.parentNode) {
+  // ノードがツリーの中にある場合は、ツリーから取り除く
   node.parentNode.removeChild(node);
-}

注記

parentNode は、以下のノードタイプについては null を返します : Attr 、Document 、DocumentFragment 、Entity 、Notation

また、ノードが作成された直後でまだツリーに加えられていない場合も null を返します。

ブラウザ実装状況

- -

仕様書

概要

+**`previousSibling`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、指定されたノードの親ノードの {{domxref("Node.childNodes", "childNodes")}} リスト内で、直前にあるノードを返します。指定されたノードがリストの先頭にあった倍は `null` を返します。 -

+> **Note:** ブラウザーはソースのマークアップにあるホワイトスペースを表すために、文書にテキストノードを挿入します。 +> そのため、例えば [`Node.firstChild`](/ja/docs/Web/API/Node/firstChild) や `Node.previousSibling` を使用して得たノードが、取得しようとした実際のノードではなく、ホワイトスペースのテキストノードであることがあります。 +> +> [DOM でのホワイトスペース](/ja/docs/Web/API/Document_Object_Model/Whitespace)の記事に、この動作に関する詳しい情報があります。 +> +> [`previousElementSibling`](/ja/docs/Web/API/Element/previousElementSibling) を使用すると、（テキストノードやその他の要素以外のノードを飛ばして）次の要素を取得することができます。 +> +> 子ノードのリストで反対方向に移動する場合は、 [Node.nextSibling](/ja/docs/Web/API/Node/nextSibling) を使用してください。 -

構文

+## 値 -

previousNode = node.previousSibling;
-

+現在のノードの直前のノードを表す {{domxref("Node")}} です。 +存在しない場合は `null` です。 -

例

+## 例 -

// <a><b1 id="b1"/><b2 id="b2"/></a>
+次の例では、要素にテキストノードがある場合とない場合の `previousSibling` の動作を示しています。
 
-alert( document.getElementById("b1").previousSibling ); // null
-alert( document.getElementById("b2").previousSibling.id ); // "b1"
-

+### 最初の例 -

注記

+この例では、一連の `img` 要素が互いに隣り合っており、その間にホワイトスペースがありません。 -

より多くの情報を得るには『DOM 中の空白文字』と『W3C DOM 3 FAQ: Why are some Text nodes empty?』を参照してください。

+```html + +``` -

childNode リスト内の、指定ノードの次のノードの取得には {{domxref("Node.nextSibling")}} を用います。

+```js +document.getElementById("b1").previousSibling; // +document.getElementById("b2").previousSibling.id; // "b1" +``` -

仕様書

+### 2 番目の例 -

+この例では、 `img` 要素の間にホワイトスペースのテキストノード（改行）があります。 + +```html + + + +``` + +```js +document.getElementById("b1").previousSibling; // #text +document.getElementById("b1").previousSibling.previousSibling; // +document.getElementById("b2").previousSibling.previousSibling; // +document.getElementById("b2").previousSibling; // #text +document.getElementById("b2").previousSibling.id; // undefined +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Node.nextSibling")}} +- {{domxref("Element.previousElementSibling")}} diff --git a/files/ja/web/api/node/textcontent/index.md b/files/ja/web/api/node/textcontent/index.md index 3f90221d9f..1777a5cd21 100644 --- a/files/ja/web/api/node/textcontent/index.md +++ b/files/ja/web/api/node/textcontent/index.md @@ -2,112 +2,80 @@ title: Node.textContent slug: Web/API/Node/textContent tags: - - API - - DOM - - Node - - Property - - Reference - プロパティ + - リファレンス +browser-compat: api.Node.textContent translation_of: Web/API/Node/textContent --- -

+{{APIRef("DOM")}} -

textContent は {{domxref ("Node")}} のプロパティで、ノードおよびその子孫のテキストの内容を表します。

+**`textContent`** は {{domxref ("Node")}} のプロパティで、ノードおよびその子孫のテキストの内容を表します。 -

メモ: textContent と {{domxref("HTMLElement.innerText")}} は混同しやすいものですが、2つのプロパティは重要な点が異なります。

+> **Note:** `textContent` と {{domxref("HTMLElement.innerText")}} は混同しやすいものですが、 2 つのプロパティは[重要な点が異なります](#innertext_との違い)。 -

構文

+## 値 -

let text = someNode.textContent
-someOtherNode.textContent = string
-

+文字列または {{jsxref("null")}} です。値は場面によります。 -

値

+- ノードが {{domxref("document")}} または {{glossary("doctype")}} である場合、 `textContent` は {{jsxref("null")}} を返します。 -

文字列または {{jsxref("null")}}

+ > **Note:** 文書全体の*すべての*テキストと [CDATA データ](/ja/docs/Web/API/CDATASection)を取得するには、 `document.documentElement.textContent` を使用する方法があります。 -

説明

+- ノードが [CDATA セクション](/ja/docs/Web/API/CDATASection)、コメント、[処理命令ノード](/ja/docs/Web/API/ProcessingInstruction)、 [テキストノード](/ja/docs/Web/API/Text)の場合、 `textContent` はそのノードの内側のテキスト、すなわち {{domxref("Node.nodeValue")}} を返します。 +- 他のノード型の場合、`textContent` は、コメントと処理命令ノードを除く、すべての子ノードの `textContent` 属性値を連結したものを返します。（ノードが子を持たない場合、これは空文字列になります。） -

textContent の値は状況によります。

+> **Warning:** ノードの `textContent` を設定すると、そのノードの*すべて*の子が取り除かれて、指定された値を持つ単一のテキストノードに置き換わります。 -

ノードが {{domxref("document")}} または {{glossary("Doctype")}} である場合、 textContent は {{jsxref("null")}} を返します。 +### innerText との違い -
メモ: 文書全体のすべてのテキストと CDATA データを取得するには、 document.documentElement.textContent を使用する方法があります。
-
ノードが CDATA セクション、コメント、処理命令ノード、テキストノードの場合、 textContent はそのノードの内側のテキスト、すなわち {{domxref("Node.nodeValue")}} を返します。
他のノードタイプの場合、textContent は、コメントと処理命令ノードを除く、すべての子ノードの textContent 属性値を連結したものを返します。 (ノードが子を持たない場合、これは空文字列になります。)

+`Node.textContent` と {{domxref("HTMLElement.innerText")}} の間の違いに混乱しないでください。名前は似ているようですが、重要な違いがあります。 -

ノードの textContent を設定すると、そのノードのすべての子が取り除かれて、指定された値をもつ単一のテキストノードに置き換わります。

+- `textContent` は、 {{HTMLElement("script")}} と {{HTMLElement("style")}} 要素を含む、*すべて*の要素の中身を取得します。一方、 `innerText` は「人間が読める」要素のみを示します。 +- `textContent` はノード内のすべての要素を返します。一方、 `innerText` はスタイルを反映し、「非表示」の要素のテキストは返しません。 -

innerText との違い

+ - もっと言えば、 `innerText` は CSS のスタイルを考慮するので、 `innerText` の値を読み取ると最新の計算されたスタイルを保証するために {{glossary("Reflow", "再フロー")}} を起動します。 (再フローは計算が重いので、可能であれば避けるべきです。) -

Node.textContent と {{domxref("HTMLElement.innerText")}} の間の違いに混乱しないでください。名前は似ているようですが、重要な違いがあります。

+- `textContent` とは異なり、 `innerText` を Internet Explorer (バージョン 11 まで) で変更すると、要素から子ノードを削除するだけでなく、子孫のテキストノードを*完全に破棄します*。他の要素または同じ要素にノードをもう一度挿入することは不可能です。 -

textContent は、 {{HTMLElement("script")}} と {{HTMLElement("style")}} 要素を含む、すべての要素の内容を取得します。一方、 innerText は「人間が読める」要素のみを示します。
textContent はノード内のすべての要素を返します。一方、 innerText はスタイルを反映し、「非表示」の要素のテキストを返しません。 -
- もっと言えば、 innerText は CSS のスタイルを考慮するので、 innerText の値を読み取ると最新の計算されたスタイルを保証するために {{glossary("Reflow", "再フロー")}} を起動します。 (再フローは計算が重いので、可能であれば避けるべきです。)
-
textContent とは異なり、 innerText を Internet Explorer (バージョン 11 まで) で変更すると、要素から子ノードを削除するだけでなく、子孫のテキストノードを完全に破棄します。他の要素または同じ要素にノードをもう一度挿入することは不可能です。

+### innerHTML との違い -

innerHTML との違い

+{{domxref("Element.innerHTML")}} は、その名が示すとおり HTML を返します。時に、 `innerHTML` を使用して要素内のテキストを受け取ったり書き込んだりすることがありますが、 `textContent` は値が HTML として解析されないので性能が良くなります。 -

+さらに、`textContent` を使用することで {{glossary("Cross-site_scripting", "XSS 攻撃")}}を防ぐことができます。 -

さらに、textContent を使用することで {{glossary("Cross-site_scripting", "XSS 攻撃")}}を防ぐことができます。

+## 例 -

例

+以下のような HTML の断片があります。 -

以下のような HTML の断片があります。

+```html +

This is some text!

+``` -

<div id="divA">This is <span>some</span> text!</div>

+... `textContent` を使用して、要素のテキストの内容を取得することができます。 -

... textContent を使用して、要素のテキストの内容を取得することができます。

+```js +let text = document.getElementById('divA').textContent; +// 変数 text の値は 'This is some text!' となります。 +``` -

let text = document.getElementById('divA').textContent;
-// 変数 text の値は 'This is some text!' となります。

+... また、要素のテキストを設定します。 -

... また、要素のテキストを設定します。

- -

document.getElementById('divA').textContent = 'This text is different!';
+```js
+document.getElementById('divA').textContent = 'This text is different!';
 // divA の HTML は次のようになります。
-// <div id="divA">This text is different!</div>
-

- -

仕様書

- - - - - - - - - - - - - - - - -

仕様書	状態	備考
{{SpecName('DOM WHATWG','#dom-node-textcontent','Node.textContent')}}	{{Spec2('DOM WHATWG')}}

- -

ブラウザーの互換性

- -

API

+ +

`navigator.onLine`

+ +

navigator.onLine は、 true/false の値を保持しているプロパティです (オンラインの場合は true、オフラインの場合は false)。

+ +

このプロパティは、ユーザーが「オフラインモード」に切り替えたとき (Firefox の場合は、ファイル→オフライン作業) に更新されます。さらに、このプロパティは、ブラウザーがネットワークに接続できなくなったときに更新されます。仕様書によれば、次のようになっています。

+ +

+ navigator.onLine 属性はユーザーがリンクを辿ったり、スクリプトが外部のページをリクエストしたりしたときにユーザーエージェントがネットワークで通信できない場合 (またはそのような試みが失敗した場合) は、必ず false を返す必要があります。

+ +

Firefox 2 はこのプロパティをブラウザーのオフラインモードが切り替わる度に更新します。 Firefox 41 は、 Windows、 Linux、 OS X においてネットワークの接続状態が変化したときにも更新します。

+ +

このプロパティは Firefox と Internet Explorer の古いバージョンにも存在しました。 (この仕様はこれらの先行的な実装に基づいています)。従って、今すぐこのプロパティを使い始めることができます。ネットワーク状態の自動判断は Firefox 2 にて実装されました。

+ +

"`online`" および "`offline`" イベント

+ +

Firefox 3 は 2 つの新しいイベントを導入しました。"online" and "offline" です。これらの 2 つのイベントは、ブラウザーのオンラインおよびオフラインモードが切り替わるたびに、各ページの <body> に発行されます。加えて、このイベントは document.body から document へとバブリングし、 window までたどり着きます。これらのイベントはキャンセルできません (ユーザーのオンラインモードやオフラインモードへの移行を防ぐことはできません)。

+ +

Firefox 41 では、 Windows, Linux, OS X においてネットワークの接続状態が変化したことを OS が通知したときに、これらのイベントが発行されます。

+ +

これらのイベントに対するリスナーは、いくつかのお馴染みの方法で登録することができます。

addEventListener を、 window, document, document.body に対して使用します。
document または document.body の .ononline または .onoffline プロパティを JavaScript の Function オブジェクトに設定します。(注意: window.ononline または window.onoffline は互換性の理由で動作しません)
HTML マークアップで <body> タグの ononline="..." または onoffline="..." 属性を指定します。

+ +

例

+ +

イベントが機能しているかどうかを確認するために、簡単なテストケースを用意しました (イベントリスナーを document.body に代入しているため、 Chrome では動作しません)。

+ +

こちらが JavaScript 部分です。

+ +

window.addEventListener('load', function() {
+  var status = document.getElementById("status");
+  var log = document.getElementById("log");
+
+  function updateOnlineStatus(event) {
+    var condition = navigator.onLine ? "online" : "offline";
+
+    status.className = condition;
+    status.innerHTML = condition.toUpperCase();
+
+    log.insertAdjacentHTML("beforeend", "Event: " + event.type + "; Status: " + condition);
+  }
+
+  window.addEventListener('online',  updateOnlineStatus);
+  window.addEventListener('offline', updateOnlineStatus);
+});

+ +

CSS 部分です。

+ +

#status {
+  position: fixed;
+  width: 100%;
+  font: bold 1em sans-serif;
+  color: #FFF;
+  padding: 0.5em;
+}
+
+#log {
+  padding: 2.5em 0.5em 0.5em;
+  font: 1em sans-serif;
+}
+
+.online {
+  background: green;
+}
+
+.offline {
+  background: red;
+}
+

+ +

対応する HTML です。 XXX When mochitests for this are created, point to those instead and update this example -nickolay

+ +

<div id="status"></div>
+<div id="log"></div>
+<p>This is a test</p>
+

+ +

実行例はこちらです。

+ +

注

+ +

この API がブラウザに実装されていない場合は、サービスワーカーや XMLHttpRequest からのレスポンスを使用するなど、他の兆候を使用してオフラインであるかどうかを検出することができます。

+ +

参考文献

+ +

diff --git a/files/ja/web/api/navigator/online_and_offline_events/index.html b/files/ja/web/api/navigator/online_and_offline_events/index.html deleted file mode 100644 index 15fc35b7c8..0000000000 --- a/files/ja/web/api/navigator/online_and_offline_events/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: オンライン・オフラインイベント -slug: Web/API/Navigator/Online_and_offline_events -tags: - - AJAX - - DOM - - HTML5 - - Intermediate - - NeedsUpdate - - Offline web applications - - Web Development -translation_of: Web/API/Navigator/Online_and_offline_events -original_slug: Web/API/NavigatorOnLine/Online_and_offline_events ---- -

一部のブラウザーは、 Online/Offline イベントを WHATWG Web Applications 1.0 仕様書に従って実装しています。

- -

概要

- -

サーバーとの再同期ができるように、ユーザーがオンラインに戻ったタイミングを知る必要があります。
サーバーへのリクエストを後回しにすることができるように、ユーザーがオフラインなったタイミングを知る必要があります。

- -

オンライン／オフラインイベントがこのプロセスを一般化するのに役立ちます。

- -

API

- -

`navigator.onLine`

- -

navigator.onLine は、 true/false の値を保持しているプロパティです (オンラインの場合は true、オフラインの場合は false)。

- -

- navigator.onLine 属性はユーザーがリンクを辿ったり、スクリプトが外部のページをリクエストしたりしたときにユーザーエージェントがネットワークで通信できない場合 (またはそのような試みが失敗した場合) は、必ず false を返す必要があります。

- -

"`online`" および "`offline`" イベント

- -

Firefox 41 では、 Windows, Linux, OS X においてネットワークの接続状態が変化したことを OS が通知したときに、これらのイベントが発行されます。

- -

これらのイベントに対するリスナーは、いくつかのお馴染みの方法で登録することができます。

addEventListener を、 window, document, document.body に対して使用します。
document または document.body の .ononline または .onoffline プロパティを JavaScript の Function オブジェクトに設定します。(注意: window.ononline または window.onoffline は互換性の理由で動作しません)
HTML マークアップで <body> タグの ononline="..." または onoffline="..." 属性を指定します。

- -

例

- -

こちらが JavaScript 部分です。

- -

window.addEventListener('load', function() {
-  var status = document.getElementById("status");
-  var log = document.getElementById("log");
-
-  function updateOnlineStatus(event) {
-    var condition = navigator.onLine ? "online" : "offline";
-
-    status.className = condition;
-    status.innerHTML = condition.toUpperCase();
-
-    log.insertAdjacentHTML("beforeend", "Event: " + event.type + "; Status: " + condition);
-  }
-
-  window.addEventListener('online',  updateOnlineStatus);
-  window.addEventListener('offline', updateOnlineStatus);
-});

- -

CSS 部分です。

- -

#status {
-  position: fixed;
-  width: 100%;
-  font: bold 1em sans-serif;
-  color: #FFF;
-  padding: 0.5em;
-}
-
-#log {
-  padding: 2.5em 0.5em 0.5em;
-  font: 1em sans-serif;
-}
-
-.online {
-  background: green;
-}
-
-.offline {
-  background: red;
-}
-

- -

対応する HTML です。 XXX When mochitests for this are created, point to those instead and update this example -nickolay

- -

<div id="status"></div>
-<div id="log"></div>
-<p>This is a test</p>
-

- -

実行例はこちらです。

- -

注

- -

参考文献

- -

diff --git a/files/ko/_redirects.txt b/files/ko/_redirects.txt index 0dcfb7500c..dec0d5b016 100644 --- a/files/ko/_redirects.txt +++ b/files/ko/_redirects.txt @@ -409,7 +409,7 @@ /ko/docs/Navigation_timing /ko/docs/Web/API/Navigation_timing_API /ko/docs/Node_server_without_framework /ko/docs/Learn/Server-side/Node_server_without_framework /ko/docs/Notable_bugs_fixed_in_Firefox_3 /ko/docs/Mozilla/Firefox/Releases/3/Notable_bugs_fixed -/ko/docs/Online_and_offline_events /ko/docs/Web/API/Navigator/Online_and_offline_events +/ko/docs/Online_and_offline_events /ko/docs/Web/API/Navigator/onLine /ko/docs/Plugins/Guide/Scripting_plugins /ko/docs/Glossary/Plugin /ko/docs/SVG /ko/docs/Web/SVG /ko/docs/SVG/Tutorial /ko/docs/Web/SVG/Tutorial @@ -466,11 +466,12 @@ /ko/docs/Web/API/Navigator.battery /ko/docs/Web/API/Navigator/battery /ko/docs/Web/API/Navigator.battery/window.navigator.battery /ko/docs/Web/API/Navigator/battery /ko/docs/Web/API/Navigator.connection/window.navigator.connection /ko/docs/Web/API/Navigator/connection +/ko/docs/Web/API/Navigator/Online_and_offline_events /ko/docs/Web/API/Navigator/onLine /ko/docs/Web/API/NavigatorID /ko/docs/Web/API/Navigator /ko/docs/Web/API/NavigatorLanguage /ko/docs/Web/API/Navigator /ko/docs/Web/API/NavigatorLanguage/language /ko/docs/Web/API/Navigator/language /ko/docs/Web/API/NavigatorOnLine /ko/docs/Web/API/Navigator/language -/ko/docs/Web/API/NavigatorOnLine/Online_and_offline_events /ko/docs/Web/API/Navigator/Online_and_offline_events +/ko/docs/Web/API/NavigatorOnLine/Online_and_offline_events /ko/docs/Web/API/Navigator/onLine /ko/docs/Web/API/NetworkInformation.connection /ko/docs/Web/API/Navigator/connection /ko/docs/Web/API/NetworkInformation.connection/window.navigator.connection /ko/docs/Web/API/Navigator/connection /ko/docs/Web/API/NetworkInformation/connection /ko/docs/Web/API/Navigator/connection diff --git a/files/ko/web/api/navigator/online/index.html b/files/ko/web/api/navigator/online/index.html new file mode 100644 index 0000000000..b28eb025c1 --- /dev/null +++ b/files/ko/web/api/navigator/online/index.html @@ -0,0 +1,108 @@ +--- +title: Online and offline events +slug: Web/API/Navigator/onLine +tags: + - AJAX + - DOM + - Web Development +translation_of: Web/API/Navigator/Online_and_offline_events +original_slug: Web/API/Navigator/Online_and_offline_events +--- +

In progress Firefox 3는 WHATWG 웹 애플리케이션 1.0 명세에 기술된 온라인/오프라인 이벤트를 구현합니다.

+ +

개요

+ +

좋은 오프라인 가능(offline-capable) 웹 애플리케이션을 작성하려면 여러분의 애플리케이션이 실제로 오프라인이 되는 때를 알아야 합니다. 덧붙여, 여러분의 애플리케이션이 '온라인' 상태로 돌아오는 때도 알아야 합니다. 사실, 이 요구사항은 다음과 같이 정리할 수 있습니다.

+ +

여러분이 서버와 재동기화할 수 있도록 사용자가 온라인으로 돌아오는 때를 알아야 합니다.
여러분의 서버 요청을 나중에 처리하기 위해 대기시킬 수 있도록 사용자가 오프라인이 되는 때를 알아야 합니다.

+ +

온라인/오프라인 이벤트는 이 과정을 단순하게 만드는 것을 도와줍니다.

+ +

여러분의 웹 애플리케이션은 특정 문서가 오프라인 자원 캐시에 보관되는 것을 확실하게 할 필요도 있습니다. 이를 위해서는 다음과 같이 HEAD 섹션에 LINK 요소를 포함합니다.

+ +

<link rel="offline-resource" href="myresource">
+

+ +

이는 Firefox 3 및 이후 버전에서 HTML을 처리할 때, 참조하는 자원을 오프라인에서 사용할 수 있도록 특별한 오프라인 자원 캐시에 저장하도록 합니다.

+ +

API

+ +

`navigator.onLine`

+ +

navigator.onLine는 true/false(온라인은 true, 오프라인은 false)를 보관하는 속성입니다. 이 속성은 사용자가 해당 메뉴 항목(파일 -> 오프라인 작업)을 선택하여 "오프라인 모드"로 전환할 때마다 갱신됩니다.

+ +

또한 이 속성은 브라우저가 네트워크에 더 이상 연결할 수 없을 때마다 갱신됩니다. 명세에 따르면:

+ +

사용자가 링크를 따라가거나 스크립트가 원격 페이지를 요청할 때 사용자 에이전트가 네트워크에 접속할 수 없으면 (혹은 그러한 시도가 실패할 것이라는 것을 안다면) navigator.onLine 속성은 false를 반환해야 합니다...

+ +

Firefox 2는 윈도우와 리눅스에서 브라우저의 온라인/오프라인 모드가 바뀔 때와 네트워크가 끊어지거나 다시 접속될 때 이 속성을 갱신합니다.

+ +

이 속성은 Firefox와 Internet Explorer의 이전 버전에도 있으므로 (명세는 이러한 기존 구현을 바탕으로 합니다) 이를 즉시 사용할 수 있습니다. 네트워크 상태의 자동 감지는 Firefox 2에서 구현되었습니다.

+ +

"`online`"과 "`offline`" 이벤트

+ +

Firefox 3는 두 가지 새로운 이벤트를 도입하고 있습니다: 바로 "online"과 "offline"입니다. 이 두 가지 이벤트는 브라우저가 온라인과 오프라인 모드를 전환할 때 각 페이지의 <body>에서 발생합니다. 덧붙여, 이 이벤트는 document.body에서 document로 전달되고 window에서 끝납니다. 두 가지 이벤트 모두 취소 불가능한(non-cancellable) 이벤트입니다(여러분은 사용자가 온라인이 되거나 오프라인이 되는 것을 막을 수 없습니다).

+ +

널리 알려진 몇 가지 방법으로 해당 이벤트에 대한 리스너(listener)를 등록할 수 있습니다.

+ +

window, document, document.body에서 addEventListener를 이용
자바스크립트의 Function 개체에서 document나 document.body에 .ononline 혹은 .onoffline 속성을 설정 (참고: 호환성 때문에window.ononline이나 window.onoffline은 올바로 동작하지 않습니다.)
HTML 마크업의 <body> 태그에 ononline="..." 혹은 onoffline="..." 속성을 지정

+ +

예제

+ +

이벤트가 동작하는지 확인할 수 있는 간단한 테스트 케이스가 있습니다. XXX When mochitests for this are created, point to those instead and update this example -nickolay

+ +

 <!doctype html>
+ <html>
+ <head>
+   <script>
+     function updateOnlineStatus(msg) {
+       var status = document.getElementById("status");
+       var condition = navigator.onLine ? "ONLINE" : "OFFLINE";
+       status.setAttribute("class", condition);
+       var state = document.getElementById("state");
+       state.innerHTML = condition;
+       var log = document.getElementById("log");
+       log.appendChild(document.createTextNode("Event: " + msg + "; status=" + condition + "\n"));
+     }
+     function loaded() {
+       updateOnlineStatus("load");
+       document.body.addEventListener("offline", function () {
+         updateOnlineStatus("offline")
+       }, false);
+       document.body.addEventListener("online", function () {
+         updateOnlineStatus("online")
+       }, false);
+     }
+   </script>
+   <style>...</style>
+ </head>
+ <body onload="loaded()">
+   <div id="status"><p id="state"></p></div>
+   <div id="log"></div>
+ </body>
+ </html>
+

+ +

참고

+ +

{{ languages( { "en": "en/Online_and_offline_events", "es": "es/Eventos_online_y_offline", "fr": "fr/\u00c9v\u00e8nements_online_et_offline", "ja": "ja/Online_and_offline_events", "pl": "pl/Zdarzenia_online_i_offline", "pt": "pt/Eventos_online_e_offline" } ) }}

diff --git a/files/ko/web/api/navigator/online_and_offline_events/index.html b/files/ko/web/api/navigator/online_and_offline_events/index.html deleted file mode 100644 index 039240fedc..0000000000 --- a/files/ko/web/api/navigator/online_and_offline_events/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: Online and offline events -slug: Web/API/Navigator/Online_and_offline_events -tags: - - AJAX - - DOM - - Web Development -translation_of: Web/API/Navigator/Online_and_offline_events ---- -

In progress Firefox 3는 WHATWG 웹 애플리케이션 1.0 명세에 기술된 온라인/오프라인 이벤트를 구현합니다.

- -

개요

- -

여러분이 서버와 재동기화할 수 있도록 사용자가 온라인으로 돌아오는 때를 알아야 합니다.
여러분의 서버 요청을 나중에 처리하기 위해 대기시킬 수 있도록 사용자가 오프라인이 되는 때를 알아야 합니다.

- -

온라인/오프라인 이벤트는 이 과정을 단순하게 만드는 것을 도와줍니다.

- -

<link rel="offline-resource" href="myresource">
-

- -

이는 Firefox 3 및 이후 버전에서 HTML을 처리할 때, 참조하는 자원을 오프라인에서 사용할 수 있도록 특별한 오프라인 자원 캐시에 저장하도록 합니다.

- -

API

- -

`navigator.onLine`

- -

또한 이 속성은 브라우저가 네트워크에 더 이상 연결할 수 없을 때마다 갱신됩니다. 명세에 따르면:

- -

사용자가 링크를 따라가거나 스크립트가 원격 페이지를 요청할 때 사용자 에이전트가 네트워크에 접속할 수 없으면 (혹은 그러한 시도가 실패할 것이라는 것을 안다면) navigator.onLine 속성은 false를 반환해야 합니다...

- -

Firefox 2는 윈도우와 리눅스에서 브라우저의 온라인/오프라인 모드가 바뀔 때와 네트워크가 끊어지거나 다시 접속될 때 이 속성을 갱신합니다.

- -

"`online`"과 "`offline`" 이벤트

- -

널리 알려진 몇 가지 방법으로 해당 이벤트에 대한 리스너(listener)를 등록할 수 있습니다.

- -

window, document, document.body에서 addEventListener를 이용
자바스크립트의 Function 개체에서 document나 document.body에 .ononline 혹은 .onoffline 속성을 설정 (참고: 호환성 때문에window.ononline이나 window.onoffline은 올바로 동작하지 않습니다.)
HTML 마크업의 <body> 태그에 ononline="..." 혹은 onoffline="..." 속성을 지정

- -

예제

- -

이벤트가 동작하는지 확인할 수 있는 간단한 테스트 케이스가 있습니다. XXX When mochitests for this are created, point to those instead and update this example -nickolay

- -

 <!doctype html>
- <html>
- <head>
-   <script>
-     function updateOnlineStatus(msg) {
-       var status = document.getElementById("status");
-       var condition = navigator.onLine ? "ONLINE" : "OFFLINE";
-       status.setAttribute("class", condition);
-       var state = document.getElementById("state");
-       state.innerHTML = condition;
-       var log = document.getElementById("log");
-       log.appendChild(document.createTextNode("Event: " + msg + "; status=" + condition + "\n"));
-     }
-     function loaded() {
-       updateOnlineStatus("load");
-       document.body.addEventListener("offline", function () {
-         updateOnlineStatus("offline")
-       }, false);
-       document.body.addEventListener("online", function () {
-         updateOnlineStatus("online")
-       }, false);
-     }
-   </script>
-   <style>...</style>
- </head>
- <body onload="loaded()">
-   <div id="status"><p id="state"></p></div>
-   <div id="log"></div>
- </body>
- </html>
-

- -

참고

- -

-- cgit v1.2.3-54-g00ecf From 5fbfeee5908241590dacb0f0aac3859f61360947 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 27 Feb 2022 13:04:02 +0900 Subject: Node インターフェイスのメソッドの記事を移行 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/node/appendchild/index.html | 97 ----------- files/ja/web/api/node/appendchild/index.md | 97 +++++++++++ files/ja/web/api/node/clonenode/index.html | 62 ------- files/ja/web/api/node/clonenode/index.md | 62 +++++++ .../api/node/comparedocumentposition/index.html | 118 ------------- .../web/api/node/comparedocumentposition/index.md | 118 +++++++++++++ files/ja/web/api/node/contains/index.html | 56 ------- files/ja/web/api/node/contains/index.md | 56 +++++++ files/ja/web/api/node/haschildnodes/index.html | 31 ---- files/ja/web/api/node/haschildnodes/index.md | 31 ++++ files/ja/web/api/node/insertbefore/index.html | 186 --------------------- files/ja/web/api/node/insertbefore/index.md | 186 +++++++++++++++++++++ .../ja/web/api/node/isdefaultnamespace/index.html | 35 ---- files/ja/web/api/node/isdefaultnamespace/index.md | 35 ++++ files/ja/web/api/node/isequalnode/index.html | 90 ---------- files/ja/web/api/node/isequalnode/index.md | 90 ++++++++++ files/ja/web/api/node/issamenode/index.html | 39 ----- files/ja/web/api/node/issamenode/index.md | 39 +++++ files/ja/web/api/node/issupported/index.html | 44 ----- files/ja/web/api/node/issupported/index.md | 44 +++++ files/ja/web/api/node/normalize/index.html | 48 ------ files/ja/web/api/node/normalize/index.md | 48 ++++++ files/ja/web/api/node/removechild/index.html | 124 -------------- files/ja/web/api/node/removechild/index.md | 124 ++++++++++++++ files/ja/web/api/node/replacechild/index.html | 75 --------- files/ja/web/api/node/replacechild/index.md | 75 +++++++++ 26 files changed, 1005 insertions(+), 1005 deletions(-) delete mode 100644 files/ja/web/api/node/appendchild/index.html create mode 100644 files/ja/web/api/node/appendchild/index.md delete mode 100644 files/ja/web/api/node/clonenode/index.html create mode 100644 files/ja/web/api/node/clonenode/index.md delete mode 100644 files/ja/web/api/node/comparedocumentposition/index.html create mode 100644 files/ja/web/api/node/comparedocumentposition/index.md delete mode 100644 files/ja/web/api/node/contains/index.html create mode 100644 files/ja/web/api/node/contains/index.md delete mode 100644 files/ja/web/api/node/haschildnodes/index.html create mode 100644 files/ja/web/api/node/haschildnodes/index.md delete mode 100644 files/ja/web/api/node/insertbefore/index.html create mode 100644 files/ja/web/api/node/insertbefore/index.md delete mode 100644 files/ja/web/api/node/isdefaultnamespace/index.html create mode 100644 files/ja/web/api/node/isdefaultnamespace/index.md delete mode 100644 files/ja/web/api/node/isequalnode/index.html create mode 100644 files/ja/web/api/node/isequalnode/index.md delete mode 100644 files/ja/web/api/node/issamenode/index.html create mode 100644 files/ja/web/api/node/issamenode/index.md delete mode 100644 files/ja/web/api/node/issupported/index.html create mode 100644 files/ja/web/api/node/issupported/index.md delete mode 100644 files/ja/web/api/node/normalize/index.html create mode 100644 files/ja/web/api/node/normalize/index.md delete mode 100644 files/ja/web/api/node/removechild/index.html create mode 100644 files/ja/web/api/node/removechild/index.md delete mode 100644 files/ja/web/api/node/replacechild/index.html create mode 100644 files/ja/web/api/node/replacechild/index.md (limited to 'files/ja') diff --git a/files/ja/web/api/node/appendchild/index.html b/files/ja/web/api/node/appendchild/index.html deleted file mode 100644 index 3242491906..0000000000 --- a/files/ja/web/api/node/appendchild/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Node.appendChild -slug: Web/API/Node/appendChild -tags: - - API - - DOM - - Method - - Node - - Reference -translation_of: Web/API/Node/appendChild ---- -

- -

Node.appendChild() メソッドは、特定の親ノードの子ノードリストの末尾にノードを追加します。追加しようとしたノードが既に存在していたら、それは現在の親ノードから除かれ、新しい親ノードに追加されます（他のノードに追加する前にそのノードを親ノードから削除する必要はありません）。

- -

これは、ノードが同時にドキュメントの 2 箇所に存在できないということを意味します。ノードがすでに親を持っている場合、最初にノードが削除された後、新しい位置の末尾に追加されます。{{domxref("Node.cloneNode()")}} は、新しい親の末尾に追加する前に、ノードのコピーを作成するために使用できます。cloneNode で作成したコピーは自動的に同期を保たないことに注意してください。

- -

このメソッドでは、異なるドキュメント間でノードを移動することはできません。異なるドキュメントからノードを末尾に追加したい場合は、{{domxref("document.importNode()")}} メソッドを使用する必要があります。

- -

構文

- -

var aChild = element.appendChild(aChild);

- -

引数

- -

aChild

- -

親ノードに追加する子ノード(要素)

- -

戻り値

- -

追加した子ノードです。ただし、{{domxref("DocumentFragment")}}を引数にした場合は、空の{{domxref("DocumentFragment")}}が戻ります。

- -

注意

- -

appendChild() が子要素を返すため、メソッドチェーンが期待通りに動きません。:

- -

var aBlock = doc.createElement('block').appendChild(doc.createElement('b'));

- -

aBlock に  を与えただけでは期待通りに動きません。

- -

例

- -

// 新しい段落要素を作成し、ドキュメントの body の最後に追加します。
-var p = document.createElement("p");
-document.body.appendChild(p);
-

- -

仕様

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

仕様	ステータス	コメント
{{SpecName('DOM WHATWG', '#dom-node-appendchild', 'Node.appendChild()')}}	{{Spec2('DOM WHATWG')}}	{{SpecName("DOM3 Core")}} から変更なし。
{{SpecName('DOM3 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}	{{Spec2('DOM3 Core')}}	{{SpecName("DOM2 Core")}} から変更なし。
{{SpecName('DOM2 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}	{{Spec2('DOM2 Core')}}	{{SpecName("DOM1")}} から変更なし。
{{SpecName('DOM1', 'level-one-core.html#ID-184E7107', 'Node.appendChild()')}}	{{Spec2('DOM1')}}	初期定義。

- -

ブラウザー実装状況

- -

構文

+ +

var aChild = element.appendChild(aChild);

+ +

引数

+ +

aChild

+ +

親ノードに追加する子ノード(要素)

+ +

戻り値

+ +

追加した子ノードです。ただし、{{domxref("DocumentFragment")}}を引数にした場合は、空の{{domxref("DocumentFragment")}}が戻ります。

+ +

注意

+ +

appendChild() が子要素を返すため、メソッドチェーンが期待通りに動きません。:

+ +

var aBlock = doc.createElement('block').appendChild(doc.createElement('b'));

+ +

aBlock に  を与えただけでは期待通りに動きません。

+ +

例

+ +

// 新しい段落要素を作成し、ドキュメントの body の最後に追加します。
+var p = document.createElement("p");
+document.body.appendChild(p);
+

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

仕様	ステータス	コメント
{{SpecName('DOM WHATWG', '#dom-node-appendchild', 'Node.appendChild()')}}	{{Spec2('DOM WHATWG')}}	{{SpecName("DOM3 Core")}} から変更なし。
{{SpecName('DOM3 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}	{{Spec2('DOM3 Core')}}	{{SpecName("DOM2 Core")}} から変更なし。
{{SpecName('DOM2 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}	{{Spec2('DOM2 Core')}}	{{SpecName("DOM1")}} から変更なし。
{{SpecName('DOM1', 'level-one-core.html#ID-184E7107', 'Node.appendChild()')}}	{{Spec2('DOM1')}}	初期定義。

+ +

ブラウザー実装状況

+ +

概要

- -

現在のノードの複製を返します。

- -

構文

- -

var dupNode = node.cloneNode(deep);
-

- -

node: 複製するノード
dupNode: 新しく生成される node の複製
deep {{optional_inline}}: node の子孫ノードも複製する場合は true 、 node のみを複製する場合は false -
-
注記: DOM4 の仕様では (Gecko 13.0 {{geckoRelease("13.0")}} で実装) 、 deep は省略可能な引数です。省略された場合、 deep には true が渡され、深い複製を生成します。浅い複製を生成するには、 deep を false にする必要があります。
- -
以前のDOMの仕様を実装しているブラウザでは、 deep は必須の引数です。
-
-

- -

例

- -

var p = document.getElementById("para1");
-var p_prime = p.cloneNode(true);
-

- -

注記

- -

ノードを複製すると、そのノードのすべての属性とその値がコピーされます。つまり、HTML属性のイベントを含みます。addEventListener() を使用したものや、要素のプロパティに代入されたもの (例: node.onclick = fn;) は複製されません。

- -

cloneNode によって返される複製ノードは、 {{domxref("Node.appendChild()")}} や同種のメソッドによってドキュメントの一部である他のノードに追加されるまでは、ドキュメントの一部ではありません。また、他のノードに追加されるまでは、親ノードを持ちません。

- -

deep が false に設定されていると、どの子ノードも複製されません。そのため、そのノードに含まれる {{domxref("Text")}} ノードも複製されません。

- -

deep が true に評価できる場合、サブツリー全体 (子 {{domxref("Text")}} ノードにあるテキストを含む) もコピーされます。 {{HTMLElement("img")}} や {{HTMLElement("input")}} 要素などの空ノードの場合には deep を true と false のどちらに設定してもかまいません。

- -

注意: cloneNode() を使用すると、ドキュメント内で要素の id が重複する可能性があります。

- -

別のドキュメントに追加するためにノードを複製する場合は、代わりに {{domxref("Document.importNode()")}} を使用してください。

- -

ブラウザ実装状況

- -

仕様書

- -

{{Spec("http://w3.org/TR/DOM-Level-2-Core/core.html#ID-3A0ED0A4","DOM Level 2 Core: cloneNode","REC")}}
{{Spec("http://w3.org/TR/DOM-Level-3-Core/core.html#ID-3A0ED0A4","DOM Level 3 Core: cloneNode","REC")}}
DOM4: cloneNode (草案)

diff --git a/files/ja/web/api/node/clonenode/index.md b/files/ja/web/api/node/clonenode/index.md new file mode 100644 index 0000000000..db00fc7a61 --- /dev/null +++ b/files/ja/web/api/node/clonenode/index.md @@ -0,0 +1,62 @@ +--- +title: Node.cloneNode() +slug: Web/API/Node/cloneNode +translation_of: Web/API/Node/cloneNode +--- +

+ +

概要

+ +

現在のノードの複製を返します。

+ +

構文

+ +

var dupNode = node.cloneNode(deep);
+

+ +

node: 複製するノード
dupNode: 新しく生成される node の複製
deep {{optional_inline}}: node の子孫ノードも複製する場合は true 、 node のみを複製する場合は false +
+
注記: DOM4 の仕様では (Gecko 13.0 {{geckoRelease("13.0")}} で実装) 、 deep は省略可能な引数です。省略された場合、 deep には true が渡され、深い複製を生成します。浅い複製を生成するには、 deep を false にする必要があります。
+ +
以前のDOMの仕様を実装しているブラウザでは、 deep は必須の引数です。
+
+

+ +

例

+ +

var p = document.getElementById("para1");
+var p_prime = p.cloneNode(true);
+

+ +

注記

+ +

deep が false に設定されていると、どの子ノードも複製されません。そのため、そのノードに含まれる {{domxref("Text")}} ノードも複製されません。

+ +

注意: cloneNode() を使用すると、ドキュメント内で要素の id が重複する可能性があります。

+ +

別のドキュメントに追加するためにノードを複製する場合は、代わりに {{domxref("Document.importNode()")}} を使用してください。

+ +

ブラウザ実装状況

+ +

仕様書

+ +

{{Spec("http://w3.org/TR/DOM-Level-2-Core/core.html#ID-3A0ED0A4","DOM Level 2 Core: cloneNode","REC")}}
{{Spec("http://w3.org/TR/DOM-Level-3-Core/core.html#ID-3A0ED0A4","DOM Level 3 Core: cloneNode","REC")}}
DOM4: cloneNode (草案)

diff --git a/files/ja/web/api/node/comparedocumentposition/index.html b/files/ja/web/api/node/comparedocumentposition/index.html deleted file mode 100644 index 5865081c84..0000000000 --- a/files/ja/web/api/node/comparedocumentposition/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Node.compareDocumentPosition -slug: Web/API/Node/compareDocumentPosition -tags: - - DOM - - DOM Element Methods - - Gecko - - Gecko DOM Reference -translation_of: Web/API/Node/compareDocumentPosition ---- -

- -

概要

- -

そのノードと別のノードの位置を比較し、結果となるビットマスクを返します。

- -

構文

- -

node.compareDocumentPosition( otherNode )
-

- -

パラメーター

- -

node: 比較元ノード
otherNode: node と比較する別ノード

- -

返り値

- -

呼び出し元の node と {{domxref("Document")}} 内の otherNode の関係を表すビットの整数値。複数の条件に適応する場合、1つ以上のビットがセットされることがあります。compareDocumentPosition() を呼び出した node と比較して、otherNode が文書のより前にあり、かつ node を含んでいるならば、DOCUMENT_POSITION_CONTAINS と DOCUMENT_POSITION_PRECEDING のビットがセットされ、結果は0x0Aもしくは10進数の10になります。

- -

注記

- -

戻り値は以下の値を持つビットマスクの何れかとなります。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称	値
`DOCUMENT_POSITION_DISCONNECTED`	1
`DOCUMENT_POSITION_PRECEDING`	2
`DOCUMENT_POSITION_FOLLOWING`	4
`DOCUMENT_POSITION_CONTAINS`	8
`DOCUMENT_POSITION_CONTAINED_BY`	16
`DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC`	32

- -

例

- -

var head = document.getElementsByTagName('head').item(0);
-
-if ( head.compareDocumentPosition(document.body) & Node.DOCUMENT_POSITION_FOLLOWING ) {
-  console.log("head 要素は body 要素より前に記述されています。");
-} else {
-  console.log("head 要素は body 要素の前に配置しなくてはなりません。");
-}
-

- -

注記: compareDocumentPosition の戻り値はビットマスクです。よって、有意な結果を得るにはビット演算子の "&" を用いなくてはならない点に注意して下さい。

- -

仕様

- - - - - - - - - - - - - - - - - - - - - -

仕様書	策定状況	コメント
DOM Level 3	Recommendation
DOM Standard	Living standard

- -

概要

+ +

そのノードと別のノードの位置を比較し、結果となるビットマスクを返します。

+ +

構文

+ +

node.compareDocumentPosition( otherNode )
+

+ +

パラメーター

+ +

node: 比較元ノード
otherNode: node と比較する別ノード

+ +

返り値

+ +

注記

+ +

戻り値は以下の値を持つビットマスクの何れかとなります。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称	値
`DOCUMENT_POSITION_DISCONNECTED`	1
`DOCUMENT_POSITION_PRECEDING`	2
`DOCUMENT_POSITION_FOLLOWING`	4
`DOCUMENT_POSITION_CONTAINS`	8
`DOCUMENT_POSITION_CONTAINED_BY`	16
`DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC`	32

+ +

例

+ +

var head = document.getElementsByTagName('head').item(0);
+
+if ( head.compareDocumentPosition(document.body) & Node.DOCUMENT_POSITION_FOLLOWING ) {
+  console.log("head 要素は body 要素より前に記述されています。");
+} else {
+  console.log("head 要素は body 要素の前に配置しなくてはなりません。");
+}
+

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + +

仕様書	策定状況	コメント
DOM Level 3	Recommendation
DOM Standard	Living standard

+ +

構文

- -

node.contains( otherNode )
-

- -

例

- -

この関数は、ある要素がそのページの body 要素に含まれるかどうかをチェックするものです。contains は包括的かつ決定的であるため、body がそれ自身を含むかどうかは isInPage の意図ではないため明示的に false を返します。

- -

function isInPage(node) {
-  return (node === document.body) ? false : document.body.contains(node);
-}

- -

仕様

- - - - - - - - - - - - - - - - -

仕様	ステータス	コメント
{{SpecName("DOM WHATWG", "#dom-node-contains", "Node.contains()")}}	{{Spec2("DOM WHATWG")}}	Initial definition

- -

ブラウザ実装状況

- -

構文

+ +

node.contains( otherNode )
+

+ +

例

+ +

function isInPage(node) {
+  return (node === document.body) ? false : document.body.contains(node);
+}

+ +

仕様

+ + + + + + + + + + + + + + + + +

仕様	ステータス	コメント
{{SpecName("DOM WHATWG", "#dom-node-contains", "Node.contains()")}}	{{Spec2("DOM WHATWG")}}	Initial definition

+ +

ブラウザ実装状況

+ +

概要

hasChildNodes は指定したノードが子ノードを持つか否かを示す真偽値を返します。

構文

node.hasChildNodes()

例

"foo" を id に持つ要素の子ノードの存在を確認し、存在する場合は最初の子ノードを削除する例を以下に示します。

var foo = document.getElementById("foo");
-
-if ( foo.hasChildNodes() ) {
-  foo.removeChild( foo.childNodes[0] );
-}

仕様書

hasChildNodes

概要

hasChildNodes は指定したノードが子ノードを持つか否かを示す真偽値を返します。

構文

node.hasChildNodes()

例

"foo" を id に持つ要素の子ノードの存在を確認し、存在する場合は最初の子ノードを削除する例を以下に示します。

var foo = document.getElementById("foo");
+
+if ( foo.hasChildNodes() ) {
+  foo.removeChild( foo.childNodes[0] );
+}

仕様書

hasChildNodes

構文

- -

let insertedNode = parentNode.insertBefore(newNode, referenceNode)
-

- -

insertedNode: 挿入されたノード (newNode と同じ) です。
parentNode: 新しく挿入されるノードの親です。
newNode: 挿入されるノードです。
referenceNode: newNode がこのノードの直前に挿入されます。このノードが null である場合は、 newNode は parentNode の子ノードの末尾に挿入されます。

- -

メモ: referenceNode は省略可能な引数ではありません。明示的に {{domxref("Node")}} または null を渡す必要があります。渡し忘れた場合や無効な値を渡した場合は、ブラウザーのバージョンによって異なる動作をすることがあります。

- -

返値

- -

追加された子ノードを返します (ただし newNode が {{domxref("DocumentFragment")}} の場合は、空の {{domxref("DocumentFragment")}} が返ります)。

- -

例

- -

例 1

- -

<div id="parentElement">
-   <span id="childElement">foo bar</span>
-</div>
-
-<script>
-// 挿入する新しいノードを作成する
-let newNode = document.createElement("span")
-
-// 親ノードの参照を取得する
-let parentDiv = document.getElementById("childElement").parentNode
-
-// テストケース [ 1 ] 開始: 既存の childElement (すべて正しく動作)
-let sp2 = document.getElementById("childElement")
-parentDiv.insertBefore(newNode, sp2)
-// テストケース [ 1 ] 終了
-
-// テストケース [ 2 ] 開始: childElement が undefined 型の場合
-let sp2 = undefined // "childElement" の ID を持つノードが存在しない
-parentDiv.insertBefore(newNode, sp2) // Node 型に暗黙に動的型変換
-// テストケース [ 2 ] 終了
-
-// テストケース [ 3 ] 開始: childElement が "undefined" (文字列) の場合
-let sp2 = "undefined" // "childElement" の ID を持つノードが存在しない
-parentDiv.insertBefore(newNode, sp2) // Generates "Type Error: Invalid Argument"
-// テストケース [ 3 ] 終了
-</script>
-

- -

例 2

- -

<div id="parentElement">
-  <span id="childElement">foo bar</span>
-</div>
-
-<script>
-// 新しい只の <span> 要素を作成
-let sp1 = document.createElement("span")
-
-// 参照要素を取得
-let sp2 = document.getElementById("childElement")
-// 親要素を取得
-let parentDiv = sp2.parentNode
-
-// 新しい要素を sp2 の手前に挿入
-parentDiv.insertBefore(sp1, sp2)
-</script>
-

- -

メモ: insertAfter() メソッドはありません。これは insertBefore メソッドと {{domxref("Node.nextSibling")}} の組み合わせでエミュレートできます。

- -

前の例では、 sp1 は以下のようにして sp2 の後に挿入することができます。

- -

parentDiv.insertBefore(sp1, sp2.nextSibling)

- -

sp2 に次の兄弟がない場合、これは最後の子ノードです。 — sp2.nextSibling は null を返し、 sp1 は子ノードリストの末尾 (sp2 の直後) に挿入されます。

- -

例 3

- -

要素を最初の子要素の前に挿入するために、 {{domxref("Node/firstChild", "firstChild")}} プロパティを使用します。

- -

// 親ノードを取得
-let parentElement = document.getElementById('parentElement')
-// 親の最初の子を取得
-let theFirstChild = parentElement.firstChild
-
-// 新しい要素を取得
-let newElement = document.createElement("div")
-
-// 最初の子の前に新しい要素を挿入
-parentElement.insertBefore(newElement, theFirstChild)
-

- -

要素に最初の子がない場合、 firstChild は null になります。その場合も、要素は親の最後の子の後に追加されます。

- -

親要素が最初の子を持っていない場合は、最後の子も持っていません。結果的に、新しく挿入された要素は唯一の要素になります。

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

仕様書	状態	備考
{{SpecName('DOM WHATWG','#dom-node-insertbefore','Node.insertBefore')}}	{{Spec2('DOM WHATWG')}}	挿入アルゴリズムのエラーを修正
{{SpecName('DOM4','#dom-node-insertbefore','Node.insertBefore')}}	{{Spec2('DOM4')}}	より詳細にアルゴリズムを記述
{{SpecName('DOM3 Core','core.html#ID-952280727','Node.insertBefore')}}	{{Spec2('DOM3 Core')}}	目立った変更はなし
{{SpecName('DOM2 Core','core.html#ID-952280727','Node.insertBefore')}}	{{Spec2('DOM2 Core')}}	目立った変更はなし
{{SpecName('DOM1','level-one-core.html#method-insertBefore','Node.insertBefore')}}	{{Spec2('DOM1')}}	導入

- -

ブラウザーの互換性

- -

構文

+ +

let insertedNode = parentNode.insertBefore(newNode, referenceNode)
+

+ +

insertedNode: 挿入されたノード (newNode と同じ) です。
parentNode: 新しく挿入されるノードの親です。
newNode: 挿入されるノードです。
referenceNode: newNode がこのノードの直前に挿入されます。このノードが null である場合は、 newNode は parentNode の子ノードの末尾に挿入されます。

+ +

返値

+ +

追加された子ノードを返します (ただし newNode が {{domxref("DocumentFragment")}} の場合は、空の {{domxref("DocumentFragment")}} が返ります)。

+ +

例

+ +

例 1

+ +

<div id="parentElement">
+   <span id="childElement">foo bar</span>
+</div>
+
+<script>
+// 挿入する新しいノードを作成する
+let newNode = document.createElement("span")
+
+// 親ノードの参照を取得する
+let parentDiv = document.getElementById("childElement").parentNode
+
+// テストケース [ 1 ] 開始: 既存の childElement (すべて正しく動作)
+let sp2 = document.getElementById("childElement")
+parentDiv.insertBefore(newNode, sp2)
+// テストケース [ 1 ] 終了
+
+// テストケース [ 2 ] 開始: childElement が undefined 型の場合
+let sp2 = undefined // "childElement" の ID を持つノードが存在しない
+parentDiv.insertBefore(newNode, sp2) // Node 型に暗黙に動的型変換
+// テストケース [ 2 ] 終了
+
+// テストケース [ 3 ] 開始: childElement が "undefined" (文字列) の場合
+let sp2 = "undefined" // "childElement" の ID を持つノードが存在しない
+parentDiv.insertBefore(newNode, sp2) // Generates "Type Error: Invalid Argument"
+// テストケース [ 3 ] 終了
+</script>
+

+ +

例 2

+ +

<div id="parentElement">
+  <span id="childElement">foo bar</span>
+</div>
+
+<script>
+// 新しい只の <span> 要素を作成
+let sp1 = document.createElement("span")
+
+// 参照要素を取得
+let sp2 = document.getElementById("childElement")
+// 親要素を取得
+let parentDiv = sp2.parentNode
+
+// 新しい要素を sp2 の手前に挿入
+parentDiv.insertBefore(sp1, sp2)
+</script>
+

+ +

メモ: insertAfter() メソッドはありません。これは insertBefore メソッドと {{domxref("Node.nextSibling")}} の組み合わせでエミュレートできます。

+ +

前の例では、 sp1 は以下のようにして sp2 の後に挿入することができます。

+ +

parentDiv.insertBefore(sp1, sp2.nextSibling)

+ +

例 3

+ +

要素を最初の子要素の前に挿入するために、 {{domxref("Node/firstChild", "firstChild")}} プロパティを使用します。

+ +

// 親ノードを取得
+let parentElement = document.getElementById('parentElement')
+// 親の最初の子を取得
+let theFirstChild = parentElement.firstChild
+
+// 新しい要素を取得
+let newElement = document.createElement("div")
+
+// 最初の子の前に新しい要素を挿入
+parentElement.insertBefore(newElement, theFirstChild)
+

+ +

要素に最初の子がない場合、 firstChild は null になります。その場合も、要素は親の最後の子の後に追加されます。

+ +

親要素が最初の子を持っていない場合は、最後の子も持っていません。結果的に、新しく挿入された要素は唯一の要素になります。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

仕様書	状態	備考
{{SpecName('DOM WHATWG','#dom-node-insertbefore','Node.insertBefore')}}	{{Spec2('DOM WHATWG')}}	挿入アルゴリズムのエラーを修正
{{SpecName('DOM4','#dom-node-insertbefore','Node.insertBefore')}}	{{Spec2('DOM4')}}	より詳細にアルゴリズムを記述
{{SpecName('DOM3 Core','core.html#ID-952280727','Node.insertBefore')}}	{{Spec2('DOM3 Core')}}	目立った変更はなし
{{SpecName('DOM2 Core','core.html#ID-952280727','Node.insertBefore')}}	{{Spec2('DOM2 Core')}}	目立った変更はなし
{{SpecName('DOM1','level-one-core.html#method-insertBefore','Node.insertBefore')}}	{{Spec2('DOM1')}}	導入

+ +

ブラウザーの互換性

+ +

概要

isDefaultNamespace は、引数としてネームスペース URI を受け取り、ネームスペースが指定されたノードのデフォルトのネームスペースである場合に true を返します。そうでない場合は false を返します。

構文

result = node.isDefaultNamespace(namespaceURI)
-

result : 戻り値は真偽値 (true / false) となる
namespaceURI : 要素に対してチェックする、名前空間を表す文字列

例

var XULNS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
-var el = document.getElementsByTagNameNS(XULNS, 'textbox')[0];
-
-alert(el.isDefaultNamespace(XULNS)); // true

仕様書

概要

構文

result = node.isDefaultNamespace(namespaceURI)
+

result : 戻り値は真偽値 (true / false) となる
namespaceURI : 要素に対してチェックする、名前空間を表す文字列

例

var XULNS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
+var el = document.getElementsByTagNameNS(XULNS, 'textbox')[0];
+
+alert(el.isDefaultNamespace(XULNS)); // true

仕様書

概要

- -

Node.isEqualNode()は2つのノードが同値かどうかをテストします。それぞれのノードが同じ型で、同じ特性（要素であればIDや子要素の数など）、属性値などを持つ場合、同値と判定されます。比較される内容はノードの型によって異なります。

- -

構文

- -

var isEqualNode = node.isEqualNode(otherNode);
-

- -

otherNode : 同値性を比較する対象の {{domxref("Node")}}

- -

例

- -

3つの {{HTMLElement("div")}} ブロックを作成する例を示します。1つめと3つめは同じ内容と属性を持ち、2番目は異なっています。このとき、isEqualNode() を使ってJavaScriptでノードを比較した結果は以下のようになります。

- -

HTML

- -

<div>最初の要素です。</div>
-<div>2番目の要素です。</div>
-<div>最初の要素です。</div>
-
-<p id="output"></p>

- -

CSS

- -

#output {
-  width: 440px;
-  border: 2px solid black;
-  border-radius: 5px;
-  padding: 10px;
-  margin-top: 20px;
-  display: block;
-}

- -

JavaScript

- -

let output = document.getElementById("output");
-let divList  = document.getElementsByTagName("div");
-
-output.innerHTML += "div 0 と div 0 は同じか: " + divList[0].isEqualNode(divList[0]) + "<br/>";
-output.innerHTML += "div 0 と div 1 は同じか: " + divList[0].isEqualNode(divList[1]) + "<br/>";
-output.innerHTML += "div 0 と div 2 は同じか: " + divList[0].isEqualNode(divList[2]) + "<br/>";

- -

Results

- -

仕様

- - - - - - - - - - - - - - - - - -

仕様	ステータス	コメント
{{SpecName('DOM WHATWG', '#dom-node-isequalnode', 'Node.isEqualNode')}}	{{Spec2('DOM WHATWG')}}

- -

ブラウザー互換性

- - - -

- -

参考

- -

{{domxref("Node.isSameNode()")}}

diff --git a/files/ja/web/api/node/isequalnode/index.md b/files/ja/web/api/node/isequalnode/index.md new file mode 100644 index 0000000000..3eced87fe0 --- /dev/null +++ b/files/ja/web/api/node/isequalnode/index.md @@ -0,0 +1,90 @@ +--- +title: Node.isEqualNode +slug: Web/API/Node/isEqualNode +translation_of: Web/API/Node/isEqualNode +--- +

+ +

概要

+ +

構文

+ +

var isEqualNode = node.isEqualNode(otherNode);
+

+ +

otherNode : 同値性を比較する対象の {{domxref("Node")}}

+ +

例

+ +

HTML

+ +

<div>最初の要素です。</div>
+<div>2番目の要素です。</div>
+<div>最初の要素です。</div>
+
+<p id="output"></p>

+ +

CSS

+ +

#output {
+  width: 440px;
+  border: 2px solid black;
+  border-radius: 5px;
+  padding: 10px;
+  margin-top: 20px;
+  display: block;
+}

+ +

JavaScript

+ +

let output = document.getElementById("output");
+let divList  = document.getElementsByTagName("div");
+
+output.innerHTML += "div 0 と div 0 は同じか: " + divList[0].isEqualNode(divList[0]) + "<br/>";
+output.innerHTML += "div 0 と div 1 は同じか: " + divList[0].isEqualNode(divList[1]) + "<br/>";
+output.innerHTML += "div 0 と div 2 は同じか: " + divList[0].isEqualNode(divList[2]) + "<br/>";

+ +

Results

+ +

仕様

+ + + + + + + + + + + + + + + + + +

仕様	ステータス	コメント
{{SpecName('DOM WHATWG', '#dom-node-isequalnode', 'Node.isEqualNode')}}	{{Spec2('DOM WHATWG')}}

+ +

ブラウザー互換性

+ + + +

+ +

参考

+ +

{{domxref("Node.isSameNode()")}}

diff --git a/files/ja/web/api/node/issamenode/index.html b/files/ja/web/api/node/issamenode/index.html deleted file mode 100644 index f94668cfd5..0000000000 --- a/files/ja/web/api/node/issamenode/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: Node.isSameNode -slug: Web/API/Node/isSameNode -tags: - - DOM - - Gecko DOM Reference - - Node -translation_of: Web/API/Node/isSameNode ---- -

- {{ApiRef}}{{Obsolete_header}}

概要

ふたつのノードが同一ノードの場合は true を、異なる場合は false を返します。

- 注記: このメソッドは DOM level 4 で削除されており、Gecko 10.0 {{geckoRelease("10.0")}} やその他のブラウザの最近のバージョンには実装されていません。よって、別の方法を採る必要があります。
-

// 当メソッド
-node1.isSameNode(node2)
-
-// 代替策
-node1 === node2
-node1 == node2
-
-

構文

isSameNode = node.isSameNode(org);
-

arg : 比較ノード

仕様書

{{spec("http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-isSameNode","DOM Level 3 Core: isSameNode","REC")}}
{{spec("http://www.w3.org/TR/domcore/","DOM Core Level 4","WD")}} で削除されています

概要

ふたつのノードが同一ノードの場合は true を、異なる場合は false を返します。

+ 注記: このメソッドは DOM level 4 で削除されており、Gecko 10.0 {{geckoRelease("10.0")}} やその他のブラウザの最近のバージョンには実装されていません。よって、別の方法を採る必要があります。
+

// 当メソッド
+node1.isSameNode(node2)
+
+// 代替策
+node1 === node2
+node1 == node2
+
+

構文

isSameNode = node.isSameNode(org);
+

arg : 比較ノード

仕様書

{{spec("http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-isSameNode","DOM Level 3 Core: isSameNode","REC")}}
{{spec("http://www.w3.org/TR/domcore/","DOM Core Level 4","WD")}} で削除されています

概要

指定された機能が DOM 実装に含まれており、このノードでサポートされているかどうかをテストします。

構文

element.isSupported(feature, version)

- feature: - テストする機能の名前。DOMImplementation の hasFeature メソッドに渡される名前と同じです。コア DOM 仕様に定義された使用可能な値は、DOM Level 2 の Conformance セクションにリストがあります。
- version: - テストする機能のバージョン番号。DOM Level 2, version 1 では、この文字列は 2.0 になります。バージョンが指定されていなかったり、対象の機能がどのバージョンでもサポートされている場合は true を返します。

例

<div id="doc">
-</div>
-
-<script>
- // 要素を取得し、その要素が DOM2 HTML モジュールをサポートしているかどうかを確認します
- var main = document.getElementById('doc');
- var output = main.isSupported('HTML', '2.0');
-</script>
-

仕様

DOM Level 2 Core: isSupported

Gecko に関する注記

Gecko 19.0 {{geckoRelease("19.0")}} 以降では、このメソッドは常に true を返します。また、このメソッドは Gecko 22.0 {{geckoRelease("22.0")}} で削除されています。

diff --git a/files/ja/web/api/node/issupported/index.md b/files/ja/web/api/node/issupported/index.md new file mode 100644 index 0000000000..3b25dc254b --- /dev/null +++ b/files/ja/web/api/node/issupported/index.md @@ -0,0 +1,44 @@ +--- +title: Node.isSupported +slug: Web/API/Node/isSupported +tags: + - DOM + - DOM Element Methods + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Node/isSupported +--- +

+ {{ApiRef}}{{obsolete_header("22")}}

概要

指定された機能が DOM 実装に含まれており、このノードでサポートされているかどうかをテストします。

構文

element.isSupported(feature, version)

+ feature: + テストする機能の名前。DOMImplementation の hasFeature メソッドに渡される名前と同じです。コア DOM 仕様に定義された使用可能な値は、DOM Level 2 の Conformance セクションにリストがあります。
+ version: + テストする機能のバージョン番号。DOM Level 2, version 1 では、この文字列は 2.0 になります。バージョンが指定されていなかったり、対象の機能がどのバージョンでもサポートされている場合は true を返します。

例

<div id="doc">
+</div>
+
+<script>
+ // 要素を取得し、その要素が DOM2 HTML モジュールをサポートしているかどうかを確認します
+ var main = document.getElementById('doc');
+ var output = main.isSupported('HTML', '2.0');
+</script>
+

仕様

DOM Level 2 Core: isSupported

Gecko に関する注記

Gecko 19.0 {{geckoRelease("19.0")}} 以降では、このメソッドは常に true を返します。また、このメソッドは Gecko 22.0 {{geckoRelease("22.0")}} で削除されています。

diff --git a/files/ja/web/api/node/normalize/index.html b/files/ja/web/api/node/normalize/index.html deleted file mode 100644 index 83026ac378..0000000000 --- a/files/ja/web/api/node/normalize/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Node.normalize -slug: Web/API/Node/normalize -tags: - - DOM - - Gecko - - Node -translation_of: Web/API/Node/normalize ---- -

- -

概要

- -

指定ノードの空のノードを削除し、隣接するテキストノードをひとつに纏め、文書を「正規化 (normalize)」します。

- -

構文

- -

element.normalize();
-

- -

例

- -

var wrapper = document.createElement("div");
-
-wrapper.appendChild( document.createTextNode("Part 1 ") );
-wrapper.appendChild( document.createTextNode("Part 2 ") );
-
-// wrapper.childNodes[0].textContent === "Part 1 "
-// wrapper.childNodes[1].textContent === "Part 2 "
-// この時点で、wrapper の 子ノード数は 2 です。 wrapper.childNodes.length === 2
-
-wrapper.normalize(); // 正規化
-
-// 正規化後の wrapper の子ノード数は 1 となっています。 wrapper.childNodes.length === 1
-// 挿入処理の為に冗長化したノードはひとつに纏められています。 wrapper.childNodes[0].textContent === "Part 1 Part 2"
-

- -

仕様書

- -

DOM Level 2 Core: Node.normalize

- -

概要

+ +

指定ノードの空のノードを削除し、隣接するテキストノードをひとつに纏め、文書を「正規化 (normalize)」します。

+ +

構文

+ +

element.normalize();
+

+ +

例

+ +

var wrapper = document.createElement("div");
+
+wrapper.appendChild( document.createTextNode("Part 1 ") );
+wrapper.appendChild( document.createTextNode("Part 2 ") );
+
+// wrapper.childNodes[0].textContent === "Part 1 "
+// wrapper.childNodes[1].textContent === "Part 2 "
+// この時点で、wrapper の 子ノード数は 2 です。 wrapper.childNodes.length === 2
+
+wrapper.normalize(); // 正規化
+
+// 正規化後の wrapper の子ノード数は 1 となっています。 wrapper.childNodes.length === 1
+// 挿入処理の為に冗長化したノードはひとつに纏められています。 wrapper.childNodes[0].textContent === "Part 1 Part 2"
+

+ +

仕様書

+ +

DOM Level 2 Core: Node.normalize

+ +

構文

- -

var oldChild = node.removeChild(child);
-または
-node.removeChild(child);
-

- -

child は DOM から取り除く、子ノードです。
node は child の親ノードです。
oldChild は取り除かれた子ノードへの参照を保持します。 oldChild === child です。

- -

取り除かれた子ノードはメモリ内に残りますが、 DOM の一部ではなくなります。最初の構文にある通り、取り除いたノードは、 oldChild オブジェクト参照を通じて、後でコード中で再利用することができます。

- -

しかし、第二の構文では oldChild の参照が保持されないので、コードが他の場所でノードへの参照を持っていなければ、直ちに使用できなくなり、無関係になり、ふつうはまもなくメモリから自動的に削除されます。

- -

child が実際には element ノードの子ではない場合、このメソッドは例外を発生します。これは child が呼び出し時には実際に element の子であったものの、要素を取り除こうと呼び出されたイベントハンドラーによって削除された場合にも発生します。

- -

このメソッドでは、2つの異なる方法で例外が発生します。

- -

-
child が実際に element の子であり、 DOM 上に存在していたが削除された場合、このメソッドでは次の例外が発生します。
- -
Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
-
-
child がページの DOM 上に存在しない場合、このメソッドでは次の例外が発生します。
-
- Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.
-

- -

例

- -

<!-- 対象とする HTML のコード -->
-<div id="top" > </div>
-
-<script type="text/javascript">
-      var top = document.getElementById("top");
-      var nested = document.getElementById("nested");
-
-      var garbage = top.removeChild(nested);    //Test Case 2: the method throws the exception (2)
-
-</script>
-
-<!--Sample HTML code-->
-<div id="top">
- <div id="nested"></div>
-</div>
-
-<script type="text/javascript">
-      var top = document.getElementById("top");
-      var nested = document.getElementById("nested");
-
-      var garbage = top.removeChild(nested); // This first call remove correctly the node
-
-      // ......
-      garbage = top.removeChild(nested);   // Test Case 1: the method in the second call here, throws the exception (1)
-
-</script>
-
-

- -

<!--Sample HTML code-->
-
-<div id="top">
-  <div id="nested"></div>
-</div>
-

- -

// 親ノードから指定した子要素を除去
-var d = document.getElementById("top");
-var d_nested = document.getElementById("nested");
-var throwawayNode = d.removeChild(d_nested);
-

- -

// 親要素が不明、不定の場合の方法
-var node = document.getElementById("nested");
-if (node.parentNode) {
-  node.parentNode.removeChild(node);
-}
-

- -

// 要素の全ての子を除去
-var element = document.getElementById("top");
-while (element.firstChild) {
-  element.removeChild(element.firstChild);
-}
-

- -

仕様書

- -

ブラウザーの対応

- -

構文

+ +

var oldChild = node.removeChild(child);
+または
+node.removeChild(child);
+

+ +

child は DOM から取り除く、子ノードです。
node は child の親ノードです。
oldChild は取り除かれた子ノードへの参照を保持します。 oldChild === child です。

+ +

このメソッドでは、2つの異なる方法で例外が発生します。

+ +

+
child が実際に element の子であり、 DOM 上に存在していたが削除された場合、このメソッドでは次の例外が発生します。
+ +
Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
+
+
child がページの DOM 上に存在しない場合、このメソッドでは次の例外が発生します。
+
+ Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.
+

+ +

例

+ +

<!-- 対象とする HTML のコード -->
+<div id="top" > </div>
+
+<script type="text/javascript">
+      var top = document.getElementById("top");
+      var nested = document.getElementById("nested");
+
+      var garbage = top.removeChild(nested);    //Test Case 2: the method throws the exception (2)
+
+</script>
+
+<!--Sample HTML code-->
+<div id="top">
+ <div id="nested"></div>
+</div>
+
+<script type="text/javascript">
+      var top = document.getElementById("top");
+      var nested = document.getElementById("nested");
+
+      var garbage = top.removeChild(nested); // This first call remove correctly the node
+
+      // ......
+      garbage = top.removeChild(nested);   // Test Case 1: the method in the second call here, throws the exception (1)
+
+</script>
+
+

+ +

<!--Sample HTML code-->
+
+<div id="top">
+  <div id="nested"></div>
+</div>
+

+ +

// 親ノードから指定した子要素を除去
+var d = document.getElementById("top");
+var d_nested = document.getElementById("nested");
+var throwawayNode = d.removeChild(d_nested);
+

+ +

// 親要素が不明、不定の場合の方法
+var node = document.getElementById("nested");
+if (node.parentNode) {
+  node.parentNode.removeChild(node);
+}
+

+ +

// 要素の全ての子を除去
+var element = document.getElementById("top");
+while (element.firstChild) {
+  element.removeChild(element.firstChild);
+}
+

+ +

仕様書

+ +

ブラウザーの対応

+ +

構文

- -

replacedNode = parentNode.replaceChild(newChild, oldChild);
-

- -

newChild : oldChild を置き換える新しいノード（既存のノードは先に取り除かれます）
oldChild : 置き換えられる既存ノード
replacedNode : 置き換えられたノード（oldChild と同じノード）

- -

例

- -

// <div>
-//  <span id="childSpan">foo bar</span>
-// </div>
-
-// ID も属性も内容も持たない空要素を生成
-var sp1 = document.createElement("span");
-
-// 生成したノードに id 属性 'newSpan' を付与
-sp1.setAttribute("id", "newSpan");
-
-// テキストノードを生成
-var sp1_content = document.createTextNode("新しい span 要素");
-
-// 生成したテキストノードを先の空要素の子ノードとして配置
-sp1.appendChild(sp1_content);
-
-// 置換に先んじ、参照を代入
-var sp2 = document.getElementById("childSpan"); // 既存の置換対象ノード
-var parentDiv = sp2.parentNode; // 置換対象ノードの親要素
-
-// 既存ノード "sp2" を 生成済の新しい span 要素 "sp1" と置換
-parentDiv.replaceChild(sp1, sp2);
-
-
-// 上記コード実行後のノードは以下の様になります:
-// <div>
-//   <span id="newSpan">新しい span 要素</span>
-// </div>
-

- -

仕様書

- -

ブラウザ実装状況

- -

構文

+ +

replacedNode = parentNode.replaceChild(newChild, oldChild);
+

+ +

newChild : oldChild を置き換える新しいノード（既存のノードは先に取り除かれます）
oldChild : 置き換えられる既存ノード
replacedNode : 置き換えられたノード（oldChild と同じノード）

+ +

例

+ +

// <div>
+//  <span id="childSpan">foo bar</span>
+// </div>
+
+// ID も属性も内容も持たない空要素を生成
+var sp1 = document.createElement("span");
+
+// 生成したノードに id 属性 'newSpan' を付与
+sp1.setAttribute("id", "newSpan");
+
+// テキストノードを生成
+var sp1_content = document.createTextNode("新しい span 要素");
+
+// 生成したテキストノードを先の空要素の子ノードとして配置
+sp1.appendChild(sp1_content);
+
+// 置換に先んじ、参照を代入
+var sp2 = document.getElementById("childSpan"); // 既存の置換対象ノード
+var parentDiv = sp2.parentNode; // 置換対象ノードの親要素
+
+// 既存ノード "sp2" を 生成済の新しい span 要素 "sp1" と置換
+parentDiv.replaceChild(sp1, sp2);
+
+
+// 上記コード実行後のノードは以下の様になります:
+// <div>
+//   <span id="newSpan">新しい span 要素</span>
+// </div>
+

+ +

仕様書

+ +

ブラウザ実装状況

+ +

構文

+> **Note:** このメソッドとは異なり、 {{domxref("Element.append()")}} メソッドは複数の引数や文字列の追加に対応しています。ノードが要素であった場合は、こちらを使用することができます。 -

var aChild = element.appendChild(aChild);

+`appendChild()` は子要素を返すので、メソッドチェーンは動作しません。 -

引数

+```js +let aBlock = document.createElement('block').appendChild( document.createElement('b') ); +``` -

aChild

+`aBlock` に `` を追加するだけですが、 `block` に対して複数の `appendChild` を連鎖させるなど、それ以外の操作を連鎖せることはできません。 -

親ノードに追加する子ノード(要素)

+## 構文 -

戻り値

+```js +appendChild(aChild); +``` -

追加した子ノードです。ただし、{{domxref("DocumentFragment")}}を引数にした場合は、空の{{domxref("DocumentFragment")}}が戻ります。

+### 引数 -

注意

+- `aChild` + - : 指定された親ノードに追加するノード（ふつうは要素）。 -

appendChild() が子要素を返すため、メソッドチェーンが期待通りに動きません。:

+### 返値 -

var aBlock = doc.createElement('block').appendChild(doc.createElement('b'));

+{{domxref("Node")}} で追加された子ノード (`aChild`) を返します。 +ただし、 `aChild` が {{domxref("DocumentFragment")}} であった場合は、空の {{domxref("DocumentFragment")}} を返します。 -

aBlock に  を与えただけでは期待通りに動きません。

+### 例外 -

例

+- `HierarchyRequestError` {{domxref("DOMException")}} + - : DOM ツリーの制約に違反した場合に発生します。すなわち、以下のいずれかが発生する場合です。 + - `aChild` の親が {{domxref("Document")}}, {{domxref("DocumentFragment")}}, {{domxref("Element")}} のいずれにもならない場合。 + - `aChild` を挿入すると循環参照になる場合。すなわち `aChild` がこのノードの祖先である場合。 + - `aChild` が {{domxref("DocumentFragment")}}, {{domxref("DocumentType")}}, {{domxref("Element")}}, {{domxref("CharacterData")}} のいずれでもない場合。 + - 現在のノードが {{domxref("Text")}} であり、親ノードが {{domxref("Document")}} になる場合。 + - 現在のノードが {{domxref("DocumentType")}} であり、その親が {{domxref("Document")}} にならない場合。 _doctype_ は常に _document_ の直下になければならないからです。 + - このノードの親が {{domxref("Document")}} で `aChild` が {{domxref("DocumentFragment")}} であり、複数の {{domxref("Element")}} の子、または {{domxref("Text")}} の子がある場合。 + -`aChild` を挿入すると {{domxref("Document")}} の子の {{domxref("Element")}} が複数になる場合。 -

// 新しい段落要素を作成し、ドキュメントの body の最後に追加します。
-var p = document.createElement("p");
+## 例
+
+```js
+// 新しい段落要素を作成し、文書の body の末尾に追加します。
+let p = document.createElement("p");
 document.body.appendChild(p);
-

- -

仕様

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

仕様	ステータス	コメント
{{SpecName('DOM WHATWG', '#dom-node-appendchild', 'Node.appendChild()')}}	{{Spec2('DOM WHATWG')}}	{{SpecName("DOM3 Core")}} から変更なし。
{{SpecName('DOM3 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}	{{Spec2('DOM3 Core')}}	{{SpecName("DOM2 Core")}} から変更なし。
{{SpecName('DOM2 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}	{{Spec2('DOM2 Core')}}	{{SpecName("DOM1")}} から変更なし。
{{SpecName('DOM1', 'level-one-core.html#ID-184E7107', 'Node.appendChild()')}}	{{Spec2('DOM1')}}	初期定義。

- -

ブラウザー実装状況

- -

概要

+**`cloneNode()`** は {{domxref("Node")}} インターフェイスのメソッドで、このメソッドが呼び出されたノードの複製を返します。 +引数でノードに含まれるサブツリーを一緒に複製するかどうかを制御できます。 -

現在のノードの複製を返します。

+ノードを複製すると、固有（インライン）のリスナーを含む、ノードのすべての属性とその値が複製されます。 [`addEventListener()`](/ja/docs/Web/API/EventTarget/addEventListener) を使って追加されたイベントリスナーや、要素のプロパティに代入されたイベントリスナー（例: `node.onclick = someFunction`）は複製されません。さらに、 {{HTMLElement("canvas")}} 要素では、描画された画像は複製されません。 -

構文

+> **Warning:** `cloneNode()` を使用すると、文書内で要素の ID が重複する可能性があります。 +> +> 元のノードに `id` 属性があり、複製を同じ文書に配置する場合は、複製の ID が重複しないように変更してください。 +> +> また、 `name` 属性も重複した名前を使わない場面では、変更する必要があるかもしれません。 -

var dupNode = node.cloneNode(deep);
-

+**異なる**文書にノードを複製する場合は、代わりに {{domxref("Document.importNode()")}} を使用してください。 -

node: 複製するノード
dupNode: 新しく生成される node の複製
deep {{optional_inline}}: node の子孫ノードも複製する場合は true 、 node のみを複製する場合は false -
-
注記: DOM4 の仕様では (Gecko 13.0 {{geckoRelease("13.0")}} で実装) 、 deep は省略可能な引数です。省略された場合、 deep には true が渡され、深い複製を生成します。浅い複製を生成するには、 deep を false にする必要があります。
+## 構文 -
以前のDOMの仕様を実装しているブラウザでは、 deep は必須の引数です。
-
-

+```js +cloneNode(); +cloneNode(deep); +``` -

例

+### 引数 -

var p = document.getElementById("para1");
-var p_prime = p.cloneNode(true);
-

+- `deep` {{optional_inline}} -

注記

+ - : `true` の場合、ノードとそのサブツリーは、子ノードの {{domxref("Text")}} にあるテキストも含め複製されます。 -

+ `false` の場合、このノードのみが複製されます。 + サブツリーは、そのノードに含まれているテキストも含め、複製されません。 -

+ なお、 `deep` は {{HTMLElement("img")}} や {{HTMLElement("input")}} のような空要素には効果がありません。 -

deep が false に設定されていると、どの子ノードも複製されません。そのため、そのノードに含まれる {{domxref("Text")}} ノードも複製されません。

+### 返値 -

+複製された {{domxref("Node")}} を返します。 +複製されたノードには、文書に所属する他のノードに {{domxref("Node.appendChild()")}} などを使用して追加されるまで、親ノードがなく、文書にも所属していません。 -

注意: cloneNode() を使用すると、ドキュメント内で要素の id が重複する可能性があります。

+## 例 -

別のドキュメントに追加するためにノードを複製する場合は、代わりに {{domxref("Document.importNode()")}} を使用してください。

+```js +let p = document.getElementById("para1") +let p_prime = p.cloneNode(true) +``` -

ブラウザ実装状況

+## 仕様書 -

+{{Specifications}} -

仕様書

+## ブラウザーの互換性 -

{{Spec("http://w3.org/TR/DOM-Level-2-Core/core.html#ID-3A0ED0A4","DOM Level 2 Core: cloneNode","REC")}}
{{Spec("http://w3.org/TR/DOM-Level-3-Core/core.html#ID-3A0ED0A4","DOM Level 3 Core: cloneNode","REC")}}
DOM4: cloneNode (草案)

+{{Compat}} -- cgit v1.2.3-54-g00ecf From 38a18236aca758a3c29963a8654ab7c5d84dd9ca Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 27 Feb 2022 15:00:03 +0900 Subject: 2021/11/08 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/api/node/comparedocumentposition/index.md | 173 ++++++++------------ files/ja/web/api/node/contains/index.md | 88 +++++------ files/ja/web/api/node/isdefaultnamespace/index.md | 96 +++++++---- files/ja/web/api/node/isequalnode/index.md | 116 +++++++------- files/ja/web/api/node/issupported/index.md | 87 +++++----- files/ja/web/api/node/removechild/index.md | 175 +++++++++++---------- files/ja/web/api/node/replacechild/index.md | 113 +++++++------ 7 files changed, 429 insertions(+), 419 deletions(-) (limited to 'files/ja') diff --git a/files/ja/web/api/node/comparedocumentposition/index.md b/files/ja/web/api/node/comparedocumentposition/index.md index 5865081c84..346dc65e73 100644 --- a/files/ja/web/api/node/comparedocumentposition/index.md +++ b/files/ja/web/api/node/comparedocumentposition/index.md @@ -1,118 +1,69 @@ --- -title: Node.compareDocumentPosition +title: Node.compareDocumentPosition() slug: Web/API/Node/compareDocumentPosition tags: - - DOM - - DOM Element Methods - - Gecko - - Gecko DOM Reference + - メソッド + - リファレンス +browser-compat: api.Node.compareDocumentPosition translation_of: Web/API/Node/compareDocumentPosition --- -

- -

概要

- -

そのノードと別のノードの位置を比較し、結果となるビットマスクを返します。

- -

構文

- -

node.compareDocumentPosition( otherNode )
-

- -

パラメーター

- -

node: 比較元ノード
otherNode: node と比較する別ノード

- -

返り値

- -

注記

- -

戻り値は以下の値を持つビットマスクの何れかとなります。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称	値
`DOCUMENT_POSITION_DISCONNECTED`	1
`DOCUMENT_POSITION_PRECEDING`	2
`DOCUMENT_POSITION_FOLLOWING`	4
`DOCUMENT_POSITION_CONTAINS`	8
`DOCUMENT_POSITION_CONTAINED_BY`	16
`DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC`	32

- -

例

- -

var head = document.getElementsByTagName('head').item(0);
-
-if ( head.compareDocumentPosition(document.body) & Node.DOCUMENT_POSITION_FOLLOWING ) {
-  console.log("head 要素は body 要素より前に記述されています。");
+{{APIRef("DOM")}}
+
+**`compareDocumentPosition()`** は {{domxref("Node")}} インターフェイスのメソッドで、引数のノードの位置を、呼び出されたノードからの相対位置で報告します。
+
+## 構文
+
+```js
+compareDocumentPosition(otherNode);
+```
+
+### 引数
+
+- `otherNode`
+  - : {{domxref("Node")}} で、このノードとの相対位置を報告するノードを指定します。
+
+### 返値
+
+整数値で、 `otherNode` の `node` から見た相対位置を、以下の {{domxref("Node")}} の定数プロパティを組み合わせた[ビットマスク]()で表します。
+
+- `Node.DOCUMENT_POSITION_DISCONNECTED` (`1`)
+  - : 両方のノードが、異なる文書、または同じ文書の異なるツリーにあります。
+- `Node.DOCUMENT_POSITION_PRECEDING` (`2`)
+  - : `otherNode` はこのノードより、両者を含むツリーの[前順深さ優先走査](https://ja.wikipedia.org/wiki/木構造_(データ構造)#深さ優先探索)で前にある（祖先ノード、前にある兄弟ノード、前にある兄弟ノードの子孫ノード、祖先ノードの前にある兄弟ノードなど）か、（接続されていないのであれば）任意だが一貫した順序で、そのノードよりも前に位置します。
+- `Node.DOCUMENT_POSITION_FOLLOWING` (`4`)
+  - : `otherNode` はこのノードより、両者を含むツリーの[前順深さ優先走査](https://ja.wikipedia.org/wiki/木構造_(データ構造)#深さ優先探索)で後にある（子孫ノード、後にある兄弟ノード、後にある兄弟ノードの子孫ノード、祖先ノードの後にある兄弟ノードなど）か、（接続されていないのであれば）任意だが一貫した順序で、そのノードよりも後に位置します。
+- `Node.DOCUMENT_POSITION_CONTAINS` (`8`)
+  - : `otherNode` はこのノードの祖先ノードです。
+- `Node.DOCUMENT_POSITION_CONTAINED_BY` (`16`)
+  - : `otherNode` はこのノードの子孫ノードです。
+- `Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC` (`32`)
+  - : その結果は、任意や実装固有の動作に依存し、移植性は保証されません。
+
+複数の条件に適合する場合、複数のビットが設定されることがあります。例えば、 `otherNode` が文書中でより先にあり、**_かつ_** `compareDocumentPosition()` が呼び出されたノードを含んでいれば、 `DOCUMENT_POSITION_CONTAINS` と `DOCUMENT_POSITION_PRECEDING` の両ビットが設定され、 `10` (`0x0A`) という値になります。
+
+## 例
+
+```js
+const head = document.head;
+const body = document.body;
+
+if (head.compareDocumentPosition(body) & Node.DOCUMENT_POSITION_FOLLOWING) {
+  console.log('正しい形式の文書です');
 } else {
-  console.log("head 要素は body 要素の前に配置しなくてはなりません。");
+  console.error(' が  の前にありません');
 }
-

- -

仕様

- - - - - - - - - - - - - - - - - - - - - -

仕様書	策定状況	コメント
DOM Level 3	Recommendation
DOM Standard	Living standard

- -

構文

+> **Note:** ノードは自分自身に**含まれます**。 -

node.contains( otherNode )
-

+## 構文 -

例

+```js +contains(otherNode); +``` -

+### 引数 -

function isInPage(node) {
+- `otherNode`
+  - : 検査する {{domxref("Node")}} です。
+    > **Note:** `otherNode` は省略できませんが、 `null` に設定することはできます。
+
+### 返値
+
+論理値で、 `true` は `otherNode` がそのノードに含まれていることを表します。
+そうでなければ `false` になります。
+
+`otherNode` 引数が `null` であれば、 `contains()` は常に `false` になります。
+
+## 例
+
+この関数は、ある要素がそのページの body 要素に含まれるかどうかを検査するものです。 `contains` は包括的かつ決定的であるため、 body がそれ自身を含むかどうかは `isInPage` の意図するところではないため、明示的に `false` を返します。
+
+```js
+function isInPage(node) {
   return (node === document.body) ? false : document.body.contains(node);
-}

- -

仕様

- - - - - - - - - - - - - - - - -

仕様	ステータス	コメント
{{SpecName("DOM WHATWG", "#dom-node-contains", "Node.contains()")}}	{{Spec2("DOM WHATWG")}}	Initial definition

- -

ブラウザ実装状況

- -

概要

構文

result = node.isDefaultNamespace(namespaceURI)
-

result : 戻り値は真偽値 (true / false) となる
namespaceURI : 要素に対してチェックする、名前空間を表す文字列

例

var XULNS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
-var el = document.getElementsByTagNameNS(XULNS, 'textbox')[0];
-
-alert(el.isDefaultNamespace(XULNS)); // true

仕様書

概要

+**`isEqualNode()`** は {{domxref("Node")}} インターフェイスのメソッドで、 2 つのノードが等しいかどうかを検査します。 +2 つのノードは、同じ型、定義特性（要素の場合、 ID や子ノードの数など）、その属性が一致している場合、等しいといえます。データで一致が求められる具体的な点は、ノードの型によって異なります。 -

+## 構文 -

構文

+```js +isEqualNode(otherNode); +``` -

var isEqualNode = node.isEqualNode(otherNode);
-

+### 引数 -

otherNode : 同値性を比較する対象の {{domxref("Node")}}

+- `otherNode` + - : 比較対象となる {{domxref("Node")}} です。 + > **Note:** この引数は省略可能ではありませんが、 `null` に設定することはできます。 -

例

+### 返値 -

+論理値で、 2 つのノードが等しければ `true`、そうでなければ `false` です。 +`otherNode` が `null` であった場合、 `isEqualNode()` は常に false を返します。 -

HTML

+## 例 -

<div>最初の要素です。</div>
-<div>2番目の要素です。</div>
-<div>最初の要素です。</div>
+この例では、 3 つの {{HTMLElement("div")}} ブロックを作成しています。 1 つ目と 3 つ目は内容と属性が同じであり、 2 つ目は異なっています。このとき、`isEqualNode()` を使って JavaScript でノードを比較した結果は以下のようになります。
 
-<p id="output"></p>

+### HTML -

CSS

+```html +

最初の要素です。

2 番目の要素です。

最初の要素です。

#output {
-  width: 440px;
-  border: 2px solid black;
-  border-radius: 5px;
-  padding: 10px;
-  margin-top: 20px;
-  display: block;
-}

+``` -

JavaScript

+```css hidden +#output { + width: 440px; + border: 2px solid black; + border-radius: 5px; + padding: 10px; + margin-top: 20px; + display: block; +} +``` -

let output = document.getElementById("output");
-let divList  = document.getElementsByTagName("div");
-
-output.innerHTML += "div 0 と div 0 は同じか: " + divList[0].isEqualNode(divList[0]) + "<br/>";
-output.innerHTML += "div 0 と div 1 は同じか: " + divList[0].isEqualNode(divList[1]) + "<br/>";
-output.innerHTML += "div 0 と div 2 は同じか: " + divList[0].isEqualNode(divList[2]) + "<br/>";

+### JavaScript -

Results

- -

+```js +let output = document.getElementById("output"); +let divList = document.getElementsByTagName("div"); -

仕様

+output.innerHTML += "div 0 と div 0 は同じか: " + divList[0].isEqualNode(divList[0]) + "
"; +output.innerHTML += "div 0 と div 1 は同じか: " + divList[0].isEqualNode(divList[1]) + "
"; +output.innerHTML += "div 0 と div 2 は同じか: " + divList[0].isEqualNode(divList[2]) + "
"; +``` +### 結果 - - - - - - - - - - - - - - - -

仕様	ステータス	コメント
{{SpecName('DOM WHATWG', '#dom-node-isequalnode', 'Node.isEqualNode')}}	{{Spec2('DOM WHATWG')}}

+{{ EmbedLiveSample('Example', "100%", "210") }} -

ブラウザー互換性

+## 仕様書 +{{Specifications}} +## ブラウザーの互換性 -

+{{Compat}} -

参考

+## 関連情報 -

{{domxref("Node.isSameNode()")}}

+- {{domxref("Node.isSameNode()")}} diff --git a/files/ja/web/api/node/issupported/index.md b/files/ja/web/api/node/issupported/index.md index 3b25dc254b..db0b3935ee 100644 --- a/files/ja/web/api/node/issupported/index.md +++ b/files/ja/web/api/node/issupported/index.md @@ -1,44 +1,53 @@ --- -title: Node.isSupported +title: Node.isSupported() slug: Web/API/Node/isSupported tags: - - DOM - - DOM Element Methods - - Gecko - - Gecko DOM Reference + - メソッド + - 非推奨 + - リファレンス +browser-compat: api.Node.isSupported translation_of: Web/API/Node/isSupported --- -

- {{ApiRef}}{{obsolete_header("22")}}

概要

指定された機能が DOM 実装に含まれており、このノードでサポートされているかどうかをテストします。

構文

element.isSupported(feature, version)

- feature: - テストする機能の名前。DOMImplementation の hasFeature メソッドに渡される名前と同じです。コア DOM 仕様に定義された使用可能な値は、DOM Level 2 の Conformance セクションにリストがあります。
- version: - テストする機能のバージョン番号。DOM Level 2, version 1 では、この文字列は 2.0 になります。バージョンが指定されていなかったり、対象の機能がどのバージョンでもサポートされている場合は true を返します。

例

<div id="doc">
-</div>
-
-<script>
- // 要素を取得し、その要素が DOM2 HTML モジュールをサポートしているかどうかを確認します
- var main = document.getElementById('doc');
- var output = main.isSupported('HTML', '2.0');
-</script>
-

仕様

DOM Level 2 Core: isSupported

Gecko に関する注記

Gecko 19.0 {{geckoRelease("19.0")}} 以降では、このメソッドは常に true を返します。また、このメソッドは Gecko 22.0 {{geckoRelease("22.0")}} で削除されています。

+{{APIRef("DOM")}}{{deprecated_header}} + +**`isSupported()`** は {{domxref("Node")}} インターフェイスのメソッドで、この DOM の実装が指定された機能を実装しており、このノードがこの機能に対応しているかどうかを検査した結果を論理値で返します。 + +## 構文 + +```js +isSupported(feature, version); +``` + +### 引数 + +- `feature` + - : 文字列で、検査する機能の名前を指定します。 + これは [DOMImplementation](/ja/docs/Web/API/Document/implementation) の `hasFeature` メソッドに渡すものと同じ名前です。有効な値については、 [Conformance の章](https://www.w3.org/TR/DOM-Level-2-Core/introduction.html#ID-Conformance)にあります。 +- `version` + - : 文字列で、検査する機能のバージョン番号を指定します。 + DOM Level 2 第 1 版では、これは `2.0` という文字列です。このバージョンが指定されなかった場合、何れかの版のメソッドが対応していれば、このメソッドは true を返します。 + +## 例 + +```html +

+ + +``` + +## 仕様書 + +この機能は仕様書に含まれていません。標準化路線から外れました。 + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Node.isEqualNode()")}} diff --git a/files/ja/web/api/node/removechild/index.md b/files/ja/web/api/node/removechild/index.md index ff64604414..335eea5b85 100644 --- a/files/ja/web/api/node/removechild/index.md +++ b/files/ja/web/api/node/removechild/index.md @@ -1,124 +1,125 @@ --- -title: Node.removeChild +title: Node.removeChild() slug: Web/API/Node/removeChild tags: - - DOM - - Gecko - - Node + - メソッド + - リファレンス +browser-compat: api.Node.removeChild translation_of: Web/API/Node/removeChild --- -

Node.removeChild() メソッドは、 DOM から子ノードを取り除きます。取り除いたノードを返します。

+{{APIRef("DOM")}} -

構文

+**`removeChild()`** は {{domxref("Node")}} インターフェイスのメソッドで、子ノードを DOM から取り除き、取り除いたノードを返します。 -

var oldChild = node.removeChild(child);
-または
-node.removeChild(child);
-

+> **Note:** 取り除かれた子ノードへの参照が保持されている限り、子ノードはメモリー内に残りますが、 DOM の一部ではなくなります。 +> 後のコードで再利用することができます。 +> +> `removeChild()` の返値が保持されず、他の参照もなくなった場合は、まもなくメモリーから[自動的に削除](/en-US/docs/Web/JavaScript/Memory_Management)されます。 -

child は DOM から取り除く、子ノードです。
node は child の親ノードです。
oldChild は取り除かれた子ノードへの参照を保持します。 oldChild === child です。

+{{domxref("Node.cloneNode()")}} とは異なり、返値は関連付けられた {{domxref("EventListener")}} オブジェクトを保持します。 -

+## 構文 -

+```js +removeChild(child); +``` -

+### 引数 -

このメソッドでは、2つの異なる方法で例外が発生します。

+- `child` + - : {{domxref("Node")}} で、 DOM から取り除きたい子ノードを指定します。 -

-
child が実際に element の子であり、 DOM 上に存在していたが削除された場合、このメソッドでは次の例外が発生します。
+### 例外 -
Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
-
-
child がページの DOM 上に存在しない場合、このメソッドでは次の例外が発生します。
-
- Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.
-

+- `NotFoundError` {{domxref("DOMException")}} + - : `child` がこのノードの子ではない場合に発生します。 +- {{jsxref("TypeError")}} + - : `child` が `null` であった場合に発生します。 -

例

+## 例 -

<!-- 対象とする HTML のコード -->
-<div id="top" > </div>
+### 単純な例
 
-<script type="text/javascript">
-      var top = document.getElementById("top");
-      var nested = document.getElementById("nested");
+この HTML を使います。
 
-      var garbage = top.removeChild(nested);    //Test Case 2: the method throws the exception (2)
+```html
+
+  
+
+```
 
-</script>
+親ノードが分かる場合に、指定された要素を取り除きます。
 
-<!--Sample HTML code-->
-<div id="top">
- <div id="nested"></div>
-</div>
+```js
+let d = document.getElementById("top");
+let d_nested = document.getElementById("nested");
+let throwawayNode = d.removeChild(d_nested);
+```
 
-<script type="text/javascript">
-      var top = document.getElementById("top");
-      var nested = document.getElementById("nested");
+親ノードが分からないときに指定された要素を取り除きます。
 
-      var garbage = top.removeChild(nested); // This first call remove correctly the node
+```js
+let node = document.getElementById("nested");
+if (node.parentNode) {
+  node.parentNode.removeChild(node);
+}
+```
 
-      // ......
-      garbage = top.removeChild(nested);   // Test Case 1: the method in the second call here, throws the exception (1)
+ある要素からすべての子を削除します。
 
-</script>
+```js
+let element = document.getElementById("top");
+while (element.firstChild) {
+  element.removeChild(element.firstChild);
+}
+```
 
-

+### TypeError が発生する例 -

<!--Sample HTML code-->
+```html
+
+ 
+```
 
-<div id="top">
-  <div id="nested"></div>
-</div>
-

+```js +let top = document.getElementById("top"); +let nested = document.getElementById("nested"); -

// 親ノードから指定した子要素を除去
-var d = document.getElementById("top");
-var d_nested = document.getElementById("nested");
-var throwawayNode = d.removeChild(d_nested);
-

+// TypeError が発生 +let garbage = top.removeChild(nested); +``` -

// 親要素が不明、不定の場合の方法
-var node = document.getElementById("nested");
-if (node.parentNode) {
-  node.parentNode.removeChild(node);
-}
-

+### NotFoundError が発生する例 -

// 要素の全ての子を除去
-var element = document.getElementById("top");
-while (element.firstChild) {
-  element.removeChild(element.firstChild);
-}
-

+```html + +

+``` + +```js +let top = document.getElementById("top"); +let nested = document.getElementById("nested"); + +// 最初の呼び出しでは正しくノードを取り除く +let garbage = top.removeChild(nested); -

仕様書

+// NotFoundError が発生 +garbage = top.removeChild(nested); +``` -

+## 仕様書 -

ブラウザーの対応

+{{Specifications}} -

+## ブラウザーの互換性 -

構文

+**`Node.replaceChild()`** メソッドは指定ノードの子ノードを別のノードに置き換えます。 -

replacedNode = parentNode.replaceChild(newChild, oldChild);
-

+## 構文 -

newChild : oldChild を置き換える新しいノード（既存のノードは先に取り除かれます）
oldChild : 置き換えられる既存ノード
replacedNode : 置き換えられたノード（oldChild と同じノード）

+```js +replaceChild(newChild, oldChild); +``` -

例

+### 引数 -

// <div>
-//  <span id="childSpan">foo bar</span>
-// </div>
+- `newChild`
+  - : `oldChild` を置き換える新しいノードです。
+    > **Warning:** 新しいノードが既に DOM のどこか別なところにある場合は、まずその位置から取り除かれます。
+- `oldChild`
+  - : 置き換えられる子ノードです。
+
+> **Note:** 引数の順序で、*新しい*ものの前に*古い*ものが来るのは異例です。
+[`Element.replaceWith()`](/ja/docs/Web/API/Element/replaceWith) は、要素であるノードのみに適用されるものですが、読んだり使用したりしやすいかもしれません。
+
+### 返値
+
+置き換えられた {{domxref("Node")}} です。これは `oldChild` と同じノードです。
+
+### 例外
+
+- `HierarchyRequestError` {{domxref("DOMException")}}
+  - : DOM ツリーの制約に違反した場合に発生します。すなわち、以下のいずれかが発生する場合です。
+    - `oldChild` の親が {{domxref("Document")}}, {{domxref("DocumentFragment")}}, {{domxref("Element")}} のいずれにもならない場合。
+    - `oldChild` を `newChild` で置き換えると循環参照になる場合。すなわち `newChild` がこのノードの祖先である場合。
+    - `newChild` が {{domxref("DocumentFragment")}}, {{domxref("DocumentType")}}, {{domxref("Element")}}, {{domxref("CharacterData")}} のいずれでもない場合。
+    - 現在のノードが {{domxref("Text")}} であり、親ノードが {{domxref("Document")}} になる場合。
+    - 現在のノードが {{domxref("DocumentType")}} であり、その親が {{domxref("Document")}} にならない場合。 _doctype_ は常に _document_ の直下になければならないからです。
+    - このノードの親が {{domxref("Document")}} で `newChild` が {{domxref("DocumentFragment")}} であり、複数の {{domxref("Element")}} の子、または {{domxref("Text")}} の子がある場合。
+    - `oldChild` を `newChild` で置き換えると、 {{domxref("Document")}} の子の {{domxref("Element")}} が複数になる場合。
+    - `oldChild` を `newChild` で置き換えると、 {{domxref("Element")}} ノードが {{domxref("DocumentType")}} の前になる場合。
+- `NotFoundError` {{domxref("DOMException")}}
+  - : `oldChild` の親ノードが現在のノードではない場合に発生します。
+
+## 例
+
+```js
+// 前提:
+// 
+//  foo bar
+// 
 
 // ID も属性も内容も持たない空要素を生成
-var sp1 = document.createElement("span");
+const sp1 = document.createElement("span");
 
 // 生成したノードに id 属性 'newSpan' を付与
-sp1.setAttribute("id", "newSpan");
+sp1.id = "newSpan";
 
-// テキストノードを生成
-var sp1_content = document.createTextNode("新しい span 要素");
+// 新しい要素にいくらかの内容を作成
+const sp1_content = document.createTextNode("新しい置換 span 要素");
 
-// 生成したテキストノードを先の空要素の子ノードとして配置
+// その内容を新しい要素に適用
 sp1.appendChild(sp1_content);
 
-// 置換に先んじ、参照を代入
-var sp2 = document.getElementById("childSpan"); // 既存の置換対象ノード
-var parentDiv = sp2.parentNode; // 置換対象ノードの親要素
+// 置き換えられる既存のノードの参照を作る
+const sp2 = document.getElementById("childSpan");
+const parentDiv = sp2.parentNode;
 
-// 既存ノード "sp2" を 生成済の新しい span 要素 "sp1" と置換
+// 既存のノード sp2 を新しい span 要素 sp1 で置換
 parentDiv.replaceChild(sp1, sp2);
 
+// 結果:
+// 
+//   新しい置換 span 要素
+// 
+```
 
-// 上記コード実行後のノードは以下の様になります:
-// <div>
-//   <span id="newSpan">新しい span 要素</span>
-// </div>
-

- -

仕様書

+## 仕様書 -

+{{Specifications}} -

ブラウザ実装状況

+## ブラウザーの互換性 -

+{{Compat}} -

概要

hasChildNodes は指定したノードが子ノードを持つか否かを示す真偽値を返します。

構文

node.hasChildNodes()

例

"foo" を id に持つ要素の子ノードの存在を確認し、存在する場合は最初の子ノードを削除する例を以下に示します。

var foo = document.getElementById("foo");
-
-if ( foo.hasChildNodes() ) {
-  foo.removeChild( foo.childNodes[0] );
-}

仕様書

hasChildNodes

構文

+## 構文 -

let insertedNode = parentNode.insertBefore(newNode, referenceNode)
-

+```js +insertBefore(newNode, referenceNode); +``` -

insertedNode: 挿入されたノード (newNode と同じ) です。
parentNode: 新しく挿入されるノードの親です。
newNode: 挿入されるノードです。
referenceNode: newNode がこのノードの直前に挿入されます。このノードが null である場合は、 newNode は parentNode の子ノードの末尾に挿入されます。

+### 引数 -

+- `newNode` + - : 挿入するノードです。 +- `referenceNode` + - : `newNode` が挿入される位置の前にあるノードです。このノードが `null` である場合は、 `newNode` はこのノードの子ノードの末尾に挿入されます。 + > **Note:** `referenceNode` は省略可能な引数では**ありません**。 + > 明示的に {{domxref("Node")}} または `null` を渡す必要があります。 + > 渡さなかった場合や無効な値を渡した場合の[動作](https://code.google.com/p/chromium/issues/detail?id=419780)は、ブラウザーのバージョンによって[異なる](https://bugzilla.mozilla.org/show_bug.cgi?id=119489)可能性があります。 + +## 返値 -

返値

+追加された子ノードを返します（ただし `newNode` が {{domxref("DocumentFragment")}} の場合は、空の {{domxref("DocumentFragment")}} を返します）。 -

追加された子ノードを返します (ただし newNode が {{domxref("DocumentFragment")}} の場合は、空の {{domxref("DocumentFragment")}} が返ります)。

+### 例外 -

例

+挿入前の検証 -

例 1

+## 例 -

<div id="parentElement">
-   <span id="childElement">foo bar</span>
-</div>
+### 例 1
+
+```html
+
+   foo bar
+
 
-<script>
+
+```
 
-例 2
+### 例 2
 
-<div id="parentElement">
-  <span id="childElement">foo bar</span>
-</div>
+```html
+
+  foo bar
+
 
-<script>
-// 新しい只の <span> 要素を作成
+
+```
+
+> **Note:** `insertAfter()` メソッドはありません。
+> これは `insertBefore` メソッドと {{domxref("Node.nextSibling")}} の組み合わせでエミュレートできます。
+>
+> 前の例では、 `sp1` は以下のようにして `sp2` の後に挿入することができます。
+>
+> ```js
+> parentDiv.insertBefore(sp1, sp2.nextSibling)
+> ```
+>
+> `sp2` に次の兄弟ノードがない場合、これが最後の子ノードです。 — `sp2.nextSibling` は `null` を返し、 `sp1` は子ノードリストの末尾（`sp2` の直後）に挿入されます。
+
+### 例 3
+
+要素を最初の子要素の前に挿入するために、 {{domxref("Node/firstChild", "firstChild")}} プロパティを使用します。
+
+```js
+// 親ノードを取得
+let parentElement = document.getElementById('parentElement')
+// 親ノードの最初の子ノードを取得
+let theFirstChild = parentElement.firstChild
 
-
-メモ: insertAfter() メソッドはありません。これは insertBefore メソッドと {{domxref("Node.nextSibling")}} の組み合わせでエミュレートできます。
-
+// 新しい要素を取得
+let newElement = document.createElement("div")
 
-前の例では、 sp1 は以下のようにして sp2 の後に挿入することができます。
+// 最初の子ノードの前に新しい要素を挿入
+parentElement.insertBefore(newElement, theFirstChild)
+```
 
-parentDiv.insertBefore(sp1, sp2.nextSibling)
+要素に最初の子ノードがない場合、 `firstChild` は `null` になります。その場合も、要素は親ノードの最後の子ノードの後に追加されます。
 
-sp2 に次の兄弟がない場合、これは最後の子ノードです。 — sp2.nextSibling は null を返し、 sp1 は子ノードリストの末尾 (sp2 の直後) に挿入されます。
+親要素に最初の子ノードがない場合は、最後の子ノードもありません。結果的に、新しく挿入された要素は**唯一の**要素になります。
 
-例 3
+## 仕様書
 
-要素を最初の子要素の前に挿入するために、 {{domxref("Node/firstChild", "firstChild")}} プロパティを使用します。
+{{Specifications}}
 
-// 親ノードを取得
-let parentElement = document.getElementById('parentElement')
-// 親の最初の子を取得
-let theFirstChild = parentElement.firstChild
+## ブラウザーの互換性
 
-// 新しい要素を取得
-let newElement = document.createElement("div")
+{{Compat}}
 
-// 最初の子の前に新しい要素を挿入
-parentElement.insertBefore(newElement, theFirstChild)
-
-
-要素に最初の子がない場合、 firstChild は null になります。その場合も、要素は親の最後の子の後に追加されます。
-
-親要素が最初の子を持っていない場合は、最後の子も持っていません。結果的に、新しく挿入された要素は唯一の要素になります。
-
-仕様書
-
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-仕様書 状態 備考
{{SpecName('DOM WHATWG','#dom-node-insertbefore','Node.insertBefore')}} {{Spec2('DOM WHATWG')}} 挿入アルゴリズムのエラーを修正
{{SpecName('DOM4','#dom-node-insertbefore','Node.insertBefore')}} {{Spec2('DOM4')}} より詳細にアルゴリズムを記述
{{SpecName('DOM3 Core','core.html#ID-952280727','Node.insertBefore')}} {{Spec2('DOM3 Core')}} 目立った変更はなし
{{SpecName('DOM2 Core','core.html#ID-952280727','Node.insertBefore')}} {{Spec2('DOM2 Core')}} 目立った変更はなし
{{SpecName('DOM1','level-one-core.html#method-insertBefore','Node.insertBefore')}} {{Spec2('DOM1')}} 導入
-
-ブラウザーの互換性
-
-{{Compat("api.Node.insertBefore")}}
-
-関連情報
-
-
- {{domxref("Node.removeChild()")}}
- {{domxref("Node.replaceChild()")}}
- {{domxref("Node.appendChild()")}}
- {{domxref("Node.hasChildNodes()")}}
- {{domxref("Element.insertAdjacentElement()")}}
- {{domxref("ParentNode.prepend()")}}
-
+## 関連情報
+
+- {{domxref("Node.removeChild()")}}
+- {{domxref("Node.replaceChild()")}}
+- {{domxref("Node.appendChild()")}}
+- {{domxref("Node.hasChildNodes()")}}
+- {{domxref("Element.insertAdjacentElement()")}}
+- {{domxref("Element.prepend()")}}
+- {{domxref("Element.before()")}}
+- {{domxref("Element.after()")}}
-- 
cgit v1.2.3-54-g00ecf


From dd4c3fd91ffcfdfbbe292e9c8fe826ae76cdbfed Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Sun, 27 Feb 2022 17:17:47 +0900
Subject: 2022/02/09 時点の英語版に同期
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/node/issamenode/index.md | 112 +++++++++++++++++++++---------
 1 file changed, 78 insertions(+), 34 deletions(-)

(limited to 'files/ja')

diff --git a/files/ja/web/api/node/issamenode/index.md b/files/ja/web/api/node/issamenode/index.md
index f94668cfd5..ffd47f8bf3 100644
--- a/files/ja/web/api/node/issamenode/index.md
+++ b/files/ja/web/api/node/issamenode/index.md
@@ -1,39 +1,83 @@
 ---
-title: Node.isSameNode
+title: Node.isSameNode()
 slug: Web/API/Node/isSameNode
 tags:
-  - DOM
-  - Gecko DOM Reference
-  - Node
+  - メソッド
+  - リファレンス
+browser-compat: api.Node.isSameNode
 translation_of: Web/API/Node/isSameNode
 ---
-
- {{ApiRef}}{{Obsolete_header}}
-概要
-ふたつのノードが同一ノードの場合は true を、異なる場合は false を返します。
-
- 注記: このメソッドは DOM level 4 で削除されており、Gecko 10.0 {{geckoRelease("10.0")}} やその他のブラウザの最近のバージョンには実装されていません。よって、別の方法を採る必要があります。

- // 当メソッド
-node1.isSameNode(node2)
-
-// 代替策
-node1 === node2
-node1 == node2
-
-
-
-構文
-isSameNode = node.isSameNode(org);
-
-
- arg : 比較ノード
-
-仕様書
-
- {{spec("http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-isSameNode","DOM Level 3 Core: isSameNode","REC")}}
- {{spec("http://www.w3.org/TR/domcore/","DOM Core Level 4","WD")}} で削除されています
-
-関連情報
-
- {{domxref("Node.isEqualNode")}}
-
+{{APIRef("DOM")}}
+
+**`isSameNode()`** は {{domxref("Node")}} インターフェイスのメソッドで、 [`===` 厳密等価演算子](/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality)の古い別名です。
+すなわち、 2 つのノードが全く同じであるかどうか（言い換えれば、同じオブジェクトを指しているかどうか）を検査します。
+
+> **Note:** `isSameNode()` を使用する必要はありません。 `===` 厳密等価演算子を使用してください。
+
+## 構文
+
+```js
+isSameNode(otherNode);
+```
+
+### 引数
+
+- `otherNode`
+  - : 検査対象となる {{domxref("Node")}} です。
+    > **Note:** この引数は省略可能ではありませんが、 `null` に設定することはできます。
+
+### 返値
+
+論理値で、両ノードが厳密に等しい場合は `true`、そうでなければ `false` です。
+
+## 例
+
+この例では、 3 つの {{HTMLElement("div")}} ブロックを作成しています。 1 つ目と 3 つ目は内容と属性が同じであり、 2 つ目は異なっています。このとき、`isSameNode()` を使って JavaScript でノードを比較した結果は以下のようになります。
+
+### HTML
+
+```html
+最初の要素です。
+2 番目の要素です。
+最初の要素です。
+
+
+```
+
+```css hidden
+#output {
+  width: 440px;
+  border: 2px solid black;
+  border-radius: 5px;
+  padding: 10px;
+  margin-top: 20px;
+  display: block;
+}
+```
+
+### JavaScript
+
+```js
+let output = document.getElementById("output");
+let divList  = document.getElementsByTagName("div");
+
+output.innerHTML += "div 0 と div 0 は同じか: " + divList[0].isSameNode(divList[0]) + "
";
+output.innerHTML += "div 0 と div 1 は同じか: " + divList[0].isSameNode(divList[1]) + "
";
+output.innerHTML += "div 0 と div 2 は同じか: " + divList[0].isSameNode(divList[2]) + "
";
+```
+
+### 結果
+
+{{ EmbedLiveSample('Example', "100%", "205") }}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("Node.isEqualNode()")}}
-- 
cgit v1.2.3-54-g00ecf


From dd0a249a5aca733d09f33a10b32e20e435a99da9 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Sun, 27 Feb 2022 17:35:44 +0900
Subject: 2022/01/23 時点の英語版に同期
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/node/normalize/index.md | 79 +++++++++++++++++++++-----------
 1 file changed, 52 insertions(+), 27 deletions(-)

(limited to 'files/ja')

diff --git a/files/ja/web/api/node/normalize/index.md b/files/ja/web/api/node/normalize/index.md
index 83026ac378..7432a8f979 100644
--- a/files/ja/web/api/node/normalize/index.md
+++ b/files/ja/web/api/node/normalize/index.md
@@ -1,48 +1,73 @@
 ---
-title: Node.normalize
+title: Node.normalize()
 slug: Web/API/Node/normalize
 tags:
-  - DOM
-  - Gecko
-  - Node
+  - メソッド
+  - リファレンス
+browser-compat: api.Node.normalize
 translation_of: Web/API/Node/normalize
 ---
-{{ApiRef}}
+{{APIRef("DOM")}}
 
-概要
+**`normalize()`** は {{domxref("Node")}} インターフェイスのメソッドで、指定されたノードとその下のツリーを*正規化された*形にします。
+正規化されたサブツリーでは、サブツリー内に空のテキストノードがなくなり、隣り合うテキストノードがなくなります。
 
-指定ノードの空のノードを削除し、隣接するテキストノードをひとつに纏め、文書を「正規化 (normalize)」します。
+## 構文
 
-構文
+```js
+normalize();
+```
 
-element.normalize();
-
+### 引数
 
-例
+なし。
 
-var wrapper = document.createElement("div");
+### 返値
+
+なし。
+
+## 例
+
+```html
+
+```
+
+```js
+let wrapper = document.createElement("div");
 
 wrapper.appendChild( document.createTextNode("Part 1 ") );
 wrapper.appendChild( document.createTextNode("Part 2 ") );
 
-// wrapper.childNodes[0].textContent === "Part 1 "
-// wrapper.childNodes[1].textContent === "Part 2 "
-// この時点で、wrapper の 子ノード数は 2 です。 wrapper.childNodes.length === 2
+let node = wrapper.firstChild;
+let result = "正規化前:
";
+while (node) {
+  result += " " + node.nodeName + ": " + node.nodeValue + "
";
+  node = node.nextSibling;
+}
+
+wrapper.normalize();
+
+node = wrapper.firstChild;
+result += "

正規化後:
";
+while (node) {
+  result += " " + node.nodeName + ": " + node.nodeValue + "
";
+  node = node.nextSibling;
+}
+
+const output = document.getElementById("result");
+output.innerHTML = result;
+```
+
+{{ EmbedLiveSample("Example", "100%", "170")}}
 
-wrapper.normalize(); // 正規化
+## 仕様書
 
-// 正規化後の wrapper の子ノード数は 1 となっています。 wrapper.childNodes.length === 1
-// 挿入処理の為に冗長化したノードはひとつに纏められています。 wrapper.childNodes[0].textContent === "Part 1 Part 2"
-
+{{Specifications}}
 
-仕様書
+## ブラウザーの互換性
 
-
- DOM Level 2 Core: Node.normalize
-
+{{Compat}}
 
-関連情報
+## 関連情報
 
-
- Text.splitText
-
+- 逆の操作である {{domxref("Text.splitText()")}}
-- 
cgit v1.2.3-54-g00ecf


From 0e16fb2efa27c368c2b92b40773982ce3a335aff Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Mon, 28 Feb 2022 02:22:47 +0900
Subject: 2021/11/08 時点の英語版に基づき新規翻訳
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/node/lookupprefix/index.md | 77 +++++++++++++++++++++++++++++
 1 file changed, 77 insertions(+)
 create mode 100644 files/ja/web/api/node/lookupprefix/index.md

(limited to 'files/ja')

diff --git a/files/ja/web/api/node/lookupprefix/index.md b/files/ja/web/api/node/lookupprefix/index.md
new file mode 100644
index 0000000000..30dcc549ac
--- /dev/null
+++ b/files/ja/web/api/node/lookupprefix/index.md
@@ -0,0 +1,77 @@
+---
+title: Node.lookupPrefix()
+slug: Web/API/Node/lookupPrefix
+tags:
+  - メソッド
+  - リファレンス
+browser-compat: api.Node.lookupPrefix
+translation_of: Web/API/Node/lookupPrefix
+---
+{{APIRef("DOM")}}
+
+**`lookupPrefix()`** は {{domxref("Node")}} インターフェイスのメソッドで、指定された名前空間 URI に対応する接頭辞があれば、それを含む文字列を返します。ない場合は `null` を返します。
+複数の接頭辞の可能性があれば、最初の接頭辞を返します。
+
+## 構文
+
+```js
+lookupPrefix(namespace);
+```
+
+### 引数
+
+- `namespace`
+  - : 接頭辞を検索するための名前空間の入った文字列です。
+    > **Note:** この引数は省略可能ではありませんが、 `null` に設定することはできます。
+
+### 返値
+
+対応する接頭辞の入った文字列です。見つからなかった場合は `null` になります。
+`namespace` が null または空文字列であった場合、 `lookupPrefix()` は `null` を返します。
+
+このノードが {{domxref("DocumentType")}} または {{domxref("DocumentFragment")}} であった場合は、　`lookupPrefix()` は常に `null` を返します。
+
+## 例
+
+```html
+Prefix for http://www.w3.org/2000/svg on <output>: 未検査

+Prefix for http://www.w3.org/XML/1998/namespace on <output>: 未検査

+Prefix for http://www.w3.org/TR/html4/ on <output>: 未検査

+Prefix for https://www.w3.org/1999/xlink on <output>: 未検査

+Prefix for http://www.w3.org/2000/svg on <svg>: 未検査

+Prefix for https://www.w3.org/1999/xlink on <svg>: 未検査

+Prefix for http://www.w3.org/XML/1998/namespace on <svg>: 未検査

+
+
+```
+
+```js
+const button = document.getElementsByTagName('button')[0];
+button.addEventListener("click", function () {
+  const aHtmlElt = document.getElementsByTagName('output')[0];
+  const aSvgElt = document.getElementsByTagName('svg')[0];
+
+  const result = document.getElementsByTagName('output');
+  result[0].value = aHtmlElt.lookupPrefix("http://www.w3.org/2000/svg"); // true
+  result[1].value = aHtmlElt.lookupPrefix("http://www.w3.org/XML/1998/namespace"); // false
+  result[2].value = aHtmlElt.lookupPrefix("http://www.w3.org/TR/html4/"); // true
+  result[3].value = aHtmlElt.lookupPrefix("https://www.w3.org/1999/xlink"); // false
+  result[4].value = aSvgElt.lookupPrefix("http://www.w3.org/2000/svg"); // true
+  result[5].value = aSvgElt.lookupPrefix("https://www.w3.org/1999/xlink"); // true
+  result[6].value = aSvgElt.lookupPrefix("http://www.w3.org/XML/1998/namespace"); // false
+});
+```
+
+{{ EmbedLiveSample('Example','100%',190) }}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [http://www.w3.org/TR/DOM-Level-3-Cor...amespacePrefix](https://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-lookupNamespacePrefix)
-- 
cgit v1.2.3-54-g00ecf


From beff76e80538728c83865aa5d1af2f073fd83831 Mon Sep 17 00:00:00 2001
From: Atsuto Yamashita 
Date: Mon, 7 Mar 2022 01:52:45 +0900
Subject: user_input_methods の推奨事項の日本語訳追加 (#4423)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 推奨事項の日本語訳追加

* 一部文言を修正

* 「-er」で終わる単語を「ー」で終わるように修正

* 不要な行を削除
---
 files/ja/web/guide/user_input_methods/index.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

(limited to 'files/ja')

diff --git a/files/ja/web/guide/user_input_methods/index.html b/files/ja/web/guide/user_input_methods/index.html
index 04d36acba9..5e5390d10f 100644
--- a/files/ja/web/guide/user_input_methods/index.html
+++ b/files/ja/web/guide/user_input_methods/index.html
@@ -27,16 +27,16 @@ translation_of: Web/Guide/User_input_methods
 
 推奨事項
 
-Available input mechanisms depend on the capabilities of the device running the application:
+利用できる入力の仕組みはアプリを動かしているデバイスの性能に依存します。
 
 
- Some devices provide touchscreen displays: the Web Platform offers touch events to interpret finger activity on touch-based user interfaces.
- For devices providing a mouse/touchpad as a pointing method, the Pointer Lock API helps you in implementing a first person 3D game or other applications requiring full control of the pointing device. And the Fullscreen API helps you in displaying your app in fullscreen mode.
- Using features such as contentEditable elements you can implement fast rich-text editors and with Drag&Drop let users moving elements inside your app. When screen orientation matters for your application, through the Screen Orientation API you can read the screen orientation state and perform other actions.
- You should always be mindful of keyboard accessibility where appropriate — many web users only use keyboard to navigate web sites and apps, and locking them out of your functionality is a bad idea.
+ デバイスの中にはタッチスクリーンディスプレイを提供するものがあります。そのウェブプラットフォームは、タッチを基にしたユーザーインターフェースで指の動きを解釈するためのタッチイベントを提供します。
+ ポインターを操作する方法としてマウスやタッチパッドを提供しているデバイスの場合、Pointer Lock API が一人称視点の 3D ゲームの実装や、他のアプリがポイントを合わせているデバイスの全ての制御を要求するのに役立ちます。そして Fullscreen API は、あなたのアプリをフルスクリーンモードで表示するのに役立ちます。
+ コンテンツが編集可能な要素（contentEditable など）のような機能を使うことで、速いリッチテキストエディターを実装することができ、そしてドラッグ＆ドロップ APIはユーザーがあなたのアプリ内に要素を移動することを可能にします。画面の向きがあなたのアプリで問題である時、画面の向きを制御する API を通して、画面の向きの状態を参照でき、またその他のアクションを実行できます。
+ 
キーボードのアクセシビリティが適切か常に気に掛ける必要があります。多くのユーザーはキーボードのみを使いウェブサイトやアプリを操作します。ですので、あなたのシステムの機能性からそれを除外することは良くない考えです。
 
 
-The following is a set of recommendations and best practices for using such tools in Open Web Apps.
+以下は推奨事項一式であり、オープンなウェブアプリでそのようなツールを利用するためのベストプラクティスです。
 
 Decide what input mechanism you’re using
 
-- 
cgit v1.2.3-54-g00ecf


From 95206a9aecc234f58dc001eb36553efc71cfb9e3 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Mon, 7 Mar 2022 23:02:04 +0900
Subject: Element インターフェイスの記事を更新 (#4313)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Element インターフェイスの記事を移行

* 2022/02/28 時点の英語版に同期

* Update files/ja/web/api/element/index.md

Co-authored-by: potappo 

Co-authored-by: potappo 
---
 files/ja/web/api/element/index.html | 464 ------------------------------------
 files/ja/web/api/element/index.md   | 442 ++++++++++++++++++++++++++++++++++
 2 files changed, 442 insertions(+), 464 deletions(-)
 delete mode 100644 files/ja/web/api/element/index.html
 create mode 100644 files/ja/web/api/element/index.md

(limited to 'files/ja')

diff --git a/files/ja/web/api/element/index.html b/files/ja/web/api/element/index.html
deleted file mode 100644
index 6bece2f11f..0000000000
--- a/files/ja/web/api/element/index.html
+++ /dev/null
@@ -1,464 +0,0 @@
----
-title: Element
-slug: Web/API/Element
-tags:
-  - API
-  - DOM
-  - DOM Reference
-  - Element
-  - Interface
-  - Reference
-  - Web API
-browser-compat: api.Element
-translation_of: Web/API/Element
----
-{{APIRef("DOM")}}
-
-Element は {{DOMxRef("Document")}} の中にあるすべての要素オブジェクト (すなわち、要素を表現するオブジェクト) が継承する、もっとも一般的な基底クラスです。このインターフェイスは、すべての種類の要素に共通するメソッドとプロパティを記述するだけのものです。多くの具体的なクラスが Element を継承します。例えば HTML 要素には {{DOMxRef("HTMLElement")}} インターフェイス、SVG 要素には {{DOMxRef("SVGElement")}} インターフェイスなど。ほとんどの機能は、クラスの階層を下りると具体化していきます。
-
-XUL の XULElement インターフェイスのようなウェブプラットフォームの枠外の言語もまた、Element インターフェイスを通じて要素を実装しています。
-
-{{InheritanceDiagram}}
-
-プロパティ
-
-Element は、親インターフェスである {{DOMxRef("Node")}}、およびその親インターフェイスである {{DOMxRef("EventTarget")}} からプロパティを継承します。
-
-
- {{DOMxRef("Element.assignedSlot")}}{{readonlyInline}}
- このノードが挿入された {{htmlelement("slot")}} を表す {{DOMxRef("HTMLSlotElement")}} を返します。
- {{DOMxRef("Element.attributes")}} {{readOnlyInline}}
- 対応する HTML 要素に関連したすべての属性のリストである {{DOMxRef("NamedNodeMap")}} を返します。
- {{domxref("Element.childElementCount")}} {{readonlyInline}}
- この要素の子要素の数を返します。
- {{domxref("Element.children")}} {{readonlyInline}}
- この要素の子要素を返します。
- {{DOMxRef("Element.classList")}} {{readOnlyInline}}
- class 属性のトークンリストを含む {{DOMxRef("DOMTokenList")}} を返します。
- {{DOMxRef("Element.className")}}
- {{DOMxRef("DOMString")}} 型であり、要素のクラスを表します。
- {{DOMxRef("Element.clientHeight")}} {{readOnlyInline}}
- 要素の内部の高さを表す {{jsxref("Number")}} を返します。
- {{DOMxRef("Element.clientLeft")}} {{readOnlyInline}}
- 要素の左境界の幅を表す {{jsxref("Number")}} を返します。
- {{DOMxRef("Element.clientTop")}} {{readOnlyInline}}
- 要素の上境界の幅を表す {{jsxref("Number")}} を返します。
- {{DOMxRef("Element.clientWidth")}} {{readOnlyInline}}
- 要素の内部の幅を表す {{jsxref("Number")}} を返します。
- {{domxref("Element.firstElementChild")}} {{readonlyInline}}
- アクセシビリティ向けに公開されたラベルを含む {{DOMxRef("DOMString")}} を返します。
- {{DOMxRef("Element.id")}}
- {{DOMxRef("DOMString")}} 型であり、要素の id を表します。
- {{DOMxRef("Element.innerHTML")}}
- {{DOMxRef("DOMString")}} 型であり、要素内容のマークアップを表します。
- {{domxref("Element.lastElementChild")}} {{readonlyInline}}
- Returns the last child element of this element.
- {{DOMxRef("Element.localName")}} {{readOnlyInline}}
- 要素の修飾名のローカル部分を表す {{DOMxRef("DOMString")}} です。
- {{DOMxRef("Element.namespaceURI")}} {{readonlyInline}}
- 要素の名前空間の URI。名前空間がない場合は null になります。
- 
- 注: Firefox 3.5 および以前のバージョンでは、HTML 要素の名前空間はありません。以降のバージョンでは、HTML 要素は HTML ツリーおよび XML ツリーで http://www.w3.org/1999/xhtml 名前空間内に存在します。
- 
- 
- {{DOMxRef("Element.nextElementSibling")}} {{readOnlyInline}}
- {{DOMxRef("Element")}} 型であり、ツリー上で自身の直後の要素 (弟) を表します。兄弟ノードがなければ null。
- {{DOMxRef("Element.outerHTML")}}
- {{DOMxRef("DOMString")}} 型であり、その要素を内容に含むマークアップを表します。設定に用いる場合、与えられた文字列からパースされたノードでその要素を置換します。
- {{DOMxRef("Element.part")}}
- 要素のパート識別子 (すなわち、 part 属性を使用して設定されるもの) が、 {{domxref("DOMTokenList")}} として返されます。
- {{DOMxRef("Element.prefix")}} {{readOnlyInline}}
- 要素の名前空間接頭辞を表す {{DOMxRef("DOMString")}}。接頭辞が指定されていない場合は null。
- {{DOMxRef("Element.previousElementSibling")}} {{readOnlyInline}}
- {{DOMxRef("Element")}} 型であり、ツリー上で自身の直前の要素 (兄) を表します。兄弟ノードが無ければ null。
- {{DOMxRef("Element.scrollHeight")}} {{readOnlyInline}}
- 要素のスクロールビューの高さを表す {{jsxref("Number")}} を返します。
- {{DOMxRef("Element.scrollLeft")}}
- {{jsxref("Number")}} 型であり、要素の左スクロールオフセット値を表します。
- {{DOMxRef("Element.scrollLeftMax")}} {{Non-standard_Inline}} {{readOnlyInline}}
- 要素で可能な左スクロールオフセットの最大値を表す {{jsxref("Number")}} を返します。
- {{DOMxRef("Element.scrollTop")}}
- 文書の上端が垂直方向にスクロールされた量をピクセル数で表す {{jsxref("Number")}} です。
- {{DOMxRef("Element.scrollTopMax")}} {{Non-standard_Inline}} {{readOnlyInline}}
- 要素で可能な上スクロールオフセットの最大値を表す {{jsxref("Number")}} を返します。
- {{DOMxRef("Element.scrollWidth")}} {{readOnlyInline}}
- 要素のスクロールビュー幅を表す {{jsxref("Number")}} を返します。
- {{DOMxRef("Element.shadowRoot")}}{{readOnlyInline}}
- 要素が所持しているオープンモードの Shadow Root、あるいはオープンモードの Shadow Root がない場合は null を返します。
- {{DOMxRef("Element.openOrClosedShadowRoot")}} {{Non-standard_Inline}}{{readOnlyInline}}
- オープン・クローズに関係なく、要素が所持している Shadow Root を返します。WebExtensions に限り使用できます。
- {{DOMxRef("Element.slot")}} {{Experimental_Inline}}
- 要素が挿入されている shadow DOM スロットの名前を返します。
- {{DOMxRef("Element.tagName")}} {{readOnlyInline}}
- 要素のタグ名を {{jsxref("String")}} で返します。
-
-
-ARIA から導入されたプロパティ
-
-Element インターフェイスは ARIAMixin ミックスインで定義されている以下のプロパティを持っています。
-
-
-  {{domxref("Element.ariaAtomic")}}
-  {{domxref("DOMString")}} で aria-atomic 属性を反映し、 aria-relevant 属性で定義された変更通知に基づいて、支援技術が変更された領域のすべてを提示するか、一部のみを提示するかを示します。
-  {{domxref("Element.ariaAutoComplete")}}
-  {{domxref("DOMString")}} で、 aria-autocomplete 属性を反映し、コンボボックス、サーチボックス、テキストボックスでテキストを入力する際に、ユーザーの意図した値の 1 つ以上の予測を表示するかどうか、予測が行われた場合にはどのように表示するかを指定します。
-  {{domxref("Element.ariaBusy")}}
-  {{domxref("DOMString")}} で aria-busy 属性を反映し、要素が修正されているかどうかを示します。支援技術では、修正が完了するまで待ってからユーザーに公開したい場合があります。
-  {{domxref("Element.ariaChecked")}}
-  {{domxref("DOMString")}} で aria-checked 属性を反映し、チェックボックス、ラジオボタン、その他のチェック状態を持つウィジェットの現在の「チェック」状態を示します。
-  {{domxref("Element.ariaColCount")}}
-  {{domxref("DOMString")}} で aria-colcount 属性を反映し、テーブル、グリッド、ツリーグリッドの列数を定義します。
-  {{domxref("Element.ariaColIndex")}}
-  {{domxref("DOMString")}} で aria-colindex 属性を反映し、テーブル、グリッド、ツリーグリッド内の列の総数に対する要素の列インデックスまたは位置を定義します。
-  {{domxref("Element.ariaColIndexText")}}
-  {{domxref("DOMString")}} で aria-colindextext 属性を反映し、 aria-colindex の代替となる人間が読めるテキストを定義します。
-  {{domxref("Element.ariaColSpan")}}
-  {{domxref("DOMString")}} で aria-colspan 属性を反映し、テーブル、グリッド、ツリーグリッド内のセルまたはグリッドセルがカバーする列数を定義します。
-  {{domxref("Element.ariaCurrent")}}
-  {{domxref("DOMString")}} で aria-current 属性を反映し、コンテナーまたは関連要素のセット内の現在の項目を表す要素を示します。
-  {{domxref("Element.ariaDescription")}}
-  {{domxref("DOMString")}} で aria-description 属性を反映し、現在の要素を説明または注釈する文字列値を定義します。
-  {{domxref("Element.ariaDisabled")}}
-  {{domxref("DOMString")}} で aria-disabled 属性を反映し、この要素が知覚可能であるが無効であるため、編集やその他の操作ができないことを示します。
-  {{domxref("Element.ariaExpanded")}}
-  {{domxref("DOMString")}} で aria-expanded 属性を反映し、この要素が所有または制御するグループ化要素が展開されているか畳まれているかを示します。
-  {{domxref("Element.ariaHasPopup")}}
-  {{domxref("DOMString")}} で aria-haspopup 属性を反映し、この要素によって引き起こされるメニューやダイアログのような対話型のポップアップ要素の有無と種類を示します。
-  {{domxref("Element.ariaHidden")}}
-  {{domxref("DOMString")}} で aria-hidden 属性を反映し、この要素がアクセシビリティ API に公開されているかどうかを示します。
-  {{domxref("Element.ariaKeyShortcuts")}}
-  {{domxref("DOMString")}} で aria-keyshortcuts 属性を反映し、要素を活性化したりフォーカスを与えたりするために作者が実装したキーボードショートカットを示します。
-  {{domxref("Element.ariaLabel")}}
-  {{domxref("DOMString")}} で aria-label 属性を反映し、現在の要素をラベル付けする文字列値を定義します。
-  {{domxref("Element.ariaLevel")}}
-  {{domxref("DOMString")}} で aria-level 属性を反映し、構造内の要素の階層レベルを定義します。
-  {{domxref("Element.ariaLive")}}
-  {{domxref("DOMString")}} で aria-live 属性を反映し、この要素が更新されること、ユーザーエージェント、支援技術、ユーザーがライブ領域から期待できる更新の種類を記述します。
-  {{domxref("Element.ariaModal")}}
-  {{domxref("DOMString")}} で aria-modal 属性を反映し、要素が表示されたときにモーダルであるかどうかを示します。
-  {{domxref("Element.ariaMultiline")}}
-  {{domxref("DOMString")}} で aria-multiline 属性を反映し、テキストボックスが複数行の入力を受け入れるか、一行のみを受け入れるかを示します。
-  {{domxref("Element.ariaMultiSelectable")}}
-  {{domxref("DOMString")}} で aria-multiselectable 属性を反映し、ユーザーが現在の選択可能な子孫から複数の項目を選択できることを示します。
-  {{domxref("Element.ariaOrientation")}}
-  {{domxref("DOMString")}} で aria-orientation 属性を反映し、要素の方向が水平、垂直、または不明/曖昧であることを示す。
-  {{domxref("Element.ariaPlaceholder")}}
-  {{domxref("DOMString")}} で aria-placeholder 属性を反映し、コントロールに値がない場合にユーザーのデータ入力を支援するための短いヒントを定義します。
-  {{domxref("Element.ariaPosInSet")}}
-  {{domxref("DOMString")}} で aria-posinset 属性を反映し、リストアイテムまたはツリーアイテムの現在のセットにおける要素の数または位置を定義します。
-  {{domxref("Element.ariaPressed")}}
-  {{domxref("DOMString")}} で aria-pressed 属性を反映し、トグルボタンの現在の「押された」状態を示します。
-  {{domxref("Element.ariaReadOnly")}}
-  {{domxref("DOMString")}} で aria-readonly 属性を反映し、要素が編集不可能であることを示すが、それ以外は操作可能であることを示します。
-  {{domxref("Element.ariaRelevant")}}
-  {{domxref("DOMString")}} で aria-relevant 属性を反映し、ライブリージョン内のアクセシビリティツリーが変更された場合に、ユーザエージェントがどのような通知を行うかを示します。これは、 aria-live リージョン内のどのような変更が関連性があり、アナウンスされるべきかを記述するために使用されます。
-  {{domxref("Element.ariaRequired")}}
-  {{domxref("DOMString")}} で aria-required 属性を反映し、フォームを送信する前に要素にユーザーの入力が必要であることを示します。
-  {{domxref("Element.ariaRoleDescription")}}
-  {{domxref("DOMString")}} で aria-roledescription 属性を反映し、要素の役割について、人間が読める、著者がローカライズした説明を定義します。
-  {{domxref("Element.ariaRowCount")}}
-  {{domxref("DOMString")}} で aria-rowcount 属性を反映し、テーブル、グリッド、ツリーグリッドの行の総数を定義します。
-  {{domxref("Element.ariaRowIndex")}}
-  {{domxref("DOMString")}} で aria-rowindex 属性を反映し、テーブル、グリッド、ツリーグリッド内の行の総数に対する要素の行インデックスまたは位置を定義します。
-  {{domxref("Element.ariaRowIndexText")}}
-  {{domxref("DOMString")}} で aria-rowindextext 属性を反映し、 aria-rowindex の代替となる人間が読めるテキストを定義しています。
-  {{domxref("Element.ariaRowSpan")}}
-  {{domxref("DOMString")}} で aria-rowspan 属性を反映し、テーブル、グリッド、ツリーグリッド内のセルまたはグリッドセルがカバーする行数を定義します。
-  {{domxref("Element.ariaSelected")}}
-  {{domxref("DOMString")}} で aria-selected 属性を反映し、選択状態を持つ要素の現在の「選択された」状態を示します。
-  {{domxref("Element.ariaSetSize")}}
-  {{domxref("DOMString")}} で aria-setsize 属性を反映し、現在のリストアイテムまたはツリーアイテムのセットのアイテム数を定義します。
-  {{domxref("Element.ariaSort")}}
-  {{domxref("DOMString")}} で aria-sort 属性を反映し、テーブルやグリッドのアイテムが昇順または降順でソートされるかどうかを示します。
-  {{domxref("Element.ariaValueMax")}}
-  {{domxref("DOMString")}} で aria-valueMax 属性を反映し、 range ウィジェットの最大許容値を定義します。
-  {{domxref("Element.ariaValueMin")}}
-  {{domxref("DOMString")}} で aria-valueMin 属性を反映し、 range ウィジェットに許容される最小値を定義します。
-  {{domxref("Element.ariaValueNow")}}
-  {{domxref("DOMString")}} で aria-valueNow 属性を反映し、 range ウィジェットの現在の値を定義します。
-  {{domxref("Element.ariaValueText")}}
-  {{domxref("DOMString")}} で aria-valuetext 属性を反映し、 range ウィジェットの aria-valuenow の代替となる人間が読めるテキストを定義ます。
-
-
-イベントハンドラー
-
-
- {{domxref("Element.onfullscreenchange")}}
- 要素が全画面モードに入ったり出たりしたときに送られる {{event("fullscreenchange")}} イベントのイベントハンドラーです。これは期待された遷移が成功したかどうかを監視するために使用することができますが、アプリの実行がバックグラウンドになった場合など、想定外の変化を監視することもできます。
- {{domxref("Element.onfullscreenerror")}}
- 全画面モードへ移行しようとしてエラーが発生したときに送られる {{event("fullscreenerror")}} イベントのイベントハンドラーです。
-
-
-メソッド
-
-Element は親である {{DOMxRef("Node")}}、およびその親である {{DOMxRef("EventTarget")}} からメソッドを継承しています。
-
-
- {{DOMxRef("EventTarget.addEventListener()")}}
- 要素に特定のイベント型を扱うイベントハンドラーを登録します。
- {{DOMxRef("Element.attachShadow()")}}
- 指定した要素に shadow DOM ツリーを結びつけて、その {{DOMxRef("ShadowRoot")}} への参照を返します。
- {{DOMxRef("Element.animate()")}} {{Experimental_Inline}}
- 要素でアニメーションを作成および実行するためのショートカットメソッドです。作成した Animation オブジェクトのインスタンスを返します。
- {{DOMxRef("Element.append()")}}
- この要素の最後の子の後に、一連の {{domxref("Node")}} オブジェクトまたは {{domxref("DOMString")}} オブジェクトを挿入します。
- {{DOMxRef("Element.closest()")}}
- 引数に指定したセレクターによって選択される要素がもっとも近い祖先要素 (または当該要素自身) を {{DOMxRef("Element")}} 型で返します。
- {{DOMxRef("Element.createShadowRoot()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}
- 要素で shadow DOM を作成します。その要素はシャドウホストになります。 {{DOMxRef("ShadowRoot")}} を返します。
- {{DOMxRef("Element.computedStyleMap()")}} {{Experimental_Inline}}
- {{DOMxRef("CSSStyleDeclaration")}} に代わる、CSS 宣言ブロックを読み取り専用で表現したものを提供する {{DOMxRef("StylePropertyMapReadOnly")}} インターフェイスを返します。
- {{DOMxRef("EventTarget.dispatchEvent()")}}
- DOM 内のこの (this) ノードにイベントを送ります。そして、イベントをキャンセルしたハンドラーがないかを示す {{jsxref("Boolean")}} を返します。
- {{DOMxRef("Element.getAnimations()")}} {{Experimental_Inline}}
- 要素でアクティブな Animation オブジェクトの配列を返します。
- {{DOMxRef("Element.getAttribute()")}}
- 現在ノードから指定された名前の付いた属性値を取得して、 {{jsxref("Object")}} を返します。
- {{DOMxRef("Element.getAttributeNames()")}}
- 現在の要素の属性名の配列を返します。
- {{DOMxRef("Element.getAttributeNode()")}}
- 現在のノードから、指定された属性のノード表現を取得し、 {{DOMxRef("Attr")}} として返します。
- {{DOMxRef("Element.getAttributeNodeNS()")}}
- 指定された名前と名前空間を持つ属性のノード表現を現在のノードから取得し、それを {{DOMxRef("Attr")}} として返します。
- {{DOMxRef("Element.getAttributeNS()")}}
- 現在ノードから指定された名前と名前空間 (namespase) を持つ属性値を取得して、{{jsxref("Object")}} を返します。
- {{DOMxRef("Element.getBoundingClientRect()")}}
- 要素のサイズと、ビューポートにおける位置を返します。
- {{domxref("Element.getBoxQuads()")}} {{experimental_inline}}
- {{domxref("DOMQuad")}} オブジェクトのリストを返し、これはノードの CSS フラグメントを表します。
- {{DOMxRef("Element.getClientRects()")}}
- クライアント (ソフト) 内のテキスト上の個々の行の外接矩形 (bounding rectangle) の集合を返します。
- {{DOMxRef("Element.getElementsByClassName()")}}
- 現在の要素から、引数に指定したクラス名のリストに該当するすべての子孫要素を持つ {{DOMxRef("HTMLCollection")}} を返します。
- {{DOMxRef("Element.getElementsByTagName()")}}
- 現在要素から、特定のタグ名を持つすべての子孫要素の集合を取得した {{DOMxRef("HTMLCollection")}} を返します。
- {{DOMxRef("Element.getElementsByTagNameNS()")}}
- 現在要素から、特定のタグ名と名前空間を持つすべての子孫要素の集合を取得した {{DOMxRef("HTMLCollection")}} を返します。
- {{DOMxRef("Element.hasAttribute()")}}
- 要素が指定された指定された属性を持っているか否かを示す {{jsxref("Boolean")}} を返します。
- {{DOMxRef("Element.hasAttributeNS()")}}
- 要素が指定された名前空間内に指定された属性を持っているか否かを示す {{jsxref("Boolean")}} を返します。
- {{DOMxRef("Element.hasAttributes()")}}
- 要素が現在 1 つ以上の属性をもっているかを示す {{jsxref("Boolean")}} を返します。
- {{DOMxRef("Element.hasPointerCapture()")}}
- 呼び出された要素が、指定されたポインター ID によって識別されるポインターのポインターキャプチャを持っているかどうかを示します。
- {{DOMxRef("Element.insertAdjacentElement()")}}
- メソッドを実行した要素に対して相対的な指定位置に、要素ノードを挿入します。
- {{DOMxRef("Element.insertAdjacentHTML()")}}
- テキストを HTML または XML としてパースして、パース結果のノードをツリーの指定した位置に挿入します。
- {{DOMxRef("Element.insertAdjacentText()")}}
- メソッドを実行した要素に対して相対的な指定位置に、テキストノードを挿入します。
- {{DOMxRef("Element.matches()")}}
- 要素が指定されたセレクター文字列で選択されているか否かを示す {{jsxref("Boolean")}} を返します。
- {{DOMxRef("Element.prepend()")}}
- この要素の最初の子の前に、一連の {{domxref("Node")}} オブジェクトまたは {{domxref("DOMString")}} オブジェクトを挿入します。
- {{DOMxRef("Element.querySelector()")}}
- 要素に対して、指定したセレクターに一致する最初の {{DOMxRef("Node")}} を返します。
- {{DOMxRef("Element.querySelectorAll()")}}
- 要素に対して、指定したセレクターに一致するノードの {{DOMxRef("NodeList")}} を返します。
- {{DOMxRef("Element.releasePointerCapture()")}}
- 以前に特定の {{DOMxRef("PointerEvent","pointer イベント")}}向けに設定したポインターキャプチャーを解放 (停止) します。
- {{DOMxRef("Element.remove()")}}
- 親要素の子リストから、要素を取り除きます。
- {{DOMxRef("Element.removeAttribute()")}}
- 現在ノードから，指定された名前を持つ属性を取り除きます。
- {{DOMxRef("Element.removeAttributeNode()")}}
- 現在のノードから名前の付いた属性のノード表現を削除します。
- {{DOMxRef("Element.removeAttributeNS()")}}
- 現在ノードから，指定された名前と名前空間を持つ属性を取り除きます。
- {{DOMxRef("EventTarget.removeEventListener()")}}
- 要素からイベントリスナーを取り除きます。
- {{DOMxRef("Element.replaceChildren()")}}
- {{domxref("Node")}} の既存の子を指定された新しい一連の子に置き換えます。
- {{DOMxRef("Element.replaceWith()")}}
- 親の子リストの要素を、一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトで置き換えます。
-{{DOMxRef("Element.requestFullscreen()")}} {{Experimental_Inline}}
- 要素を全画面表示するよう、ブラウザーへ非同期的に要求します。
- {{DOMxRef("Element.requestPointerLock()")}} {{Experimental_Inline}}
- 指定した要素でポインターをロックするよう、非同期的に要求できます。
- {{domxref("Element.scroll()")}}
- 指定された要素の中で特定の座標のセットへスクロールします。
- {{domxref("Element.scrollBy()")}}
- 指定された量だけ要素をスクロールします。
- {{DOMxRef("Element.scrollIntoView()")}} {{Experimental_Inline}}
- 要素がビューの内側に来るまでページをスクロールします。
- {{domxref("Element.scrollTo()")}}
- 指定された要素の中で特定の座標のセットへスクロールします。
- {{DOMxRef("Element.setAttribute()")}}
- 現在ノードに、指定された名前を持つ属性値を設定します。
- {{DOMxRef("Element.setAttributeNode()")}}
- 現在のノードから指定された属性のノード表現を設定します。
- {{DOMxRef("Element.setAttributeNodeNS()")}}
- 指定された名前と名前空間を持つ属性のノード表現を、現在のノードから設定します。
- {{DOMxRef("Element.setAttributeNS()")}}
- 現在ノードに、指定された名前と名前空間を持つ属性値を設定します。
- {{DOMxRef("Element.setCapture()")}} {{Non-standard_Inline}}{{Deprecated_Inline}}
- すべてのマウスイベントを要素にリダイレクトし、マウスイベントキャプチャーを開始 (set up) します。
- {{DOMxRef("Element.setPointerCapture()")}}
- 以降の pointer イベント のキャプチャー対象とする、特定の要素を指定します。
- {{DOMxRef("Element.toggleAttribute()")}}
- 指定した要素で boolean 型の属性を切り替える、すなわち属性が存在していれば削除、属性が存在していなければ追加します。
-
-
-イベント
-
-これらのイベントを待ち受けするには、 addEventListener() を使用するか、イベントリスナーをこのインターフェイスの onイベント名 プロパティに代入するかします。
-
-
- {{domxref("HTMLDialogElement/cancel_event", "cancel")}}
- ユーザーがブラウザーに、現在開いているダイアログを閉じたいと指示したときに {{HTMLElement("dialog")}} に発生します。ブラウザーがこのイベントを発生させる可能性があるのは、例えばユーザーが Esc キーを押したり、ブラウザーのユーザーインターフェイスの一部である「ダイアログを閉じる」ボタンをクリックしたりした場合です。

- {{domxref("GlobalEventHandlers/oncancel", "oncancel")}} プロパティから利用することもできます。
- {{domxref("Element/error_event", "error")}}
- リソースの読み込みに失敗したか、利用できなかった場合に発生します。例えば、スクリプトに実行エラーがあった場合や、画像が見つからなかった場合、無効であった場合などです。

- {{domxref("GlobalEventHandlers/onerror", "onerror")}} プロパティから利用することもできます。
- {{domxref("Element/scroll_event", "scroll")}}
- 文書のビューまたは要素がスクロールしたときに発生します。

- {{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}} プロパティから利用することもできます。
- {{domxref("Element/select_event", "select")}}
- いくらかのテキストが選択されたときに発生します。

- {{DOMxRef("GlobalEventHandlers.onselect", "onselect")}} プロパティから利用することもできます。
- {{domxref("Element/show_event", "show")}}
- {{domxref("Element/contextmenu_event", "contextmenu")}} イベントが contextmenu 属性を持つ要素で発生したか、バブリングで到達した場合に発生します。 {{deprecated_inline}}

- {{DOMxRef("GlobalEventHandlers.onshow", "onshow")}} プロパティから利用することもできます。
- {{domxref("Element/wheel_event","wheel")}}
- ユーザーがポインティングデバイス (普通はマウス) のホイールボタンを回転させたときに発生します。

- {{DOMxRef("GlobalEventHandlers.onwheel", "onwheel")}} プロパティから利用することもできます。
-
-
-クリップボードイベント
-
-
- {{domxref("Element/copy_event", "copy")}}
- ユーザーがブラウザーのユーザーインターフェイスを通して、コピー操作を行ったときに発生します。

- {{domxref("HTMLElement/oncopy", "oncopy")}} プロパティから利用することもできます。
- {{domxref("Element/cut_event", "cut")}}
- ユーザーがブラウザーのユーザーインターフェイスを通して、切り取り操作を行ったときに発生します。

- {{domxref("HTMLElement/oncut", "oncut")}} プロパティから利用することもできます。
- {{domxref("Element/paste_event", "paste")}}
- ユーザーがブラウザーのユーザーインターフェイスを通して、貼り付け操作を行ったときに発生します。

- {{domxref("HTMLElement/onpaste", "onpaste")}} プロパティから利用することもできます。
-
-
-構成イベント
-
-
- {{domxref("Element/compositionend_event", "compositionend")}}
- {{glossary("input method editor")}} のようなテキスト構成システムで、現在の入力セッションが完了またはキャンセルされたときに発生します。
- {{domxref("Element/compositionstart_event", "compositionstart")}}
- {{glossary("input method editor")}} のようなテキスト構成システムで、新しい入力セッションを始まったときに発生します。
- {{domxref("Element/compositionupdate_event", "compositionupdate")}}
- {{glossary("input method editor")}} のようなテキスト構成システムによって制御されている入力セッションのコンテキストに、新しい文字が入力されたときに発生します。
-
-
-フォーカスイベント
-
-
- {{domxref("Element/blur_event", "blur")}}
- 要素がフォーカスを失ったときに発生します。

- {{domxref("GlobalEventHandlers/onblur", "onblur")}} プロパティから利用することもできます。
- {{domxref("Element/focus_event", "focus")}}
- 要素がフォーカスを受け取ったときに発生します。

- {{domxref("GlobalEventHandlers/onfocus", "onfocus")}} プロパティから利用することもできます。
- {{domxref("Element/focusin_event", "focusin")}}
- 要素がフォーカスを受け取ろうとしているときに発生します。
- {{domxref("Element/focusout_event", "focusout")}}
- 要素がフォーカスを失おうとしているときに発生します。
-
-
-全画面イベント
-
-
- {{domxref("Element/fullscreenchange_event", "fullscreenchange")}}
- 全画面モードへの移行時または終了時に、 {{domxref("Document")}} または {{domxref("Element")}} に送られます。
- {{domxref("Element.onfullscreenchange", "onfullscreenchange")}} プロパティから利用することもできます。
- {{domxref("Element/fullscreenerror_event", "fullscreenerror")}}
- 全画面モードへの移行または終了を試みている中でエラーが発生したときに、 Document または Element に送られます。
- {{domxref("Element.onfullscreenerror", "onfullscreenerror")}} プロパティから利用することもできます。
-
-
-キーボードイベント
-
-
- {{domxref("Element/keydown_event", "keydown")}}
- キーが押されたときに発生します。

- {{domxref("GlobalEventHandlers/onkeydown", "onkeydown")}} プロパティから利用することもできます。
- {{domxref("Element/keypress_event", "keypress")}}
- 文字の値を発生させるキーが押されたときに発生します。 {{deprecated_inline}}

- {{domxref("GlobalEventHandlers/onkeypress", "onkeypress")}} プロパティから利用することもできます。
- {{domxref("Element/keyup_event", "keyup")}}
- キーが離されたときに発生します。

- {{domxref("GlobalEventHandlers/onkeyup", "onkeyup")}} プロパティから利用することもできます。
-
-
-マウスイベント
-
-
- {{domxref("Element/auxclick_event", "auxclick")}}
- ポインティングデバイスの第一ボタン以外のボタン (例えば、マウスの左ボタン以外のボタン) が要素上で押されて離されたときに発生します。

- {{domxref("GlobalEventHandlers/onauxclick", "onauxclick")}} プロパティから利用することもできます。
- {{domxref("Element/click_event", "click")}}
- ポインティングデバイスのボタン (例えば、マウスの第一ボタン) が単一の要素上で押されて離されたときに発生します。

- {{domxref("GlobalEventHandlers/onclick", "onclick")}} プロパティから利用することもできます。
- {{domxref("Element/contextmenu_event", "contextmenu")}}
- ユーザーがコンテキストメニューを開こうとしたときに発生します。

- {{domxref("GlobalEventHandlers/oncontextmenu", "oncontextmenu")}} プロパティから利用することもできます。
- {{domxref("Element/dblclick_event", "dblclick")}}
- ポインティングデバイスのボタン (例えば、マウスの第一ボタン) が単一の要素上で2回クリックされたときに発生します。

- {{domxref("GlobalEventHandlers/ondblclick", "ondblclick")}} プロパティから利用することもできます。
- {{domxref("Element/DOMActivate_event", "DOMActivate")}} {{Deprecated_Inline}}
- 要素が、例えばマウスのクリックやキーの押下によってアクティブになったときに発生します。
- {{domxref("Element/mousedown_event", "mousedown")}}
- ポインティングデバイスのボタンが要素上で押されたときに発生します。

- {{domxref("GlobalEventHandlers/onmousedown", "onmousedown")}} プロパティから利用することもできます。
- {{domxref("Element/mouseenter_event", "mouseenter")}}
- ポインティングデバイス (ふつうはマウス) が、リスナーが割り当てられた要素の上へ移動したときに発生します。

- {{domxref("GlobalEventHandlers/onmouseenter", "onmouseenter")}} プロパティから利用することもできます。
- {{domxref("Element/mouseleave_event", "mouseleave")}}
- ポインティングデバイス (ふつうはマウス) が、リスナーが割り当てられた要素の外へ移動したときに発生します。

- {{domxref("GlobalEventHandlers/onmouseleave", "onmouseleave")}} プロパティから利用することもできます。
- {{domxref("Element/mousemove_event", "mousemove")}}
- ポインティングデバイス (ふつうはマウス) が、要素の上を移動したときに発生します。

- {{domxref("GlobalEventHandlers/onmousemove", "onmousemove")}} プロパティから利用することもできます。
- {{domxref("Element/mouseout_event", "mouseout")}}
- ポインティングデバイス (ふつうはマウス) が、リスナーが割り当てられた要素またはその子要素の外へ移動したときに発生します。

- {{domxref("GlobalEventHandlers/onmouseout", "onmouseout")}} プロパティから利用することもできます。
- {{domxref("Element/mouseover_event", "mouseover")}}
- ポインティングデバイス (ふつうはマウス) が、リスナーが割り当てられた要素またはその子要素の上を移動したときに発生します。

- {{domxref("GlobalEventHandlers/onmouseover", "onmouseover")}} プロパティから利用することもできます。
- {{domxref("Element/mouseup_event", "mouseup")}}
- ポインティングデバイスのボタンが要素の上で離されたときに発生します。

- {{domxref("GlobalEventHandlers/onmouseup", "onmouseup")}} プロパティから利用することもできます。
- {{domxref("Element/webkitmouseforcechanged_event", "webkitmouseforcechanged")}}
- trackpadtouchscreen の上の圧力が変化するたびに発生します。
- {{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}}
- 「強制クリック」と判断されるのに十分な圧力があった直後の mousedown イベントの後で発生します。
- {{domxref("Element/webkitmouseforcewillbegin_event", "webkitmouseforcewillbegin")}}
- {{domxref("Element/mousedown_event", "mousedown")}} イベントの前に発生します。
- {{domxref("Element/webkitmouseforceup_event", "webkitmouseforceup")}}
- 「強制クリック」が終了したといえるほど圧力が減少した直後の {{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}} イベントの後で発生します。
-
-
-タッチイベント
-
-
- {{domxref("Element/touchcancel_event", "touchcancel")}}
- 1つ以上のタッチ点が実装依存の理由により破棄された (例えば、タッチ点が多く作られすぎた) 場合に発生します。

- {{domxref("GlobalEventHandlers/ontouchcancel", "ontouchcancel")}} プロパティから利用することもできます。
- {{domxref("Element/touchend_event", "touchend")}}
- 1つ以上のタッチ点がタッチ面から取り除かれたときに発生します。

- {{domxref("GlobalEventHandlers/ontouchend", "ontouchend")}} プロパティから利用することもできます。
- {{domxref("Element/touchmove_event", "touchmove")}}
- 1つ以上のタッチ点がタッチ面上で移動したときに発生します。

- {{domxref("GlobalEventHandlers/ontouchmove", "ontouchmove")}} プロパティから利用することもできます。
- {{domxref("Element/touchstart_event", "touchstart")}}
- 1つ以上のタッチ点がタッチ面に配置されたときに発生します。

- {{domxref("GlobalEventHandlers/ontouchstart", "ontouchstart")}} プロパティから利用することもできます。
-
-
-仕様書
-
-{{Specifications}}
-
-ブラウザーの互換性
-
-{{Compat}}
diff --git a/files/ja/web/api/element/index.md b/files/ja/web/api/element/index.md
new file mode 100644
index 0000000000..407d8b2672
--- /dev/null
+++ b/files/ja/web/api/element/index.md
@@ -0,0 +1,442 @@
+---
+title: Element
+slug: Web/API/Element
+tags:
+  - API
+  - DOM
+  - DOM リファレンス
+  - Element
+  - インターフェイス
+  - リファレンス
+  - Web API
+browser-compat: api.Element
+translation_of: Web/API/Element
+---
+{{APIRef("DOM")}}
+
+**`Element`** は {{DOMxRef("Document")}} が継承するオブジェクトの中にあるすべての要素オブジェクト（すなわち、要素を表現するオブジェクト）が継承する、もっとも一般的な基底クラスです。すべての種類の要素の共通するメソッドとプロパティのみを持ちます。もっと具体的なクラスが `Element` を継承しています。
+
+例えば {{DOMxRef("HTMLElement")}} インターフェイスは HTML 要素の基本インターフェイスであり、 {{DOMxRef("SVGElement")}} インターフェイスはすべての SVG 要素の基本になります。ほとんどの機能は、クラスの階層を下りると具体化していきます。
+
+XUL の `XULElement` インターフェイスのようなウェブプラットフォームの枠外の言語もまた、`Element` インターフェイスを実装しています。
+
+{{InheritanceDiagram}}
+
+## プロパティ
+
+_`Element` は、親インターフェイスである {{DOMxRef("Node")}}、およびその親インターフェイスである {{DOMxRef("EventTarget")}} からプロパティを継承しています。_
+
+- {{DOMxRef("Element.assignedSlot")}}{{readonlyInline}}
+  - : このノードが挿入された {{htmlelement("slot")}} を表す {{DOMxRef("HTMLSlotElement")}} を返します。
+- {{DOMxRef("Element.attributes")}} {{readOnlyInline}}
+  - : 対応する HTML 要素に関連したすべての属性のリストである {{DOMxRef("NamedNodeMap")}} を返します。
+- {{domxref("Element.childElementCount")}} {{readonlyInline}}
+  - : この要素の子要素の数を返します。
+- {{domxref("Element.children")}} {{readonlyInline}}
+  - : この要素の子要素を返します。
+- {{DOMxRef("Element.classList")}} {{readOnlyInline}}
+  - : class 属性のリストが入った {{DOMxRef("DOMTokenList")}} を返します。
+- {{DOMxRef("Element.className")}}
+  - : {{DOMxRef("DOMString")}} で、この要素のクラスを表します。
+- {{DOMxRef("Element.clientHeight")}} {{readOnlyInline}}
+  - : この要素の内部の高さを表す数値を返します。
+- {{DOMxRef("Element.clientLeft")}} {{readOnlyInline}}
+  - : この要素の左境界の幅を表す数値を返します。
+- {{DOMxRef("Element.clientTop")}} {{readOnlyInline}}
+  - : この要素の上境界の幅を表す数値を返します。
+- {{DOMxRef("Element.clientWidth")}} {{readOnlyInline}}
+  - : この要素の内部の幅を表す数値を返します。
+- {{domxref("Element.firstElementChild")}} {{readonlyInline}}
+  - : この要素の最初の子要素を返します。
+- {{DOMxRef("Element.id")}}
+  - : {{DOMxRef("DOMString")}} で、この要素の id を表します。
+- {{DOMxRef("Element.innerHTML")}}
+  - : {{DOMxRef("DOMString")}} で、この要素の内容のマークアップを表します。
+- {{domxref("Element.lastElementChild")}} {{readonlyInline}}
+  - : この要素の最後の子要素を返します。
+- {{DOMxRef("Element.localName")}} {{readOnlyInline}}
+  - : {{DOMxRef("DOMString")}} で、この要素の修飾名のローカル部分を表します。
+- {{DOMxRef("Element.namespaceURI")}} {{readonlyInline}}
+
+  - : この要素の名前空間の URI。名前空間がない場合は `null` になります。
+
+    > **Note:** Firefox 3.5 および以前のバージョンでは、HTML 要素の名前空間はありません。以降のバージョンでは、HTML 要素は HTML ツリーおよび XML ツリーで [`http://www.w3.org/1999/xhtml`](https://www.w3.org/1999/xhtml) 名前空間内に存在します。
+
+- {{DOMxRef("Element.nextElementSibling")}} {{readOnlyInline}}
+  - : {{DOMxRef("Element")}} で、ツリー上で自身の直後の要素を表します。兄弟ノードがなければ `null` になります。
+- {{DOMxRef("Element.outerHTML")}}
+  - : {{DOMxRef("DOMString")}} で、その要素の内容を含むマークアップを表します。値が設定された場合、その文字列から解釈されたノードでその要素を置換します。
+- {{DOMxRef("Element.part")}}
+  - : 要素のパート識別子 (すなわち、 `part` 属性を使用して設定されるもの) が、 {{domxref("DOMTokenList")}} として返されます。
+- {{DOMxRef("Element.prefix")}} {{readOnlyInline}}
+  - : {{DOMxRef("DOMString")}} で、要素の名前空間接頭辞を表します。接頭辞が指定されていない場合は `null` です。
+- {{DOMxRef("Element.previousElementSibling")}} {{readOnlyInline}}
+  - : {{DOMxRef("Element")}} で、ツリー上で自身の直前の要素を表します。兄弟ノードが無ければ `null` です。
+- {{DOMxRef("Element.scrollHeight")}} {{readOnlyInline}}
+  - : この要素のスクロールビューの高さを表す数値を返します。
+- {{DOMxRef("Element.scrollLeft")}}
+  - : 数値型で、この要素の左スクロールオフセット値を表します。
+- {{DOMxRef("Element.scrollLeftMax")}} {{Non-standard_Inline}} {{readOnlyInline}}
+  - : この要素で可能な左スクロールオフセットの最大値を表す数値を返します。
+- {{DOMxRef("Element.scrollTop")}}
+  - : この要素の上端が垂直方向にスクロールされた量をピクセル数で表す数値です。
+- {{DOMxRef("Element.scrollTopMax")}} {{Non-standard_Inline}} {{readOnlyInline}}
+  - : 要素で可能な上スクロールオフセットの最大値を表す数値を返します。
+- {{DOMxRef("Element.scrollWidth")}} {{readOnlyInline}}
+  - : 要素のスクロールビュー幅を表す数値を返します。
+- {{DOMxRef("Element.shadowRoot")}}{{readOnlyInline}}
+  - : 要素が所持しているオープンモードのシャドウルート、あるいはオープンモードのシャドウルートがない場合は null を返します。
+- {{DOMxRef("Element.openOrClosedShadowRoot")}} {{Non-standard_Inline}}{{readOnlyInline}}
+  - : オープン・クローズに関係なく、要素が所持しているさh同ルートを返します。**[WebExtensions](/ja/docs/Mozilla/Add-ons/WebExtensions) に限り使用できます。**
+- {{DOMxRef("Element.setHTML")}}
+  - : HTML の文字列を解釈して[無害化](/ja/docs/Web/API/HTML_Sanitizer_API)し、 DOM の中にこの要素のサブツリーとして挿入します。
+- {{DOMxRef("Element.slot")}} {{Experimental_Inline}}
+  - : この要素が挿入されているシャドウ DOM スロットの名前を返します。
+- {{DOMxRef("Element.tagName")}} {{readOnlyInline}}
+  - : この要素のタグ名を文字列で返します。
+
+### ARIA から導入されたプロパティ
+
+_`Element` インターフェイスには、 `ARIAMixin` ミックスインで定義されている以下のプロパティを持っています。_
+
+- {{domxref("Element.ariaAtomic")}}
+  - : {{domxref("DOMString")}} で [`aria-atomic`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-atomic) 属性を反映し、 [`aria-relevant`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-relevant) 属性で定義された変更通知に基づいて、支援技術が変更された領域のすべてを提示するか、一部のみを提示するかを示します。
+- {{domxref("Element.ariaAutoComplete")}}
+  - : {{domxref("DOMString")}} で、 [`aria-autocomplete`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-autocomplete) 属性を反映し、コンボボックス、検索ボックス、テキストボックスでテキストを入力する際に、ユーザーの意図した値の 1 つ以上の予測を表示するかどうか、予測が行われた場合にはどのように表示するかを指定します。
+- {{domxref("Element.ariaBusy")}}
+  - : {{domxref("DOMString")}} で [`aria-busy`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-busy) 属性を反映し、要素が修正されているかどうかを示します。支援技術では、修正が完了するまで待ってからユーザーに公開したい場合があります。
+- {{domxref("Element.ariaChecked")}}
+  - : {{domxref("DOMString")}} で [`aria-checked`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-checked) 属性を反映し、チェックボックス、ラジオボタン、その他のチェック状態を持つウィジェットの現在の「チェック」状態を示します。
+- {{domxref("Element.ariaColCount")}}
+  - : {{domxref("DOMString")}} で [`aria-colcount`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-colcount) 属性を反映し、テーブル、グリッド、ツリーグリッドの列数を定義します。
+- {{domxref("Element.ariaColIndex")}}
+  - : {{domxref("DOMString")}} で [`aria-colindex`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-colindex) 属性を反映し、テーブル、グリッド、ツリーグリッド内の列の総数に対する要素の列インデックスまたは位置を定義します。
+- {{domxref("Element.ariaColIndexText")}}
+  - : {{domxref("DOMString")}} で [`aria-colindextext`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-colindextext) 属性を反映し、 aria-colindex の代替となる人間が読めるテキストを定義します。
+- {{domxref("Element.ariaColSpan")}}
+  - : {{domxref("DOMString")}} で [`aria-colspan`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-colspan) 属性を反映し、テーブル、グリッド、ツリーグリッド内のセルまたはグリッドセルがカバーする列数を定義します。
+- {{domxref("Element.ariaCurrent")}}
+  - : {{domxref("DOMString")}} で [`aria-current`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-current) 属性を反映し、コンテナーまたは関連要素のセット内の現在の項目を表す要素を示します。
+- {{domxref("Element.ariaDescription")}}
+  - : {{domxref("DOMString")}} で [`aria-description`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-description) 属性を反映し、現在の要素を説明または注釈する文字列値を定義します。
+- {{domxref("Element.ariaDisabled")}}
+  - : {{domxref("DOMString")}} で [`aria-disabled`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-disabled) 属性を反映し、この要素が知覚可能であるが無効であるため、編集やその他の操作ができないことを示します。
+- {{domxref("Element.ariaExpanded")}}
+  - : {{domxref("DOMString")}} で [`aria-expanded`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) 属性を反映し、この要素が所有または制御するグループ化要素が展開されているか畳まれているかを示します。
+- {{domxref("Element.ariaHasPopup")}}
+  - : {{domxref("DOMString")}} で [`aria-haspopup`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup) 属性を反映し、この要素によって引き起こされるメニューやダイアログのような対話型のポップアップ要素の有無と種類を示します。
+- {{domxref("Element.ariaHidden")}}
+  - : {{domxref("DOMString")}} で [`aria-hidden`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-hidden) 属性を反映し、この要素がアクセシビリティ API に公開されているかどうかを示します。
+- {{domxref("Element.ariaKeyShortcuts")}}
+  - : {{domxref("DOMString")}} で [`aria-keyshortcuts`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-keyshortcuts) 属性を反映し、要素を活性化したりフォーカスを与えたりするために作者が実装したキーボードショートカットを示します。
+- {{domxref("Element.ariaLabel")}}
+  - : {{domxref("DOMString")}} で [`aria-label`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-label) 属性を反映し、現在の要素をラベル付けする文字列値を定義します。
+- {{domxref("Element.ariaLevel")}}
+  - : {{domxref("DOMString")}} で [`aria-level`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-level) 属性を反映し、構造内の要素の階層レベルを定義します。
+- {{domxref("Element.ariaLive")}}
+  - : {{domxref("DOMString")}} で [`aria-live`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-live) 属性を反映し、この要素が更新されること、ユーザーエージェント、支援技術、ユーザーがライブ領域から期待できる更新の種類を記述します。
+- {{domxref("Element.ariaModal")}}
+  - : {{domxref("DOMString")}} で [`aria-modal`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-modal) 属性を反映し、要素が表示されたときにモーダルであるかどうかを示します。
+- {{domxref("Element.ariaMultiline")}}
+  - : {{domxref("DOMString")}} で [`aria-multiline`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-multiline) 属性を反映し、テキストボックスが複数行の入力を受け入れるか、一行のみを受け入れるかを示します。
+- {{domxref("Element.ariaMultiSelectable")}}
+  - : {{domxref("DOMString")}} で [`aria-multiselectable`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-multiselectable) 属性を反映し、ユーザーが現在の選択可能な子孫から複数の項目を選択できることを示します。
+- {{domxref("Element.ariaOrientation")}}
+  - : {{domxref("DOMString")}} で [`aria-orientation`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-orientation) 属性を反映し、要素の方向が水平、垂直、または不明/曖昧であることを示す。
+- {{domxref("Element.ariaPlaceholder")}}
+  - : {{domxref("DOMString")}} で [`aria-placeholder`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-placeholder) 属性を反映し、コントロールに値がない場合にユーザーのデータ入力を支援するための短いヒントを定義します。
+- {{domxref("Element.ariaPosInSet")}}
+  - : {{domxref("DOMString")}} で [`aria-posinset`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-posinset) 属性を反映し、リストアイテムまたはツリーアイテムの現在のセットにおける要素の数または位置を定義します。
+- {{domxref("Element.ariaPressed")}}
+  - : {{domxref("DOMString")}} で [`aria-pressed`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-pressed) 属性を反映し、トグルボタンの現在の「押された」状態を示します。
+- {{domxref("Element.ariaReadOnly")}}
+  - : {{domxref("DOMString")}} で [`aria-readonly`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-readonly) 属性を反映し、要素が編集不可能であることを示すが、それ以外は操作可能であることを示します。
+- {{domxref("Element.ariaRelevant")}}
+  - : {{domxref("DOMString")}} で [`aria-relevant`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-relevant) 属性を反映し、ライブリージョン内のアクセシビリティツリーが変更された場合に、ユーザエージェントがどのような通知を行うかを示します。これは、 `aria-live` リージョン内のどのような変更が関連性があり、アナウンスされるべきかを記述するために使用されます。
+- {{domxref("Element.ariaRequired")}}
+  - : {{domxref("DOMString")}} で [`aria-required`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-required) 属性を反映し、フォームを送信する前に要素にユーザーの入力が必要であることを示します。
+- {{domxref("Element.ariaRoleDescription")}}
+  - : {{domxref("DOMString")}} で [`aria-roledescription`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-roledescription) 属性を反映し、要素の役割について、人間が読める、著者がローカライズした説明を定義します。
+- {{domxref("Element.ariaRowCount")}}
+  - : {{domxref("DOMString")}} で [`aria-rowcount`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-rowcount) 属性を反映し、テーブル、グリッド、ツリーグリッドの行の総数を定義します。
+- {{domxref("Element.ariaRowIndex")}}
+  - : {{domxref("DOMString")}} で [`aria-rowindex`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-rowindex) 属性を反映し、テーブル、グリッド、ツリーグリッド内の行の総数に対する要素の行インデックスまたは位置を定義します。
+- {{domxref("Element.ariaRowIndexText")}}
+  - : {{domxref("DOMString")}} で [`aria-rowindextext`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-rowindextext) 属性を反映し、 aria-rowindex の代替となる人間が読めるテキストを定義しています。
+- {{domxref("Element.ariaRowSpan")}}
+  - : {{domxref("DOMString")}} で [`aria-rowspan`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-rowspan) 属性を反映し、テーブル、グリッド、ツリーグリッド内のセルまたはグリッドセルがカバーする行数を定義します。
+- {{domxref("Element.ariaSelected")}}
+  - : {{domxref("DOMString")}} で [`aria-selected`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-selected) 属性を反映し、選択状態を持つ要素の現在の「選択された」状態を示します。
+- {{domxref("Element.ariaSetSize")}}
+  - : {{domxref("DOMString")}} で [`aria-setsize`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-setsize) 属性を反映し、現在のリストアイテムまたはツリーアイテムのセットのアイテム数を定義します。
+- {{domxref("Element.ariaSort")}}
+  - : {{domxref("DOMString")}} で [`aria-sort`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-sort) 属性を反映し、テーブルやグリッドのアイテムが昇順または降順でソートされるかどうかを示します。
+- {{domxref("Element.ariaValueMax")}}
+  - : {{domxref("DOMString")}} で [`aria-valueMax`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-valuemax) 属性を反映し、 range ウィジェットの最大許容値を定義します。
+- {{domxref("Element.ariaValueMin")}}
+  - : {{domxref("DOMString")}} で [`aria-valueMin`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-valuemin) 属性を反映し、 range ウィジェットに許容される最小値を定義します。
+- {{domxref("Element.ariaValueNow")}}
+  - : {{domxref("DOMString")}} で [`aria-valueNow`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-valuenow) 属性を反映し、 range ウィジェットの現在の値を定義します。
+- {{domxref("Element.ariaValueText")}}
+  - : {{domxref("DOMString")}} で [`aria-valuetext`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext) 属性を反映し、 range ウィジェットの aria-valuenow の代替となる人間が読めるテキストを定義します。
+
+## メソッド
+
+_`Element` は親である {{DOMxRef("Node")}}、およびその親である {{DOMxRef("EventTarget")}} からメソッドを継承しています。_
+
+- {{DOMxRef("EventTarget.addEventListener()")}}
+  - : この要素、特定のイベント型を扱うイベントハンドラーを登録します。
+- {{DOMxRef("Element.after()")}}
+  - : {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトをこの `Element` の親の子ノードリストの中、 `Element` の直後に追加します。
+- {{DOMxRef("Element.attachShadow()")}}
+  - : 指定した要素にシャドウ DOM ツリーを結びつけて、その {{DOMxRef("ShadowRoot")}} への参照を返します。
+- {{DOMxRef("Element.animate()")}} {{Experimental_Inline}}
+  - : この要素でアニメーションを作成および実行するためのショートカットメソッドです。作成した Animation オブジェクトのインスタンスを返します。
+- {{DOMxRef("Element.append()")}}
+  - : この要素の最後の子の後に、一連の {{domxref("Node")}} オブジェクトまたは {{domxref("DOMString")}} オブジェクトを挿入します。
+- {{DOMxRef("Element.before()")}}
+  - : {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトをこの `Element` の親の子ノードリストの中、 `Element` の直前に追加します。
+- {{DOMxRef("Element.closest()")}}
+  - : {{DOMxRef("Element")}} 型で、引数に指定したセレクターによって選択される要素がもっとも近い祖先要素（または当該要素自身）を返します。
+- {{DOMxRef("Element.createShadowRoot()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}
+  - : この要素に[シャドウ DOM](/ja/docs/Web/Web_Components/Using_shadow_DOM) を作成し、シャドウホストにします。 {{DOMxRef("ShadowRoot")}} を返します。
+- {{DOMxRef("Element.computedStyleMap()")}} {{Experimental_Inline}}
+  - : {{DOMxRef("StylePropertyMapReadOnly")}} インターフェイスで、 {{DOMxRef("CSSStyleDeclaration")}} に代わる、CSS 宣言ブロックを読み取り専用で表現したものを返します。
+- {{DOMxRef("EventTarget.dispatchEvent()")}}
+  - : DOM 内のこのノードにイベントを送ります。そして、イベントをキャンセルしたハンドラーがないかを示す論理値を返します。
+- {{DOMxRef("Element.getAnimations()")}} {{Experimental_Inline}}
+  - : 要素でアクティブな Animation オブジェクトの配列を返します。
+- {{DOMxRef("Element.getAttribute()")}}
+  - : 現在ノードから指定された名前付きの属性値を取得して文字列で返します。
+- {{DOMxRef("Element.getAttributeNames()")}}
+  - : 現在の要素の属性名の配列を返します。
+- {{DOMxRef("Element.getAttributeNode()")}}
+  - : 現在のノードから、指定された属性のノード表現を取得し、 {{DOMxRef("Attr")}} として返します。
+- {{DOMxRef("Element.getAttributeNodeNS()")}}
+  - : 指定された名前と名前空間を持つ属性のノード表現を現在のノードから取得し、それを {{DOMxRef("Attr")}} として返します。
+- {{DOMxRef("Element.getAttributeNS()")}}
+  - : 現在のノードから指定された名前と名前空間を持つ属性値を取得して、文字列で返します。
+- {{DOMxRef("Element.getBoundingClientRect()")}}
+  - : この要素のサイズと、ビューポートにおける位置を返します。
+- {{domxref("Element.getBoxQuads()")}} {{experimental_inline}}
+  - : このノードの CSS フラグメントを表す {{domxref("DOMQuad")}} オブジェクトのリストを返します。
+- {{DOMxRef("Element.getClientRects()")}}
+  - : クライアント領域内のテキストの各行の外接矩形 (bounding rectangle) の集合を返します。
+- {{DOMxRef("Element.getElementsByClassName()")}}
+  - : 生きた {{DOMxRef("HTMLCollection")}} で、現在の要素から、引数に指定したクラス名のリストに該当するすべての子孫要素を生きた {{DOMxRef("HTMLCollection")}} で、返します。
+- {{DOMxRef("Element.getElementsByTagName()")}}
+  - : 現在要素から、特定のタグ名を持つすべての子孫要素の集合を取得して生きた {{DOMxRef("HTMLCollection")}} で返します。
+- {{DOMxRef("Element.getElementsByTagNameNS()")}}
+  - : 生きた {{DOMxRef("HTMLCollection")}} で、現在要素から、特定のタグ名と名前空間を持つすべての子孫要素の集合を取得して、生きた {{DOMxRef("HTMLCollection")}} で返します。
+- {{DOMxRef("Element.hasAttribute()")}}
+  - : 要素が指定された指定された属性を持っているか否かを示す論理値を返します。
+- {{DOMxRef("Element.hasAttributeNS()")}}
+  - : 要素が指定された名前空間内に指定された属性を持っているか否かを示す論理値を返します。
+- {{DOMxRef("Element.hasAttributes()")}}
+  - : 要素が現在 1 つ以上の属性をもっているかを示す論理値を返します。
+- {{DOMxRef("Element.hasPointerCapture()")}}
+  - : 呼び出された要素が、指定されたポインター ID によって識別されるポインターのポインターキャプチャを持っているかどうかを示します。
+- {{DOMxRef("Element.insertAdjacentElement()")}}
+  - : メソッドを実行した要素に対して相対的な指定位置に、要素ノードを挿入します。
+- {{DOMxRef("Element.insertAdjacentHTML()")}}
+  - : テキストを HTML または XML として解釈し、解釈結果のノードをツリーの指定した位置に挿入します。
+- {{DOMxRef("Element.insertAdjacentText()")}}
+  - : メソッドを実行した要素に対して相対的な指定位置に、テキストノードを挿入します。
+- {{DOMxRef("Element.matches()")}}
+  - : 要素が指定されたセレクター文字列で選択されるか否かを示す論理値を返します。
+- {{DOMxRef("Element.prepend()")}}
+  - : この要素の最初の子の前に、一連の {{domxref("Node")}} オブジェクトまたは {{domxref("DOMString")}} オブジェクトを挿入します。
+- {{DOMxRef("Element.querySelector()")}}
+  - : 要素に対して、指定したセレクターに一致する最初の {{DOMxRef("Node")}} を返します。
+- {{DOMxRef("Element.querySelectorAll()")}}
+  - : 要素に対して、指定したセレクターに一致するノードの {{DOMxRef("NodeList")}} を返します。
+- {{DOMxRef("Element.releasePointerCapture()")}}
+  - : 以前に特定の{{DOMxRef("PointerEvent","ポインターイベント")}}向けに設定したポインターキャプチャーを解放 (停止) します。
+- {{DOMxRef("Element.remove()")}}
+  - : 親要素の子リストから、要素を取り除きます。
+- {{DOMxRef("Element.removeAttribute()")}}
+  - : 現在ノードから，指定された名前を持つ属性を取り除きます。
+- {{DOMxRef("Element.removeAttributeNode()")}}
+  - : 現在のノードから名前の付いた属性のノード表現を取り除きます。
+- {{DOMxRef("Element.removeAttributeNS()")}}
+  - : 現在ノードから，指定された名前と名前空間を持つ属性を取り除きます。
+- {{DOMxRef("EventTarget.removeEventListener()")}}
+  - : 要素からイベントリスナーを取り除きます。
+- {{DOMxRef("Element.replaceChildren()")}}
+  - : {{domxref("Node")}} の既存の子を指定された新しい一連の子に置き換えます。
+- {{DOMxRef("Element.replaceWith()")}}
+  - : 親の子リストの要素を、一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトで置き換えます。
+- {{DOMxRef("Element.requestFullscreen()")}} {{Experimental_Inline}}
+  - : 要素を全画面表示するよう、ブラウザーへ非同期的に要求します。
+- {{DOMxRef("Element.requestPointerLock()")}} {{Experimental_Inline}}
+  - : 指定した要素でポインターをロックするよう、非同期的に要求できます。
+- {{domxref("Element.scroll()")}}
+  - : 指定された要素の中で特定の座標のセットへスクロールします。
+- {{domxref("Element.scrollBy()")}}
+  - : 指定された量だけ要素をスクロールします。
+- {{DOMxRef("Element.scrollIntoView()")}} {{Experimental_Inline}}
+  - : 要素がビューの内側に来るまでページをスクロールします。
+- {{domxref("Element.scrollTo()")}}
+  - : 指定された要素の中で特定の座標のセットへスクロールします。
+- {{DOMxRef("Element.setAttribute()")}}
+  - : 現在ノードに、指定された名前を持つ属性値を設定します。
+- {{DOMxRef("Element.setAttributeNode()")}}
+  - : 現在のノードから指定された属性のノード表現を設定します。
+- {{DOMxRef("Element.setAttributeNodeNS()")}}
+  - : 指定された名前と名前空間を持つ属性のノード表現を、現在のノードから設定します。
+- {{DOMxRef("Element.setAttributeNS()")}}
+  - : 現在ノードに、指定された名前と名前空間を持つ属性値を設定します。
+- {{DOMxRef("Element.setCapture()")}} {{Non-standard_Inline}}{{Deprecated_Inline}}
+  - : マウスイベントキャプチャーを設定し、すべてのマウスイベントをこの要素にリダイレクトします。
+- {{DOMxRef("Element.setPointerCapture()")}}
+  - : 指定された要素を、以降の[ポインターイベント](/ja/docs/Web/API/Pointer_events)のキャプチャー対象として指定します。
+- {{DOMxRef("Element.toggleAttribute()")}}
+  - : 論理属性のオンオフを切り替えます。属性が存在していれば削除、属性が存在していなければ追加します。
+
+## イベント
+
+これらのイベントを待ち受けするには、 `addEventListener()` を使用するか、イベントリスナーをこのインターフェイスの `onイベント名` プロパティに代入するかします。
+
+- {{domxref("HTMLDialogElement/cancel_event", "cancel")}}
+
+  - : ユーザーがブラウザーに、現在開いているダイアログを閉じたいと指示したときに {{HTMLElement("dialog")}} に発行されます。ブラウザーがこのイベントを発行させる可能性があるのは、例えばユーザーが Esc キーを押したり、ブラウザーの UI の一部である「ダイアログを閉じる」ボタンをクリックしたりした場合です。 {{domxref("GlobalEventHandlers/oncancel", "oncancel")}} プロパティからも利用できます。
+- {{domxref("Element/error_event", "error")}}
+  - : リソースの読み込みに失敗したか、利用できなかった場合に発行されます。例えば、スクリプトに実行エラーがあった場合や、画像が見つからなかった場合、無効であった場合などです。
+    {{domxref("GlobalEventHandlers/onerror", "onerror")}} プロパティからも利用できます。
+- {{domxref("Element/scroll_event", "scroll")}}
+  - : 文書のビューまたは要素がスクロールしたときに発行されます。
+    {{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}} プロパティからも利用できます。
+- {{domxref("Element/select_event", "select")}}
+  - : いくらかのテキストが選択されたときに発行されます。
+ {{DOMxRef("GlobalEventHandlers.onselect", "onselect")}} プロパティからも利用できます。
+- {{domxref("Element/show_event", "show")}}
+  - : {{domxref("Element/contextmenu_event", "contextmenu")}} イベントが [`contextmenu`](/ja/docs/Web/HTML/Global_attributes/contextmenu) 属性 {{deprecated_inline}} を持つ要素で発生したか、バブリングで到達した場合に発行されます。
+    {{DOMxRef("GlobalEventHandlers.onshow", "onshow")}} プロパティからも利用できます。
+- {{domxref("Element/wheel_event","wheel")}}
+  - : ユーザーがポインティングデバイス（普通はマウス）のホイールボタンを回転させたときに発行されます。
+    {{DOMxRef("GlobalEventHandlers.onwheel", "onwheel")}} プロパティからも利用できます。
+- {{domxref("Element/securitypolicyviolation_event","securitypolicyviolation")}}
+  - : [コンテンツセキュリティポリシー](/ja/docs/Web/HTTP/CSP)の違反があった場合に発行されます。
+    グローバルの {{DOMxRef("GlobalEventHandlers.onsecuritypolicyviolation", "onsecuritypolicyviolation")}} プロパティからも利用できます。これは要素と {{domxref("Document")}} と {{domxref("Window")}} の各オブジェクトで利用できます。
+
+### クリップボードイベント
+
+- {{domxref("Element/copy_event", "copy")}}
+  - : ユーザーがブラウザーのユーザーインターフェイスを通して、コピー操作を行ったときに発行されます。
+    {{domxref("HTMLElement/oncopy", "oncopy")}} プロパティからも利用できます。
+- {{domxref("Element/cut_event", "cut")}}
+  - : ユーザーがブラウザーのユーザーインターフェイスを通して、切り取り操作を行ったときに発行されます。
+    {{domxref("HTMLElement/oncut", "oncut")}} プロパティからも利用できます。
+- {{domxref("Element/paste_event", "paste")}}
+  - : ユーザーがブラウザーのユーザーインターフェイスを通して、貼り付け操作を行ったときに発行されます。
+    {{domxref("HTMLElement/onpaste", "onpaste")}} プロパティからも利用できます。
+
+### 構成イベント
+
+- {{domxref("Element/compositionend_event", "compositionend")}}
+  - : {{glossary("input method editor", "インプットメソッドエディター")}}のようなテキスト構成システムで、現在の入力セッションが完了またはキャンセルされたときに発行されます。
+- {{domxref("Element/compositionstart_event", "compositionstart")}}
+  - : {{glossary("input method editor", "インプットメソッドエディター")}}のようなテキスト構成システムで、新しい入力セッションを始まったときに発行されます。
+- {{domxref("Element/compositionupdate_event", "compositionupdate")}}
+  - : {{glossary("input method editor", "インプットメソッドエディター")}}のようなテキスト構成システムによって制御されている入力セッションのコンテキストに、新しい文字が入力されたときに発行されます。
+
+### フォーカスイベント
+
+- {{domxref("Element/blur_event", "blur")}}
+  - : 要素がフォーカスを失ったときに発行されます。
+    {{domxref("GlobalEventHandlers/onblur", "onblur")}} プロパティからも利用できます。
+- {{domxref("Element/focus_event", "focus")}}
+  - : 要素がフォーカスを受け取ったときに発行されます。
+    {{domxref("GlobalEventHandlers/onfocus", "onfocus")}} プロパティからも利用できます。
+- {{domxref("Element/focusin_event", "focusin")}}
+  - : 要素がフォーカスを受け取ろうとしているときに発行されます。
+- {{domxref("Element/focusout_event", "focusout")}}
+  - : 要素がフォーカスを失おうとしているときに発行されます。
+
+### 全画面イベント
+
+- {{domxref("Element/fullscreenchange_event", "fullscreenchange")}}
+  - : [全画面](/ja/docs/Web/API/Fullscreen_API/Guide)モードへの移行時または終了時に、 {{domxref("Element")}} に送られます。
+- {{domxref("Element/fullscreenerror_event", "fullscreenerror")}}
+  - : [全画面](/ja/docs/Web/API/Fullscreen_API/Guide)モードへの移行または終了を試みている中でエラーが発生したときに、 `Element` に送られます。
+
+### キーボードイベント
+
+- `{{domxref("Element/keydown_event", "keydown")}}`
+  - : キーが押されたときに発行されます。
+ {{domxref("GlobalEventHandlers/onkeydown", "onkeydown")}} プロパティからも利用できます。
+- `{{domxref("Element/keypress_event", "keypress")}}`
+  - : 文字の値を発行させるキーが押されたときに発行されます。 {{deprecated_inline}}
+ {{domxref("GlobalEventHandlers/onkeypress", "onkeypress")}} プロパティからも利用できます。
+- `{{domxref("Element/keyup_event", "keyup")}}`
+  - : キーが離されたときに発行されます。
+ {{domxref("GlobalEventHandlers/onkeyup", "onkeyup")}} プロパティからも利用できます。
+
+### マウスイベント
+
+- {{domxref("Element/auxclick_event", "auxclick")}}
+  - : ポインティングデバイスの第一ボタン以外のボタン（例えば、マウスの左ボタン以外のボタン）が要素上で押されて離されたときに発行されます。
+    {{domxref("GlobalEventHandlers/onauxclick", "onauxclick")}} プロパティからも利用できます。
+- {{domxref("Element/click_event", "click")}}
+  - : ポインティングデバイスのボタン（例えば、マウスの第一ボタン）が単一の要素上で押されて離されたときに発行されます。
+    {{domxref("GlobalEventHandlers/onclick", "onclick")}} プロパティからも利用できます。
+- {{domxref("Element/contextmenu_event", "contextmenu")}}
+  - : ユーザーがコンテキストメニューを開こうとしたときに発行されます。
+    {{domxref("GlobalEventHandlers/oncontextmenu", "oncontextmenu")}} プロパティからも利用できます。
+- {{domxref("Element/dblclick_event", "dblclick")}}
+  - : ポインティングデバイスのボタン（例えば、マウスの第一ボタン）が単一の要素上で 2 回クリックされたときに発行されます。
+    {{domxref("GlobalEventHandlers/ondblclick", "ondblclick")}} プロパティからも利用できます。
+- {{domxref("Element/DOMActivate_event", "DOMActivate")}} {{Deprecated_Inline}}
+  - : 要素が、例えばマウスのクリックやキーの押下によってアクティブになったときに発行されます。
+- {{domxref("Element/mousedown_event", "mousedown")}}
+  - : ポインティングデバイスのボタンが要素上で押されたときに発行されます。
+    {{domxref("GlobalEventHandlers/onmousedown", "onmousedown")}} プロパティからも利用できます。
+- {{domxref("Element/mouseenter_event", "mouseenter")}}
+  - : ポインティングデバイス（ふつうはマウス）が、リスナーが割り当てられた要素の上へ移動したときに発行されます。
+    {{domxref("GlobalEventHandlers/onmouseenter", "onmouseenter")}} プロパティからも利用できます。
+- {{domxref("Element/mouseleave_event", "mouseleave")}}
+  - : ポインティングデバイス（ふつうはマウス）が、リスナーが割り当てられた要素の外へ移動したときに発行されます。
+    {{domxref("GlobalEventHandlers/onmouseleave", "onmouseleave")}} プロパティからも利用できます。
+- {{domxref("Element/mousemove_event", "mousemove")}}
+  - : ポインティングデバイス（ふつうはマウス）が、要素の上を移動したときに発行されます。
+    {{domxref("GlobalEventHandlers/onmousemove", "onmousemove")}} プロパティからも利用できます。
+- {{domxref("Element/mouseout_event", "mouseout")}}
+  - : ポインティングデバイス（ふつうはマウス）が、リスナーが割り当てられた要素またはその子要素の外へ移動したときに発行されます。
+    {{domxref("GlobalEventHandlers/onmouseout", "onmouseout")}} プロパティからも利用できます。
+- {{domxref("Element/mouseover_event", "mouseover")}}
+  - : ポインティングデバイス（ふつうはマウス）が、リスナーが割り当てられた要素またはその子要素の上を移動したときに発行されます。
+    {{domxref("GlobalEventHandlers/onmouseover", "onmouseover")}} プロパティからも利用できます。
+- {{domxref("Element/mouseup_event", "mouseup")}}
+  - : ポインティングデバイスのボタンが要素の上で離されたときに発行されます。
+    {{domxref("GlobalEventHandlers/onmouseup", "onmouseup")}} プロパティからも利用できます。
+- {{domxref("Element/webkitmouseforcechanged_event", "webkitmouseforcechanged")}}
+  - : trackpadtouchscreen の上の圧力が変化するたびに発行されます。
+- {{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}}
+  - : 「強制クリック」と判断されるのに十分な圧力があった直後の mousedown イベントの後で発行されます。
+- {{domxref("Element/webkitmouseforcewillbegin_event", "webkitmouseforcewillbegin")}}
+  - : {{domxref("Element/mousedown_event", "mousedown")}} イベントの前に発行されます。
+- {{domxref("Element/webkitmouseforceup_event", "webkitmouseforceup")}}
+  - : 「強制クリック」が終了したといえるほど圧力が減少した直後の {{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}} イベントの後で発行されます。
+
+### タッチイベント
+
+- {{domxref("Element/touchcancel_event", "touchcancel")}}
+  - : 1 つ以上のタッチ点が実装依存の理由により破棄された（例えば、タッチ点が多く作られすぎた）場合に発行されます。
+    {{domxref("GlobalEventHandlers/ontouchcancel", "ontouchcancel")}} プロパティからも利用できます。
+- {{domxref("Element/touchend_event", "touchend")}}
+  - : 1 つ以上のタッチ点がタッチ面から取り除かれたときに発行されます。
+    {{domxref("GlobalEventHandlers/ontouchend", "ontouchend")}} プロパティからも利用できます。
+- {{domxref("Element/touchmove_event", "touchmove")}}
+  - : 1 つ以上のタッチ点がタッチ面上で移動したときに発行されます。
+    {{domxref("GlobalEventHandlers/ontouchmove", "ontouchmove")}} プロパティからも利用できます。
+- {{domxref("Element/touchstart_event", "touchstart")}}
+  - : 1 つ以上のタッチ点がタッチ面に配置されたときに発行されます。
+    {{domxref("GlobalEventHandlers/ontouchstart", "ontouchstart")}} プロパティからも利用できます。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
-- 
cgit v1.2.3-54-g00ecf


From d53bae971e455859229bcb3246e29bcbc85179d2 Mon Sep 17 00:00:00 2001
From: MDN 
Date: Tue, 8 Mar 2022 00:12:08 +0000
Subject: [CRON] sync translated content

---
 files/es/_redirects.txt                            |   1 +
 files/es/_wikihistory.json                         |   2 +-
 .../javascript/asynchronous/concepts/index.html    | 162 ------
 .../javascript/asynchronous/introducing/index.html | 163 ++++++
 files/fr/_redirects.txt                            |   5 +
 .../learn/javascript/asynchronous/index.md         | 440 ++++++++++++++
 .../javascript/asynchronous/introducing/index.md   | 168 ++++++
 .../javascript/asynchronous/promises/index.md      | 595 +++++++++++++++++++
 .../index.md                                       | 648 +++++++++++++++++++++
 .../resourcetimingbufferfull_event/index.md        |  60 ++
 .../javascript/asynchronous/async_await/index.md   | 594 -------------------
 .../choosing_the_right_approach/index.md           | 439 --------------
 .../javascript/asynchronous/concepts/index.md      | 167 ------
 .../asynchronous/timeouts_and_intervals/index.md   | 647 --------------------
 .../onresourcetimingbufferfull/index.md            |  59 --
 files/ja/_redirects.txt                            |   5 +-
 files/ja/_wikihistory.json                         |  28 +-
 .../resourcetimingbufferfull_event/index.md        |  59 ++
 .../web/api/window/appinstalled_event/index.html   |  58 ++
 .../javascript/asynchronous/concepts/index.html    | 162 ------
 .../javascript/asynchronous/introducing/index.html | 163 ++++++
 .../onresourcetimingbufferfull/index.md            |  58 --
 files/ja/web/api/window/onappinstalled/index.html  |  58 --
 files/ko/_redirects.txt                            |   3 +
 files/ko/_wikihistory.json                         |  44 +-
 .../learn/javascript/asynchronous/index.html       | 599 +++++++++++++++++++
 .../javascript/asynchronous/introducing/index.html | 160 +++++
 .../javascript/asynchronous/promises/index.html    | 414 +++++++++++++
 .../javascript/asynchronous/async_await/index.html | 413 -------------
 .../javascript/asynchronous/concepts/index.html    | 159 -----
 .../asynchronous/timeouts_and_intervals/index.html | 598 -------------------
 files/pt-br/_redirects.txt                         |   8 +-
 files/pt-br/_wikihistory.json                      |  40 +-
 .../learn/javascript/asynchronous/index.html       | 524 +++++++++++++++++
 .../javascript/asynchronous/introducing/index.html | 156 +++++
 .../javascript/asynchronous/promises/index.html    | 556 ++++++++++++++++++
 .../index.html                                     | 625 ++++++++++++++++++++
 .../javascript/asynchronous/async_await/index.html | 556 ------------------
 .../choosing_the_right_approach/index.html         | 524 -----------------
 .../javascript/asynchronous/concepts/index.html    | 156 -----
 .../asynchronous/timeouts_and_intervals/index.html | 624 --------------------
 files/ru/_redirects.txt                            |   5 +-
 files/ru/_wikihistory.json                         |  36 +-
 .../learn/javascript/asynchronous/index.html       | 639 ++++++++++++++++++++
 .../javascript/asynchronous/introducing/index.html | 165 ++++++
 .../javascript/asynchronous/async_await/index.html | 415 -------------
 .../javascript/asynchronous/concepts/index.html    | 164 ------
 .../javascript/asynchronous/promises/index.html    | 416 +++++++++++++
 .../asynchronous/timeouts_and_intervals/index.html | 639 --------------------
 files/zh-cn/_redirects.txt                         |  15 +-
 files/zh-cn/_wikihistory.json                      | 128 ++--
 .../learn/javascript/asynchronous/index.html       | 524 +++++++++++++++++
 .../javascript/asynchronous/introducing/index.html | 163 ++++++
 .../javascript/asynchronous/promises/index.html    | 380 ++++++++++++
 .../index.html                                     | 618 ++++++++++++++++++++
 .../api/document/visibilitychange_event/index.html |  54 ++
 .../javascript/asynchronous/async_await/index.html | 380 ------------
 .../choosing_the_right_approach/index.html         | 524 -----------------
 .../javascript/asynchronous/concepts/index.html    | 163 ------
 .../asynchronous/timeouts_and_intervals/index.html | 618 --------------------
 .../web/api/document/onvisibilitychange/index.html |  53 --
 .../onresourcetimingbufferfull/index.html          |  64 --
 .../resourcetimingbufferfull_event/index.html      |  65 +++
 .../web/api/window/appinstalled_event/index.html   |  49 ++
 .../zh-cn/web/api/window/onappinstalled/index.html |  48 --
 files/zh-tw/_redirects.txt                         |   4 +
 .../learn/javascript/asynchronous/index.html       | 537 +++++++++++++++++
 .../javascript/asynchronous/introducing/index.html | 170 ++++++
 .../javascript/asynchronous/promises/index.html    | 436 ++++++++++++++
 .../index.html                                     | 647 ++++++++++++++++++++
 .../javascript/asynchronous/async_await/index.html | 435 --------------
 .../choosing_the_right_approach/index.html         | 536 -----------------
 .../javascript/asynchronous/concepts/index.html    | 169 ------
 .../asynchronous/timeouts_and_intervals/index.html | 646 --------------------
 74 files changed, 10428 insertions(+), 10377 deletions(-)
 delete mode 100644 files/es/learn/javascript/asynchronous/concepts/index.html
 create mode 100644 files/es/learn/javascript/asynchronous/introducing/index.html
 create mode 100644 files/fr/conflicting/learn/javascript/asynchronous/index.md
 create mode 100644 files/fr/conflicting/learn/javascript/asynchronous/introducing/index.md
 create mode 100644 files/fr/conflicting/learn/javascript/asynchronous/promises/index.md
 create mode 100644 files/fr/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.md
 create mode 100644 files/fr/conflicting/web/api/performance/resourcetimingbufferfull_event/index.md
 delete mode 100644 files/fr/learn/javascript/asynchronous/async_await/index.md
 delete mode 100644 files/fr/learn/javascript/asynchronous/choosing_the_right_approach/index.md
 delete mode 100644 files/fr/learn/javascript/asynchronous/concepts/index.md
 delete mode 100644 files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.md
 delete mode 100644 files/fr/web/api/performance/onresourcetimingbufferfull/index.md
 create mode 100644 files/ja/conflicting/web/api/performance/resourcetimingbufferfull_event/index.md
 create mode 100644 files/ja/conflicting/web/api/window/appinstalled_event/index.html
 delete mode 100644 files/ja/learn/javascript/asynchronous/concepts/index.html
 create mode 100644 files/ja/learn/javascript/asynchronous/introducing/index.html
 delete mode 100644 files/ja/web/api/performance/onresourcetimingbufferfull/index.md
 delete mode 100644 files/ja/web/api/window/onappinstalled/index.html
 create mode 100644 files/ko/conflicting/learn/javascript/asynchronous/index.html
 create mode 100644 files/ko/conflicting/learn/javascript/asynchronous/introducing/index.html
 create mode 100644 files/ko/conflicting/learn/javascript/asynchronous/promises/index.html
 delete mode 100644 files/ko/learn/javascript/asynchronous/async_await/index.html
 delete mode 100644 files/ko/learn/javascript/asynchronous/concepts/index.html
 delete mode 100644 files/ko/learn/javascript/asynchronous/timeouts_and_intervals/index.html
 create mode 100644 files/pt-br/conflicting/learn/javascript/asynchronous/index.html
 create mode 100644 files/pt-br/conflicting/learn/javascript/asynchronous/introducing/index.html
 create mode 100644 files/pt-br/conflicting/learn/javascript/asynchronous/promises/index.html
 create mode 100644 files/pt-br/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.html
 delete mode 100644 files/pt-br/learn/javascript/asynchronous/async_await/index.html
 delete mode 100644 files/pt-br/learn/javascript/asynchronous/choosing_the_right_approach/index.html
 delete mode 100644 files/pt-br/learn/javascript/asynchronous/concepts/index.html
 delete mode 100644 files/pt-br/learn/javascript/asynchronous/timeouts_and_intervals/index.html
 create mode 100644 files/ru/conflicting/learn/javascript/asynchronous/index.html
 create mode 100644 files/ru/conflicting/learn/javascript/asynchronous/introducing/index.html
 delete mode 100644 files/ru/learn/javascript/asynchronous/async_await/index.html
 delete mode 100644 files/ru/learn/javascript/asynchronous/concepts/index.html
 create mode 100644 files/ru/learn/javascript/asynchronous/promises/index.html
 delete mode 100644 files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html
 create mode 100644 files/zh-cn/conflicting/learn/javascript/asynchronous/index.html
 create mode 100644 files/zh-cn/conflicting/learn/javascript/asynchronous/introducing/index.html
 create mode 100644 files/zh-cn/conflicting/learn/javascript/asynchronous/promises/index.html
 create mode 100644 files/zh-cn/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.html
 create mode 100644 files/zh-cn/conflicting/web/api/document/visibilitychange_event/index.html
 delete mode 100644 files/zh-cn/learn/javascript/asynchronous/async_await/index.html
 delete mode 100644 files/zh-cn/learn/javascript/asynchronous/choosing_the_right_approach/index.html
 delete mode 100644 files/zh-cn/learn/javascript/asynchronous/concepts/index.html
 delete mode 100644 files/zh-cn/learn/javascript/asynchronous/timeouts_and_intervals/index.html
 delete mode 100644 files/zh-cn/web/api/document/onvisibilitychange/index.html
 delete mode 100644 files/zh-cn/web/api/performance/onresourcetimingbufferfull/index.html
 create mode 100644 files/zh-cn/web/api/performance/resourcetimingbufferfull_event/index.html
 create mode 100644 files/zh-cn/web/api/window/appinstalled_event/index.html
 delete mode 100644 files/zh-cn/web/api/window/onappinstalled/index.html
 create mode 100644 files/zh-tw/conflicting/learn/javascript/asynchronous/index.html
 create mode 100644 files/zh-tw/conflicting/learn/javascript/asynchronous/introducing/index.html
 create mode 100644 files/zh-tw/conflicting/learn/javascript/asynchronous/promises/index.html
 create mode 100644 files/zh-tw/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.html
 delete mode 100644 files/zh-tw/learn/javascript/asynchronous/async_await/index.html
 delete mode 100644 files/zh-tw/learn/javascript/asynchronous/choosing_the_right_approach/index.html
 delete mode 100644 files/zh-tw/learn/javascript/asynchronous/concepts/index.html
 delete mode 100644 files/zh-tw/learn/javascript/asynchronous/timeouts_and_intervals/index.html

(limited to 'files/ja')

diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt
index 0216d3ebb5..f62d9cc572 100644
--- a/files/es/_redirects.txt
+++ b/files/es/_redirects.txt
@@ -1179,6 +1179,7 @@
 /es/docs/Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks	/es/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks
 /es/docs/Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks/React_getting_started	/es/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started
 /es/docs/Learn/Herramientas_y_pruebas/Understanding_client-side_tools	/es/docs/Learn/Tools_and_testing/Understanding_client-side_tools
+/es/docs/Learn/JavaScript/Asynchronous/Concepts	/es/docs/Learn/JavaScript/Asynchronous/Introducing
 /es/docs/Learn/JavaScript/Building_blocks/Bucle_codigo	/es/docs/Learn/JavaScript/Building_blocks/Looping_code
 /es/docs/Learn/JavaScript/Building_blocks/Construyendo_tu_propia_funcion	/es/docs/Learn/JavaScript/Building_blocks/Build_your_own_function
 /es/docs/Learn/JavaScript/Client-side_web_APIs/Introducción	/es/docs/Learn/JavaScript/Client-side_web_APIs/Introduction
diff --git a/files/es/_wikihistory.json b/files/es/_wikihistory.json
index 6466283b7a..6156c5aff5 100644
--- a/files/es/_wikihistory.json
+++ b/files/es/_wikihistory.json
@@ -2943,7 +2943,7 @@
       "madmaxdios"
     ]
   },
-  "Learn/JavaScript/Asynchronous/Concepts": {
+  "Learn/JavaScript/Asynchronous/Introducing": {
     "modified": "2020-11-19T20:30:13.091Z",
     "contributors": [
       "AndresSalomon1990",
diff --git a/files/es/learn/javascript/asynchronous/concepts/index.html b/files/es/learn/javascript/asynchronous/concepts/index.html
deleted file mode 100644
index d5babeb8ba..0000000000
--- a/files/es/learn/javascript/asynchronous/concepts/index.html
+++ /dev/null
@@ -1,162 +0,0 @@
----
-title: General asynchronous programming concepts
-slug: Learn/JavaScript/Asynchronous/Concepts
-tags:
-  - Aprender
-  - Hilos
-  - JavaScript
-  - Promesas
-  - Threads
-  - bloques
-translation_of: Learn/JavaScript/Asynchronous/Concepts
----
-{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}
-
-En este artículo, repasaremos una serie de conceptos importantes relacionados con la programación asincrónica y cómo se ve esto en los navegadores web y JavaScript. Debe comprender estos conceptos antes de trabajar con los demás artículos del módulo.
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
- 
-Pre-requisitos: Literatura básica de computadora, un razonable entendimiento de los fundamentos de JavaScript.
Objetivo: Entender los conceptos básicos detrás de la programación asincrónica, y cómo se manifiesta en los exploradores web y JavaScript.
-
-¿Asincrónico?
-
-Normalmente, el código de un programa determinado se ejecuta directamente, y solo sucede una cosa a la vez. Si una función se basa en el resultado de otra función, tiene que esperar a que la otra función termine y regrese, y hasta que eso suceda, todo el programa se detiene esencialmente desde la perspectiva del usuario.
-
-Los usuarios de Mac, por ejemplo, a veces experimentan esto como un cursor giratorio multicolor (o "beachball" - "bola de playa" - como es llamado frecuentemente). Este cursor es la manera que tiene el sistema operativo de decir "el actual programa que está usando tiene que parar y esperar que algo termine, y está tomando tanto tiempo que me preocupa que pienses qué está sucediendo."
-
-
-
-Esto es una experiencia frustrante y no es un buen uso del poder de procesamiento de una computadora - especialmente en una era donde las computadoras tienen múltiples procesadores disponibles. No tiene sentido sentarse allí a esperar algo cuando podrías dejar que la otra tarea se ejecute en otro procesador y le notifique cuando termine. Mientras tanto, esto le permitiría terminar otros trabajos, lo cual es la base de la programación asincrónica. Depende del entorno de programación que esté usando (exploradores web, en caso de desarrollo web) proveer de APIs que le permitan ejecutar dichas tareas de manera asincrónica.
-
-Código de bloqueo (Blocking)
-
-Las técnicas asincrónicas son muy útiles, particularmente en programación web. Cuando una app web se ejecuta en el navegador y ejecuta un gran bloque de código sin retornar el control al navegador, este mismo puede parecer que se congela. Esto es llamado blocking; el navegador es bloqueado para que el usuario pueda seguir interactuando y realizando otras tareas hasta que la app web retorne el control sobre el procesador.
-
-Vamos a ver algunos ejemplos que muestren lo que significa blocking.
-
-En nuestro ejemplo simple-sync.html (véalo en vivo), agregamos un detector del evento click ("click event listener") a un botón con el fin de que cuando sea clickeado, ejecute una operación de un gran consumo de tiempo (calcula 10 millones de fechas y luego muestra la última en la consola) y luego agrega un párrafo al DOM:
-
-const btn = document.querySelector('button');
-btn.addEventListener('click', () => {
-  let myDate;
-  for(let i = 0; i < 10000000; i++) {
-    let date = new Date();
-    myDate = date
-  }
-
-  console.log(myDate);
-
-  let pElem = document.createElement('p');
-  pElem.textContent = 'This is a newly-added paragraph.';
-  document.body.appendChild(pElem);
-});
-
-Cuando ejecute el ejemplo, abra su consola de JavaScript y haga click en el botón — notará que el párrafo no aparece hasta que las fechas hayan sido calculadas en su totalidad y el mensaje en la consola haya sido logueado. EL código se ejecuta en el orden en que aparece (de arriba hacia abajo), y la última operación no se ejecuta hasta que la anterior haya terminado.
-
-
-Nota: El ejemplo anterior es poco realista. ¡Nunca se van a calcular 10 millones de fechas en una app web real! Sin embargo, sirve para dar una idea básica.
-
-
-En nuestro segundo ejemplo, simple-sync-ui-blocking.html (véalo en vivo), se simula algo un poco más realista con el que se puede encontrar en una página real. Se bloquea la interacción del usuario con la carga ("rendering") de la UI. En este ejemplo, se tienen dos botones:
-
-
- Un botón "Fill canvas" que cuando es clickeado llena con 1 millón de círculos azules al {{htmlelement("canvas")}} disponible.
- Un botón "Click me for alert" que cuando es clickeado muestra un mensaje de alerta.
-
-
-function expensiveOperation() {
-  for(let i = 0; i < 1000000; i++) {
-    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
-    ctx.beginPath();
-    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
-    ctx.fill()
-  }
-}
-
-fillBtn.addEventListener('click', expensiveOperation);
-
-alertBtn.addEventListener('click', () =>
-  alert('You clicked me!')
-);
-
-Si se clickea el primer botón y rápidamente se clickea el segundo, se verá que la alerta no aparece hasta que los círculos hayan terminado de representarse. La primer operación blockea a la segunda hasta que esta haya terminado de ejecutarse.
-
-
-Nota: OK, nuestro caso es feo y estamos fingiendo el efecto de bloqueo, pero es un problema común con el que los desarrolladores de aplicaciones reales batallan todo el tiempo.
-
-
-¿Por qué es esto? La respuesta es porque JavaScript, en general, es de "un solo hilo" (single-threaded). En este punto, se tiene que introduce el concepto de "hilos" (threads).
-
-Threads
-
-Un hilo (thread) es básicamente un proceso simple que un programa puede usar para completar tareas ("tasks"). Cada hilo solo puede realizar una tarea a la vez:
-
-Task A --> Task B --> Task C
-
-Cada tarea se va a ejecutar secuencialmente; una tarea tiene que completarse antes de que la próxima empiece.
-
-Como se dijo previamente, muchas computadores actualmente tienen múltiples procesadores, por lo que pueden realizar múltiples tareas a la vez. Los lenguajes de programación que pueden manejar múltiples hilos pueden usar múltiples procesadores para completar múltiples tareas en simultáneo. 
-
-Thread 1: Task A --> Task B
-Thread 2: Task C --> Task D
-
-JavaScript es single-threaded
-
-JavScript es tradicionalmente single-threaded. Aún con múltiples procesadores, solo se puede ejecutar tareas en un solo hilo, llamado el hilo principal (main thread). El ejemplo de arriba se ejecuta de la siguiente manera:
-
-Main thread: Render circles to canvas --> Display alert()
-
-Después de un tiempo, JavaScript ganó algunas herramientas que ayudaron con dichos problemas. Web workers permiten que se envíe parte del procesamiento de JavaScript a un hilo separado, llamado worker con el fin de que puedan ejecutar múltiples pedazos de JavaScript en simultáneo. Generalmente se usará un worker para ejectuar procesos de mucho consumo del hilo principal (main thread) con el fin de que no se bloquee la interacción del usuario.
-
-  Main thread: Task A --> Task C
-Worker thread: Expensive task B
-
-Con esto en mente, miremos el ejemplo simple-sync-worker.html (véalo ejecutándose en vivo) nuevamente con la consola de JavaScript del navegador abierta. Esto es una re-escritura del ejemplo anterior que calculaba 10 millones de fechas en hilos worker separados. Ahora si se clickea el botón, el navegador tiene permitido mostrar el párrafo antes de que las fechas haya terminado de calcularse. La primer operación ya no bloquea a la segunda.
-
-Código asincrónico
-
-Los web workers son muy útiles, pero tienen limitaciones. La mayor es que no pueden acceder al {{Glossary("DOM")}} — no se puede logar que un worker modifique directamente algo de la UI. No se puede representar 1 millón de círculos azules en un worker; básicamente solo puede hacer el cálculo numérico.
-
-El segundo problema es que a pesar de que el código se ejecuta en un worker no es bloqueador, es simplemente sincrónico. Esto se convierte en un problema cuando una función depender en los resultados de múltiples procesos previos para funcionar. Considere el siguiente diagrama de hilos:
-
-Main thread: Task A --> Task B
-
-En este caso, digamos que la Tarea A (Task A) está haciendo algo como buscando una imagen de un servidor y la Tarea B (Task B) luego hace algo con la imagen, como aplicarle un filtro. Si se ejecuta la Tarea A y luego inmediatamente se trata de ejecutar la Tarea B, se obtendrá un error, porque la imagen todavía no estará disponible.
-
-  Main thread: Task A --> Task B --> |Task D|
-Worker thread: Task C -----------> |      |
-
-En este caso, digamos que la Tarea D hace uso de los resultados de la Tarea B y la Tarea C. Se se puede garantizar que esos resultados estarán disponibles al mismo tiempo, entonces tal vez estemos OK, pero es poco probable. Si la Tarea D trata de ejecutarse cuando uno de sus inputs no está disponible, disparará un error.
-
-Para arreglar dichos problemas, los navegadores nos permiten ejecutar ciertas operaciones asincrónicamente. Características como las Promises (Promesas) permiten establecer la ejecución de una operación (por ejemplo, buscar una imagen desde un servidor), y luego esperar hasta que el resultado sea retornado antes de ejecutar otra operación. 
-
-Main thread: Task A                   Task B
-    Promise:      |__async operation__|
-
-Como la operación está sucediendo en otro lugar, el hilo principal no está bloqueado mientras la operación asincrónica está siendo procesada.
-
-Vamos a empezar a ver cómo se puede escribir código asincrónico en el próximo artículo. Cosas emocionantes, ¿eh? ¡Siga leyendo!
-
-Conclusión
-
-El diseño del software moderno gira cada más entorno a la programación asincrónica, para permiterle a los programas hacer más de una cosa a la vez. A medida que use nuevas y más poderosas APIs, encontrará más casos donde la única forma de realizar las cosas es asincrónicamente. Era muy difícil escribir el código asincrónico. Todavía lleva tiempo acostumbrarse, pero se ha vuelto mucho más sencillo. En el resto de este módulo, exploraremos porqué el código asincrónico importa y cómo diseñar código que evite algunos de los problemas que hemos descrito en este artículo.
-
-En este módulo
-
-
- Conceptos generales de programación asincrónica
- Introducción a JavaScript asincrónico
- JavaScript asincrónico cooperativo: Timeouts e intervalos
- Programación asincrónica elegante con Promesas
- Programación asincrónica más sencilla con async y await
- Eligiendo el correcto enfoque
-
diff --git a/files/es/learn/javascript/asynchronous/introducing/index.html b/files/es/learn/javascript/asynchronous/introducing/index.html
new file mode 100644
index 0000000000..85f605b479
--- /dev/null
+++ b/files/es/learn/javascript/asynchronous/introducing/index.html
@@ -0,0 +1,163 @@
+---
+title: General asynchronous programming concepts
+slug: Learn/JavaScript/Asynchronous/Introducing
+tags:
+  - Aprender
+  - Hilos
+  - JavaScript
+  - Promesas
+  - Threads
+  - bloques
+translation_of: Learn/JavaScript/Asynchronous/Concepts
+original_slug: Learn/JavaScript/Asynchronous/Concepts
+---
+{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}
+
+En este artículo, repasaremos una serie de conceptos importantes relacionados con la programación asincrónica y cómo se ve esto en los navegadores web y JavaScript. Debe comprender estos conceptos antes de trabajar con los demás artículos del módulo.
+
+
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+Pre-requisitos: Literatura básica de computadora, un razonable entendimiento de los fundamentos de JavaScript.
Objetivo: Entender los conceptos básicos detrás de la programación asincrónica, y cómo se manifiesta en los exploradores web y JavaScript.
+
+¿Asincrónico?
+
+Normalmente, el código de un programa determinado se ejecuta directamente, y solo sucede una cosa a la vez. Si una función se basa en el resultado de otra función, tiene que esperar a que la otra función termine y regrese, y hasta que eso suceda, todo el programa se detiene esencialmente desde la perspectiva del usuario.
+
+Los usuarios de Mac, por ejemplo, a veces experimentan esto como un cursor giratorio multicolor (o "beachball" - "bola de playa" - como es llamado frecuentemente). Este cursor es la manera que tiene el sistema operativo de decir "el actual programa que está usando tiene que parar y esperar que algo termine, y está tomando tanto tiempo que me preocupa que pienses qué está sucediendo."
+
+
+
+Esto es una experiencia frustrante y no es un buen uso del poder de procesamiento de una computadora - especialmente en una era donde las computadoras tienen múltiples procesadores disponibles. No tiene sentido sentarse allí a esperar algo cuando podrías dejar que la otra tarea se ejecute en otro procesador y le notifique cuando termine. Mientras tanto, esto le permitiría terminar otros trabajos, lo cual es la base de la programación asincrónica. Depende del entorno de programación que esté usando (exploradores web, en caso de desarrollo web) proveer de APIs que le permitan ejecutar dichas tareas de manera asincrónica.
+
+Código de bloqueo (Blocking)
+
+Las técnicas asincrónicas son muy útiles, particularmente en programación web. Cuando una app web se ejecuta en el navegador y ejecuta un gran bloque de código sin retornar el control al navegador, este mismo puede parecer que se congela. Esto es llamado blocking; el navegador es bloqueado para que el usuario pueda seguir interactuando y realizando otras tareas hasta que la app web retorne el control sobre el procesador.
+
+Vamos a ver algunos ejemplos que muestren lo que significa blocking.
+
+En nuestro ejemplo simple-sync.html (véalo en vivo), agregamos un detector del evento click ("click event listener") a un botón con el fin de que cuando sea clickeado, ejecute una operación de un gran consumo de tiempo (calcula 10 millones de fechas y luego muestra la última en la consola) y luego agrega un párrafo al DOM:
+
+const btn = document.querySelector('button');
+btn.addEventListener('click', () => {
+  let myDate;
+  for(let i = 0; i < 10000000; i++) {
+    let date = new Date();
+    myDate = date
+  }
+
+  console.log(myDate);
+
+  let pElem = document.createElement('p');
+  pElem.textContent = 'This is a newly-added paragraph.';
+  document.body.appendChild(pElem);
+});
+
+Cuando ejecute el ejemplo, abra su consola de JavaScript y haga click en el botón — notará que el párrafo no aparece hasta que las fechas hayan sido calculadas en su totalidad y el mensaje en la consola haya sido logueado. EL código se ejecuta en el orden en que aparece (de arriba hacia abajo), y la última operación no se ejecuta hasta que la anterior haya terminado.
+
+
+Nota: El ejemplo anterior es poco realista. ¡Nunca se van a calcular 10 millones de fechas en una app web real! Sin embargo, sirve para dar una idea básica.
+
+
+En nuestro segundo ejemplo, simple-sync-ui-blocking.html (véalo en vivo), se simula algo un poco más realista con el que se puede encontrar en una página real. Se bloquea la interacción del usuario con la carga ("rendering") de la UI. En este ejemplo, se tienen dos botones:
+
+
+ Un botón "Fill canvas" que cuando es clickeado llena con 1 millón de círculos azules al {{htmlelement("canvas")}} disponible.
+ Un botón "Click me for alert" que cuando es clickeado muestra un mensaje de alerta.
+
+
+function expensiveOperation() {
+  for(let i = 0; i < 1000000; i++) {
+    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
+    ctx.beginPath();
+    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
+    ctx.fill()
+  }
+}
+
+fillBtn.addEventListener('click', expensiveOperation);
+
+alertBtn.addEventListener('click', () =>
+  alert('You clicked me!')
+);
+
+Si se clickea el primer botón y rápidamente se clickea el segundo, se verá que la alerta no aparece hasta que los círculos hayan terminado de representarse. La primer operación blockea a la segunda hasta que esta haya terminado de ejecutarse.
+
+
+Nota: OK, nuestro caso es feo y estamos fingiendo el efecto de bloqueo, pero es un problema común con el que los desarrolladores de aplicaciones reales batallan todo el tiempo.
+
+
+¿Por qué es esto? La respuesta es porque JavaScript, en general, es de "un solo hilo" (single-threaded). En este punto, se tiene que introduce el concepto de "hilos" (threads).
+
+Threads
+
+Un hilo (thread) es básicamente un proceso simple que un programa puede usar para completar tareas ("tasks"). Cada hilo solo puede realizar una tarea a la vez:
+
+Task A --> Task B --> Task C
+
+Cada tarea se va a ejecutar secuencialmente; una tarea tiene que completarse antes de que la próxima empiece.
+
+Como se dijo previamente, muchas computadores actualmente tienen múltiples procesadores, por lo que pueden realizar múltiples tareas a la vez. Los lenguajes de programación que pueden manejar múltiples hilos pueden usar múltiples procesadores para completar múltiples tareas en simultáneo. 
+
+Thread 1: Task A --> Task B
+Thread 2: Task C --> Task D
+
+JavaScript es single-threaded
+
+JavScript es tradicionalmente single-threaded. Aún con múltiples procesadores, solo se puede ejecutar tareas en un solo hilo, llamado el hilo principal (main thread). El ejemplo de arriba se ejecuta de la siguiente manera:
+
+Main thread: Render circles to canvas --> Display alert()
+
+Después de un tiempo, JavaScript ganó algunas herramientas que ayudaron con dichos problemas. Web workers permiten que se envíe parte del procesamiento de JavaScript a un hilo separado, llamado worker con el fin de que puedan ejecutar múltiples pedazos de JavaScript en simultáneo. Generalmente se usará un worker para ejectuar procesos de mucho consumo del hilo principal (main thread) con el fin de que no se bloquee la interacción del usuario.
+
+  Main thread: Task A --> Task C
+Worker thread: Expensive task B
+
+Con esto en mente, miremos el ejemplo simple-sync-worker.html (véalo ejecutándose en vivo) nuevamente con la consola de JavaScript del navegador abierta. Esto es una re-escritura del ejemplo anterior que calculaba 10 millones de fechas en hilos worker separados. Ahora si se clickea el botón, el navegador tiene permitido mostrar el párrafo antes de que las fechas haya terminado de calcularse. La primer operación ya no bloquea a la segunda.
+
+Código asincrónico
+
+Los web workers son muy útiles, pero tienen limitaciones. La mayor es que no pueden acceder al {{Glossary("DOM")}} — no se puede logar que un worker modifique directamente algo de la UI. No se puede representar 1 millón de círculos azules en un worker; básicamente solo puede hacer el cálculo numérico.
+
+El segundo problema es que a pesar de que el código se ejecuta en un worker no es bloqueador, es simplemente sincrónico. Esto se convierte en un problema cuando una función depender en los resultados de múltiples procesos previos para funcionar. Considere el siguiente diagrama de hilos:
+
+Main thread: Task A --> Task B
+
+En este caso, digamos que la Tarea A (Task A) está haciendo algo como buscando una imagen de un servidor y la Tarea B (Task B) luego hace algo con la imagen, como aplicarle un filtro. Si se ejecuta la Tarea A y luego inmediatamente se trata de ejecutar la Tarea B, se obtendrá un error, porque la imagen todavía no estará disponible.
+
+  Main thread: Task A --> Task B --> |Task D|
+Worker thread: Task C -----------> |      |
+
+En este caso, digamos que la Tarea D hace uso de los resultados de la Tarea B y la Tarea C. Se se puede garantizar que esos resultados estarán disponibles al mismo tiempo, entonces tal vez estemos OK, pero es poco probable. Si la Tarea D trata de ejecutarse cuando uno de sus inputs no está disponible, disparará un error.
+
+Para arreglar dichos problemas, los navegadores nos permiten ejecutar ciertas operaciones asincrónicamente. Características como las Promises (Promesas) permiten establecer la ejecución de una operación (por ejemplo, buscar una imagen desde un servidor), y luego esperar hasta que el resultado sea retornado antes de ejecutar otra operación. 
+
+Main thread: Task A                   Task B
+    Promise:      |__async operation__|
+
+Como la operación está sucediendo en otro lugar, el hilo principal no está bloqueado mientras la operación asincrónica está siendo procesada.
+
+Vamos a empezar a ver cómo se puede escribir código asincrónico en el próximo artículo. Cosas emocionantes, ¿eh? ¡Siga leyendo!
+
+Conclusión
+
+El diseño del software moderno gira cada más entorno a la programación asincrónica, para permiterle a los programas hacer más de una cosa a la vez. A medida que use nuevas y más poderosas APIs, encontrará más casos donde la única forma de realizar las cosas es asincrónicamente. Era muy difícil escribir el código asincrónico. Todavía lleva tiempo acostumbrarse, pero se ha vuelto mucho más sencillo. En el resto de este módulo, exploraremos porqué el código asincrónico importa y cómo diseñar código que evite algunos de los problemas que hemos descrito en este artículo.
+
+En este módulo
+
+
+ Conceptos generales de programación asincrónica
+ Introducción a JavaScript asincrónico
+ JavaScript asincrónico cooperativo: Timeouts e intervalos
+ Programación asincrónica elegante con Promesas
+ Programación asincrónica más sencilla con async y await
+ Eligiendo el correcto enfoque
+
diff --git a/files/fr/_redirects.txt b/files/fr/_redirects.txt
index 3bc4db62c8..2f4624d9d5 100644
--- a/files/fr/_redirects.txt
+++ b/files/fr/_redirects.txt
@@ -2997,6 +2997,10 @@
 /fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS	/fr/docs/Learn/CSS/First_steps/What_is_CSS
 /fr/docs/Learn/CSS/Styling_text/Mise_en_forme_des_liens	/fr/docs/Learn/CSS/Styling_text/Styling_links
 /fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte	/fr/docs/Learn/CSS/Styling_text/Fundamentals
+/fr/docs/Learn/JavaScript/Asynchronous/Async_await	/fr/docs/conflicting/Learn/JavaScript/Asynchronous/Promises
+/fr/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach	/fr/docs/conflicting/Learn/JavaScript/Asynchronous
+/fr/docs/Learn/JavaScript/Asynchronous/Concepts	/fr/docs/conflicting/Learn/JavaScript/Asynchronous/Introducing
+/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals	/fr/docs/conflicting/Learn/JavaScript/Asynchronous_ae5a561b0ec11fc53c167201aa8af5df
 /fr/docs/Learn/JavaScript/First_steps/Testes_vos_competence:_Tableaux	/fr/docs/Learn/JavaScript/First_steps/Test_your_skills:_Arrays
 /fr/docs/Learn/JavaScript/First_steps/methode_chaine_utile	/fr/docs/Learn/JavaScript/First_steps/Useful_string_methods
 /fr/docs/Learn/JavaScript/First_steps/tableaux	/fr/docs/Learn/JavaScript/First_steps/Arrays
@@ -3713,6 +3717,7 @@
 /fr/docs/Web/API/PasswordCredential/idName	/fr/docs/conflicting/Web/API/PasswordCredential_cbf7b306e83a3f58ff06bccf89637c12
 /fr/docs/Web/API/PasswordCredential/passwordName	/fr/docs/conflicting/Web/API/PasswordCredential_bc57d5dfa87242b4fb83497887124f41
 /fr/docs/Web/API/Performance.now()	/fr/docs/Web/API/Performance/now
+/fr/docs/Web/API/Performance/onresourcetimingbufferfull	/fr/docs/conflicting/Web/API/Performance/resourcetimingbufferfull_event
 /fr/docs/Web/API/Pointer_events/gestes_pincer_zoom	/fr/docs/Web/API/Pointer_events/Pinch_zoom_gestures
 /fr/docs/Web/API/PositionOptions	/fr/docs/conflicting/Web/API/Geolocation/getCurrentPosition_5852407122355d2ab39863042583c266
 /fr/docs/Web/API/PositionOptions/enableHighAccuracy	/fr/docs/conflicting/Web/API/Geolocation/getCurrentPosition
diff --git a/files/fr/conflicting/learn/javascript/asynchronous/index.md b/files/fr/conflicting/learn/javascript/asynchronous/index.md
new file mode 100644
index 0000000000..b2b9afbcd1
--- /dev/null
+++ b/files/fr/conflicting/learn/javascript/asynchronous/index.md
@@ -0,0 +1,440 @@
+---
+title: Choisir la bonne approche
+slug: conflicting/Learn/JavaScript/Asynchronous
+tags:
+  - Beginner
+  - Intervals
+  - JavaScript
+  - Learn
+  - Optimize
+  - Promises
+  - async
+  - asynchronous
+  - await
+  - requestAnimationFrame
+  - setInterval
+  - setTimeout
+  - timeouts
+translation_of: Learn/JavaScript/Asynchronous/Choosing_the_right_approach
+original_slug: Learn/JavaScript/Asynchronous/Choosing_the_right_approach
+---
+{{LearnSidebar}}{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}
+
+Pour terminer ce module, nous vous proposons une brève discussion sur les différentes techniques et fonctionnalités asynchrones abordées tout au long de ce module, en examinant laquelle de ces techniques est la plus pertinente en fonction de la situation ainsi que des recommandations et des rappels des pièges courants le cas échéant.
+
+
+  
+    
+      
+      
+    
+    
+      
+      
+    
+  
+Prérequis : 
+        Connaissances informatiques de base, une compréhension raisonnable des
+        principes fondamentaux de JavaScript.
+      
Objectif : 
+        Être capable de faire un choix judicieux quant à l'utilisation de
+        différentes techniques de programmation asynchrone.
+      
+
+## Fonctions de rappels (callbacks) asynchrones
+
+Généralement trouvé dans les API à l'ancienne, une fonction de rappel (ou _callback_ en anglais) implique qu'une fonction soit passée en paramètre à une autre fonction, qui est ensuite invoquée lorsqu'une opération asynchrone est terminée afin réaliser une opération avec le résultat. C'est la méthode qui précédait l'arrivée des promesses : elle n'est pas aussi efficace ou flexible. Ne l'utilisez que si nécessaire.
+
+| Opération unique retardée | Opération répétée       | Opérations séquentielles multiples | Opérations simultanées multiples |
+| ------------------------- | ----------------------- | ---------------------------------- | -------------------------------- |
+| Non                       | Oui (rappels récursifs) | Oui (rappels imbriqués)            | Non                              |
+
+### Exemple de code
+
+Un exemple qui charge une ressource via l'API [`XMLHttpRequest`](/fr/docs/Web/API/XMLHttpRequest) ([l'exécuter en direct](https://mdn.github.io/learning-area/javascript/asynchronous/introducing/xhr-async-callback.html), et [voir la source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/xhr-async-callback.html)) :
+
+```js
+function loadAsset(url, type, callback) {
+  let xhr = new XMLHttpRequest();
+  xhr.open('GET', url);
+  xhr.responseType = type;
+
+  xhr.onload = function() {
+    callback(xhr.response);
+  };
+
+  xhr.send();
+}
+
+function displayImage(blob) {
+  let objectURL = URL.createObjectURL(blob);
+
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}
+
+loadAsset('coffee.jpg', 'blob', displayImage);
+```
+
+### Pièges
+
+- Les fonctions de rappels imbriquées peuvent être encombrantes et difficiles à lire (ce qu'on appelle parfois « _callback hell_ » en anglais).
+- Les fonctions de rappel pour les cas d'erreur doivent être appelés une fois pour chaque niveau d'imbrication, alors qu'avec les promesses, vous pouvez simplement utiliser un seul bloc `.catch()` pour gérer les erreurs de toute la chaîne.
+- Les fonctions de rappel asynchrones ne sont pas très élégantes.
+- Les fonctions de rappel passées en argument de promesses sont toujours appelés dans l'ordre strict où ils sont placés dans la file d'attente des événements ; les fonctions de rappel asynchrones ne le sont pas.
+- Les fonctions de rappel asynchrones perdent le contrôle total de la façon dont la fonction sera exécutée lorsqu'elle est transmise à une bibliothèque tierce.
+
+### Compatibilité des navigateurs
+
+Très bonne prise en charge générale, bien que la prise en charge exacte dans les différentes API dépende de l'API en question. Reportez-vous à la documentation de référence de l'API que vous utilisez pour obtenir des informations plus spécifiques.
+
+### Plus d'informations
+
+- [Introduction au JavaScript asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Introducing), en particulier les [Fonctions de rappels asynchrones](/fr/docs/Learn/JavaScript/Asynchronous/Introducing#async_callbacks)
+
+## setTimeout()
+
+[`setTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) est une méthode qui permet d'exécuter une fonction après l'écoulement d'un délai arbitraire.
+
+| Opération unique retardée | Opération répétée      | Opérations séquentielles multiples | Opérations simultanées multiples |
+| ------------------------- | ---------------------- | ---------------------------------- | -------------------------------- |
+| Oui                       | Oui (délais récursifs) | Oui (délais d'attente imbriqués)   | Non                              |
+
+### Exemple de code
+
+Ici, le navigateur attendra deux secondes avant d'exécuter la fonction anonyme, puis affichera le message dans la console ([voir son exécution en direct](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html), et [voir le code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html)) :
+
+```js
+let myGreeting = setTimeout(function() {
+  console.log('Bonjour, M. Univers !');
+}, 2000)
+```
+
+### Pièges
+
+Vous pouvez utiliser des appels récursifs à `setTimeout()` pour exécuter une fonction de manière répétée de façon similaire à `setInterval()`, en utilisant un code comme celui-ci :
+
+```js
+let i = 1;
+setTimeout(function run() {
+  console.log(i);
+  i++;
+
+  setTimeout(run, 100);
+}, 100);
+```
+
+Il existe une différence entre `setTimeout()` appelé récursivement et `setInterval()` :
+
+- Les récursions avec `setTimeout()` garantissent qu'au moins le temps spécifié (100ms dans cet exemple) s'écoulera entre les exécutions ; le code s'exécutera puis attendra 100 millisecondes avant de s'exécuter à nouveau. L'intervalle sera le même quelle que soit la durée d'exécution du code.
+- Avec `setInterval()`, l'intervalle que nous choisissons _inclut_ le temps d'exécution du code que nous voulons exécuter. Disons que le code prend 40 millisecondes pour s'exécuter — l'intervalle finit alors par n'être que de 60 millisecondes.
+
+Lorsque votre code a le potentiel de prendre plus de temps à s'exécuter que l'intervalle de temps que vous avez assigné, il est préférable d'utiliser `setTimeout()` récursivement - cela maintiendra l'intervalle de temps constant entre les exécutions, quelle que soit la durée d'exécution du code, et vous n'obtiendrez pas d'erreurs.
+
+### Compatibilité des navigateurs
+
+{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}}
+
+### Plus d'informations
+
+- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals), en particulier [`setTimeout()`]()
+- Page de référence pour [`setTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout)
+
+## setInterval()
+
+[`setInterval()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) est une méthode qui permet d'exécuter une fonction de façon répétée avec des intervalles de temps donnés entre chaque exécution. Cette méthode n'est pas aussi efficace que [`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame), mais elle permet de choisir le rythme d'exécution.
+
+| Opération unique retardée | Opération répétée | Opérations séquentielles multiples         | Opérations simultanées multiples |
+| ------------------------- | ----------------- | ------------------------------------------ | -------------------------------- |
+| Non                       | Oui               | Non (à moins qu'elles ne soient les mêmes) | Non                              |
+
+### Exemple de code
+
+La fonction suivante crée un nouvel objet [`Date()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date), en extrait une chaîne de temps à l'aide de [`toLocaleTimeString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString), puis l'affiche dans l'interface utilisateur. Nous l'exécutons ensuite une fois par seconde à l'aide de `setInterval()`, créant l'effet d'une horloge numérique qui se met à jour une fois par seconde ([voir cela en direct](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html), et aussi [voir la source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html)) :
+
+```js
+function displayTime() {
+  let date = new Date();
+  let time = date.toLocaleTimeString();
+  document.getElementById('demo').textContent = time;
+}
+
+const createClock = setInterval(displayTime, 1000);
+```
+
+### Pièges
+
+- La fréquence d'exécution et d'affichage n'est pas optimisée pour le système sur lequel l'animation est exécutée, et peut être quelque peu inefficace. À moins que vous n'ayez besoin de choisir un framerate spécifique (plus lent), il est généralement préférable d'utiliser `requestAnimationFrame()`.
+
+### Compatibilité des navigateurs
+
+{{Compat("api.WindowOrWorkerGlobalScope.setInterval")}}
+
+### Plus d'informations
+
+- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals), en particulier [setInterval()](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setInterval)
+- Page de référence pour [setInterval()](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setInterval)
+
+## requestAnimationFrame()
+
+[`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame) est une méthode qui vous permet d'exécuter une fonction de manière répétée, et efficace, à la meilleure fréquence de rafraîchissement disponible compte tenu du navigateur/système actuel. Vous devriez, dans la mesure du possible, utiliser cette méthode au lieu de `setInterval()`/`setTimeout()` récursif, sauf si vous avez besoin d'une fréquence de rafraîchissement spécifique.
+
+| Opération unique retardée | Opération répétée | Opérations séquentielles multiples  | Opérations simultanées multiples |
+| ------------------------- | ----------------- | ----------------------------------- | -------------------------------- |
+| Non                       | Oui               | Non (à moins que ce soit les mêmes) | Non                              |
+
+### Exemple de code
+
+Une toupie animée simple ; vous pouvez trouver cet [exemple en direct sur GitHub](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html)) :
+
+```js
+const spinner = document.querySelector('div');
+let rotateCount = 0;
+let startTime = null;
+let rAF;
+
+function draw(timestamp) {
+  if(!startTime) {
+    startTime = timestamp;
+  }
+
+  rotateCount = (timestamp - startTime) / 3;
+
+  if(rotateCount > 359) {
+    rotateCount %= 360;
+  }
+
+  spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
+
+  rAF = requestAnimationFrame(draw);
+}
+
+draw();
+```
+
+### Pièges
+
+- Vous ne pouvez pas choisir une fréquence d'images spécifique avec `requestAnimationFrame()`. Si vous devez exécuter votre animation à un _framerate_ plus lent, vous devrez utiliser `setInterval()` ou `setTimeout()` récursif.
+
+### Compatibilité des navigateurs
+
+{{Compat("api.Window.requestAnimationFrame")}}
+
+### Plus d'informations
+
+- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals), en particulier [`requestAnimationFrame()`]()
+- Page de référence pour [`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame)
+
+## Promises (Promesses)
+
+[Les promesses](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) sont une fonctionnalité JavaScript qui permet d'exécuter des opérations asynchrones et d'attendre qu'elles soient définitivement terminées avant d'exécuter une autre opération en fonction de son résultat. Les promesses sont la colonne vertébrale du JavaScript asynchrone moderne.
+
+| Opération unique retardée | Opération répétée | Opérations séquentielles multiples | Opérations simultanées multiples |
+| ------------------------- | ----------------- | ---------------------------------- | -------------------------------- |
+| Non                       | Non               | Oui                                | Voir `Promise.all()`, en dessous |
+
+### Exemple de code
+
+Le code suivant va chercher une image sur le serveur et l'affiche à l'intérieur d'un élément [``](/fr/docs/Web/HTML/Element/Img) ; [voyez-le aussi en direct](https://mdn.github.io/learning-area/javascript/asynchronous/promises/simple-fetch-chained.html), et voyez aussi [le code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/simple-fetch-chained.html) :
+
+```js
+fetch('coffee.jpg')
+.then(response => response.blob())
+.then(myBlob => {
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch(e => {
+  console.log('Il y a eu un problème avec votre opération de récupération : ' + e.message);
+});
+```
+
+### Pièges
+
+Les chaînes de promesses peuvent être complexes et difficiles à analyser. Si vous imbriquez un certain nombre de promesses, vous pouvez vous retrouver avec des problèmes similaires à l'enfer des rappels. Par exemple :
+
+```js
+remotedb.allDocs({
+  include_docs: true,
+  attachments: true
+}).then(function (result) {
+  let docs = result.rows;
+  docs.forEach(function(element) {
+    localdb.put(element.doc).then(function(response) {
+      alert("Un document extrait avec un id " + element.doc._id + " et ajouté à la base de données locale.");
+    }).catch(function (err) {
+      if (err.name == 'conflict') {
+        localdb.get(element.doc._id).then(function (resp) {
+          localdb.remove(resp._id, resp._rev).then(function (resp) {
+// et cetera...
+```
+
+Il est préférable d'utiliser la puissance de chaînage des promesses pour aller avec une structure plus plate et plus facile à analyser :
+
+```js
+remotedb.allDocs(...).then(function (resultOfAllDocs) {
+  return localdb.put(...);
+}).then(function (resultOfPut) {
+  return localdb.get(...);
+}).then(function (resultOfGet) {
+  return localdb.put(...);
+}).catch(function (err) {
+  console.log(err);
+});
+```
+
+ou encore :
+
+```js
+remotedb.allDocs(...)
+.then(resultOfAllDocs => {
+  return localdb.put(...);
+})
+.then(resultOfPut => {
+  return localdb.get(...);
+})
+.then(resultOfGet => {
+  return localdb.put(...);
+})
+.catch(err => console.log(err));
+```
+
+Cela couvre une grande partie des éléments de base. Pour un traitement beaucoup plus complet, voir l'excellent article [Nous avons un problème avec les promesses](https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html) (en), par Nolan Lawson.
+
+### Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Promise")}}
+
+### Plus d'informations
+
+- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises)
+- [Utiliser les promesses](/fr/docs/Web/JavaScript/Guide/Using_promises)
+- Page de référence pour [`Promise`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise)
+
+## Promise.all()
+
+Une fonction JavaScript qui vous permet d'attendre que plusieurs promesses se terminent avant d'exécuter une autre opération basée sur les résultats de toutes les autres promesses.
+
+| Opération unique retardée | Opération répétée | Opérations séquentielles multiples | Opérations simultanées multiples |
+| ------------------------- | ----------------- | ---------------------------------- | -------------------------------- |
+| Non                       | Non               | Non                                | Oui                              |
+
+### Exemple de code
+
+L'exemple suivant va chercher plusieurs ressources sur le serveur, et utilise `Promise.all()` pour attendre qu'elles soient toutes disponibles avant de les afficher toutes — [le voir fonctionner](https://mdn.github.io/learning-area/javascript/asynchronous/promises/promise-all.html), et voir son [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html) :
+
+```js
+function fetchAndDecode(url, type) {
+  // Retourner la promesse de niveau supérieur, de sorte que le résultat
+  // de l'ensemble de la chaîne est retourné hors de la fonction
+  return fetch(url).then(response => {
+    // Selon le type de fichier recherché, utilisez la fonction appropriée pour décoder son contenu
+    if(type === 'blob') {
+      return response.blob();
+    } else if(type === 'text') {
+      return response.text();
+    }
+  })
+  .catch(e => {
+    console.log(`Il y a eu un problème avec votre opération de récupération de la ressource "${url}" : ` + e.message);
+  });
+}
+
+// Appeler la méthode fetchAndDecode() pour récupérer les images et le texte
+// et stocker leurs promesses dans des variables
+let coffee = fetchAndDecode('coffee.jpg', 'blob');
+let tea = fetchAndDecode('tea.jpg', 'blob');
+let description = fetchAndDecode('description.txt', 'text');
+
+// Utiliser Promise.all() pour exécuter le code uniquement lorsque
+// les trois appels de fonction ont été résolus
+Promise.all([coffee, tea, description]).then(values => {
+  console.log(values);
+  // Stocker chaque valeur retournée par les promesses dans des variables séparées ;
+  // créer des URL d'objets à partir des blobs.
+  let objectURL1 = URL.createObjectURL(values[0]);
+  let objectURL2 = URL.createObjectURL(values[1]);
+  let descText = values[2];
+
+  // Afficher les images dans les éléments 
+  let image1 = document.createElement('img');
+  let image2 = document.createElement('img');
+  image1.src = objectURL1;
+  image2.src = objectURL2;
+  document.body.appendChild(image1);
+  document.body.appendChild(image2);
+
+  // Afficher le texte d'un paragraphe
+  let para = document.createElement('p');
+  para.textContent = descText;
+  document.body.appendChild(para);
+});
+```
+
+### Pièges
+
+- Si `Promesse.all()` est rejeté, alors une ou plusieurs des promesses que vous lui fournissez dans son paramètre de tableau doivent être rejetées, ou pourraient ne pas retourner de promesses du tout. Vous devez vérifier chacune d'entre elles pour voir ce qu'elles ont retourné.
+
+### Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Promise.all")}}
+
+### Plus d'informations
+
+- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises#running_code_in_response_to_multiple_promises_fulfilling)
+- Page de référence pour [`Promise.all()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/all)
+
+## async/await
+
+Un outil syntaxique construit sur les promesses qui vous permet d'exécuter des opérations asynchrones en utilisant une syntaxe qui ressemble plus à l'écriture de code de rappel synchrone.
+
+| Opération unique retardée | Opération répétée | Opérations séquentielles multiples | Opérations simultanées multiples          |
+| ------------------------- | ----------------- | ---------------------------------- | ----------------------------------------- |
+| Non                       | Non               | Oui                                | Oui (en combinaison avec `Promise.all()`) |
+
+### Exemple de code
+
+L'exemple suivant est un remaniement de l'exemple simple de promesse que nous avons vu précédemment, qui récupère et affiche une image, écrit à l'aide d'async/await ([voir en direct](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-refactored-fetch.html), et voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-refactored-fetch.html)) :
+
+```js
+async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  let myBlob = await response.blob();
+
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}
+
+myFetch();
+```
+
+### Pièges
+
+- Vous ne pouvez pas utiliser l'opérateur `await` à l'intérieur d'une fonction non-`async`, ou dans le contexte de haut niveau de votre code. Cela peut parfois entraîner la création d'une fonction encapsulante supplémentaire, ce qui peut être légèrement frustrant dans certaines circonstances. Mais cela en vaut la peine la plupart du temps.
+- Le support des navigateurs pour `async`/`await` n'est pas aussi bon que celui des promesses. Si vous souhaitez utiliser `async`/`await` mais que vous êtes préoccupé par la prise en charge de navigateurs plus anciens, vous pouvez envisager d'utiliser la bibliothèque [BabelJS](https://babeljs.io/) — cela vous permet d'écrire vos applications en utilisant le JavaScript le plus récent et de laisser Babel déterminer les modifications éventuellement nécessaires pour les navigateurs de vos utilisateurs.
+
+### Compatibilité des navigateurs
+
+{{Compat("javascript.statements.async_function")}}
+
+### Plus d'informations
+
+- [Faciliter la programmation asynchrone avec `async` et `await`](/fr/docs/Learn/JavaScript/Asynchronous/Async_await)
+- Page de référence pour [les fonctions asynchrones](/fr/docs/Web/JavaScript/Reference/Statements/async_function)
+- Page de référence pour l'opérateur [await](/fr/docs/Web/JavaScript/Reference/Operators/await)
+
+{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}
+
+## Dans ce module
+
+- [Concepts généraux de programmation asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Concepts)
+- [Introduction au JavaScript asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Introducing)
+- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals)
+- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises)
+- [Faciliter la programmation asynchrone avec `async` et `await`](/fr/docs/Learn/JavaScript/Asynchronous/Async_await)
+- [Choisir la bonne approche](/fr/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach)
diff --git a/files/fr/conflicting/learn/javascript/asynchronous/introducing/index.md b/files/fr/conflicting/learn/javascript/asynchronous/introducing/index.md
new file mode 100644
index 0000000000..2fadd1a162
--- /dev/null
+++ b/files/fr/conflicting/learn/javascript/asynchronous/introducing/index.md
@@ -0,0 +1,168 @@
+---
+title: Concepts généraux de programmation asynchrone
+slug: conflicting/Learn/JavaScript/Asynchronous/Introducing
+tags:
+  - JavaScript
+  - Learn
+  - Promises
+  - Threads
+  - asynchronous
+  - blocking
+translation_of: Learn/JavaScript/Asynchronous/Concepts
+original_slug: Learn/JavaScript/Asynchronous/Concepts
+---
+{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}
+
+Dans cet article, nous allons passer en revue un certain nombre de concepts importants relatifs à la programmation asynchrone et à la façon dont elle se présente dans les navigateurs web et JavaScript. Vous devriez comprendre ces concepts avant de travailler sur les autres articles du module.
+
+
+  
+    
+      
+      
+    
+    
+      
+      
+    
+  
+Prérequis : 
+        Connaissances informatiques de base, compréhension raisonnable des
+        principes fondamentaux de JavaScript.
+      
Objectif : 
+        Comprendre les concepts de base de la programmation asynchrone et la
+        façon dont elles se manifestent dans les navigateurs Web et dans
+        JavaScript.
+      
+
+## Asynchrone ?
+
+Normalement, le code d'un programme donné se déroule sans interruption, une seule chose se produisant à la fois. Si une fonction dépend du résultat d'une autre fonction, elle doit attendre que l'autre fonction se termine et retourne sa réponse, et jusqu'à ce que cela se produise, le programme entier est essentiellement bloqué du point de vue de l'utilisateur.
+
+Les utilisatrices et utilisateurs de macOS, par exemple, le voient parfois avec le curseur rotatif de couleur arc-en-ciel (ou « ballon de plage », comme on l'appelle souvent). Ce curseur est la façon dont le système d'exploitation dit "le programme que vous utilisez actuellement a dû s'arrêter et attendre que quelque chose se termine, et cela prend tellement de temps que je craignais que vous vous demandiez ce qui se passe".
+
+![Spinner multicolore pour macOS avec ballon de plage.](beachball.jpg)
+
+C'est une expérience frustrante qui n'est pas une bonne utilisation de la puissance de traitement de l'ordinateur, surtout à une époque où les ordinateurs disposent de plusieurs cœurs de processeur. Il est inutile de rester assis à attendre quelque chose alors que vous pouvez laisser une tâche se dérouler sur un autre cœur de processeur et être averti quand elle a terminé. Cela vous permet d'effectuer d'autres travaux en même temps, ce qui est la base de la **programmation asynchrone**. C'est à l'environnement de programmation que vous utilisez (les navigateurs web, dans le cas du développement web) de vous fournir des API qui vous permettent d'exécuter de telles tâches de manière asynchrone.
+
+## Code bloquant
+
+Les techniques asynchrones sont très utiles, notamment dans la programmation web. Lorsqu'une application web s'exécute dans un navigateur et qu'elle exécute un morceau de code considérable sans rendre le contrôle au navigateur, ce dernier peut sembler figé. C'est ce qu'on appelle du code **bloquant** ; le navigateur est incapable de continuer à traiter les entrées de l'utilisateur et d'effectuer d'autres tâches jusqu'à ce que l'application web rende le contrôle du processeur.
+
+Examinons quelques exemples qui montrent ce que nous entendons par blocage.
+
+Dans notre exemple [simple-sync.html](https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing/simple-sync.html) ([voir le fonctionnement en direct](https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html)), nous ajoutons un écouteur d'événement de clic à un bouton de sorte que, lorsqu'il est cliqué, il exécute une opération qui prend du temps (calcule 10 millions de dates puis enregistre la dernière dans la console) et ajoute ensuite un paragraphe au DOM :
+
+```js
+const btn = document.querySelector('button');
+btn.addEventListener('click', () => {
+  let myDate;
+  for(let i = 0; i < 10000000; i++) {
+    let date = new Date();
+    myDate = date;
+  }
+
+  console.log(myDate);
+
+  let pElem = document.createElement('p');
+  pElem.textContent = `Il s'agit d'un paragraphe nouvellement ajouté.`;
+  document.body.appendChild(pElem);
+});
+```
+
+Lorsque vous exécutez l'exemple, ouvrez votre console JavaScript, puis cliquez sur le bouton. Vous remarquerez que le paragraphe n'apparaît qu'une fois que le calcul des dates est terminé et que le message de la console a été enregistré. Le code s'exécute dans l'ordre où il apparaît dans la source, et la dernière opération ne s'exécute pas tant que la première n'est pas terminée.
+
+> **Note :** L'exemple précédent est très peu réaliste. Vous ne calculeriez jamais 10 millions de dates sur une véritable application web ! Il sert cependant à vous donner l'idée de base.
+
+Dans notre deuxième exemple, [simple-sync-ui-blocking.html](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html) ([voir en direct](https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html)), nous simulons quelque chose de légèrement plus réaliste que vous pourriez rencontrer sur une page réelle. Nous bloquons l'interactivité de l'utilisateur avec le rendu de l'interface utilisateur. Dans cet exemple, nous avons deux boutons :
+
+- Un bouton "Remplir le canevas" qui, lorsqu'il est cliqué, remplit le [`

仕様書	状態	備考
{{SpecName('Compat', '#the-webkit-text-stroke-color', '-webkit-text-stroke-color')}}	{{Spec2('Compat')}}	初回標準化
Safari CSS Reference - 文書内の '-webkit-text-stroke-color'	標準外で非公式の文書化	初回文書化

仕様書	状態	備考
{{SpecName('Compat', '#the-webkit-text-stroke-color', '-webkit-text-stroke-color')}}	{{Spec2('Compat')}}	初回標準化
Safari CSS Reference + 文書内の '-webkit-text-stroke-color'	標準外で非公式の文書化	初回文書化

Specification	Status	Comment
{{SpecName('Compat', '#the-webkit-text-stroke-width', '-webkit-text-stroke-width')}}	{{Spec2('Compat')}}	初回標準化
Safari CSS Reference - 文書内の '-webkit-text-stroke-width'	標準外で非公式の文書化	初回文書化

Specification	Status	Comment
{{SpecName('Compat', '#the-webkit-text-stroke-width', '-webkit-text-stroke-width')}}	{{Spec2('Compat')}}	初回標準化
Safari CSS Reference + 文書内の '-webkit-text-stroke-width'	標準外で非公式の文書化	初回文書化

仕様書	状態	備考
{{SpecName('Compat', '#the-webkit-text-stroke-color', '-webkit-text-stroke-color')}}	{{Spec2('Compat')}}	初回標準化
Safari CSS Reference - 文書内の '-webkit-text-stroke-color'	標準外で非公式の文書化	初回文書化

Pre-requisitos:	Literatura básica de computadora, un razonable entendimiento de los fundamentos de JavaScript.
Objetivo:	Entender los conceptos básicos detrás de la programación asincrónica, y cómo se manifiesta en los exploradores web y JavaScript.

Prérequis :	+ Connaissances informatiques de base, une compréhension raisonnable des + principes fondamentaux de JavaScript. +
Objectif :	+ Être capable de faire un choix judicieux quant à l'utilisation de + différentes techniques de programmation asynchrone. +

Prérequis :	+ Connaissances informatiques de base, compréhension raisonnable des + principes fondamentaux de JavaScript. +
Objectif :	+ Comprendre les concepts de base de la programmation asynchrone et la + façon dont elles se manifestent dans les navigateurs Web et dans + JavaScript. +

仕様書	状態	備考
{{SpecName('DOM WHATWG', '#dom-element-attributes', 'Element.attributes')}}	{{Spec2('DOM WHATWG')}}	{{SpecName('DOM3 Core')}} 以降、 {{domxref("Node")}} から {{domxref("Element")}} へ移動
{{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}}	{{Spec2('DOM3 Core')}}	{{SpecName('DOM2 Core')}} から変更無し
{{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}}	{{Spec2('DOM2 Core')}}	{{SpecName('DOM1')}}から変更無し
{{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}}	{{Spec2('DOM1')}}	初回定義