Javascript 选择不是'；是div还是其他标准选择器？

更新：选择“滚动”现在起作用了，但我仍然坚持抓取图像

我正在尝试选择网站（不是我的）上标记为

roll=“article”

的所有项目。我可以在网上找到有关选择div、图像等的教程，但我找不到任何有关“rolls”的内容（可能是网站制作的标签，但我不确定）

这根本不起作用。没有错误，但我没有红色边框

然后在“滚动”项中，我尝试选择以“”开头的图像。它有很多div，但如果可能的话，我不想尝试和孩子们打交道，因为该网站使用React，div结构也发生了变化。现在我有：

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

为此，我得到“DomeException:未能执行'querySelector'：'[name^='不是有效的选择器。”

当我在谷歌上搜索这个错误时，我发现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>

· 
· 
美国1%的食品消费都是在小型家庭农场生产的。如果经济崩溃，你认为谁会过得更好？
美国大型农场目前正在对数百万只“多余”的动物实施安乐死，用于工厂化养殖，因为屠宰场工人是病毒的受害者，加工速度已经放缓。
在俄罗斯：…
查看更多

您可以使用类似于选择属性的东西。然后，您可以使用键样式添加样式属性，并为css样式赋值

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

---

基于html，您可以执行以下操作（我在其中添加了注释）：

const rollArticle=document.querySelector（'[role=“article”]'）；//选择包含滚动的文章
const imgArticle=rollArticle.querySelectorAll（'img'）；//选择本文中的图像
对于（var i=0；i-1）{//如果src中有一个图像https://external 然后：
setAttribute（'style'，'outline:1px纯红；'）；//做任何你想做的事
} 
}

---

希望这有帮助！

你能发布你试图选择的网站的HTML吗？如果没有这些信息，你将很难看到关系/容器/等，以确定如何访问该元素。当你说“我正在尝试选择以…开头的图像”时您的意思是其

src

属性以…开头的图像吗？如果是，您的选择器应为

'img[src^=”https://external“]”

。即使roll是网站制作的标签，您也应该能够使用

document.querySelectorAll（“[roll]”）以元素为目标

请参阅。现在出现的错误，我认为是因为

文章块

为空。要以图像开头并具有滚动属性的元素为目标，请使用

document.querySelectorAll（'[roll][src^='https://external“]”）

Cedric Cholley这很有道理，但我正在尝试选择属于给定卷的图像（我正在跟踪每卷中的一组元素，而不仅仅是收集所有元素。）有没有一种方法可以只选择需要的图像

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

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