1

I trying use the Javascript DOM. I need get a information (data-content), searching by class.

The html of website is:

<li class="item info-icon info-icon-phone">
   <strong itemprop="telephone" class="phone-place js-expansible-text js-phone-tracker display-phone_ad" data-content="(19) 3879-1066 / (19) 3879-1066" data-style_class="clickable" data-place_id="76588JTY">(19) 3879-1066 / (19) 3879-1066</strong>
</li>

My code doesn't works:

var script = document.getElementsByClass('phone-place js-expansible-text js-phone-tracker display-phone_ad');
Rene Sá
  • 4
  • 3
  • 23
  • 3
    Did u mean `getElementsByClassName` ? – Cosmin Aug 28 '15 at 13:56
  • Why is this tagged as jquery? – Rob Aug 28 '15 at 14:00
  • `var script = document.getElementsByClassName('phone-place js-expansible-text js-phone-tracker display-phone_ad').innerHTML` the return is null – Rene Sá Aug 28 '15 at 14:01
  • @ReneSá It's not entirely clear from your question whether you're actually wanting to get the value of the `data-content` attribute or the text node of the element (the `innerHTML`) – Rob Aug 28 '15 at 14:16
  • @ReneSá then I believe my answer below should give you what you need. Using the `getAttribute` method. – Rob Aug 28 '15 at 15:22

3 Answers3

2
var script = document.getElementsByClassName('phone-place js-expansible-text js-phone-tracker display-phone_ad');

http://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

Richard Hamilton
  • 25,478
  • 10
  • 60
  • 87
2

I believe the function you are looking for is getElementsByClassName. What do querySelectorAll, getElementsByClassName and other getElementsBy* methods return?

Community
  • 1
  • 1
rmn36
  • 656
  • 4
  • 12
1

You can retrieve element attributes using the getAttribute() method.

In this instance you could use the following to get the data-content attributes:

var elements = document.getElementsByClassName('phone-place js-expansible-text js-phone-tracker display-phone_ad');
var dataContent = elements[0].getAttribute('data-content');

getElementsByClassName returns an array of matching elements, you could replace this with getElementByClassName with returns a single element, this is preferable if you're only expecting one element. In my example you will see you need to reference the first element in the array elements[0] before calling getAttribute()

Instead with getElementByClassName do the following:

var element = document.getElementByClassName('phone-place js-expansible-text js-phone-tracker display-phone_ad');
var dataContent = element.getAttribute('data-content');

A quick bin to show this in action

Rob
  • 7,039
  • 4
  • 44
  • 75
  • This code show the "innerHTML" too. Try change the innerHTML and see the result. – Rene Sá Aug 28 '15 at 15:34
  • @ReneSá That's because in your provided example the value of innerHTML and data-content attribute are the same. It's not 100% clear from your question what you are trying to do, can you clarify? If you need to get just the innerHTML use `elements[0].innerHTML` – Rob Aug 28 '15 at 15:36
  • What is `getElementByClassName`? To retrieve a data attribute, it's preferable to use `dataset.content`. –  Aug 28 '15 at 19:55
  • @torazaburo i'm not sure what you mean. I think you're referring to a completely different language. – Rob Aug 29 '15 at 11:58
  • Look it up, check it out. https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset –  Aug 29 '15 at 12:12
  • @torazaburo sorry i was confused about your question re: getElementByClassName that's because that's how the OP wants to access the element, as a side point, it's worth noting HTMLElement dataset isn't available before IE11. – Rob Aug 29 '15 at 16:32