Question

如果没有querySelector()属性，如何使用input方法获得概述的class：

document.querySelector('.red').style.outline = '1px solid red';

<div>
  <p>
    <span></span>
    <span></span>
    <input>
  </p>
  <p>
    <span></span>
    <span></span>
    <input>
  </p>
  <span></span>
  <input class="red">
  <span></span>
</div>

Answer 1

它是input内部唯一的<div>，因此您可以使用div > input：

document.querySelector('div > input').style.outline = '1px solid red';

<div>
  <p>
    <span></span>
    <span></span>
    <input>
  </p>
  <p>
    <span></span>
    <span></span>
    <input>
  </p>
  <span></span>
  <input>
  <span></span>
</div>

Answer 2

如果要获取最后一个，请使用querySelectorAll并获取/影响最后一个。在标记更改的情况下，这种方法不那么脆弱。

var inputs = document.querySelectorAll('div input'); // whatever is specific enough

inputs[ inputs.length -1 ].style.outline = '1px solid red';

/* not this selector! see P.S. */
input:last-of-type { background: lightgrey; border: 1px solid grey; }

<div>
  <p>
    <span></span>
    <span></span>
    <input>
  </p>
  <p>
    <span></span>
    <span></span>
    <input>
  </p>
  <span></span>
  <input>
  <span></span>
</div>

P.S。您可能会认为可以使用input:last-of-type，但不能！ last-of-type的范围很广，在这种情况下，匹配每个输入，如您从上面的CSS中所见。

Answer 3

可以使用element> element选择器用于选择具有特定父元素的元素。基于此链接：

https://www.w3schools.com/cssref/sel_element_gt.asp

例如：

document.querySelector('div > input').style.outline = '1px solid red';

选择所有输入元素，其中父元素是元素

Answer 4

如果要将样式应用于HTML中的所有输入，请使用以下内容

window.onload = function(){
  var inputElems = document.querySelectorAll('input');
  var index
  for ( index = 0; index < inputElems.length; index++) {
    inputElems[index].style.outline = '1px solid red';

  }
 }

您还可以通过在按钮点击时调用方法来应用样式

function myFunction() {
    var inputElems = document.querySelectorAll('input');
    var index
    for ( index = 0; index < inputElems.length; index++) {
    inputElems[index].style.outline = '1px solid red';
    }
 }

<button onclick="myFunction()">Apply Outline</button>

您将如何使用querySelector获取此元素？

4 个答案: