一行代码告别document.getElementById

下面是“一行代码告别document.getElementById”的完整攻略：

1. document.querySelector方法说明

document.querySelector 方法用于获取文档中匹配指定选择器的第一个元素。这个方法返回的是一个元素节点对象，如果没有匹配到元素则返回null。

语法:

element = document.querySelector(selectors);

参数：

• selectors： DOM字符串，包含一个或多个CSS选择器，用逗号分隔。

2. 示例一：替代 document.getElementById

原来我们获取id为"example"的元素节点对象时需要使用 document.getElementById:

var element = document.getElementById('example');

但现在我们可以用一行代码替代上面的语句。

var element = document.querySelector('#example');

其中，# 符号后面紧跟元素id名即可。

3. 示例二：样式操作

下面是一个示例，当鼠标移到页面上指定元素上时，改变元素的颜色。

文档：

<div id="example">一个没被选中的 div 元素</div>

JavaScript:

document.querySelector('#example').addEventListener('mouseover', function() {
  this.style.color = 'red';
});

我们使用querySelector方法获取ID为example的元素，然后 添加 mouseover 事件监听器，并在回调函数中改变元素的颜色。

这个实现比使用 document.getElementById 更加简洁，且因为只需使用原生 JavaScript 方法，所以他会比 Jquery 的 $() 方法更加高效。