document.querySelector()方法
参考链接：
Document.querySelectorAll() - Web APIs | MDN
HTML5中类jQuery选择器querySelector的高级使用 document.querySelectorAll.bind(document); - surfaces - 博客园
HTML DOM querySelectorAll() 方法 | 菜鸟教程
document.querySelectorAll遍历&函数借用 - 简书
1 常用的三种获取元素的js方式
1 document.getElementById("");2 document.getElementsByClassName();3 document.getElementsByTagName();var doc=document;var box=doc.getElementById("box");var li=box.getElementsByTagName("li");var surfaces=box.getElementsByClassName("surfaces");querySelector()可以直接加点击事件，而querySelectorAll()不能直接加点击事件
2 querySelector()
var node = document.querySelector("#lover"); // 获取文档中的第一个id=lover的元素
var node = document.querySelector(".lover"); // 获取文档中的第一个class="lover"的元素
var node = document.querySelector("p.lover"); // 获取class=“lover” 的第一个p元素
var node = document.querySelector("a[target]");// 获取第一个带target属性的a元素
var element = document.querySelector('.foo,.bar');//返回带有foo或者bar样式类的首个元素
document.querySelector(\"body\").style=""; // 移除style属性
document.querySelector("h2,h3").style.backgroundColor = "blue";//为文档的第一个h2元素添加背景颜色，但是，如果文档中<h3>元素位于<h2>元素之前，<h3>元素将会被设置指定的背景颜色，总结，多元素选择时，哪个先匹配就是谁咯，只有一个被选中。
querySelector() 方法仅仅返回匹配指定选择器的第一个元素。
3 querySelectorAll
elementList = document.querySelectorAll(selectors);
- elementList 是一个静态的 NodeList 类型的对象。
- selectors 是一个由逗号连接的包含一个或多个 CSS 选择器的字符串。
查找文档中共包含 "target" 属性的 <a> 标签，并为其设置边框:
var x = document.querySelectorAll("a[target]");var i;for (i = 0; i < x.length; i++) {x[i].style.border = "10px solid red";}-------------------------------------------
let t0 = window.performance.now();
let li = document.querySelectorAll('li');
console.log("li 的数量", li.length);
for (let i = 0; i < li.length; i++) {li[i].textContent = i;
}
let t1 = window.performance.now();
console.log("耗时" + (t1 - t0) + "毫秒");- 当页面中出现多个相同class标签(或者多个相同标签(比如多个div))时，如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。
- 该方法返回所有满足条件的元素，结果是个nodeList集合。查找规则与前面所述一样。 ----> querySelectorAll 得到一个伪数组 DOM。
- ParentNode.querySelectorAll()的结果是NodeList数组，但是又不是一般的js数组（Array），所以也不能直接调用Array的方法。
demo
----------------------------------------------------------------------------------------------------------------------
<div id="box">
<ul>
<li data-href='http://www.qq.com'>tagname 111</li>
<liclass="surfaces">这是clase 222</li>
<liclass="surfaces">这是class333</li>
<liclass="surfaces"data-href='http://www.baidu.com'>这是class444</li>
</ul>
</div><br>
document.getElementById("box").addEventListener("click",function(){
varattr=document.querySelectorAll('[data-href]');
console.log(attr);
},!1);------------------------------------------------------------------------------------------------------------
<input type="checkbox" name="gender" value="male" checked> <input type="checkbox" name="gender" value="female"><div lang="en"><q>This English quote has a <q>nested</q> quote inside.</q></div> <div lang="fr"><q>This French quote has a <q>nested</q> quote inside.</q></div> <div lang="de"><q>This German quote has a <q>nested</q> quote inside.</q></div><input type="text" placeholder="我是占位符"> <input type="text" placeholder="我是占位符" value="我的 value 遮盖了占位符">let target = document.querySelector('input[type="checkbox"]:checked'); console.log('使用 querySelector 查找 ', target)let fr = document.querySelector('div:lang(fr)'); console.log('使用 querySelector 查找 ', fr);let pl = document.querySelector('input:placeholder-shown'); console.log('使用 querySelector 查找 ', pl);
document.querySelector.bind和document.querySelectorAll.bind
<div id="box">
<ul>
<li >tagname 111</li>
<liclass="surfaces">这是clase 222</li>
<liclass="surfaces">这是class333</li>
<liclass="surfaces">这是class444</li>
</ul>
</div>
--------------------------------------------------------------------------
varquery_id=query('#box');//dom id
varquery_class=query('.surfaces');// dom class
varquery_tagname=query('li')//dom 标签
console.log('query'+query_id.innerHTML);//
console.log('query'+query_class.innerHTML);第一个 222
console.log('query'+query_tagname.innerHTML);第一个 222
--------------------------------------------------------------------------1 var query = document.querySelector.bind(document); //单个的
varquery_id=query('#box');//dom id
varquery_class=query('.surfaces');// dom class
varquery_tagname=query('li')//dom 标签
query_id.addEventListener('click',function(){
console.log('click_query_id'+this.innerHTML);//'click surfaces 2222
});
query_class.addEventListener('click',function(){
var e=e||window.event;
console.log('click_query_class'+this.innerHTML); //'click surfaces 2222
e.stopPropagation();
});
query_tagname.addEventListener('click',function(e){
vare=e||window.event;
console.log('click_query_tagname'+this.innerHTML);//'click surfaces 2222
e.stopPropagation();
});
--------------------------------------------------------------------------2 var $=queryAll = document.querySelectorAll.bind(document); //集合
var $id=$('#box'); //id var $class=$('.lione'); //class var $tagname=$('li'); //tagName console.log('queryAll'+$id[0].innerHTML); console.log('queryAll'+$class[0].innerHTML); //222 console.log('queryAll'+$tagname[0].innerHTML); //111
$id[0].addEventListener('click',function(){
console.log('click_queryAll'+this.innerHTML);//'click surfaces 2222
});
$class[0].addEventListener('click',function(e){
console.log('click_$class'+this.innerHTML); //'click surfaces 2222
e.stopPropagation();
});
$tagname[0].addEventListener('click',function(e){
console.log('click_$tagname'+this.innerHTML);//'click surfaces 2222
e.stopPropagation();
});
--------------------------------------------------------------------------这种方式性能不会太好，不推荐 var fromId = document.getElementById.bind(document); var fromClass = document.getElementsByClassName.bind(document); var fromTag = document.getElementsByTagName.bind(document);var fromId_box=fromId('box'); var fromClass_surfaces=fromClass('surfaces'); var fromTag_li=fromTag('li'); console.log('fromId'+fromId_box.innerHTML); console.log('fromClass'+fromClass_surfaces[0].innerHTML); //222 console.log('fromTag'+fromTag_li[0].innerHTML);//111
--------------------------------------------------------------------------基于 querySelectorAll的事件绑定，从 Array.prototype中剽窃了 forEach 方法来完成遍历
Array.prototype.forEach.call(document.querySelectorAll('.surfaces'), function(el){
el.addEventListener('click', someFunction);
});//通过 bind() 遍历DOM节点的函数。。
var unboundForEach = Array.prototype.forEach,
forEach = Function.prototype.call.bind(unboundForEach);
forEach(document.querySelectorAll('.surfaces'), function (el) {
el.addEventListener('click', someFunction);
});
--------------------------------------------------------------------------关于bind()的用法， bind()与call(),apply()用法 类似，都是改变当前的this指针。这里简单阐述做个示例；
document.getElementById("box").addEventListener("click",function(){
varself=this;//缓存 this 对象
setTimeout(function(){
self.style.borderColor='red';
},500)
},false);
document.getElementById("box").addEventListener("click",function(){
setTimeout(function(){
this.style.borderColor='red';
}.bind(this), 500);//通过bind 传入 this
},false);
--------------------------------------------------------------------------var $ = document.querySelectorAll.bind(document); Element.prototype.on = Element.prototype.addEventListener;$('#somelink')[0].on('touchstart', handleTouch);
//我们将绑定事件在 完善一下
Element.prototype.on = Element.prototype.addEventListener;
queryAll('#box')[0].on('click',function(){
setTimeout(function(){
this.style.borderColor='blue';
console.log('on事件 边框变蓝色');
}.bind(this), 500);//通过bind 传入 this
//on 类似 jquery
//document.getElementById("box").on("click",function(){
});
document.querySelectorAll遍历&函数借用
正确的使用方式
借助Array的forEach方法进行遍历，对每个Element进行事件绑定
Array方法的使用
这里以forEach函数为例
- 正常方式
[1,2,3].forEach(function(item,index,input){console.log(item); });
- 其他函数借用
Array.prototype.forEach.call([1,2,3],function(item,index,input){console.log(item); });或者
[].forEach.call([1,2,3],function(item,index,input){console.log(item); });querySelectorAll的forEach遍历
[].forEach.call(color_btn,function(item,index,input){item.addEventListener('click',()=>(alert("text"))); });或者是
Array.prototype.forEach.call(color_btn,function(item,index,input){item.addEventListener('click',function(){alert("text");}); });
document.querySelector()方法相关推荐
- document.querySelector和querySelectorAll方法
querySelector和querySelectorAll是W3C提供的 新的查询接口,其主要特点如下: 1.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null. 2. ...
- javascript之 原生document.querySelector和querySelectorAll方法
querySelector和querySelectorAll是W3C提供的 新的查询接口,其主要特点如下: 1.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null. 2. ...
- [js] 写一个 document.querySelector 的逆方法
[js] 写一个 document.querySelector 的逆方法 document.queryNode = function(node){if(node.id){return '#'+ nod ...
- win8:querySelector()方法
querySelector()方法接受一个CSS查询并返回匹配该模式的第一个子孙元素,如果没有匹配的元素则返回null.请看下面例子: //获取body元素 var body = document.q ...
- 重学前端第一阶段完 钢琴项目(document.querySelector js改变css样式的3种方式 思路 成品)
菜鸟学完之后,总是感觉学了也还是不会,主要就是因为没有实践,不知道自己到底哪里有问题!虽然说我还没复习完,前端很大一部分都处于模糊阶段,但是感觉还是应该先尽力做一个简单的东西,把这几天学的都用进去,遇 ...
- .NET 调用JS：WebBrowser.Document.InvokeScript 方法抛出“指定的转换无效”异常的原因
.NET 调用JS:WebBrowser.Document.InvokeScript 方法抛出"指定的转换无效"异常的原因 参考文章: (1).NET 调用JS:WebBrowse ...
- document.execCommand()方法处理Html数据
document.execCommand()方法处理Html数据时常用语法格式如下: document.execCommand(sCommand[,交互方式, 动态参数]) 其中:sCommand为指 ...
- document.getElementsByTagName()方法的返回值
document.getelementsbytagname()方法的返回值 /* document.getelementsbytagname()方法的返回值中取出某个特定的元素.一开始以为它的返回值是 ...
- 关于使用jQuery时$(document).ready()方法失效问题
关于使用jQuery时$(document).ready()方法失效问题 <script type="text/javascript">//页面加载后自动执行,不需要按 ...
- java中find方法_Java Document.find方法代码示例
import com.allanbank.mongodb.bson.Document; //导入方法依赖的package包/类 /** * Extract the number of seconds ...
最新文章
- bzoj1997 [HNOI2010]平面图判定Plana
- 【MATLAB统计分析与应用100】案例001：matlab使用Importdata函数导入文本txt数据
- POJ 1852 Ants 分析
- python多版本控制操作方法
- 怎么打开Windows Server 2008 图片预览的功能
- MySQL使用Navicat导出Excel时数字展示会变成科学计数法
- top10开源docker开发工具
- 中国电信：5G 手机可实现不换卡号；新西兰否认禁用华为；Visual Studio 2019 正式发布！| 极客头条...
- docker常用操作(七)docker安装gitlab
- 【机器学习】图解机器学习神器：Scikit-Learn
- 5G成鸡肋？运营商可能冷处理，中国移动则加快建设4G的FDD900
- 递归函数的例子python卖鸭子_递归算法实现卖鸭子
- Typora远程解绑设备的方法
- 【扫一扫二维码，传智大礼包带回家】
- 烤仔的朋友们丨政策暖风吹来，国内公链们的春天来了？
- 数据库-SQL-相关使用
- 2610_lab2 命令行与快捷键
- Surface reconstruction from unorganized points
- nagios配置示例
- Hibernate错误：java.lang.NoClassDefFoundError: Could not initialize class com.zhbit.util.HibernateUtils