如何访问没有ID的HTML元素？

For instance in the snippet below - how do I access the h1 element knowing the ID of parent element (header-inner div)?

例如,在下面的代码片段中 - 如何知道父元素的ID(header-inner div)来访问h1元素?

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

Thanks!

6 个解决方案

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

Finds the element with the given ID, queries for descendants with a given tag name, returns the first one. You could also loop on descendants to filter by other criteria; if you start heading in that direction, i recommend you check out a pre-built library such as jQuery (will save you a good deal of time writing this stuff, it gets somewhat tricky).

查找具有给定ID的元素,查询具有给定标记名称的后代,返回第一个。您还可以循环后代以按其他条件进行过滤;如果你开始朝这个方向前进,我建议你查看一个预建的库,比如jQuery(这会节省你很多时间写这些东西,它有点棘手)。

#2

If you were to use jQuery as mentioned by some posters, you can get access to the element very easily like so (though technically this would return a collection of matching elements if there were more than one H1 descendant):

如果您使用某些海报提到的jQuery,您可以非常轻松地访问该元素(尽管从技术上讲,如果有多个H1后代,这将返回匹配元素的集合):

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

Using a library like JQuery makes things like this trivial compared to the normal ways as mentioned in other posts. Then once you have a reference to it in a jQuery object, you have even more functions available to easily manipulate its content and appearance.

与其他帖子中提到的常规方法相比,使用像JQuery这样的库使得这样的事情变得微不足道。然后,一旦在jQuery对象中引用它,就可以使用更多函数来轻松操作其内容和外观。

#3

If you are sure that there is only one H1 element in your div:

如果您确定div中只有一个H1元素:

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

Going through descendants,as Shog9 showed, is a good way too.

正如Shog9所示,经历后代也是一个好方法。

#4

The simplest way of doing it with your current markup is:

使用当前标记执行此操作的最简单方法是:

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

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

This assumes your H1 tag is always the first one within the 'header-inner' element.

这假设您的H1标签始终是'header-inner'元素中的第一个。

#5

To get the children nodes, use obj.childNodes, that returns a collection object.

要获取子节点,请使用obj.childNodes返回集合对象。

To get the first child, use list[0], that returns a node.

要获取第一个子节点,请使用list [0],它返回一个节点。

So the complete code should be:

所以完整的代码应该是:

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

If you want to iterate over all the children, comparing if they are of class “title”, you can iterate using a for loop and the className attribute.

如果要迭代所有子节点,比较它们是否为类“title”,则可以使用for循环和className属性进行迭代。

The code should be:

代码应该是:

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

Here I get the H1 elements value in a div where the H1 element which has CSS class="myheader":

这里我得到一个div中的H1元素值,其中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);
}

Here is the markup:

这是标记:

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

I would also recommend to use jQuery if you need a heavy parsing for your DOM.

如果您需要对DOM进行大量解析,我还建议使用jQuery。

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

#2