标签: selectors-api

那么如何获取目标元素之后的所有元素，例如我想获取 id 调用 c 之后的所有元素，无论 c 之后的元素数量如何

例如

d
e
f

我想在 id 元素调用输出中输出结果

这是我的代码，我被困住了

d
e
f

/*
Get all the elements ids after the id call c and output those 
ids in the id call output 

For example 
document.querySelector('#output').innerHTML = ??;

How?
*/

#output{
  color: red;
}

我有以下标记，其中顶级元素包含<svg>标题为“检查图标”的标记：

<div data-testid="monday" role="button">
  <svg viewBox="0 0 24 24">
    <title>Check Icon</title>
    <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
  </svg>
  <span>Monday</span>
</div>

对于我的单元测试，我需要确保 svg 元素存在并且其标题是“Check Icon”。svg 元素不一定是第一个子元素。做到这一点最简单的方法是什么？我已经选择了 data-testid="monday" 的父元素：

const buttonElement = document.querySelector('[data-testid="monday"]'));

我正在使用 Node 和 Puppeteer 从网页中抓取一些信息，但在选择正确的元素时遇到问题。

这描述了确切的情况。我只想选择始终位于第一个子项中的“Hello”文本。唯一的区别是，大约有 50 个与此完全相同的 DOM，我想选择其中每个的“Hello”。

<span class='first'>
<span class='second'>
    <span class='third'>
        <span>
            <a class='forth'>Hello</a>
        </span>
    </span>
</span>

<span class='second'>
    <span class='third'>
        <span>
            <a class='forth'>Some text</a>
        </span>
    </span>
</span>

<span class='second'>
    <span class='third'>
        <span>
            <a class='forth'>Different text</a>
        </span>
    </span>
</span>

如何在本机Javascript querySelectorAll()中放置许多伪选择器？

示例:我想搜索一个id以[id ^ = starting]开头并以[id $ = ending]结尾的元素.(无法找到现有的问题,所以自己做出来并回答它)

html文件

<table id="tbl_proxy_list">
...........
 <tr>
   ......
    <td align="left">
        <time class="icon icon-check">1 min</time>
    </td>
    <td align="left">
        <div class="progress-bar" data-value="75" title="4625"></div>
    </td>
</tr>
</table>

ip.js文件

casper.start('http://www.proxynova.com/proxy-server-list/', function() {
    var info_text = this.evaluate(function() {
        var nodes = document.querySelectorAll('table[id="tbl_proxy_list"] tr');
        return [].map.call(nodes, function(node) { 
            //return node.innerText;
            return node;
        });
    });

    var tr_data = info_text.map(function(str) {
        var elements = str;
        var data = {
            ip        : elements,
            port      : elements[1],
            lastcheck : elements[2],
            speed     : elements[3], // <== value is 75..
        };
        return data;
    }); …

我试图找到一种方法来构建任何给定节点的 querySelector 字符串。换句话说 - 选择页面上的任何节点 - 是否可以遍历 DOM 并构建一个字符串，允许我将生成的字符串传递给 document.querySelector 并取回我选择的节点？

据我所知， querySelector 有一个错误，您只能在字符串中使用 nth-child 一次。

我已经尝试了几次，但到目前为止都没有找到解决方案。我想在原生 JavaScript 中执行此操作，而不是 jQuery。有任何建议吗？

我有一个具有这种格式类的输入字段：

some_starting_constant_string somevariablestring some_ending_constant_string

所以我想要一个查询选择器，它使用开头和结尾的组合：

document.querySelectorAll("input[class^='some_starting_constant_string' AND class$='some_ending_constant_string']

这可能吗？结合规则开始和结束？

据我所知,在正常情况下,您可以使用querySelector选择单个元素,并使用querySelectorAll来选择多个元素.但是,我很惊讶地发现querySelectorAll不适用于单个元素.我希望它可以与一个或多个一起工作.我找不到任何说它不应该只用一个的东西所以我在这里问这是否正常并且根据规格？

HTML:

<div class="top container">
  <div class="pod" draggable="true">big</div>
  <div class="pod" draggable="true">small</div>
  <div class="pod" draggable="true">happy</div>
  <div class="pod" draggable="true">rich</div>
  <div class="pod" draggable="true">fast</div>
</div>

JS:

function dragStart(e) {
  console.log("drag started");
  e.target.style.opacity = "0.5";
}

适用于此(调用dragStart函数):

var topPods = document.querySelector(".top");
topPods.addEventListener("dragstart", dragStart);

但不适用于此(未调用dragStart函数):

var topPods = document.querySelectorAll(".top");
topPods.addEventListener("dragstart", dragStart);

我有几个 div 包含两个类，例如：

<div class="dateNumbers"></div>
<div class="dateNumbers {{month.year + '-' + month.monthName + '-' + 'end'}}"></div>
<div class="dateNumbers {{month.year + '-' + month.monthName + '-' + 'end'}}"></div>
<div class="dateNumbers {{month.year + '-' + month.monthName + '-' + 'end'}}"></div>

{{month.year + '-' + month.monthName + '-' + 'end'}}某个月份在哪里2018-August-end

我想选择仅包含2018-August-end我存储到变量中的 div，所以我尝试了这样的操作

var dataName = `2018-August-end`; // this is dynamic but for this example I have it static

document.querySelectorAll( "." + dataName);

但我收到这个错误

未捕获的 DOMException：无法在“文档”上执行“querySelectorAll”：“.2018-August-end”不是有效的选择器。在 :1:10

这是为什么 ？

谢谢

我正在从无头 CMS 获取内容，并以字符串形式获取内容，例如：

<div>
  <p>1st p tag</p>
  <p>2nd p tag</p>
</div>

我如何选择第一个 p 标签，以便我可以有这样的东西：

const firstPtagContent = "1st p tag"