一、querySelector() 的定义 querySelector() 方法选择指定 CSS 选择器的第一个元素 querySelectorAll() 方法选择指定的所有元素 二、与 getElementBy...的区别 这两个新添加的 API 与 getElementById() / getElementsByTagName() 有什么区别呢？...ul')[0]; let list=ul.getElementsByTagName('li'); console.log(list); } { let ul=document.querySelector...操作实例如下： HTML 代码： 111 222 333 用 querySelector 操作元素：...选择的 li 元素不会随着文档的操作而从3变为6； 在性能上，Chrome 浏览器下 getElementBy 方法的执行速度基本都高于 querySelector。
、 document.getElementById 可以查询纯数字的id dom.querySelector document.querySelectorAll(’[id=“111”]’)...问题 一个页面上有多个id相同的dom元素想要拖拽 id为纯数字 解决 使用dom.queryselector() 先获取需要拖拽元素的父元素dom，再在父元素中查询相应的dom；减少搜索范围，避免复制的
querySelector和querySelectorAll的用法和getElementBy大致一样，获取的时候带上符号，getElementBy获取的是元素的动态集合，querySelector获取的是元素的静态集合...但是需要注意：getElementBy系列和querySelector系列的区别 比如，我们写一个for循环，每次获取li标签的时候，ul生成一个li子元素 a... b c var ul = document.getElementById('ul'); var...每调用一次就会重新对文档进行查询，就会进入死循环 进行修改：把i < li.length改成i < 3，把li标签数组静态化，然后打印 conosle.log(li.length) // 6 重新用querySelector...获取一遍元素 a b c var ul = document.querySelector
区别 document.getElementBy... 获取的是动态集合；document.querySelector 获取的是静态集合 document.getElementBy......系列接收的参数只能是单一的className、tagName 和 name；而document.querySelectorAll 方法接收的参数是一个 CSS 选择符 2....document.getElementsByTagName('p'); document.getElementById('p1'); document.getElementsByClassName('text...匹配指定 CSS 选择器元素，可以匹配多个，用，隔开 document.querySelector('.text'）； // 方法返回类名为text的第一个子元素 。
和querySelectorAll)及其用法 querySelector和querySelectorAll的基本用法 平常我们在查找节点时总是一个个".getElementById..."...没错，今天介绍的querySelector和querySelectorAll就是可以直接使用CSS选择器一样的写法的方法。...querySelector和querySelectorAll的区别 querySelector和querySelectorAll他们之间的区别就好比getElementById和getElementsByTagName...querySelectorAll和getElementsByTagName的区别 querySelectorAll与getElementsByTagName最终得到的都是一个节点集合，那么他们之间是否只是简化写法这么简单呢...和querySelectorAll的用法和区别，但是不要认为仅此而已。
('button'); var div = document.querySelector('div'); var p = document.querySelector('p'); btn.onclick...的区别 获取内容时的区别： innerText会去除空格和换行，而innerHTML会保留空格和换行 设置内容时的区别： innerText不会识别html，而innerHTML会识别...innerHTML的区别 // 1. innerText 不识别html标签 非标准 去除空格和换行 var div = document.querySelector...('cs'); var ht = document.getElementById('ht'); var img = document.querySelector('img');...获取元素 var btn = document.querySelector('button'); var input = document.querySelector('
前言 我们平常说的查找元素 和 节点到底有什么区别？为什么有时候返回HTMLCollection ，有时候返回NodeList？ HTMLCollection 和 NodeList 的区别又是什么？...DOM提供两种集合对象，用于实现这种节点的集合：NodeList和HTMLCollection。 HTMLCollection 是表示 HTML 元素的集合。...NodeList 对象代表一个有顺序的节点列表 以下方法获取的为element 元素对象 document.getElementById(“id属性”) document.querySelector(‘...css选择器’) 示例 // getElementById返回元素 element1 = document.getElementById('user'); console.log(element1) /...console.log(element.childNodes); console.log(element.childNodes.length); // 5 HTMLCollection与NodeList区别
1.1.2 Web API的概念 Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。...； Web API 一般都有输入和输出（函数的传参和返回值），Web API 很多都是方法（函数）； 学习 Web API 可以结合前面学习内置对象方法的思路学习。...的区别 获取内容时的区别：innerText会去除空格和换行，而innerHTML会保留空格和换行 设置内容时的区别：innerText不会识别html，而innerHTML会识别 案例代码 <body...innerHTML的区别 // 1. innerText 不识别html标签 非标准 去除空格和换行 var div = document.querySelector...获取元素 var ldh = document.getElementById('ldh'); var zxy = document.getElementById('zxy
('p'); p.innerText = getDate(); innerText和innerHTML的区别 获取内容时的区别： innerText...会去除空格和换行，而innerHTML会保留空格和换行 设置内容时的区别： innerText不会识别html，而innerHTML会识别 案例代码 ...的区别 // 1. innerText 不识别html标签 非标准 去除空格和换行 var div = document.querySelector('div');...获取元素 var ldh = document.getElementById('ldh'); var zxy = document.getElementById('zxy...('div'); var img = document.querySelector('img'); // 2.判断小时数修改图片和当前文字信息 if (hours
querySelector 该方法返回满足条件的单个元素。...按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找，返回第一个满足条件的元素 element = document.querySelector('div#container');...= document.querySelectorAll('div.foo');//返回所有带foo类样式的div 但需要注意的是返回的nodeList集合中的元素是非实时（no-live）的，想要区别什么是实时非实时的返回结果...id="container"> //首先选取页面中id为container的元素 container=document.getElementById...document.getElementById返回的便是实时结果，上面对其添加一个子元素后，再次获取所有子元素个数，已经由原来的2个更新为3个(这里不考虑有些浏览器比如Chrome会把空白也解析为一个子节点
能够修改元素的内容 能够区分innerText和innerHTML的区别 能够修改像div这类普通元素的属性 能够修改表单元素的属性 能够修改元素的样式属性 1.1....1.1.2 Web API的概念 Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。 ...的区别 获取内容时的区别： innerText会去除空格和换行，而innerHTML会保留空格和换行 设置内容时的区别： innerText不会识别html，而innerHTML会识别 案例代码...innerHTML的区别 // 1. innerText 不识别html标签 非标准 去除空格和换行 var div = document.querySelector...获取元素 var ldh = document.getElementById('ldh'); var zxy = document.getElementById('zxy
获取元素 var btn = document.querySelector('button'); var div = document.querySelector('div...的区别 获取内容时的区别： innerText会去除空格和换行，而innerHTML会保留空格和换行 设置内容时的区别： innerText不会识别html，而innerHTML会识别...innerHTML的区别 // 1. innerText 不识别html标签 非标准 去除空格和换行 var div = document.querySelector...获取元素 var ldh = document.getElementById('ldh'); var zxy = document.getElementById('zxy...获取元素 var btn = document.querySelector('button'); var input = document.querySelector('
String 和StringBuilder区别: 1 String对象恒定不变,stringbuilder对象表示的字符串是可变的 每一次修改String对象都会创建一个对象 而StringBuilder...是动态对象,只用创建一次,通多append()来添加字符串 String类有finnal修饰符,不能被继承 StringBuffer和StringBuilder区别; StringBuilder
//1.获取事件源 var butn = document.getElementById('butn') //2.绑定事件...('button'); var div = document.querySelector('div'); // 注册事件 but.onclick = function.... innerHTML区别 var div = document.querySelector('div');...id="two">像素妹 var sy = document.getElementById...('one'); var sym = document.getElementById('two'); var img = document.querySelector('img
等构件完 dom 树，js 加载完后才会触发 ② load 等所有资源（图片、音频）加载完后，才会触发 ③ beforeunload 在即将离开页面前触发 ④ unload 在离开页面时触发 2、箭头函数和普通函数的区别...that 指代 this const that=Object.create(father.prototype) father.call(that) return that } 4、getElementById...和querySelector的区别 getElementById获取目标节点后，当节点更新时，getElementById会跟着更新， 但是querySelector类似于快照，当获取目标节点后，当节点更新时...，它不会跟着更新 5、HTTP 的 GET 和 POST 请求有什么区别？...（我觉得.bind()是破坏可读性的函数） 7、yarn run start 和 yarn start 是没有区别的 参考：https://segmentfault.com/q/1010000022092499
按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找，返回第一个满足条件的元素。...elements = document.querySelectorAll('div.foo');//返回所有带foo类样式的div 但需要注意的是返回的nodeList集合中的元素是非实时（no-live）的，想要区别什么是实时非实时的返回结果...div id="container"> //首先选取页面中id为container的元素container=document.getElementById...document.getElementById返回的便是实时结果，上面对其添加一个子元素后，再次获取所有子元素个数，已经由原来的2个更新为3个(这里不考虑有些浏览器比如Chrome会把空白也解析为一个子节点...同样，在提供给querySelector和querySelectorAll的参数也支持转义，了解这点非常重要。
、getElementByTagName、getElementByClassName querySelector、querySelectorAll getElementById 根据id值获取标签对象（...元素） 格式：document.getElementById("id值") 特点：一次只能获取一个对象 Java,从入门到入土！...查询选择器 格式：document.querySelector("选择器") 获取单个标签对象 querySelectorAll 和querySelector用法一样，querySelectorAll...图文节-慕课网体系课 (imooc.com) 修改样式有两种方式: style属性和className属性 <!...innerHTML、innerText：获取和修改标签内容 区别：innerText 不会识别html标签，而innerHTML会识别 今天玩宝宝荣耀了吗？
例子： var btn = document.querySelector("button"); btn.onclick = function () {...(未找到合适案例) 参数是匿名函数和是箭头函数区别： 它们绑定不同的 this 对象。...注意： JS 代码只能执行捕获或者冒泡其中一个阶段 onclick 和 attachEvent 只能得到冒泡阶段 const btn = document.getElementById("btn");...e = e || window.event; 事件对象的常见属性和方法 e.target 和 this 的区别： this 是事件绑定的元素（匿名函数形式），函数的调用者。...() 例子： const a = document.querySelector("a"); a.addEventListener("click", (e) => e.preventDefault
= =和equals的区别: equals和==最大的区别是一个是方法一 个是运算符。...break和continue的区别: break和continue都是用来控制循环的语句。 break用于完全结束一个循环， 跳出循环体执行循环后面的语句。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
