JS中querySelectorAll的作用

//外部页切换
    var clickme=document.getElementById(‘navbox‘).getElementsByTagName(‘button‘);
    var box=document.getElementById(‘itembox‘).querySelectorAll(‘.boxStyle‘);
    for(var i=0;i<clickme.length;i++){
        clickme[i].index=i;
        clickme[i].onclick=function(){
            for(var i=0;i<clickme.length;i++){
                clickme[i].className=‘navbtn‘;
                box[i].style.display=‘none‘;
            }
            this.className=‘navbtn active‘;
            box[this.index].style.display=‘block‘;
        }
    }
    //内部页切换
    var databox=document.getElementById(‘b1‘).getElementsByTagName(‘div‘);
    var message=document.getElementById(‘b2‘).getElementsByTagName(‘div‘);
    for(var i=0;i<databox.length;i++){
        databox[i].index=i;
        databox[i].onclick=function(){
            for(var i=0;i<databox.length;i++){
                databox[i].className=‘littlebox‘;
                message[i].style.display=‘none‘;
            }
            this.className=‘littlebox actives‘;
            message[this.index].style.display=‘block‘;
        }
    }    

在我们编写Html页面时,如果遇到外部页面点击跳转并且内部页面也需要点击跳转时。单纯编写JS时所要抓取的dom对象就会容易出现问题,如我的外层页面之下的div中的div。都会被捕捉到,这样我们编写出的js点击切换页面的效果就会出现bug。

如何规避这种情况,我们可以使用

querySelectorAll

来解决这个问题。通过使用它来抓取当前拥有同样class样式的div,就会针对指向性的获取到该元素,从而规避这类bug

原文地址:https://www.cnblogs.com/CWJDD/p/11030215.html

时间: 2024-10-11 22:00:37

JS中querySelectorAll的作用的相关文章

JS中冒号的作用

转载: JS中冒号的作用1.声明对象的成员2.switch语句分支3.三元表达式 1.声明对象的成员 var Book ={    Name: '法',    Price: 100,    Discount : function(rate)   {       this.Price *= rate;    }};alert(Book.Price);Book.Discount(0.8); // 8折alert(Book.Price); 2.switch语句分支 var a = 2;switch (

js中with的作用

js中with的作用当一个对象有多个需要操作的属性或方法时,可以使用如<体>试验<script type=“text/javascript”>var o=文件.创建元素(“DIV”):(o){风格.cursor=“指针”:style.zindex=“100”:innerhtml=“aaaaa”:}文件.身体.附录子项(o):</Script ><正文>上述代码相当于<体>试验<script type=“text/javascript”>

js中return的作用及用法

这里面的return含有一些细节知识: 例如:onClick='return add_onclick()'与 onClick='add_onclick()'的区别 JAVASCRIPT在事件中调用函数时用return返回值实际上是对window.event.returnvalue进行设置. 而该值决定了当前操作是否继续.当返回的是true时,将继续操作.当返回是false时,将中断操作. 而直接执行时(不用return).将不会对window.event.returnvalue进行设置所以会默认

js中arguments的作用

在javascript函数体内,标识符arguments具有特殊含义.它是调用对象的一个特殊属性,用来引用Arguments对象. Arugments对象就像数组,注意这里只是像并不是哈. javascript函数体内,arguments像数组(并不是真的数组,是一个Arguments对象, 再次强调)一样,有length属性,可以代表传给函数的参数的个数. 引用一个形式参数可以用参数名,也可以用arguments[]数组形式,其中arguments[0]表示第一个参数. arguments.l

JS中闭包的作用

1.执行自执行函数.某些函数可能只需要执行一次而且为了不造成全局污染.声明变量需要使用var,否则会默认添加到全局对象的属性上.或者别的函数可能会误用该属性.全局对象过于庞大的话,会影响访问速度.(变量的取值需要从原型链上遍历) (function(value){ console.log(value)})(3); 2.作为缓存.第二次使用对象时候,可以不用新建对象.单例模式的实现等等. var Cache=(function(){ var cache={}; return{ getObj:fun

js中函数的作用以及基本使用

函数就是具备一点功能的代码段 ,代码段来实现具体的功能.要想实现一个函数的功能需要对函数进行调用. 每写完一个函数,在使用时就要调用 1.首先定义函数 用function+函数名+(): 2.调用函数  函数名+(): 例如: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quo

js中继承的几种用法总结(apply,call,prototype)

本篇文章主要介绍了js中继承的几种用法总结(apply,call,prototype) 需要的朋友可以过来参考下,希望对大家有所帮助 一,js中对象继承 js中有三种继承方式 1.js原型(prototype)实现继承 <SPAN style="<SPAN style="FONT-SIZE: 18px"><html>   <body>  <script type="text/javascript"> 

html css和js中的注释

一.HTML的注释方法 <!-- html注释:START --> 内容 <!-- html注释:END --> 包含在“<!--”与“-->”之间的内容将会被浏览器忽略,且不会显示在用户浏览的最终界面中. 注释的部分虽然浏览器在执行时会忽略,但在浏览器中查看源代码时仍然可以看到 二.CSS的注释方法 <style type="text/css"> /* css注释*/ </style> 在单独的css样式表文件中也采用此方法

js中继承的方法总结(apply,call,prototype)

一,js中对象继承 js中有三种继承方式 1.js原型(prototype)实现继承 代码如下: <SPAN style="<SPAN style="FONT-SIZE: 18px"><html> <body> <script type="text/javascript"> function Person(name,age){ this.name=name; this.age=age; } Person