document.querySelector的名称为css选择器？

Question

我知道document.querySelector（'..'）将css选择器作为

之类的参数

  

a.className，＃idName等....

但我不知道如何使用名字。 我看到了一个例子，但无法理解。

document.querySelector('[name="billContact.email"]')

Answer 1

这意味着“一切都有name='billContact.email'”

P.S看this了解更多信息

Answer 2

您可以使用 document.querySelectorAll 来查找使用属性的元素。

document.querySelectorAll('[name="test"]');

Answer 3

TL; DR

[ HTML的节点属性 =" 值 "]

属性选择器

HTML-Element-Attributes id和class确实有自己的css-selecoring：

• #id
• .class

其他属性确实需要其他东西。就像“属性选择器”一样。

例如，您有以下HTML代码：

<a href="#top">Go to top!</a>

使用Attribut选择器，您可以获取此元素，并具有以下所有可能性：

[href] /*looking only for the attribut. No matter what value is inside*/
[href="#top"] /*the attributes value must be "#top"*/
a[href="#top"] /*the same as the example above but in this case href needs to be a attribute of "a"-tag*/

要解决一个元素还有一些非常酷的可能性。有关更多信息，请参阅MDN Attribute selectors

querySelector / querySelectorAll

  

querySelector为您提供第一个等于传递的元素   CSS-选择器。

好吧，我想通过示例而不是文本墙可以更容易理解。让我们开始吧：

对于这个例子，我将使用这个HTML-snipped：

<div class="container">
    <div data-id='cat'>
        <button name='cat' value='miau'>Cat</button>
    </div>
    <div data-id='dog'>
        <button name='dog' value='not miau'>Dog</button>
    </div>
</div>

当你想到如何使用querySelector的名字找到一个元素时，我将从那开始：

有两个名称为attribut的元素。两者都是按钮，但名称不同。

要获取具有name属性的第一个元素，请使用：

document.querySelector('[name]') //get button cat because it's the first one in the dom (in that example)

要让他们全部试试这个：

document.querySelectorAll('[name]') //get both buttons (cat, dog)

当您知道要查找的名称时

document.querySelector('[name="cat"]') //get the first element where name equals 'cat'

与data，class或id等其他属性相同

document.querySelector('[data-id="cat"]') //get div

您还可以一次执行更多dom步骤：

document.querySelector('[data-id="cat"] button') //gets the first button inside "cat-div"

文档

有关更多信息，请参阅MDN和Microsoft。 您可能也对CSS-Selectors感兴趣。

Answer 4

对于document.querySelector（＆＃39; [name =＆＃34; billContact.email＆＃34;]＆＃39;）
您需要的输入标签如下;

您可以尝试（＆＃39;输入[name =＆＃34; billContact.email＆＃34;]＆＃39;）：

function checkForm(){
 var form = document.forms[0];
 var selectElement = form.querySelector('input[name="billContact.email"]');
 var selectedValue = selectElement.value;

}

下次咨询https://developer.mozilla.org

 这是我的小提琴http://jsfiddle.net/2ZL4G/167/