queryselector | 易学教程

getElementById和querySelector方法的区别

阅读更多关于 getElementById和querySelector方法的区别

习惯了用jQ查找元素，有时候我们不妨试试js原生的DOM选择符，getElementById()、getElementsByTagName()、querySelector()、querySelectorAll()。说不定一不小心就发现彩蛋了。那么我们来说说上面那几个方法。 "querySelector 属于 W3C 中的 Selectors API 规范。而 getElementsBy 系列则属于 W3C 的 DOM 规范" ---------------请忽略上面那句话---------------- 还不如来点实际的。 1、区别 getXXXByXXX 获取的是动态集合，querySelector获取的是静态集合。简单的说就是，动态就是选出的元素会随文档改变，静态的不会，取出来之后就和文档的改变无关了。先看看一个例子： <ul> <li>aaa</li> <li>ddd</li> <li>ccc</li> </ul> //demo1 var ul = document.getElementsByTagName('ul')[0], lis = ul.getElementsByTagName("li"); for(var i = 0; i < lis.length ; i++){ ul.appendChild(document.createElement("li")); }

querySelector()方法

阅读更多关于 querySelector()方法

标签: querySelector JavaScrit 顶[10] 分享到发表评论(0) 编辑词条 querySelector()方法接受一个CSS查询并返回匹配该模式的第一个子孙元素，如果没有匹配的元素则返回null。请看下面例子： //获取body元素 var body = document.querySelector("body"); //获取ID为myDiv的元素 var myDiv = document.querySelector("#myDiv"); //获取第一个包含class值为selected的元素 var selected = document.querySelector(".selected"); //获取第一个包含class值为button的图像元素 var img = document.body.querySelector("img.button"); 当querySelector()方法应用Document类型上时，它会尝试从文档元素开始匹配模式，如果应用于Element类型，查询则只会尝试从该元素的子孙节点中寻找匹配。 CSS查询可以根据需要复杂化或者简单化。如果查询中有语法错误或者有不支持的选择器，那么querySelector()会抛出一个错误。 querySelector()方法还接可选的第二个参数，它是一个命名空间解析器

高级选择器querySelector和querySelectorAll

阅读更多关于高级选择器querySelector和querySelectorAll

/*--> */ /*--> */ Javascript新提供的querySelector和querySelectorAll方法，是仿照CSS选择器功能编写的 querySelector 功能：该方法返回满足条件的单个元素。按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找，返回第一个满足条件的元素，如例： <div> <div> <div> <p>第三层</p> </div> <p>第二层</p> </div> <p>第一层</p> </div> <script type="text/javascript"> var P = document.querySelector('p'); //结果：<p>第三层</p> </script> querySelectorAll 功能：该方法返回所有满足条件的元素，结果是节点集合，查找规则与querySelector方法一样，如例： <div> <div> <div> <p>第三层</p> </div> <p>第二层</p> </div> <p>第一层</p> </div> <script type="text/javascript"> var P = document.querySelectorAll('p'); //选中顺序：<p>第三层</p> <p>第二层</p> <p>第一层</p> </script>

javaScript中的querySelector和querySelectorAll

阅读更多关于 javaScript中的querySelector和querySelectorAll

