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

问题描述 投票：0回答：2

更新：选择 "卷 "现在可以工作了，但我仍然卡在抓取图片上。

我试图选择一个网站（不是我的网站）上的每一个项目，这些项目被标记为 roll=“article”. 我可以在网上找到关于选择div、图片等的教程，但我找不到任何关于 "rolls"（可能是网站编造的标签，但我不确定）的教程。

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: 执行'querySelector'失败：'[name^=]。https:/external]'不是一个有效的选择器"。

当我谷歌这个错误时，我发现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>
javascript reactjs css-selectors
2个回答
1
投票

你可以使用一些类似选择属性的东西。比你可以添加样式属性与关键样式和值你的CSS样式。

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

根据你的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  
  } 
}

希望能帮到你

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.