Как найти элемент с не HTML атрибутом? - PullRequest
Новая
       11

Как найти элемент с не HTML атрибутом?

0 голосов
/ 13 ноября 2018

Как .. 

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

Идентификатор и идентификатор данных различны во всех элементах 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 с cheerio?

Ответы [ 3 ]

0 голосов
/ 13 ноября 2018

Если я правильно понимаю ваш вопрос, вы хотите найти элемент на основе значения одного из его атрибутов data-. Если это так, вы можете создать функцию, как я делал ниже, которая перебирает NodeList, возвращаемую querySelectorAll. Во время каждой итерации проверяйте атрибут узла dataset, смотрите, ищите ли вы его, и если да, то возвращайте его. Если вы перебираете весь NodeList и не находите его, возвращаете 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>
0 голосов
/ 13 ноября 2018

Я просто собираюсь ответить на ваш заголовок

Как найти элемент с не HTML-атрибутом?

Чтобы выбрать элемент с определенным пользователем атрибутом, вы можете сделать это: 

let myDiv = document.querySelector('div[myAttribute]');
console.log(myDiv);
<div myAttribute="asdf"></div>

Чтобы получить его значения, мы не можем просто поставить точки на нем, потому что это определенный пользователем атрибут, вам нужно использовать свойство .attributes. 

let myDiv = document.querySelector('div[myAttribute]');
console.log(myDiv.attributes.myattribute.value);
<div myAttribute="asdf"></div>
0 голосов
/ 13 ноября 2018

Пользовательские атрибуты данных могут быть выбраны с помощью свойства .dataset элемента.так что 

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)
...