Выбираете что-то, что не является div или другим стандартным селектором? - PullRequest
Новая
       9

Выбираете что-то, что не является div или другим стандартным селектором?

0 голосов
/ 26 апреля 2020

Обновление: выбор "рулона" теперь работает, но я все еще застреваю при получении изображения.

Я пытаюсь выбрать каждый элемент на сайте (не мой), который помечен как roll=“article”. Я могу найти учебники онлайн о выборе div, изображений и т. Д. c. но я не могу найти ничего для «рулонов» (возможно, это ярлык, созданный на сайте, но я не уверен). 

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

Это просто не работает. Без ошибок, но я не получаю красную рамку.

Затем в элементах "roll" я пытаюсь выбрать изображение, которое начинается с "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>

Ответы [ 2 ]

1 голос
/ 26 апреля 2020

Вы можете использовать что-то вроде выбора атрибута. Затем вы можете добавить атрибут стиля с ключевым стилем и оценить свой стиль css. 

var article = document.querySelectorAll("[roll='article']")[0];
article.setAttribute("style", "border: 2px solid red;")
0 голосов
/ 27 апреля 2020

На основании вашего 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  
  } 
}

Надеюсь, что это поможет!

...