标签: queryselector

假设您获得了一个节点node，并且您必须提供由选择器给出的所有直接子节点Direct。直接子代的选择器是：

childParent > directChild

但是，以下失败并在控制台中出现错误：

document.body.querySelectorAll(">div")
SyntaxError: '>div' is not a valid selector

我有一个函数需要在选择直接子节点上执行某些操作，但我不确定如何处理这个问题。当然，除了使用for循环并用我自己的代码分析子级，完全放弃选择器。

下面的代码不起作用。是否可以对其进行更改以实现预期目的？

function doWithDirectChildren(parentNode) {
    // does not work, the selector is invalid
    const children = parentNode.querySelector(">.shouldBeAffected");
    for(const direct of children) {
        // do something with the direct child
    }
}

我要求的是解决方案，而不是解决方法。

我有一个列表，其中每个li都有独特的data-id.

<ul class="list">
  <li class="list__el"
      *ngFor="let item of cars"
      data-id="{{ item.id }}">
  </li>
</ul>

在 JS 中我会写

let myLi = document.querySelector(`.list__el[data-id="${item.id}"]`)

如何为 Angular 正确重写它？

目标和我的尝试

我正在尝试获取一种能够等待元素已经存在于 DOM 中的方法。我读过一些关于 的文章MutationObserver，并且我得到了这个方法，它应该可以完成我所需要的：

const waitForElement = async (queryString) => {
    return new Promise((resolve) => {
      const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
          const nodes = Array.from(mutation.addedNodes);
          nodes.forEach((node) => {
            console.log('NODE CUSTOM', node);
            if (node.matches && node.matches(queryString)) {
              observer.disconnect();
              resolve(node);
            }
          });
        });
      });

      observer.observe(document.documentElement, {
        childList: true,
        subtree: true,
      });
    });
};

然后，我可以这样简单地使用它：

await waitForElement('#id-of-element');

问题

问题是它实际上没有按预期工作：console.log仅记录“父母”元素，如果要搜索的元素位于树的深处，则似乎不会记录它（这正在更复杂的应用程序中使用） ，所以它可能与异步调用等有关）。

问题

然而，我发现，我只需要查看实际元素是否在 DOM 中，而不是遍历突变和节点数组，所以我实现了这个：

