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

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

Ответ 2

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

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

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

Ответ 3

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

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

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

Ответ 4

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

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

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

Ответ 5

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

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

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

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;
    }
}

Ответ 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.