HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMのcontains()メソッドとは？構文と使い方をサンプルコード付きで解説

HTML DOMのcontains()メソッドは、あるノードが指定したノードの子孫であるかどうかを調べるために使用されるメソッドです。ここでいう「子孫」には、直接の子要素だけでなく、孫要素やひ孫要素など、どの階層の深さのノードも含まれます。判定結果は真偽値（boolean）として返され、子孫であれば true、そうでない場合は false となります。

構文

HTML DOM contains()メソッドの基本構文は以下のとおりです。

node.contains(givenNode)

givenNode は必須パラメータで、node に含まれているかどうかを調べたい対象のノードを指定します。

使用例

それでは、HTML DOM contains()メソッドの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
    #DIV1{
        border: 2px solid blue;
        width:160px;
    }
</style>
</head>
<body>
<div id="DIV1">
<p>私は <attr id="At" title="アメリカ合衆国">アメリカ</attr> に住んでいます。</p>
</div>
<p>下のボタンをクリックすると、attr要素がdiv要素の子孫かどうかを判定できます。</p>
<button type="button" onclick="divDesc()">CONTAINS</button>
<p id="Sample"></p>
<script>
    function divDesc() {
        var attr = document.getElementById("At");
        var div = document.getElementById("DIV1").contains(attr);
        if(div == true)
            document.getElementById("Sample").innerHTML = "attr要素はdiv要素の子孫です。";
        else
            document.getElementById("Sample").innerHTML = "attr要素はdiv要素の子孫ではありません。";
    }
</script>
</body>
</html>

出力結果

このコードを実行すると、最初は次のように表示されます。

HTML DOMのcontains()メソッドとは？構文と使い方をサンプルコード付きで解説

「CONTAINS」ボタンをクリックすると、判定結果のメッセージが表示されます。

HTML DOMのcontains()メソッドとは？構文と使い方をサンプルコード付きで解説

コードの解説

この例では、まず id「DIV1」を持つ <div> 要素を作成しています。その中には <p> 要素があり、さらにその内側に <attr> 要素が配置されています。また、CSSスタイルを使って「DIV1」に青色の枠線と幅160pxを指定しています。

#DIV1{
    border: 2px solid blue;
    width:160px;
}
<div id="DIV1">
<p>私は <attr id="At" title="アメリカ合衆国">アメリカ</attr> に住んでいます。</p>
</div>

続いて、クリックされると divDesc() メソッドを実行する「CONTAINS」ボタンを用意しています。

<button type="button" onclick="divDesc()">CONTAINS</button>

divDesc() メソッドでは、document オブジェクトの getElementById() メソッドを使って <attr> 要素を取得し、変数 attr に格納します。その後、<div> 要素の contains() メソッドを呼び出し、引数として <attr> 要素を渡して子孫関係を判定します。

<div> 要素の中に <attr> 要素が含まれている、つまり <attr> 要素は <div> 要素の子孫にあたるため、contains() メソッドは true を返します。この結果を if 文による条件分岐で受け取り、id「Sample」の段落に innerHTML プロパティを使って対応するメッセージを表示しています。

function divDesc() {
    var attr = document.getElementById("At");
    var div = document.getElementById("DIV1").contains(attr);
    if(div == true)
        document.getElementById("Sample").innerHTML = "attr要素はdiv要素の子孫です。";
    else
        document.getElementById("Sample").innerHTML = "attr要素はdiv要素の子孫ではありません。";
}

押さえておきたいポイント

  • contains() は、引数に渡したノードが呼び出し元ノード自身である場合にも true を返します。
  • 要素ノードだけでなく、テキストノードやコメントノードなども判定の対象にできます。
  • 主要なすべてのブラウザでサポートされており、互換性の高いメソッドです。
  1. HTML DOMのflexGrowプロパティとは？構文と使い方をサンプルコード付きで解説

    flexGrowプロパティとは？HTML DOMのflexGrowプロパティは、フレックスコンテナの中で各要素（フレックスアイテム）が余ったスペースをどの割合で受け取って伸びるかを設定するためのプロパティです。値には単位を付けない数値を指定します。構文flexGrowプロパティをJavaScriptから設定する場合は、次のような構文を使用します。object.style.flexGrow = number|initial|inheritそれぞれの値の意味は以下のとおりです。number … 他の要素と比べて、その要素がどれだけ伸びるかを示す数値。デフォルト値は0です。initial … プロパ

  2. HTML DOM の Object オブジェクトとは？主なプロパティと実装例をわかりやすく解説

    HTML DOM の Object オブジェクトは、HTML 内の <object> 要素を JavaScript から操作するためのインターフェースです。<object> 要素は、画像や PDF、動画などの外部リソースを Web ページに埋め込む際に使用されます。 Object 要素の作成方法 JavaScript で新しい <object> 要素を作成するには、document.createElement() メソッドを使用します。 var objectElement = document.createElement(OBJECT); Object