JS原生DOM元素选择器

网页三兄弟

Document对象详细文档mozilla版
Document文档w3school版（）这个比较好懂，毕竟老外的翻译很拗口，有个问题是内容不是很全

DOM选择器有几下几种：

  • document.querySelector(“.aa”) 返回 指定CSS选择器的第一个元素 介绍
  • dcument.querySelectorAll(“.aa”) 返回 指定CSS选择器的所有的元素 介绍
  • document.getElementById(“id”) 返回 指定ID 的第一个对象的元素 介绍
  • document.getElementsByName(“username”) 返回 name属性 为指定值的所有元素 介绍
  • document.getElementsByTagName(“input”) 返回 指定标签名 的对象集合 介绍
  • document.getElementsByClassName(“.aa”) 返回 所有指定类名 的元素集合 介绍

getElementById、getElementsByName、getElementsByTagName、getElementsByClassName 是基于dom节点来选择元素，
querySelector、querySelectorAll 是基于css来选择元素，新加的方法，以前没有

再有一个很大的区别，querySelector、querySelectorAll不是实时的，其他的都是实时的
在性能上，Chrome 浏览器下 getElementBy 方法的执行速度基本都高于 querySelector

querySelector(selectors)

返回满足条件的第一个元素，比如 3个class一样的div,则只返回第一个
参数: 包含一个或多个要匹配的选择器的 DOM字符串DOMString。 该字符串必须是有效的CSS选择器字符串；如果不是，则引发SYNTAX_ERR异常。

1
2
3
<li class="a"></li>
<h2>A h2 element</h2>
<h3>A h3 element</h3>
1
2
3
4
5
6
document.querySelector("p");
document.querySelector("p.example");
document.querySelector("#demo");
document.querySelector(".example");
document.querySelector("a[条件]"); //如：document.querySelector("a[href='/about']");
document.querySelector("h2, h3").style.backgroundColor = "red";

querySelectorAll(selectors)

selectors 是一个由逗号连接的包含一个或多个 CSS 选择器的字符串

1
2
3
<li class="a"></li>
<h2>A h2 element</h2>
<h3>A h3 element</h3>
1
2
3
4
5
6
document.querySelector("p");
document.querySelector("p.example");
document.querySelector("#demo");
document.querySelector(".example");
document.querySelector("a[target]");
document.querySelector("h2, h3").style.backgroundColor = "red";

对比

下面的结果都一样，获取页面属性ID为test的元素：

1
2
3
4
5
6
document.getElementById('idName');
document.getElementById("test");
//or
document.querySelector("#test");
document.querySelectorAll("#test")[0];

获取页面class属性为：container 的元素:

1
2
3
4
5
6
document.getElementsByClassName('container')
//or
document.querySelector('html .container')
//or
document.querySelectorAll('html .container')