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

Question

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

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

Спасибо! * * 1004

Answer 1

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 (это сэкономит вам много времени на написание этого материала, это будет несколько сложно).

Answer 2

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

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

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

Answer 3

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

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

Путь через потомков, как показал Сёг9, тоже хороший путь.

Answer 4

Чтобы получить дочерние узлы, используйте 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;
    }
}

Answer 5

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

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

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

Answer 6

Здесь я получаю значение элементов H1 в div, где элемент H1, имеющий CSS class = "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.