document.getElementById并使用类名

Question

I have the following in HTML code:

<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">

To retrieve the contents of articleTitle I use:

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

And to retrieve the contents of artDetails

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

I think that it would be better to make use of the titles ie articleTitle and artDetails . I have no clues how to do it whatsoever. I've tried document.getElementById("story").getElementByClassName("articleTitle")[0].innertext but it throws and error.

Answer 1

You can use querySelector() to select an element and use textContent property on HTMLNode to get the text content of the element.

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

While you can use the document.GetElementsByClassName() function to target specific classes, if you want to target a specific element, you may be better off using the document.querySelector() function as seen below :

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

You can see a working example here and demonstrated below :

Answer 3

I'd highly recommend looking into jQuery . It will help you do more with less. So instead of doing this:

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

You could write this:

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

And you would still accomplish the same thing.