标签: selectors-api

我有一个要求,我必须.div在容器中拾取最后一个并应用一些业务逻辑.选择最后一个.div必须是动态的,因为用户可以选择添加/删除.div元素.

最初我尝试过,querySelectorAll但似乎没有用.所以我决定改变它,getElementsByClassName并且令人惊讶的是它使用了相同的逻辑.有人可以帮助我解释为什么remove_div在第二个(remove_div_2)的情况下不起作用的原因？

注意:我不是在寻找问题的修复/解决方案,因为我已经开始使用第二个选项.我只想知道选项的原因querySelectorAll不起作用.

以下是我的代码:

HTML:

<div id='container'>
    <div id='div1' class='div'>This is Div 1</div>
    <div id='div2' class='div'>This is Div 2</div>
    <div id='div3' class='div'>This is Div 3</div>
</div>
<button type='button' id='append_div'>Append Div</button>
<button type='button' id='remove_div'>Remove Div</button>
<button type='button' id='remove_div_2'>Remove Div 2</button>

JavaScript的:

window.onload = function () {
    var elementToStyle = document.querySelectorAll("#container .div");
    elementToStyle[elementToStyle.length - 1].classList.add('red');

    document.getElementById('append_div').onclick = function () {
       var divToInsert = document.createElement('div');
       divToInsert.id = …

我有这段代码:

var requiredFields = el.querySelectorAll("input[required]:not(:disabled):not([readonly]):not([type=hidden])");

如果我想添加textarea和select查询我最终得到这个:

var requiredFields = el.querySelectorAll("input[required]:not(:disabled):not([readonly]):not([type=hidden])"+  
",select[required]:not(:disabled):not([readonly]):not([type=hidden])"+
",textarea[required]:not(:disabled):not([readonly]):not([type=hidden])");

我的感觉说这可能会更好......但是怎么样？

额外奖励:请为querySelectorAll函数提供一个很好的资源.

我正在尝试使用querySelectorAll获取一个wikipedia表中每行的第一个链接的列表,但我不确定为什么:first-child选择器不起作用.我知道还有其他方法可以做到但我想知道querySelectorAll函数是否有解决这个特定问题的方法.

看到我在html下面的尝试:

<table class='wikitable'>
  <tr>
    <td>
      <a href="" title="">John doe</a>
    </td>
    <td>
      <a href="" title="">other link</a>
    </td>
    </tr>

  <tr>
    <td>
      <a href="" title="">Mary Jane</a>
    </td>
    <td>
      <a href="" title="">another link</a>
    </td>
  </tr>
</table>

我的代码:

let list = document.querySelectorAll(('.wikitable tr:first-child td:first-child a')); 

前面的代码只是返回一个带有一个元素的节点:

<a href="" title="">John doe</a>

而是一个清单:

<a href="" title="">John doe</a>
<a href="" title="">Mary Jane</a>

使用本文中的代码,我已成功添加querySelectorAll到documentIE7中.

但我需要在元素上使用它,而不是document像这样:

var containers = document.querySelectorAll('.container');   // Works
for (var i=0; i<=containers.length; i++) {
    var container = containers[i];
    container.querySelectorAll('a[data-type="people"]');    // Fails
    // ...
}

有没有办法querySelectorAll在IE7中添加元素而不仅仅是document？

我正在使用EPUB.JS,它使用以下代码从ePub文件中获取一些信息:

var navEl = navHtml.querySelector('nav[*|type="toc"]')

这行代码在IE10中失败,因为querySelector返回null.我以前从未在格式中看过属性选择器[*|attr="val"],但我认为他们试图说的是,"选择所有具有任何属性的导航元素或名为'type'且属性值为'toc'的属性."

我找不到关于这个star-pipe语法的任何信息,但我认为它是某种逻辑OR命令,可以在Webkit/Mozilla中运行,但不能在IE中运行.

将该行改为:

var navEl = navHtml.querySelector('nav')

但是我仍然希望完全理解为什么当我觉得它没有意义时他们可能选择了其他语法,以防它有一个可能导致其他地方错误的实际目的.

对此有任何解释,*|...甚至是必要的吗？

我似乎无法找到在Nightwatch中迭代nodeList的innerHTML的正确语法.我正在尝试返回页面正文内容中包含的每个"a"标记的网址,但我找不到在Nightwatch中访问querySelectorAll命令结果的方法.

browser.execute(function() {
    return document.querySelectorAll("div.field-item.even a");
},
function(tags){
    console.log(tags.value);
    console.log(tags.value[9]);
})

我正在测试的页面上有10个链接.查询选择器似乎正在检索它们,因为console.log(tags.value)打印以下内容:

[ { ELEMENT: '1' },
  { ELEMENT: '2' },
  { ELEMENT: '3' },
  { ELEMENT: '4' },
  { ELEMENT: '5' },
  { ELEMENT: '6' },
  { ELEMENT: '7' },
  { ELEMENT: '8' },
  { ELEMENT: '9' },
  { ELEMENT: '10' } ]

和console.log(tags.value [9])打印:

  { ELEMENT: '10' }

但是,我找不到从这些结果中检索链接的方法.将.innerHTML附加到任何这些变量都会返回'undefined'.有没有办法让我遍历querySelectorAll结果并检索其中的url？

编辑:如果我使用以下代码,似乎我可以得到相同的结果:

browser.elements("css selector", "div.field-item.even a", function(tags) {
    console.log(tags.value);
    console.log(tags.value[9]);
})

我原本以为我正在使用nodelist,但我认为我实际上是根据.elements命令的文档返回了一个WebElement JSON对象.

但是,我仍然无法访问内部文本.有任何想法吗？

我正在使用这样的命令下载网站:

$response = Invoke-WebRequest 'http://stackoverflow.com'

是否可以使用querySelector或querySelectorAll来查找某些元素？我知道我可以使用$response.ParsedHtml.all和过滤那些,但我想使用更复杂的查询,我没有看到任何内容$response.ParsedHtml.documentElement.

我正在使用powershell 3 RC.

假设我们有这样的 HTML 结构：

<div id='test-div'>
    <div class='random-class-1'>
        <div class='useless-element-1'>
        </div>
        <div class='useless-element-2'>
        </div>
        <p>Just a paragraph, and useless</p>
    </div>
    <div class='random-class-2'>
        <div class='useless-element-3'>
        </div>
        <div class='useless-element-4'>
        </div>
        <div class='useless-element-5'>
        </div>
    </div>
</div>

我需要选择第一个 DIV 中的所有子级“DIV 元素”（不是孙子级）（在本例中为 id='test-div'），不是从文档而是从元素 (div) 本身。

所以，我不想使用下面的“查询”，因为我已经选择了元素 DIV [object HTMLDivElement]：

// I don't want to use this query
var children = document.querySelectorAll("div > div");

只是一个例子来实现这一点（https://jsfiddle.net/t4gxt65k/）：

// I already have selected DIV element 
var el = document.getElementById("test-div")
// OR var el = document.querySelectorAll("#test-div");

var children = …

我的问题似乎与此问题非常相似：Document.querySelector 返回 null，直到使用 DevTools 检查元素，但是存在一些非常令人困惑的显着差异，并且表明问题可能有所不同。

我正在尝试编写代码来替换 Google Chat 上输入框中的文本，因此我使用 document.querySelector。我需要的输入字段实际上是一个divwith contenteditable=true，所以我有以下代码：

document.querySelector('div[contenteditable]');

此代码最初在浏览器控制台中返回 null，直到在检查器中单击该元素（单击检查器中的元素并使用检查器光标产生相同的结果）。该元素显然存在，因为我可以在其中键入文本，并且检查器显示它存在于我正在查询的所有属性中（甚至在检查器中单击它之前），尽管查询返回 null。使用检查器单击元素将立即修复此问题。

另外（我不确定这是否相关，但似乎它可能暗示了问题的本质），即使单击检查器中的元素以使查询返回一个元素，该查询的结果不能存储在变量中。

我很困惑为什么$1，firstBB调用querySelector('.aa .bb')应该在元素下执行#root。

const $1 = document.querySelector('#root').querySelector('.aa .bb');
const $2 = document.querySelector('#root').querySelector('.aa').querySelector('.bb');

document.querySelector('#result').innerHTML = `$1 is ${$1.id}; $2 is ${$2.id}`

<div class="aa" id="root">
  <div class="bb" id="firstBB">xxx</div>
  <div class="aa">
    <div class="bb" id="secondBB">xxx</div>
  </div>
</div>
<div>Result: <span id="result"></span></div>

Chrome版本：116.0.5845.188

这是 的正确行为吗querySelector？