From b8899e350326af3e53dfad89747761c1c13a3915 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 14 Sep 2021 11:06:51 +0900 Subject: Learn 以下の文書内のリンクURLを正規化 (#2356) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - /en-US へのリンクを /ja へのリンクに修正 - /ja が付いていないものに /ja を付加 - MDN内のリンクが完全URLの場合、 /ja/docs からのURLに修正 --- .../manipulating_documents/index.html | 28 +++++++++++----------- 1 file changed, 14 insertions(+), 14 deletions(-) (limited to 'files/ja/learn/javascript/client-side_web_apis/manipulating_documents') diff --git a/files/ja/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/ja/learn/javascript/client-side_web_apis/manipulating_documents/index.html index b0c69f9d62..cc24830ba5 100644 --- a/files/ja/learn/javascript/client-side_web_apis/manipulating_documents/index.html +++ b/files/ja/learn/javascript/client-side_web_apis/manipulating_documents/index.html @@ -44,7 +44,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents

@@ -112,7 +112,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents
-

JavaScript あるあるですが、要素を選んで変数に保存する方法にはいろんなやり方があることを頭に入れておいて下さい。{{domxref("Document.querySelector()")}} を使うのが推奨される今風のやり方ですが、これは CSS セレクタと同じ方法で要素を選別できるからです。上記の querySelector() 呼び出しでは文書に現われる最初の {{htmlelement("a")}} がマッチします。もし複数の要素を選択し処理したいのであれば {{domxref("Document.querySelectorAll()")}} を使うことができて、これはセレクタとマッチする全ての要素にマッチし、それらへの参照を {{domxref("NodeList")}} と呼ばれる配列のようなオブジェクトに保存します。

+

JavaScript あるあるですが、要素を選んで変数に保存する方法にはいろんなやり方があることを頭に入れておいて下さい。{{domxref("Document.querySelector()")}} を使うのが推奨される今風のやり方ですが、これは CSS セレクタと同じ方法で要素を選別できるからです。上記の querySelector() 呼び出しでは文書に現われる最初の {{htmlelement("a")}} がマッチします。もし複数の要素を選択し処理したいのであれば {{domxref("Document.querySelectorAll()")}} を使うことができて、これはセレクタとマッチする全ての要素にマッチし、それらへの参照を {{domxref("NodeList")}} と呼ばれる配列のようなオブジェクトに保存します。

要素への参照を得るための、次のような古いやり方もあります:

@@ -190,7 +190,7 @@ para.style.padding = '10px'; para.style.width = '250px'; para.style.textAlign = 'center'; -
  • ページをリロードすると指定のパラグラフにスタイルが適用されているはずです。ブラウザーの Page Inspector や DOM inspector からパラグラフを見ると、言うまでもなく上の行がドキュメントのインラインスタイルに追加されているはずです: +
  • ページをリロードすると指定のパラグラフにスタイルが適用されているはずです。ブラウザーの Page Inspector や DOM inspector からパラグラフを見ると、言うまでもなく上の行がドキュメントのインラインスタイルに追加されているはずです: 
    <p style="color: white; background-color: black; padding: 10px; width: 250px; text-align: center;">We hope you enjoyed the ride.</p>
    • @@ -282,15 +282,15 @@ div.style.height = winHeight + 'px';
    1. まず私たちが用意した shopping-list.html 初期ファイルをダウンロードしてローカルコピーをどこかに作成します。最小限の CSS、ラベルのついたリスト、inputとボタン、空のリストと {{htmlelement("script")}} 要素が書いてあるはずです。この先書き足していくものは全部 script の中に書きます。
    2. ({{htmlelement("ul")}}) と {{htmlelement("input")}} と {{htmlelement("button")}} 要素への参照を保持する3つの変数を作成します。
      3. -
    3. ボタンがクリックされた時の応答として走らせる 関数 を作成します。
      4. -
    4. 関数本体は、input 要素の現在の 値を変数に保存するところから始めます。
      5. +
    5. ボタンがクリックされた時の応答として走らせる 関数 を作成します。
      6. +
    6. 関数本体は、input 要素の現在の 値を変数に保存するところから始めます。
    7. 次に、input 要素の値に空文字列('')を代入して、input 要素を空にします。
    8. 3つの要素を作成します — リスト項目({{htmlelement('li')}}) と {{htmlelement('span')}} と {{htmlelement('button')}} で、これらを変数に保存します。
    9. span と button をリスト項目 li の子に追加します。
    10. spanのテキストコンテントに、先程保存した input 要素の値を代入し、ボタンのテキストコンテントを「削除」にします。
    11. できたリスト項目をリストの子に追加します。
    12. 削除ボタンにイベントハンドラーを追加して、クリックされたらボタンが含まれているリスト項目全体を削除するようにします。
      13. -
    13. 最後に、focus()メソッドを使って input 要素にフォーカスし、次の買い物リスト商品をすぐに入力できるようにします。
      14. +
    14. 最後に、focus()メソッドを使って input 要素にフォーカスし、次の買い物リスト商品をすぐに入力できるようにします。
    @@ -312,7 +312,7 @@ div.style.height = winHeight + 'px';
  • {{domxref("HTMLElement")}}, {{domxref("HTMLInputElement")}}, {{domxref("HTMLImageElement")}}, etc.
    • -

    (私共の Web API index から、MDNにあるウェブAPIに関する全ドキュメント一覧も見て下さい!)

    +

    (私共の Web API index から、MDNにあるウェブAPIに関する全ドキュメント一覧も見て下さい!)

    {{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}}
    @@ -320,13 +320,13 @@ div.style.height = winHeight + 'px';

    このモジュール内の文書

    -- cgit v1.2.3-54-g00ecf