Как получить доступ к элементу HTML без ID?

например, в приведенном ниже фрагменте-как получить доступ к элементу h1, зная идентификатор родительского элемента (header-inner div)?

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

спасибо!

14
dom javascript xhtml

6 ответов

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");

находит элемент с заданным идентификатором, запрашивает потомков с заданным именем тега, возвращает первый. Вы также можете зациклиться на descendants для фильтрации по другим критериям; если вы начинаете двигаться в этом направлении, я рекомендую вам проверить предварительно построенную библиотеку, такую как jQuery (сэкономит вам много времени на написание этого материала, это становится несколько сложным).

16

Если вы используете jQuery как упоминалось в некоторых плакатах, вы можете получить доступ к элементу очень легко (хотя технически это вернуло бы коллекцию соответствующих элементов, если бы было более одного потомка H1):

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

использование библиотеки, такой как JQuery, делает такие вещи тривиальными по сравнению с обычными способами, упомянутыми в других сообщениях. Затем, как только у вас есть ссылка на него в объекте jQuery, у вас есть еще больше функций, доступных для легко манипулировать его содержанием и внешним видом.

7

Если вы уверены, что в вашем div есть только один элемент H1:

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

прохождение через потомков, как показал Shog9, тоже хороший способ.

4

самый простой способ сделать это с вашей текущей разметки:

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

это предполагает, что ваш тег H1 всегда является первым в 'header-inner' элемент.

1

чтобы получить дочерние узлы, используйте obj.childNodes, который возвращает объект коллекции.

чтобы получить первого ребенка, используйте list[0], который возвращает узел.

таким образом, полный код должен быть:

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

если вы хотите выполнить итерацию по всем дочерним элементам, сравнивая, имеют ли они класс "title", вы можете выполнить итерацию с помощью цикла for и .

код должен быть:

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

здесь я получаю значение элементов H1 в div, где элемент H1, который имеет класс CSS= "myheader":

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>

Я бы также рекомендовал использовать jQuery если вам нужен тяжелый разбор для вашего DOM.

0