如何利用querySelector来查找html元素

文档对象模型Document引用的querySelector()方法，会返回文档中与指定选择器或选择器组匹配的第一个Element对象。如果找不到匹配项，则返回null。querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。

语法

element = document.querySelector(selectors);

示例

通过类别查找

element = document.querySelector("p");

通过类名查找

element = document.querySelector(".box");

通过id查找

element = document.querySelector("#nav");

还可以通过其他属性选择元素，例如targetor value

// return the first element with target="_blank"
document.querySelector("[target=_blank]");

// return the first element with value="red"
document.querySelector("[value=red]");

在querySelector中使用变量

value="joe_list";
document.querySelector("."+value);

value="joe_global";
document.querySelector("[data-current="+value+"]");