如何获得包含在段落元素的值 <div> 在HTML中使用JavaScript

Question

I know this can be very basic but I'm very poor in using JavaScript.

Following is my HTML Code :

<div class="request">
<h4>Request a Free Consultation</h4>
<p>XXX-XXX-XXXX</p>     
</div>

Using JavaScript, I want to get text contained in <p> element.

I am trying in the following way, but it's giving me undefined error.

var x = document.getElementsByClassName("request");
var pText = x.getElementsByTagName("P").innerHTML;
alert(pText);

Can anyone lead me in the right direction?

EDIT : Here is the fiddle link to try above code : http://jsfiddle.net/Scoobler/ua9zN/

Answer 1

getElementsByClassName and getElementsByTagName return arrays. So you need to add indexes as well:

var x = document.getElementsByClassName("request");
var pText = x[0].getElementsByTagName("P")[0].innerHTML;
              ^                            ^
alert(pText);

Answer 2

您可以简单地使用querySelectorAll 。

var pText = document.querySelectorAll('.request p')[0];

Answer 3

var x = document.getElementsByClassName("request");

The above line returns NodeList . It's like an Array , whose elements can be retrieved using the index. getElementsByTagName too returns the same.

for(var i = 0; i < x.length; i++)
  alert(x[i].getElementByTagsName('p')[0].innerHTML); // [0] to get <p>