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?

Answer 1

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) 

Answer 2

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> 

Answer 3

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>