24

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

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

ありがとう！

4

6 に答える 6

22 
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などのビルド済みライブラリをチェックすることをお勧めします（このようなものを書くのにかなりの時間を節約できますが、多少注意が必要です）。

于 2008-10-25T16:31:00.823 に答える
9

一部のポスターで言及されているようにjQueryを使用する場合、次のように非常に簡単に要素にアクセスできます (技術的には、H1 の子孫が複数ある場合は、一致する要素のコレクションが返されます)。

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

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

于 2008-10-25T16:56:16.530 に答える
6

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

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

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

于 2008-10-25T16:35:49.910 に答える
1

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

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

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

于 2008-10-25T16:42:16.713 に答える
1

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

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

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

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

すべての子を反復処理して、それらがクラス「タイトル」であるかどうかを比較する場合は、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;
    }
}
于 2008-10-25T16:45:50.937 に答える
0

ここでは、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を使用することもお勧めします。

于 2008-10-25T16:38:53.337 に答える