如何通过ID javascript获取元素的子范围的innerhtml

Question

这是我的html，我需要获取作为div类的子级的span类的innerhtml值。

<div id="id1" class="topdiv" entity="id1">
    <div class="topmiddiv">
        <p class="topmiddiv">
            <span class="topmiddiv">Text Here</span>

我首先想到的是下面的JS，但我要查找的span类并不总是具有相同的索引。 有什么办法可以生育第一个跨度孩子吗？

document.getElementById("id1").childNodes[2].innerHTML

Answer 1

当您使用jQuery时。

$('#id1 span.topmiddiv').html()

这将在#id1找到具有类topmiddiv元素的<span> ，并返回其innerHTML 。

演示：

 alert($('#id1 span.topmiddiv').html()); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <div id="id1" class="topdiv" entity="id1"> <div class="topmiddiv"> <p class="topmiddiv"> <span class="topmiddiv">Text Here</span> </p> </div> </div> 

使用Vanilla Javascript，可以使用querySelector 。

 alert(document.querySelector('#id1 span.topmiddiv').innerHTML); 

 <div id="id1" class="topdiv" entity="id1"> <div class="topmiddiv"> <p class="topmiddiv"> <span class="topmiddiv">Text Here</span> </p> </div> </div> 

Answer 2

您可以使用香草JS完成此任务

document.querySelectorAll('#id1 span.topmiddiv')[0].innerHTML;

Answer 3

请使用它作为选择器：

$("span.topmiddiv").html();