web-dev-qa-db-ja.com

IDなしでHTML要素にアクセスする方法は？

たとえば、以下のスニペットでは、親要素（header-inner div）のIDを知っているh1要素にどのようにアクセスしますか？

<div id='header-inner'> 
   <div class='titlewrapper'> 
      <h1 class='title'> 
      Some text I want to change
      </h1> 
   </div> 
</div>

ありがとう！

javascriptdomxhtml
16
JohnIdol
function findFirstDescendant(parent, tagname)
{
   parent = document.getElementById(parent);
   var descendants = parent.getElementsByTagName(tagname);
   if ( descendants.length )
      return descendants[0];
   return null;
}

var header = findFirstDescendant("header-inner", "h1");

指定されたIDを持つ要素を検索し、指定されたタグ名を持つ子孫をクエリして、最初の子を返します。 descendantsでループして、他の基準でフィルタリングすることもできます。その方向に向かっている場合は、jQueryなどのビルド済みライブラリをチェックすることをお勧めします（これを書くのにかなりの時間を節約できますが、少し注意が必要です）。

19
Shog9

一部のポスターで述べられているように jQuery を使用すると、要素に非常に簡単にアクセスできます（技術的には、H1の子孫が複数ある場合、一致する要素のコレクションを返します） ：

var element = $('#header-inner h1');

JQueryのようなライブラリーを使用すると、他の投稿で言及されている通常の方法と比較して、このようなことは簡単になります。次に、jQueryオブジェクトでそれへの参照を取得すると、コンテンツと外観を簡単に操作するために利用できる関数がさらに増えます。

7
patmortech

DivにH1要素が1つしかないことが確実な場合：

var parent = document.getElementById('header-inner');
var element = parent.GetElementsByTagName('h1')[0];

Shog9が示したように、子孫を通過するのも良い方法です。

5
buti-oxa

現在のマークアップでそれを行う最も簡単な方法は次のとおりです。

document.getElementById('header-inner').getElementsByTagName('h1')[0].innerHTML = 'new text';

これは、H1タグが常に'header-inner'要素内の最初のタグであることを前提としています。

1
domgblackwell

子ノードを取得するには、コレクションオブジェクトを返すobj.childNodesを使用します。

最初の子を取得するには、ノードを返すlist[0]を使用します。

したがって、完全なコードは次のようになります。

var div = document.getElementById('header-inner');
var divTitleWrapper = div.childNodes[0];
var h1 = divTitleWrapper.childNodes[0];

すべての子を反復処理して、それらがクラス「title」のものであるかどうかを比較する場合は、forループとclassName属性を使用して反復できます。

コードは次のようになります。

var h1 = null;
var nodeList = divTitleWrapper.childNodes;
for (i =0;i < nodeList.length;i++){
    var node = nodeList[i];
    if(node.className == 'title' && node.tagName == 'H1'){
        h1 = node;
    }
}
1
RogueOne

ここでは、CSS class = "myheader"を持つH1要素のdivでH1要素の値を取得しています。

var nodes = document.getElementById("mydiv")
                    .getElementsByTagName("H1");

for(i=0;i<nodes.length;i++)
{
    if(nodes.item(i).getAttribute("class") == "myheader")
        alert(nodes.item(i).innerHTML);
}

ここにマークアップがあります：

<div id="mydiv">
   <h1 class="myheader">Hello</h1>
</div>

また、DOMの重い解析が必要な場合は、 jQuery を使用することをお勧めします。

0
mohammedn