ホーム HTML CSS XML JAVASCRIPT   PHP SQL MORE...   リファレンス 事例集    

HTML DOM プロパティとメソッド

« 前章へ 次章へ »

プロパティとメソッドは、HTML DOMのプログラミング・インタフェースを定義します。

プログラミング・インタフェース

DOMにおいては、HTML文書は1組のノードオブジェクトで構成されます。ノードにはJavaScriptまたは他のプログラミング言語 からアクセスできます。このチュートリアルではJavaScriptを使用します。

DOMのプログラミング・インタフェースは、標準プロパティとメソッドにより定義されます。

プロパティ は、多くの場合、それ（ノード名）が何かを参照します。

メソッドは、多くの場合、何を行うのか(ノードの削除)を参照します 。

HTML DOMプロパティ

いくつかのDOMプロパティ:

  • x.innerHTML - x のテキスト値
  • x.nodeName - x の名前
  • x.nodeValue - x の値
  • x.parentNode - x の親ノード
  • x.childNodes - x の子ノード
  • x.attributes - x の属性

注:上のリストの中で、x はノードオブジェクト(HTML element)です。

HTML DOMメソッド

いくつかのDOMメソッド:

  • x.getElementById(id) - 指定したidを持つ要素の取得
  • x.getElementsByTagName(name) - 指定したタグ名を持つ全要素の取得
  • x.appendChild(node) - x への子ノードの挿入
  • x.removeChild(node) - x から子ノードの削除

注:上のリストの中で、x はノードオブジェクト(HTML element)です。

innerHTMLプロパティ

要素内容の取得や修正が、最も簡単な方法は、innerHTMLプロパティを使用することです。

innerHTMLは、W3C DOM 仕様にはありませんが、主要なすべてのブラウザがサポートしています。

innerHTMLプロパティは、HTML要素（<html>と<body>を含む）の内容を返したり、 置換するのに便利で、また動的に変更したページのソースを見るのにも使用できます。

例

次のコードは、id="intro"を持つ<p>要素からinnerHTML (テキスト)を取得します:

例

<html>
<body>

<p id="intro">Hello World!</p>

<script type="text/javascript">
txt=document.getElementById("intro").innerHTML;
document.write("<p>The text from the intro paragraph: " + txt + "</p>");
</script>

</body>
</html>

Try it yourself »

上記例で、getElementByIdはメソッドで、innerHTMLはプロパティです。

childNodesとnodeValue

要素の内容を取得するために、childNodesとNodeValueプロパティも使用できます。

次のコードは、id="intro"を持つ<p>要素の値を取得します:

Example

<html>
<body>

<p id="intro">Hello World!</p>

<script type="text/javascript">
txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write("<p>The text from the intro paragraph: " + txt + "</p>");
</script>

</body>
</html>

Try it yourself »

上記で、getElementsById はメソッドで、childNodes と nodeValue はプロパティです。

このチュートリアルでは、ほとんどinnerHTMLプロパティを使用します。 しかし、上のメソッドを学ぶことにより、DOM ツリーの構造やXMLファイルの取扱いを理解するのに役立ちます。


« 前章へ 次章へ »