querySelector,querySelectorAll

//返回第一个元素相匹配的CSS选择器{expr}.
// Returns first element that matches CSS selector {expr}.
// 查询可以被限制在{container}的后代
// Querying can optionally be restricted to {container}’s descendants
function $(expr, container) {
  return typeof expr === "string"? (container || document).querySelector(expr) : expr || null;
}

// 返回所有匹配的元素的CSS选择器作为数组.
// Returns all elements that match CSS selector {expr} as an array.
// 查询可以被限制在{container}的后代
// Querying can optionally be restricted to {container}’s descendants
function $$(expr, container) {
  return [].slice.call((container || document).querySelectorAll(expr));
}

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>querySelector</title> <style type="text/css"> .red{width: 200px;height: 200px;background: red;opacity: .5;} </style> </head> <body> <button>点我</button> <div></div> </body> <script type="text/javascript"> //返回第一个元素相匹配的CSS选择器{expr}. // Returns first element that matches CSS selector {expr}. // 查询可以被限制在{container}的后代 // Querying can optionally be restricted to {container}’s descendants function $(expr, container) { return typeof expr === "string"? (container || document).querySelector(expr) : expr || null; } // 返回所有匹配的元素的CSS选择器作为数组. // Returns all elements that match CSS selector {expr} as an array. // 查询可以被限制在{container}的后代 // Querying can optionally be restricted to {container}’s descendants function $$(expr, container) { return [].slice.call((container || document).querySelectorAll(expr)); } $('button').onclick = function(){ $('div').classList.add('red'); } </script> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » querySelector,querySelectorAll