Question

就像..

<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中的id和data-id都不相同。

或

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

与此示例相同。.

如何用cheerio查找这种div？

Answer 1

可以使用元素的.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)

Answer 2

如果我正确理解了您的问题，则希望根据其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>

Answer 3

我要回答你的头衔

如何查找具有非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>

如何找到非HTML属性的元素？

3 个答案: