document.getElementById并使用classname

Question

我在HTML代码中有以下内容：

<div id="story" class="componentBox">
  <h1 class="articleTitle">Parlamentarzyści nie stracą emerytur</h1>
  <div class="artDetails">19 kwietnia 2016 | Kraj |  Wiktor Ferfecki</div>
  <div class="storyContent">

要检索我使用的articleTitle的内容：

document.getElementById("story").getElementsByTagName("div")[0].innertext

并检索artDetails

的内容

document.getElementById("story").getElementsByTagName("div")[0].innertext

我认为最好使用标题articleTitle和artDetails。我没有任何线索如何做到这一点。我已经尝试document.getElementById("story").getElementByClassName("articleTitle")[0].innertext，但它会抛出错误。

Answer 1

您可以使用querySelector()选择元素，并在HTMLNode上使用textContent属性来获取元素的文本内容。

var title = document.querySelector('#story .articleTitle').textContent;

var details = document.querySelector('#story .artDetails').textContent;

var title = document.querySelector('#story .articleTitle').textContent;
var details = document.querySelector('#story .artDetails').textContent;

document.body.innerHTML = 'Title: ' + title + '<br /> Details: ' + details;

<div id="story" class="componentBox">
  <h1 class="articleTitle">Parlamentarzyści nie stracą emerytur</h1>
  <div class="artDetails">19 kwietnia 2016 | Kraj | Wiktor Ferfecki</div>
  <div class="storyContent">

Answer 2

虽然您可以使用document.GetElementsByClassName()函数来定位特定类，但如果您想要定位特定元素，最好使用document.querySelector()函数，如下所示：

// Get the title (i.e. the "articleTitle" class below an element with ID "story"
var title = document.querySelector('#story .articleTitle').textContent;
// Do the same for the details...
var details = document.querySelector('#story .artDetails').textContent;

您可以看到working example here并在下方演示：

Answer 3

我强烈建议查看jQuery。它可以帮助您少花钱多办事。所以不要这样做：

document.getElementById("story").getElementsByTagName("div")[0].innertext

你可以这样写：

$('#story .artDetails')[0].innertext

你仍然可以完成同样的事情。