javascript函数querySelector介绍

最新推荐文章于 2024-05-25 13:28:01 发布
最新推荐文章于 2024-05-25 13:28:01 发布
阅读量1.5k 收藏 1
点赞数
分类专栏： JS

 querySelector用于获得dom节点，可以接受三种类型的参数：id(#)，class(.)，标签。很像jquery的选择器。不过只能返回一个子孙元素，但是jquery选择器的话，可以返回一组元素集合。下面的代码示例：
<body>
       <div id="query">id</div>
       <div class="query">class</div>
</body>
<script>
  var htmlStr= document.querySelector("body #query").innerHTML，//id
  htmlStr=document.querySelector("body div").innerHTML,//只返回第一个子孙元素
  htmlStr=document.querySelector( "body .query).innerHTML //class
</script>   
这个函数适用 IE8+，chrome，firefox
guodengh
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript入门
web18296061989的博客
05-19 1703
文章目录 初识JS JS的引入 JS输入输出语句 变量的命名规范 运算符的优先级 断点调试 arguments的使用 JS预解析 对象 Web APIs 获取元素 事件 排它思想 例：百度换肤 getAttribute和setAttribute tab栏切换 自定义属性 节点操作 例：下拉菜单 评论留言案例 动态生成表格案例 方法监听注册事件 事件的删除 DOM事件流 事件对象 事件委托 其他常用的鼠标事件 跟随鼠标移动的图片 常见的键盘事件 模拟京东快递单号查询 BOM基本概念 窗口加载事件 调整窗
js中的document.querySelector()方法
withkai44的博客
11-29 6722
ParentNode.querySelectorAll()的结果是NodeList数组，但是又不是一般的js数组（Array），所以也不能直接调用Array的方法。当页面中出现多个相同class标签(或者多个相同标签(比如多个div))时，如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。位于元素之前，元素将会被设置指定的背景颜色，总结，多元素选择时，哪个先匹配就是谁咯，只有一个被选中。querySelector() 方法仅仅返回匹配指定选择器的第一个元素。
JS中document.querySelector什么意思
最新发布
ggq53219的博客
05-25 581
document.querySelector 是 JavaScript 中的一个 DOM (Document Object Model) 方法
【JavaScript】基于querySelector / querySelectorAll对元素的操作，为你的DOM API基础扫盲~
CYK_byte的博客
11-04 1万+
浏览器提供的一个全局对象，类似于CSS中的选择器，可以精准的获取元素对象，这组API都来自于document下，document是浏览器提供的一个全局对象，表示当前页面DOM API基本都是documet对象的方法；
Javascript教程:querySelector()方法
10-14 2640
module dom { [Supplemental, NoInterfaceObject] interface NodeSelector { Element querySelector(in DOMString selectors); NodeList querySelectorAll(in DOMString selectors); }; Document implements N
js querySelector() 说明
sleep_i_like的博客
03-28 4105
js querySelector（）简单用法说明
javascriptFuction：javascript函数
02-25
javascript功能获取一个最近的祖先元素壁橱document.querySelector('li').closet('ul');合并两个一级深度的json对象，不支持二级深度合并Object.assign({},{a:1},{b:2}); // {a:1,b:2}Object.assign({},{a:1,b:{a:1}...
深入理解JavaScript中的箭头函数
10-23
通过以上介绍，我们可以看出箭头函数在JavaScript中的重要地位，它简化了函数的定义，提高了代码的可读性，尤其在处理回调函数和事件处理等方面发挥了重要作用。然而，由于其特定的作用域规则和对`this`的处理方式，...
javaScript_cb:各种 javascript 实用函数
07-17
在"javaScript_cb"这个项目中，我们很显然会看到一系列实用的JavaScript函数，这些函数可能涵盖了各种常见任务，包括数据处理、DOM操作、事件处理、动画效果等。 JavaScript的基础知识点包括变量、数据类型（如字符...
架子鼓：使用JavaScript函数创建架子鼓
02-15
我们可以创建一个对象来存储每个鼓的音频元素和对应的事件处理函数： ```javascript const drums = { kick: document.getElementById('kick'), snare: document.getElementById('snare'), // 其他鼓和钹的对象 }...
javascript常用函数集合
10-31
这个"javascript常用函数集合"涵盖了JavaScript编程中常见的函数和概念，是学习和提升JavaScript技能的重要资源。以下是对这些常见函数和基础知识的详细解释： 1. **变量声明**：在JavaScript中，我们可以使用`var`...
js querySelector() 使用方法
10-20
querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代
javascript中的querySelector()各种引用
weixin_51855195的博客
03-28 1177
javascript中的querySelector()各种引用，在我看来它的作用就是选择一个元素，然后在定义颜色，突出强调的作用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content
querySelector() 方法
weixin_34396902的博客
03-31 3万+
返回文档中匹配指定 CSS 选择器的一个元素。 虽然IE8中没有getElementsByClassName()但可以用querySelector()代替 注意：querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。 querySelector 获取文档中 class="example" ...
JavaScript- DOM 原生 API 学习（querySelector，querySelectorAll，操作和修改表单属性，操作节点）
dodamce的博客
10-05 2386
对于在浏览器上运行JS程序，最核心的库就是DOM API 库DOM可以看作文档对象模型，HTML中会把每个html标签看作成一个JS中可操作的对象。操作这个对象，就可以影响界面的显示。其中获取网页元素是DOM的基础。当一个网页加载好后，会自动生成一个全局变量，叫做document，这其中有些方法和属性，让我们来操作网页内容。 在JS中的很多代码都是通过事件来触发。eg：鼠标点击页面，会产生鼠标点击事件等等。事件的三要素： 获取操作元素的内容 通过对象内的属性 innerHTML来实现。 需要注意，input
javascript函数querySelector,querySelectorAll介绍
mao1059568684的专栏
11-29 1716
querySelector用于获得dom节点，可以接受三种类型的参数：id(#)，class(.)，标签。不同的是querySelector返回的是一个对象，querySelectorAll返回的一个集合(NodeList),很像jquery的选择器。下面的代码示例：        id        class   var htmlStr= document.query
JavaScript querySelector()、querySelectorAll()方法介绍
热门推荐
路虽远，行则必至！
06-26 4万+
一、getElementsByClassName()方法不足之处 在之前的学习中，我们了解到，可以根据元素的 class 属性值查询一组元素节点对象，即：getElementsByClassName()，但是这个方法不支持 IE8 及以下的浏览器。 在我们的实际开发中，会特别的受限，为了兼容 IE8 及以下的浏览器，我们可以采用一种新的方法，这种方法在我们的实际开发中也很常用，因此我们要熟练掌握...
一些常用的js函数
m0_62972853的博客
08-15 226
一些常用的js函数。
JS选择器querySelector和~All，三个原生选择器
Lawliet
09-28 2万+
比较高级的万能选择器，比较常用 定义： querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。 注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。 语法 document.querySelector(CSS selectors)
JavaScript 防抖函数的方法
08-03
### 回答1： JavaScript 防抖函数是一种在一段时间内阻止函数的执行的方法。它的原理是在执行函数之后设置一个定时器，在定时器到期之前如果再次触发函数的执行，就会重置定时器，直到定时器到期才会真正执行函数。这样可以有效地阻止频繁触发函数导致的性能问题。 下面是一个简单的 JavaScript 防抖函数的例子： ``` function debounce(fn, delay) { let timer = null; return function() { let context = this, args = arguments; clearTimeout(timer); timer = setTimeout(function () { fn.apply(context, args); }, delay); }; } ``` 在使用这个函数的时候，可以传入两个参数： - `fn`：要防抖的函数。 - `delay`：定时器的时间，单位为毫秒。 使用方法示例： ``` let myFunc = debounce(function() { console.log("防抖函数执行了"); }, 1000); // 在 1 秒内多次调用 myFunc 函数，只会在 1 秒后最后一次调用执行 myFunc(); myFunc(); myFunc(); ``` 需要注意的是，这个防抖函数是基于定时器实现的，所以在使用过程中可能会有一些精度问题。如果需要更精确的防抖函数，可以使用 requestAnimationFrame 函数来实现。 ### 回答2： JavaScript 中的防抖函数是一种应对频繁触发事件的一种优化技术。当一个事件频繁触发时，防抖函数可以限制事件的执行次数，从而提升性能和用户体验。 一个简单的防抖函数的实现方法是利用 setTimeout() 函数，在事件触发后设定一个时间间隔，并在该时间间隔之后执行事件的处理函数。如果在该时间间隔内事件再次触发，就清除原来的定时器并重新设置一个新的定时器。这样就可以保证在事件频繁触发时只执行最后一次触发的事件。 以下是一个例子，假设有一个按钮的点击事件需要防抖处理： ```javascript function debounce(func, wait) { let timeout; return function () { const context = this; const args = arguments; clearTimeout(timeout); timeout = setTimeout(function () { func.apply(context, args); }, wait); }; } const button = document.querySelector('button'); button.addEventListener('click', debounce(function () { console.log('Button clicked!'); }, 300)); ``` 在上述例子中，点击按钮时，如果在300毫秒内再次点击，防抖函数会清除之前的定时器并重新设置一个新的定时器。只有在按钮点击后的300毫秒内没有再次触发点击事件时，才会执行按钮点击事件的处理函数。 防抖函数是一个常见的前端开发技术，可以有效地控制事件的触发次数，减少不必要的计算和操作，提升网页性能和用户体验。 ### 回答3： JavaScript中的防抖函数是一种用于优化性能的技术，通过延迟函数执行来减少频繁触发的问题。防抖函数可以用来控制函数的执行频率，确保在一定的时间间隔内只执行一次函数。 一种常见的防抖函数的实现方式是使用setTimeout方法。具体步骤如下： 1. 创建一个变量timer用来保存setTimeout返回的定时器。 2. 在函数执行时判断timer是否存在，存在则清除定时器。 3. 再次调用setTimeout方法，延迟一定的时间执行函数。 4. 在规定的延迟时间内若再次触发函数则重新计时。 下面是一个使用setTimeout实现的防抖函数的示例： ```JavaScript function debounce(func, delay) { let timer; return function() { if (timer) { clearTimeout(timer); } timer = setTimeout(() => { func.apply(this, arguments); }, delay); }; } ``` 在上面的示例中，参数func为需要进行防抖操作的函数，delay为触发间隔的时间。 使用该防抖函数可以将一个需要频繁触发的函数进行优化，避免了频繁触发函数造成的性能问题。比如在输入框搜索时，可以使用防抖函数来减少请求的次数，提高用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值