How to find Element with non html attribute?

Question

Like ..

<div id="annonce_13452237" data-id="13452237">
   <span class="annBlocNbPhotos">
   <span class="annNbPhotos">4 photos</span>
   </span>
   <div class="annBlocDesc">
      <span class="annBtnDetail">Voir détail</span>
   </div>
</div>
</div>

The id and the data-id are different in all the divs.

or

    <div data-href="https://www.ZZZZ.it/t/portail-d-entreprise/4036260563/2015/01/30/vos-produits-tout"
     data-layout="button_count" data-size="small"
     data-mobile-iframe="true">

Same thing with this sample ..

How to find this kind of div with cheerio?

Hi, please state your question more clear. What is your expected outcome and what is the current outcome. Also include any already made attempts at solving it and why it may or may not have worked to some degree. — T. Dirks, Nov 13 '18 at 15:59
Can you clean up the formatting of your code so that it's easy to read? (indentation, etc.) Also, what's the specific element you're looking to find? If you show a bit more attention to your question, people will be better suited (and happier) to respond. — Charlie Schliesser, Nov 13 '18 at 16:00
So you were as unsuccessful with finding something, as anyone reading your question in its current form is likely going to be in finding out what your problem is or what you even want ... Please go read [ask]! You have completely neglected to tell us _what_ you want to find, based on what criteria or whatever. — misorude, Nov 13 '18 at 16:01
Please state what you call `non-html attribute`? `data-id` is valid attribute for dataApi — Justinas, Nov 13 '18 at 16:02
I think this is a duplicate of: https://stackoverflow.com/q/9543733/870729 - I'm guessing OP wants to do some sort of _div has an attribute of_ `data-*` sort of selection. — random_user_name, Nov 13 '18 at 16:04
And why `data_href` in the second, and not `data_layout` or the nonexistent `data_id`? It's still not clear what you want. But you might be looking for `dataset`s. — Scott Sauyet, Nov 13 '18 at 16:07
And what is your question, or problem with that? Is it with getting the value of the attribute, or with getting the reference to that HTML element (based on that it has such an attribute) to begin with …? C’mon, you got to start working _with us_ here, and finally give us a proper explanation of what your actual problem is! — misorude, Nov 13 '18 at 16:07
Its a good way -- find the div and each for sorting values .. — dterencio, Nov 13 '18 at 16:09
what about new element like .. they are not HTML element . You can add then in the dom, and create a javascript program that interprete them. — dterencio, Nov 13 '18 at 16:12
non-html attribute .. when you read the w3c html guide . you don't find this kind of attributs. — dterencio, Nov 13 '18 at 16:14
I wand find then quickly .. and retrieve the value for exemple of the data_id or the data_href .. — dterencio, Nov 13 '18 at 16:16
I think you want `$('[data_id],[data_href]')` - that will select any element with either attribute — pguardiario, Nov 13 '18 at 23:50

score 0 · Answer 1 · answered Nov 13 '18 at 16:15

0

custom data attributes can be selected using the .dataset property of the element. so

let div = document.querySelector('#annonce_13452237');
console.log(div.dataset.id);

 let div2 = document.querySelector('[data-href]');
console.log(div2);
console.log(div2.dataset.href)

answered Nov 13 '18 at 16:15

Pari Baker

696
4
19

the data-* key is used to provide small snippets of retrievable data for an element, though personally I don't consider it a good way of selecting an element. – Pari Baker Nov 13 '18 at 16:16

Tom O. · Answer 2 · 2018-11-13T17:28:17.313

If I understand your question correctly, you want to find an element based on the value of one of its data- attributes. If that's the case, you can create a function like I did below that iterates through a NodeList returned by querySelectorAll. During each iteration check the node's dataset attribute see if it's the one you're looking for, if so, return it. If you iterate through the entire NodeList and don't find it then return null.

function getElByDataAttrVal(elType, dataAttr, desiredValue) {
  var nodeList = document.querySelectorAll(elType);
  for (let i = 0; i < nodeList.length; i++) {
    //Take note of the line below using dataset
    if (desiredValue == nodeList[i].dataset[dataAttr]) {
      return nodeList[i];
    }
  }
  return null;
}

//Look for a div where data-id attribute value equals "13452237"
var el1 = getElByDataAttrVal("div", "id", "13452237");
console.log(el1 ? el1 : "Element doesn't exist");

//Look for a div where data-href attribute value equals long url
var el2 = getElByDataAttrVal("div", "href", "https://www.ZZZZ.it/t/portail-d-entreprise/4036260563/2015/01/30/vos-produits-tout");
console.log(el2 ? el2 : "Element doesn't exist");

//Look for a div where data-size attribute value equals "massive"
var el3 = getElByDataAttrVal("div", "size", "massive");
console.log(el3 ? el3 : "Element doesn't exist");

//Look for a div where data-size attribute value equals "small"
var el4 = getElByDataAttrVal("div", "size", "small");
console.log(el4 ? el4 : "Element doesn't exist");

<div id="annonce_13452237" data-id="13452237">
  <span class="annBlocNbPhotos">
   <span class="annNbPhotos">4 photos</span>
  </span>
  <div class="annBlocDesc">
    <span class="annBtnDetail">Voir détail</span>
  </div>
</div>

<div data-href="https://www.ZZZZ.it/t/portail-d-entreprise/4036260563/2015/01/30/vos-produits-tout" data-layout="button_count" data-size="small" data-mobile-iframe="true">
</div>

score 0 · Answer 3 · answered Nov 13 '18 at 17:39

I'm just gonna answer your title

How to find Element with non html attribute?

To select an element with user defined attribute you can do this :

let myDiv = document.querySelector('div[myAttribute]');
console.log(myDiv);

<div myAttribute="asdf"></div>

To get it's values however we can't just dot on it because it's a user defined attribute, you'll have to use the .attributes property.

let myDiv = document.querySelector('div[myAttribute]');
console.log(myDiv.attributes.myattribute.value);

<div myAttribute="asdf"></div>

How to find Element with non html attribute?

3 Answers3