选择不是 div 或其他标准选择器的东西？答案

【问题标题】：Selecting something that isn't a div or other standard selector?选择不是 div 或其他标准选择器的东西？
【发布时间】：2020-05-07 20:18:01
【问题描述】：

更新：现在可以选择“滚动”，但我仍然无法抓取图像。

我正在尝试选择网站（不是我的）上标记为roll=“article” 的所有项目。我可以在网上找到有关选择 div、图像等的教程，但我找不到任何关于“滚动”的内容（可能是网站编造的标签，但我不确定。）

var article_block = jNode.closest("roll.article");
article_block.css("border", "2px solid red");

这根本行不通。没有错误，但我没有看到红色边框。

然后在“滚动”项目中，我尝试选择以“https://external”开头的图像。它在大量的 div 中，但如果可能的话，我宁愿不尝试与孩子打交道，因为该站点使用 React 并且 div 结构发生了变化。现在我有：

var image = article_block.querySelector("[name^=https://external]");

为此，我收到“DOMException: Failed to execute 'querySelector': '[name^=https://external]' is not a valid selector.”

当我谷歌这个错误时，我发现 querySelector 不能以数字开头。但是我的不是以数字开头，所以我不明白。

这是我的代码：

function callAttentionToX(jNode) {

    var article_block = jNode.closest("roll.article");
    article_block.css("border", "2px solid red");
    try {

    var image = article_block.querySelector("[name^=https://external]");
    console.log(image);

    ...

    waitForKeyElements("[class$='roll.article']", callAttentionToX);

这是我正在使用的 HTML。

<div aria-posinset="15" aria-labelledby="jsc_c_17u" role="article">
    <div>
        <div></div>
        <div>
            <div class="pybr56ya dati1w0a hv4rvrfc n851cfcs btwxx1t3 j83agx80 ll8tlv6m">
                <div class="oi9244e8 do00u71z j83agx80">
                    <div class="nc684nl6">
                        <a aria-hidden="true" class="oajrlxb2 g5ia77u1 qu0x051f esr5mh6w e9989ue4 r7d6kgcz rq0escxv nhd2j8a9 nc684nl6 p7hjln8o kvgmc6g5 cxmmr5t8 oygrvhab hcukyx3x jb3vyjys rz4wbd8a qt6c0cv9 a8nywdso i1ao9s8h esuyzwwr f1sip0of lzcic4wl oo9gr5id gpro0wi8" href="https://www.facebook.com/chelsey.sprengeler?__cft__[0]=AZVEpYRntgGV9-kMb1SONRfDQ_Hm6nOFozBDqAmsSWnGw0yyDHdp3Cy6_8hXet_ritlMwr2KTWwQ_Rs_Vvl8d8DGdmU2VBWt8n2uqGq0PW94961HR0UVmom1hKG8HAQOy0ksiLaPFDOtj4fmmxTao6fMD2DZfwO0w2PrIChsFvZ-LQ&amp;__tn__=%3C%2CP-R" role="link" tabindex="-1">
                            <div class="l9j0dhe7">
                                <img class="s45kfl79 emlxlaya bkmhp75w spb7xbtv a8c37x1j" height="40" src="https://scontent-ort2-2.xx.fbcdn.net/v/t1.0-1/cp0/p60x60/49398573_10214405840202281_6993060683285790720_n.jpg?_nc_cat=105&amp;_nc_sid=7206a8&amp;_nc_ohc=TocTKT3ByXwAX9Hl7BE&amp;_nc_ht=scontent-ort2-2.xx&amp;oh=1b2b5595e6f8602a3e5043555a51e96e&amp;oe=5ECAC84C" width="40" alt="">
                                    <div class="s45kfl79 emlxlaya bkmhp75w spb7xbtv oaz4zybt pmk7jnqg j9ispegn kr520xx4" style="height: 40px; width: 40px;"></div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="buofh1pr">
                        <div class="j83agx80 cbu4d94t ew0dbk1b irj2b8pg">
                            <div class="qzhwtbm6 knvmm38d">
                                <span class="oi732d6d ik7dh3pa d2edcug0 qv66sw1b c1et5uql a8c37x1j muag1w35 enqfppq2 jq4qci2q a3bd9o3v knj5qynh m9osqain hzawbc8m" dir="auto">
                                    <h4 id="jsc_c_17u" class="gmql0nx0 l94mrbxd p1ri9a11 lzcic4wl hzawbc8m aahdfvyu" dir="auto">
                                        <div class="nc684nl6">
                                            <a class="oajrlxb2 g5ia77u1 qu0x051f esr5mh6w e9989ue4 r7d6kgcz rq0escxv nhd2j8a9 nc684nl6 p7hjln8o kvgmc6g5 cxmmr5t8 oygrvhab hcukyx3x jb3vyjys rz4wbd8a qt6c0cv9 a8nywdso i1ao9s8h esuyzwwr f1sip0of lzcic4wl oo9gr5id gpro0wi8 lrazzd5p" href="https://www.facebook.com/chelsey.sprengeler?__cft__[0]=AZVEpYRntgGV9-kMb1SONRfDQ_Hm6nOFozBDqAmsSWnGw0yyDHdp3Cy6_8hXet_ritlMwr2KTWwQ_Rs_Vvl8d8DGdmU2VBWt8n2uqGq0PW94961HR0UVmom1hKG8HAQOy0ksiLaPFDOtj4fmmxTao6fMD2DZfwO0w2PrIChsFvZ-LQ&amp;__tn__=-UC%2CP-R" role="link" tabindex="0">
                                                <span>Chelsey Sprengeler</span>
                                            </a>
                                        </div>
                                    </h4>
                                </span>
                            </div>
                            <div class="qzhwtbm6 knvmm38d">
                                <span class="oi732d6d ik7dh3pa d2edcug0 qv66sw1b c1et5uql a8c37x1j muag1w35 dco85op0 e9vueds3 j5wam9gi knj5qynh m9osqain hzawbc8m" dir="auto">
                                    <span class="jpp8pzdo">
                                        <span aria-hidden="true" role="presentation"> · </span>
                                    </span>
                                    <span>
                                        <a class="oajrlxb2 g5ia77u1 qu0x051f esr5mh6w e9989ue4 r7d6kgcz rq0escxv nhd2j8a9 nc684nl6 p7hjln8o kvgmc6g5 cxmmr5t8 oygrvhab hcukyx3x jb3vyjys rz4wbd8a qt6c0cv9 a8nywdso i1ao9s8h esuyzwwr f1sip0of lzcic4wl gmql0nx0 gpro0wi8 b1v8xokw" href="https://www.facebook.com/chelsey.sprengeler/posts/10218030275250892?__cft__[0]=AZVEpYRntgGV9-kMb1SONRfDQ_Hm6nOFozBDqAmsSWnGw0yyDHdp3Cy6_8hXet_ritlMwr2KTWwQ_Rs_Vvl8d8DGdmU2VBWt8n2uqGq0PW94961HR0UVmom1hKG8HAQOy0ksiLaPFDOtj4fmmxTao6fMD2DZfwO0w2PrIChsFvZ-LQ&amp;__tn__=%2CO%2CP-R" role="link" tabindex="0">
                                            <span id="jsc_c_17v">Yesterday at 11:44 AM</span>
                                        </a>
                                    </span>
                                    <span class="jpp8pzdo">
                                        <span aria-hidden="true" role="presentation"> · </span>
                                    </span>
                                    <span class="ormqv51v l9j0dhe7 q9uorilb">
                                        <span class="tojvnm2t a6sixzi8 abs2jz4q a8s20v7p t1p8iaqh k5wvi7nf q3lfd5jv pk4s997a bipmatt0 cebpdrjk qowsmv63 owwhemhu dp1hu0rb dhp61c6y iyyx5f41">
                                            <img class="hu5pjgll m6k467ps" src="https://static.xx.fbcdn.net/rsrc.php/v3/y1/r/_BSrkXmU94d.png" alt="Public" height="12" width="12">
                                            </span>
                                        </span>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="nqmvxvec j83agx80 jnigpg78 cxgpxx05 dflh9lhu sj5x9vvc scb9dxdr odw8uiq3">
                            <div aria-expanded="false" aria-haspopup="menu" aria-label="More" class="oajrlxb2 gs1a9yip g5ia77u1 mtkw9kbi tlpljxtp qensuy8j ppp5ayq2 goun2846 ccm00jje s44p3ltw mk2mc5f4 rt8b4zig n8ej3o3l agehan2d sk4xxmp2 rq0escxv nhd2j8a9 pq6dq46d mg4g778l btwxx1t3 pfnyh3mw p7hjln8o kvgmc6g5 cxmmr5t8 oygrvhab hcukyx3x tgvbjcpo hpfvmrgz jb3vyjys rz4wbd8a qt6c0cv9 a8nywdso l9j0dhe7 i1ao9s8h esuyzwwr f1sip0of du4w35lb lzcic4wl abiwlrkh p8dawk7l dwo3fsh8 pzggbiyp pkj7ub1o bqnlxs5p kkg9azqs c24pa1uk ln9iyx3p fe6kdd0r ar1oviwq l10q8mi9 sq40qgkc s8quxz6p pdjglbur" role="button" tabindex="0">
                                <img class="hu5pjgll m6k467ps" src="https://static.xx.fbcdn.net/rsrc.php/v3/y9/r/v_MQ4bBP4g8.png" alt="" height="20" width="20">
                                    <div class="s45kfl79 emlxlaya bkmhp75w spb7xbtv i09qtzwb n7fi1qx3 b5wmifdl hzruof5a pmk7jnqg j9ispegn kr520xx4 c5ndavph art1omkt ot9fgl3s" data-novc="1" style="bottom: -8px; left: -8px; right: -8px; top: -8px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="" dir="auto">
                            <div class="ecm0bbzt hv4rvrfc ihqw7lf3 dati1w0a" data-ad-comet-preview="message" data-ad-preview="message" id="jsc_c_17t">
                                <div class="j83agx80 cbu4d94t ew0dbk1b irj2b8pg">
                                    <div class="qzhwtbm6 knvmm38d">
                                        <span class="oi732d6d ik7dh3pa d2edcug0 qv66sw1b c1et5uql a8c37x1j muag1w35 enqfppq2 jq4qci2q a3bd9o3v knj5qynh oo9gr5id hzawbc8m" dir="auto">
                                            <div class="kvgmc6g5 cxmmr5t8 oygrvhab hcukyx3x c1et5uql ii04i59q">
                                                <div dir="auto" style="text-align: start;">1% of food consumed in the U.S is made here on small family farms. In the event of an economic collapse, who do you think will fare better? </div>
                                            </div>
                                            <div class="o9v6fnle cxmmr5t8 oygrvhab hcukyx3x c1et5uql ii04i59q">
                                                <div dir="auto" style="text-align: start;">Large US farms are currently euthanizing millions of “excess” animals for factory farming because slaughterhouse workers are victims of the virus and processing has slowed. </div>
                                            </div>
                                            <div class="o9v6fnle cxmmr5t8 oygrvhab hcukyx3x c1et5uql ii04i59q">
                                                <div dir="auto" style="text-align: start;">In Russia:… 
                                                    <div class="oajrlxb2 g5ia77u1 qu0x051f esr5mh6w e9989ue4 r7d6kgcz rq0escxv nhd2j8a9 nc684nl6 p7hjln8o kvgmc6g5 cxmmr5t8 oygrvhab hcukyx3x jb3vyjys rz4wbd8a qt6c0cv9 a8nywdso i1ao9s8h esuyzwwr f1sip0of lzcic4wl oo9gr5id gpro0wi8 lrazzd5p" role="button" tabindex="0">See More</div>
                                                </div>
                                            </div>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="l9j0dhe7">
                            <div class="l9j0dhe7">
                                <div>
                                    <div class="b3i9ofy5 l9j0dhe7">
                                        <div class="j83agx80 soycq5t1 ni8dbmo4 stjgntxs l9j0dhe7">
                                            <a class="oajrlxb2 g5ia77u1 qu0x051f esr5mh6w e9989ue4 r7d6kgcz rq0escxv nhd2j8a9 nc684nl6 p7hjln8o kvgmc6g5 cxmmr5t8 oygrvhab hcukyx3x jb3vyjys rz4wbd8a qt6c0cv9 a8nywdso i1ao9s8h esuyzwwr f1sip0of lzcic4wl gmql0nx0 gpro0wi8 datstx6m k4urcfbm" href="https://l.facebook.com/l.php?u=https%3A%2F%2Freturntonow.net%2F2020%2F02%2F13%2Fnearly-40-of-russias-food-comes-from-small-family-gardens%2F%3Ffbclid%3DIwAR3GpoDKK2tTrnqyruN3IMptK1bXEthDLOAuhGPpag_8l_-y9T8WkKFaKYk&amp;h=AT2WE1zOdASEzXsLYfttOJ-A6c3FxBVxTEkBz1P96QjMhIBYr21_AbywUgZRJ4MgqkeEIfdxAKzhxIWLQTtKs19Igv_3FDFWc0GubnlMYzzqbHDcZRUgTU0ov7ODeEM3IovrUy7R5icDcf2jCT7hANM&amp;__tn__=H-R&amp;c[0]=AT3DKWTElvH8PY2xklr03tGI6MzhkJ4OP5_UXdDt1C54et1RMKpxZetnJHBV-Cij__tq7ahkBal_zD8ZhNObNCRoBUQYEQDicxZk4VUOHWaX2KI_8UIZIIFcWOJKxHgGoLqUMualNdmAHY92uhpHDWscvJOoV4Nj3FYhyMDOeZ-VNhhtyw" rel="nofollow noopener" role="link" tabindex="0" target="_blank">
                                                <div class="k4urcfbm l9j0dhe7 stjgntxs ni8dbmo4 cbu4d94t j83agx80 tqsryivl bp9cbjyn">
                                                    <div class="tqsryivl kr520xx4 j9ispegn pmk7jnqg n7fi1qx3 rq0escxv i09qtzwb">
                                                        <img class="dweb9j1o mvsipfk5 g39kws6s pmk7jnqg l8rlqa9s bixrwtb6 rbqpg9ru nq2o82sz" draggable="false" height="261" src="https://external-ort2-2.xx.fbcdn.net/safe_image.php?d=AQCf5XQJm_DwbuNF&amp;w=750&amp;h=391&amp;url=https%3A%2F%2Freturntonow.net%2Fwp-content%2Fuploads%2F2020%2F02%2Frussian-dacha1.jpg&amp;cfs=1&amp;ext=jpg&amp;_nc_hash=AQB_ZXZ5b-H_GAbX" width="500" alt="">
                                                        </div>

【问题讨论】：

您可以发布您要选择的网站的 HTML 吗？如果没有这些信息，就很难看到关系/容器/等来弄清楚如何访问该元素。
当您说“我正在尝试选择以...开头的图像” 您是指src 属性以...开头的图像吗？如果是这样，你的选择器应该是'img[src^="https://external"]'。
即使滚动是网站制作的标签，您也应该能够使用document.querySelectorAll('[roll]') 定位元素，请参阅attribute selector。现在你遇到的错误，我认为是因为article_block 是空的。要定位具有以external 开头并具有 roll 属性的图像的元素，请使用 document.querySelectorAll('[roll][src^="https://external"]')
Cedric Cholley 说得有道理，但我正在尝试选择属于给定卷的图像（我正在跟踪每个卷中的一堆元素，而不仅仅是收集所有元素.) 有没有办法只选择卷所在 div 内的图像？

标签： javascript reactjs css-selectors

【解决方案1】：

你可以使用一些东西，比如选择属性。比您可以添加带有关键样式的样式属性并重视您的 css 样式。

var article = document.querySelectorAll("[roll='article']")[0];
article.setAttribute("style", "border: 2px solid red;")

【讨论】：

尝试...我没有收到错误，但我也没有收到红色边框。（顺便在问题中添加了更多细节）
我想你改变了属性名，试试这个代码。 var article = document.querySelectorAll("[role='article']")[0]; article.setAttribute("style", "border: 2px solid red;")
这不是和你发布的其他代码一样吗？这就是我尝试过的。（我在问题中添加的细节只是我的原始代码，不是你的代码——我也试过你的代码。）
在以前的代码 [roll='article] -> [role='article'] 替换它，它会工作。检查此链接jsfiddle.net/og7smjna
哦，我明白了……是的，它似乎确实选择了第一个“文章”项目，但没有选择页面上的其他项目。我只发布了部分 HTML；这是一个无休止的滚动页面，我正在尝试访问每一篇文章。

【解决方案2】：

根据您的 html，您可以执行以下操作（我在里面添加了注释）：

const rollArticle = document.querySelector('[role="article"]'); // select the article with roll
const imgArticle = rollArticle.querySelectorAll('img'); // select images inside this article
for (var i=0; i < imgArticle.length; i++) { // iterate over images
  let imgEl = imgArticle[i]; // helper
  if (imgEl.src && imgEl.src.search('https://external') > -1) { // if one of the images src has https://external then:
    imgEl.setAttribute('style', 'outline: 1px solid red;'); // do whatever you want  
  } 
}

希望对您有所帮助！

【讨论】：

谢谢！它通过它没有错误，但它不添加边框。我添加了一个 console.log(imgEl) 并收到错误“imgEl is not defined”
imgArticle 确实会打印，但它会列出页面上的所有图像，而不仅仅是我正在查看的文章中的图像。我试图从每篇有问题的文章中提取图像和其他一些信息，而不是从所有文章中获取所有内容，如果这有意义的话。
@codi6 这为article role="article 中的所有图像设置了红色轮廓，src 属性以https://external.. 开头——这不是你问的吗？