const waitForElement = async (queryString) => { …

Node 新手，所以这可能是一个对 Node 理解不够好的问题，但基本上我正在尝试使用 Puppeteer 来抓取页面上的标题列表。当我在 Chrome 控制台中运行查询时，我会得到一个标题列表。哇！

Array.from(document.querySelectorAll(\'div.description h3.title\')).map(partner => partner.innerText)\n\n(12)\xc2\xa0["Jellyfish", "MightyHive", "Adswerve", "55 | fifty-five", "E-Nor", "LiveArea", "Merkle Inc.", "Publicis Sapient", "Acceleration Precision", "Resolute Digital", "PMG", "Kepler Group"]\n

但是当我使用 Node.js 在 VS Code 中测试它时，我得到一个空数组

const browser = await puppeteer.launch();\n  const page = await browser.newPage();\n  const url =\n    "https://marketingplatform.google.com/about/partners/find-a-partner?utm_source=marketingplatform.google.com&utm_medium=et&utm_campaign=marketingplatform.google.com%2Fabout%2F";\n  await page.goto(url);\n\n  const titles = await page.evaluate(() => \n    Array.from(document.querySelectorAll("h3.title"))\n      .map(partner => partner.innerText.trim())\n  )\n\n$ Node google-test.js\n[]\n

我已经尝试进一步指定选择器，甚至使用检查“复制选择器”快捷方式进行精确选择，但仍然得到一个空数组。

如果我更模糊，例如选择“h2”，我会得到一个结果，但一旦我进一步指定，它对我来说就结束了。是什么赋予了？

我正在尝试使用 puppeteer 来检查网页上是否存在类。例如，假设您想抓取某些数据，并且您知道这些数据存储在某个类中。要获取数据，您需要使用类名来获取数据。这是我尝试使用的代码。这是行不通的。

        let pageClicked = document.querySelector('.classIAmTryingToFind')

        if(pageClicked){
            console.log('False')
            await browser.close() 
        }else{
            console.log('True')
            await browser.close() 
        }

当我运行代码时出现此错误。

UnhandledPromiseRejectionWarning: Error: Protocol error (Runtime.callFunctionOn): Target closed.

我正在开发一个非常简单的应用程序，用于跟踪使用的数字或条形码。

计算出条形码的数量后，我使用 Javascript 函数将其显示到 UI insertAdjacentHTML，并使用所需的 HTML 创建一个 div，尽管我似乎找不到一种方法来每次都替换 DIV，而不是创建它另一个例子，另一个例子，另一个例子。

我认为这可能是一个范围问题，但我找不到解决方案。

const myForm = document.getElementById("form_barCodeAdmin");

myForm.addEventListener("submit", (e) => {
    let startRange, endRange, quantity;

    e.preventDefault(); // Prevents web page from reloading.

    startRange = document.getElementById("start__range").value;
    endRange = document.getElementById("end__range").value;



    if(endRange > startRange){

        quantity = endRange - startRange;

        let html = `<div class="alert alert-warning" id="quantity__range">Quantity Barcodes: %quantity% </div>`;

        replacedHTML = html.replace('%quantity%', quantity);
        document.getElementById("range__Results").insertAdjacentHTML('beforeend', replacedHTML);


        // if html is not empty then delete Node and run Insert html function. Else run Function. 

    } else …

function name() {
    const select = document.querySelector("#id");
    select.classname = ("customclass")
}

我已经写了这段代码。但我无法更改类名。

function Slider() {
  const track=document.querySelector('.slide__track')//To access the div with class slide track
  console.log(track);
  return (
    <div className="slider">
      <i className="fas fa-chevron-left"></i>
      <div className="head">
        <h1 className="title">Based on your last search</h1>
        <h6>View more</h6>
      </div>
      <div className="slider_container">
        <ul className="slider__track">
          <li className="slider__items">
            <Card />
          </li>
        </ul>
      </div>
      <i className="fas fa-chevron-right"></i>
    </div>
  );
}

我无法使用 Slide__track 类访问 div。这里有什么问题？或者我如何访问该元素？

我想废弃 immowelt.de，但我无法通过 cookie 横幅。我尝试使用 sleep() 和 WebDriverWait 等待横幅加载，但是它们都不起作用。

这是网络驱动程序的代码

from selenium import webdriver
from selenium.webdriver.common.by import By
import time
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC

chrome_driver_path = '.../chromedriver'
url = 'https://www.immowelt.de/immobilienpreise'
driver = webdriver.Chrome(executable_path=chrome_driver_path)

driver.get(url)

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, '//*[@id="uc-center-container"]/div[2]/div/div/div/div[1]/button'))).click()

driver.close()

这是带有睡眠的代码

from selenium import webdriver
import time
from selenium.webdriver.common.by import By

chrome_driver_path = '.../chromedriver'
url = 'https://www.immowelt.de/immobilienpreise'
driver = webdriver.Chrome(executable_path=chrome_driver_path)

driver.get(url)
time.sleep(5)
driver.find_element(By.XPATH, '//*[@id="uc-center-container"]/div[2]/div/div/div/div[1]/button').click()

driver.close()

我正在查看的 html 看起来像这样：

document.querySelectorAll('h4#unique_id  ~ h5 ~p +p +h5').forEach(title => console.log(title))

<body>
  <h4 id="unique_id"> foo bing bar </h4>
  <p>some text</p>
  <p>some text</p>
  <p>some text</p>
  <!-- selection should start here -->
    <h5>title text 1</h5>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
    <h5>title text 2</h5>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
    <h5>title text 3</h5>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
  <!-- and end here -->
  <h4 id="randome_id_234353">title text</h4>
  <p>some text I don't want</p>
  <p>some text …

我正在尝试将滚动触发的动画添加到我的在线作品集网站，并且在我的经验列表之间我有简单的 div 作为分隔符：

<div class='divider'></div>

我正在尝试添加入口动画。

我的JS如下：

<div class='divider'></div>

即使我的分隔符直接放置在 HTML 中，带有 querySelectorAll 的语句console.log()也会返回一个空的 NodeList，所以我不确定为什么我的 querySelector 无法识别它们。

我怀疑 JS 是在元素完全加载之前执行的，但我还没有成功使用几种不同的等待方法。