querySelector和querySelectorAll是W3C提供的新的查询接口，其主要特点如下： 1、querySelector只返回匹配的第一个元素，如果没有匹配项，返回null。 2、querySelectorAll返回匹配的元素集合，如果没有匹配项，返回空的nodelist(节点数组)。 3、返回的结果是静态的，之后对document结构的改变不会影响到之前取到的结果。这两个方法都可以接受三种类型的参数：id(#)，class(.)，标签，很像jquery的选择器。 var obj = document.querySelector("#id"); var obj = document.querySelector(".classname"); var obj = document.querySelector("div"); var el = document.body.querySelector("style[type='text/css'], style:not([type])"); var elements = document.querySelectorAll("#score>tbody>tr>td:nth-of-type(2)"); var elements = document.querySelectorAll("#id1, #id2, .class1,

379 vue的异步 DOM 更新

阅读更多关于 379 vue的异步 DOM 更新

1、Vue 中采用了异步DOM更新的机制 2、如何更新页面数据发生改变后, vue 没有立即将数据的改变更新到视图中, 而是等到数据不再变化的时候一次性的将数据的改变更新到视图中 // 1. 验证了 for (let i = 0; i < 1000; i++) { this.count++ } 3、为什么是异步 DOM 更新性能的考虑因为对于前端来说, 修改数据进行 DOM 操作是常有的事情, 如果频繁操作 DOM, 会严重影响页面的加载性能 DOM 操作这是前端的性能的瓶颈比如 : for (let i = 1; i < 10000; i++>) ，如果同步，就要重新渲染 1000 次 4、验证异步 DOM 更新 // 2. 直接获取data 中的值, 会立马获取成功 console.log(this.count) this.count++ console.log(this.count) // 但是通过dom来获取count的值,因为DOM更新这个count值是异步的,是需要一点时间的 console.log(document.querySelector('h1').innerText) // 0 this.count = 100 console.log(document.querySelector('h1').innerText) // 0 5、需求 :

html2canvas 采坑

阅读更多关于 html2canvas 采坑

1.需要将要转换成图片的区域div放置在body中，且需要display为block； 2.图片跨域的问题：将icon转换为base64 3.截图不全：新版本插件不稳定，建议 <script src="https://cdn.bootcss.com/html2canvas/0.5.0-alpha1/html2canvas.min.js"></script> 多尝试几个版本 document.querySelector("#slot").innerHTML = dom; document.querySelector("#share-module").style.display = "flex"; setTimeout(function(){ html2canvas(document.querySelector("#html2canvas"),{useCORS:true}).then(canvas => { document.querySelector("#shareImg").src=canvas.toDataURL(); document.querySelector("#slot").innerHTML = ""; }); },10); 此处的dom为要截图的区域div；来源： https://www.cnblogs.com/changyaoself/p/12449745

前端五子棋第二版

阅读更多关于前端五子棋第二版

试玩链接：五子棋效果图如下：与上个版本相比，主要实现了两个功能：一个是处理的音效消失的bug，另一个是新增了人机模式。先说说背景音效的问题，其实解决方案很简单，就是把中文的MP3音乐名改成英文名字即可。直接上代码： HTML代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>五子棋</title> <link rel="stylesheet" href="css/gobang.css"> </head> <body> <a href="javascript:void(0)" id="computerPlay">人机对战</a> <a href="" id="newGame">重开一局</a> <a href="javascript:void(0)" id="personPlay">双人对战</a> <canvas id="canvas" width="480" height="480"> </canvas> <audio class="audio"> <source src="cbgm.mp3" type="audio/mp3" />

dom事件

阅读更多关于 dom事件

一：注册事件（绑定事件）注册事件有两种方式： a.传统方式 b.方法监听注册方式二：优缺点 a.传统注册：利用on开头的事件 eg: onclick,onmouseove… <button onclick="alert('hi~')" ></button> btn.onclick = function() {} 特点：注册事件的唯一性同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数 b.方法监听注册： w3c 标准推荐方式 addEventListener() 是一个方法 IE9之前的IE不支持此方法，可使用attachEvent()代替特点：同一个元素同一个事件可注册多个事件（监听器）按注册顺序依次执行三：addEventListener()监听方式（具有兼容性问题，IE9以上支持） 1.eventTarget.addEventListener(type, listener[, useCapture]) 2.此方法将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数 type: 事件类型字符串，如 click，mousedown（这里不需要带on ） listener：事件处理函数，事件发生时，会调用该监听函数 < ! DOCTYPE html > < html

用js获取QQ好友信息和QQ群信息

阅读更多关于用js获取QQ好友信息和QQ群信息

获取QQ好友网页登入QQ邮箱，https://mail.qq.com，登入后点击写信，然后在右侧有个通讯录，如果有显示最近联系人的列表存在，一定要点一下清空。然后让分组列表展开不然代码无法食用。按下 F12 打开控制台，复制粘贴代码后，还会下载txt文件，这就是txt文件就是QQ好友获取到的信息了。代码如下： var saveAs = saveAs || ( function ( view ) { "use strict" ; if ( typeof view === "undefined" || typeof navigator !== "undefined" && /MSIE [1-9]\./ . test ( navigator . userAgent ) ) { return ; } var doc = view . document , get_URL = function ( ) { return view . URL || view . webkitURL || view ; } , save_link = doc . createElementNS ( "http://www.w3.org/1999/xhtml" , "a" ) , can_use_save_link = "download" in save_link , click = function

使用SpringBoot开发群聊应用

阅读更多关于使用SpringBoot开发群聊应用

通过本文你将学习如何使用Spring Boot和WebSocket API开发一个简单的群聊天应用。 WebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务器主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。很多网站为实现推送技术，所用技术都是Ajax轮询。轮询指的是在特定的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后服务器返回最新的数据给浏览器。这种传统的模式有很明显的缺点，即浏览器需要不断的向服务器发出请求，而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，这样就会浪费很多资源。HTML5定义的WebSocket协议能更好的节省服务器带宽等资源，并能够实时地进行你通讯。详情请看 HTML5 WebSocket 。新建项目打开IDEA，选择 Spring Initializer 填写好相关信息：依赖选择 Spring Web 和 WebSocket 之后选择 Finish 即可。创建完毕后，项目目录结构如下： WebSocket配置首先我们配置一下WebSocket端点和消息代理。在 com.andy.chat 包下创建一个名为

订阅 queryselector