How to find Element with non html attribute?

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.

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

edited Nov 13 '18 at 19:21

asked Nov 13 '18 at 15:57

dterencio

112

5

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 How to 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

You are asking how to select an element by an attribute?

– epascarello
Nov 13 '18 at 16:02

Please state what you call non-html attribute? data-id is valid attribute for dataApi

– Justinas
Nov 13 '18 at 16:02

|
show 10 more comments

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.

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

edited Nov 13 '18 at 19:21

asked Nov 13 '18 at 15:57

dterencio

112

5

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 How to 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

You are asking how to select an element by an attribute?

– epascarello
Nov 13 '18 at 16:02

Please state what you call non-html attribute? data-id is valid attribute for dataApi

– Justinas
Nov 13 '18 at 16:02

|
show 10 more comments

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.

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

edited Nov 13 '18 at 19:21

asked Nov 13 '18 at 15:57

dterencio

112

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.

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

javascript cheerio

edited Nov 13 '18 at 19:21

asked Nov 13 '18 at 15:57

dterencio

112

edited Nov 13 '18 at 19:21

asked Nov 13 '18 at 15:57

dterencio

112

edited Nov 13 '18 at 19:21

asked Nov 13 '18 at 15:57

dterencio

112

asked Nov 13 '18 at 15:57

dterencio

112

asked Nov 13 '18 at 15:57

dterencio

112

5

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 How to 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

You are asking how to select an element by an attribute?

– epascarello
Nov 13 '18 at 16:02

Please state what you call non-html attribute? data-id is valid attribute for dataApi

– Justinas
Nov 13 '18 at 16:02

|
show 10 more comments

5

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 How to 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

You are asking how to select an element by an attribute?

– epascarello
Nov 13 '18 at 16:02

Please state what you call non-html attribute? data-id is valid attribute for dataApi

– Justinas
Nov 13 '18 at 16:02

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 How to 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

You are asking how to select an element by an attribute?

– epascarello
Nov 13 '18 at 16:02

Please state what you call non-html attribute? data-id is valid attribute for dataApi

– Justinas
Nov 13 '18 at 16:02

|
show 10 more comments

3 Answers
3

active

oldest

votes

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

223113

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

add a comment |

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>

edited Nov 13 '18 at 17:28

answered Nov 13 '18 at 16:46

Tom O.

2,21711325

add a comment |

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>

answered Nov 13 '18 at 17:39

Zohir Salak

2,5031414

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53284838%2fhow-to-find-element-with-non-html-attribute%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

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

223113

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

add a comment |

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

223113

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

add a comment |

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

223113

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)

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)

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

223113

answered Nov 13 '18 at 16:15

Pari Baker

223113

answered Nov 13 '18 at 16:15

Pari Baker

223113

answered Nov 13 '18 at 16:15

Pari Baker

223113

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

add a comment |

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

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

add a comment |

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>

edited Nov 13 '18 at 17:28

answered Nov 13 '18 at 16:46

Tom O.

2,21711325

add a comment |

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>

edited Nov 13 '18 at 17:28

answered Nov 13 '18 at 16:46

Tom O.

2,21711325

add a comment |

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>

edited Nov 13 '18 at 17:28

answered Nov 13 '18 at 16:46

Tom O.

2,21711325

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>

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>

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>

edited Nov 13 '18 at 17:28

answered Nov 13 '18 at 16:46

Tom O.

2,21711325

edited Nov 13 '18 at 17:28

answered Nov 13 '18 at 16:46

Tom O.

2,21711325

answered Nov 13 '18 at 16:46

Tom O.

2,21711325

answered Nov 13 '18 at 16:46

Tom O.

2,21711325

add a comment |

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>

answered Nov 13 '18 at 17:39

Zohir Salak

2,5031414

add a comment |

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>

answered Nov 13 '18 at 17:39

Zohir Salak

2,5031414

add a comment |

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>

answered Nov 13 '18 at 17:39

Zohir Salak

2,5031414

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>

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

console.log(myDiv);

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

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

console.log(myDiv);

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

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

console.log(myDiv.attributes.myattribute.value);

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

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

console.log(myDiv.attributes.myattribute.value);

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

answered Nov 13 '18 at 17:39

Zohir Salak

2,5031414

answered Nov 13 '18 at 17:39

Zohir Salak

2,5031414

answered Nov 13 '18 at 17:39

Zohir Salak

2,5031414

answered Nov 13 '18 at 17:39

Zohir Salak

2,5031414

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky