HTML

 Computer >> コンピューター >  >> プログラミング >> HTML
  1. HTML DOM ownerDocumentプロパティの使い方を徹底解説

    ownerDocumentプロパティとはHTML DOMのownerDocumentプロパティは、指定したノードが属している（オーナーとなる）Documentオブジェクトを返します。DOMツリー上のすべてのノードは必ずいずれかのドキュメントに所属しており、このプロパティを使えば、そのノードのルートにあたるdocumentノードへ簡単にアクセスできます。構文ownerDocumentプロパティの基本的な構文は以下のとおりです。node.ownerDocument戻り値ノードのオーナーであるDocumentオブジェクトを返します。通常のHTML文書内では、ノード名が#documentであるdocu

  2. HTML DOM replaceChild()メソッドとは？使い方とサンプルコードを解説

    DOM の replaceChild() メソッドは、HTML ドキュメント内で既存の子ノードを新しいノードに置き換えるために使用されます。リストの項目やテキストなど、ページ上の要素を JavaScript から動的に変更したい場合に活躍するメソッドです。 構文 replaceChild() メソッドの基本構文は以下のとおりです。 node.replaceChild(newNode, oldNode); 第1引数には新しく挿入するノード（newNode）、第2引数には置き換えの対象となる既存の子ノード（oldNode）を指定します。戻り値としては、置き換えられた古いノードが返されます。 サンプ

  3. HTML DOMのscrollHeightプロパティとは？使い方をサンプルコード付きで解説

    scrollHeightプロパティとはHTML DOMのscrollHeightプロパティは、HTMLドキュメント内の要素の全体の高さ（コンテンツ＋パディング）をピクセル（px）単位で返すプロパティです。スクロールによって見えなくなっている部分も含めた要素の全高さを取得できるため、JavaScriptで動的にコンテンツの高さを判定したい場合や、「一番下までスクロールしたか」を検知したい場合などに活用されます。なお、scrollHeightにはパディングは含まれますが、ボーダー（border）とマージン（margin）は含まれない点に注意が必要です。構文scrollHeightプロパティの構文は

  4. HTML DOMのscrollWidthプロパティとは？構文と使い方を解説

    scrollWidthプロパティとはDOMのscrollWidthプロパティは、HTMLドキュメント内の要素の全体の幅（コンテンツ＋パディング）をピクセル単位で返します。要素の内容が横にはみ出している（スクロール可能な）場合でも、見えていない部分を含む実際のコンテンツ幅を取得できるのが特徴です。構文scrollWidthプロパティの基本構文は以下のとおりです。element.scrollWidth使用例ここでは、段落要素（<p>）のscrollHeightとscrollWidthを取得し、ボタンをクリックするとその値を画面に表示するサンプルを紹介します。<!DOCTYPE h

  5. HTML DOMのscrollLeftプロパティとは？水平スクロール位置の取得・設定方法を解説

    HTMLドキュメントにおけるDOMのscrollLeftプロパティは、要素内のコンテンツが水平方向にどれだけスクロールされているかを、ピクセル単位で取得・設定できるプロパティです。JavaScriptから動的に横スクロールの位置を制御したい場合に活用できます。 構文 scrollLeftプロパティの基本的な構文は以下のとおりです。 現在のスクロール位置を取得する element.scrollLeft スクロール位置を設定する element.scrollLeft = value valueには、移動先の位置をピクセル単位の数値で指定します。 サンプルコード それでは、scrollLeftプロパ

  6. HTML DOMのscrollTopプロパティとは？使い方をサンプルコード付きで解説

    scrollTopプロパティとはHTML DOMのscrollTopプロパティは、HTML文書内で要素のコンテンツが垂直方向にスクロールされた距離をピクセル単位で取得・設定できるプロパティです。このプロパティを活用することで、現在のスクロール位置の検出や、JavaScriptから任意の位置へのスクロール制御が可能になります。構文scrollTopプロパティの基本構文は以下の通りです。値を取得する場合element.scrollTop値を設定する場合element.scrollTop = valueここで指定するvalueはピクセル単位の数値です。使用例実際にscrollTopプロパティを使用し

  7. HTML DOM PopStateEventオブジェクトとは？使い方とサンプルコードを解説

    HTML DOMのPopStateEventオブジェクトは、ブラウザの履歴（history）に変化が生じた際に発生する「popstate」イベントを扱うためのイベントハンドラです。ユーザーが「戻る」ボタンや「進む」ボタンを操作したときなどに、このイベントがトリガーされます。 PopStateEventのプロパティ プロパティ説明 state履歴エントリのコピーを表すオブジェクトを返します。 サンプルコード それでは、HTML DOMのPopStateEventオブジェクトの具体的な使用例を見ていきましょう。 <!DOCTYPE html> <html> &l

  8. HTML DOMのpreviousSiblingプロパティとは？使い方をサンプルコード付きで解説

    HTML DOMのpreviousSiblingプロパティは、HTMLドキュメント内において、指定したノードと同じツリー階層（同じ親ノードを持つ兄弟ノード）の中から、直前のノードを取得するためのプロパティです。JavaScriptでDOMを操作する際、隣接する要素同士の関係を調べたり、前の要素の内容を参照したりしたいときに活用できます。 構文 previousSiblingプロパティの基本的な構文は以下のとおりです。 node.previousSibling サンプルコード それでは、previousSiblingプロパティを使用した具体的な例を見てみましょう。この例では、ボタンをクリックす

  9. HTML DOMのpreviousElementSiblingプロパティの使い方をわかりやすく解説

    HTML DOMのpreviousElementSiblingプロパティは、HTML文書内において、指定された要素と同じ階層（ツリー構造上の同じレベル）に存在する、直前の要素を取得するためのプロパティです。テキストノードや空白などを含まない「要素ノード」のみを対象とするため、隣接する要素を簡単に参照できるのが特徴です。 構文previousElementSiblingプロパティの基本的な構文は以下の通りです。node.previousElementSiblingサンプルコードそれでは、previousElementSiblingプロパティの具体的な使用例を見てみましょう。以下の例では、「Che

  10. HTML DOMのremoveChild()メソッドとは？使い方とサンプルコードを解説

    DOMのremoveChild()メソッドは、HTML文書内の指定された親ノードから、指定した子ノードを削除し、その削除されたノードを戻り値として返します。要素を動的に操作したい場合に非常に便利なメソッドです。 構文 removeChild()メソッドの基本構文は以下の通りです。 node.removeChild(node); パラメータ node：削除対象となる子ノードを指定します。 戻り値 削除された子ノードが返されます。この戻り値を変数に保持しておけば、後で同じノードを再挿入することも可能です。 サンプルコード ここでは、ボタンをクリックするたびにリストから科目を1つずつ削除する例を

  11. HTML DOM Preオブジェクトとは？作成方法と使い方をサンプルコード付きで解説

    HTML DOM Preオブジェクトは、HTMLドキュメント内の <pre> 要素を表すオブジェクトです。<pre> 要素は、整形済みテキスト（空白や改行をそのまま表示するテキスト）を扱うために使用されます。 Preオブジェクトの作成方法 構文 Preオブジェクトを作成するには、以下の構文を使用します。 document.createElement(PRE); サンプルコード それでは、Preオブジェクトの具体的な使用例を見てみましょう。以下の例では、ボタンをクリックすると新しい <pre> 要素が動的に生成され、ページに追加されます。 <!DOCTY

  12. HTML DOM の scripts コレクションとは？構文・プロパティ・使い方を実例付きで解説

    HTML DOM の scripts コレクションは、HTML ドキュメント内に存在するすべての <script> 要素をまとめて取得できるオブジェクトです。ページ上のスクリプト要素を一覧として扱いたい場合や、動的にスクリプト情報を参照したい場合に便利です。 基本構文 scripts コレクションへのアクセスは、以下の構文で行います。 document.scripts scripts コレクションのプロパティ プロパティ説明 lengthHTML ドキュメント内のコレクションに含まれる <script> 要素の数を返します。 scripts コレクションのメ

  13. HTML DOM removeAttribute()メソッドの使い方を徹底解説

    HTML DOMのremoveAttribute()メソッドは、HTMLドキュメント内の指定した要素から、パラメータで指定した属性を削除するためのメソッドです。スタイルやクラスなど、要素に設定された属性を動的に取り除きたい場合に活用できます。 構文 removeAttribute()メソッドの基本構文は以下のとおりです。 node.removeAttribute(attributeName); attributeNameには、削除したい属性名（例：「style」「class」「id」など）を文字列で指定します。 サンプルコード ここでは、<p>要素に設定されているstyle属性を、

  14. HTML DOMのremoveAttributeNode()メソッドとは？構文と使い方を解説

    HTML DOMのremoveAttributeNode()メソッドは、HTML文書内の指定した要素から、引数で指定された属性ノードを削除し、その削除した属性をAttrノードオブジェクトとして返します。構文基本となる構文は以下の通りです。node.removeAttributeNode(attributeNode);引数のattributeNodeには、削除したい属性ノード（Attrオブジェクト）を指定します。通常は、あらかじめgetAttributeNode()メソッドを使って対象の属性ノードを取得しておきます。使用例それでは、removeAttributeNode()メソッドの具体的な使用

  15. HTML DOM setAttributeNode()メソッドとは？構文と使い方を実例付きで解説

    DOMのsetAttributeNode()メソッドは、HTMLドキュメント内の指定した要素に対して、パラメータで渡された属性ノード（Attrノード）を設定し、その属性をAttrノードオブジェクトとして返すメソッドです。通常、createAttribute()メソッドで作成した属性ノードと組み合わせて使用されます。構文setAttributeNode()メソッドの基本構文は以下のとおりです。node.setAttributeNode(attributeNode);パラメータには、document.createAttribute()で生成した属性ノードを指定します。戻り値として、設定された属性の

  16. HTML DOM setNamedItem()メソッドの使い方を解説

    setNamedItem()メソッドとはHTMLドキュメントにおいて、setNamedItem()メソッドは、パラメータで指定したノードを、その名前をもとに属性ノードとして要素に設定するためのメソッドです。主にNamedNodeMapオブジェクト（要素のattributesコレクションなど）に対して使用されます。なお、同じ名前の属性がすでに存在する場合は、既存の属性が新しいノードで置き換えられる点に注意してください。構文setNamedItem()メソッドの基本的な構文は以下のとおりです。node.setNamedItem(node);パラメータには、設定したい属性ノードを指定します。また、戻

  17. HTML DOM スクリプトオブジェクトとは？作成方法と主なプロパティを解説

    HTML DOM のスクリプトオブジェクト（Script Object）は、HTML ドキュメント内の <script> 要素を表すオブジェクトです。JavaScript を使って動的に script 要素を生成・操作することで、ページの読み込み後に外部スクリプトを読み込んだり、コードを実行したりできます。 スクリプトオブジェクトの作成方法 構文 スクリプトオブジェクトを作成するには、document オブジェクトの createElement() メソッドを使用します。構文は以下の通りです。 document.createElement(SCRIPT); このメソッドは新しい &

  18. HTML DOM パラメータオブジェクトとは？作成方法とプロパティを解説

    HTML DOM のパラメータオブジェクト（Parameter Object）は、HTMLドキュメント内の <param> 要素を表すオブジェクトです。<param> 要素は、<object> 要素や <embed> 要素などの埋め込みコンテンツに対して、実行時のパラメータを渡すために使用されます。paramオブジェクトの作成方法構文paramオブジェクトを作成するには、以下のように document.createElement() メソッドを使用します。document.createElement(PARAM);paramオブジェクトの主なプロ

  19. HTML DOM Option defaultSelectedプロパティとは？使い方をサンプルコード付きで解説

    HTML DOMのdefaultSelectedプロパティは、HTMLドキュメント内のoption要素に設定されたデフォルトの選択状態を取得するためのプロパティです。このプロパティは、ページが読み込まれた時点で該当するoption要素にselected属性が指定されていたかどうかを、真偽値（true / false）として返します。なお、defaultSelectedプロパティはユーザーがその後プルダウンリストで選択を変更しても値が変化しないため、「初期状態でどの項目が選択されていたか」を判定したい場合に特に便利です。構文defaultSelectedプロパティの基本的な構文は以下のとおりです

  20. HTML DOM の Option label プロパティとは？取得と変更の方法を解説

    DOM の Option label プロパティは、HTML ドキュメント内の <option> 要素に設定された label 属性の値を取得（参照）したり、後から変更したりするためのプロパティです。label 属性を活用すれば、ドロップダウンリストの各選択肢に短い表示用ラベルを持たせることができます。 構文 Option label プロパティの基本構文は以下の通りです。 1. label の値を取得する object.label 2. label の値を変更する object.label = "text" サンプルコード それでは、Option label

Total 2020 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:54/101  20-コンピューター/Page Goto:1 48 49 50 51 52 53 54 55 56 57 58 59 60