如何找到具有非 html 属性的元素？答案

【问题标题】：How to find Element with non html attribute?如何找到具有非 html 属性的元素？
【发布时间】：2019-04-16 12:18:02
【问题描述】：

喜欢..

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

【问题讨论】：

您好，请更清楚地说明您的问题。您的预期结果是什么，当前的结果是什么。还包括任何已经尝试解决的问题，以及为什么它在某种程度上可能有效或无效。
你能清理一下你的代码的格式以便于阅读吗？（缩进等）另外，您要查找的特定元素是什么？如果您对您的问题表现出更多的关注，人们会更适合（并且更乐意）做出回应。
所以你没有成功找到一些东西，因为任何以当前形式阅读你的问题的人都可能会找出你的问题是什么或者你想要什么......请阅读@ 987654321@！您完全忽略了告诉我们您想要找到的什么，基于什么标准或其他什么。
你是问如何通过属性选择元素？
请说明你叫什么non-html attribute？ data-id 是 dataApi 的有效属性

标签： javascript cheerio

【解决方案1】：

我只是要回答你的标题

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

要选择具有用户定义属性的元素，您可以这样做：

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

&lt;div myAttribute="asdf"&gt;&lt;/div&gt;

要获取它的值，但我们不能只点它，因为它是用户定义的属性，您必须使用 .attributes 属性。

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

&lt;div myAttribute="asdf"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

如果我正确理解了您的问题，您希望根据其 data- 属性之一的值来查找元素。如果是这种情况，您可以像我在下面所做的那样创建一个函数，该函数迭代由querySelectorAll 返回的NodeList。在每次迭代期间检查节点的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>

【讨论】：

【解决方案3】：

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

【讨论】：

data-* 键用于为元素提供可检索数据的小 sn-ps，但我个人认为这不是选择元素的好方法。