101.尚硅谷_JS基础_dom查询的剩余方法

盗墓查询的大部分东西都说了，然后咱们还有一部分需要这个补充一下的啊，我们来说一下这个，嗯，这个盗墓查询的这个其他的这个方法啊，Do查询的其他方法，那我们来看这块啊，还是先拿这块举例子，Script的标签，我先写一个这个window，点一个onload等一个这个function，那这里边我们来先说一下我们有什么功能，还有什么东西没说啊，我们来说这要干嘛呢？比如说我想做这么一个东西叫什么呢？获取我这个body元素，哎，或者叫body标签啊，Body标签body是不是跟这的，但他现在我要想获取一个body，我又怎么获取？哎，我这他也没有ID，也没有什么name，只能是什么了，是不是t name了，所得什么呀，一个这个body等于一个这个什么呀，Document点一个get elements by，哎，By t name来个这个body，这是不是获取到是body啊，但是注意这个没有什么问题啊，cancel.log一个这个body，这是个什么玩意儿，哎，我们来看看。

Collection，嗯，是不是一个类数组这么一个结构啊，哎，那我们说了，如果我想获取body，那我这是body吗？不是body是不是一个数组啊，我只想获取那个包Y，而我们说了我叫包Y的标签是不是只有一个呀，只有一个，所以这块我还能干嘛呀，给它加一个，所以零这样一保存是不是才是包y element万加哎，包莱的啊，所以注意你想获取body呢，得采用这么这么一种方式，这零表什么意思，从数组里把第一个给它取出来啊，把第一个取出来，但是这样写呢，明显有点什么了，有点有点麻烦，是不是太麻烦了，诶所以我们还有一个叫什么呢？在我们这个document中干嘛呢？诶有一个这个属性叫什么呢？就叫body啊，就叫body，它什么呢？它保存的是我们这个body的什么呀，引用啊，不能引用，所以直接挖一个body等于什么呢？等于一个document点一个body，这这个就是body你保。

是不是也是它呀，哎，那你这一比哪个简单，是明显这个简单，诶面显这个简单多了啊，所以这块注意以后要想获取body直接什么呀，刀点body就行了啊document body行了，那document.body完了以后，这个document里边还有什么东西呢？我们再来看一下document里边还有这么一个叫做一个document点一个叫做一个document element，哎，Document element document element什么意思，文档元素这是谁呢？直接看一个啊word一个咱们就叫de吧，等于它咱们看看它是谁啊，是谁。哎，其实呢，这是直接看。Htm element吧，哎，HTM，所以他是谁呀，他是H2TMMR啊谁呀，是不是我们那个。

真标签啊，哎，我们这个真标签啊，所以注意do是我们的do的element表示什么呢？表示我们这个HTM2真标签，哎，保存的是我们这个HTMMR跟标签啊，所以注意你要想获取body你就do.body你要想获取mmr就do点什么呀，Do的I它对应的是我们那个HT跟表签啊跟表签这是一个，然后呢，还有一个，还有一个呢，就挺有意思的，直接忘一个叫什么叫document，点一个O啊document点一个这个oo什么意思呀，所有是吧，那直接来一个AO，我们先来看啊，直接来一个cancel，点一个log一个A，我这一保存走你我出来什么呀，还你饭呢，结果出来一个你饭的，这是什么情况呢？诶来这样啊，我来一个O，点一个这个Les，诶打一下它长度一保存六，所以注意啊，这安底范的我也没研究。

他为什么是安迪范的，可能是一个，可能是一个bug啊，可能是一个bug，但是他是不是真是安迪范的呀？不是啊，他要真是安迪范的，我就Les能不能出来溜啊，出不来就是半蹦了吧，所以注意啊，他不是安迪范，我看看他这type off，我倒是没研究过它为什么是安迪范的，但这个事儿呢，它也是挺奇怪，我一保存。Type of，它也是什么呀，也是安你范的唯独什么呀，但是你却能干嘛呢？诶，是不是能去打印它这个长度啊，一保存是不是六啊，很奇怪一个事是吧，甚至还干嘛呢？甚至我还可以去便利它Y一个这个I等于零，I小于我们这个O，点一个LIS，然后来一个I加加，哎，那你先猜猜这O什么意思呀。刚才我打印长度是六啊，O代表什么呢？O代表有的元素啊do o代表的是我这个页面中的什么呀，所有的元素直接我们来一下，直接cancel点一个log一个A一个这个什么呀，哎，直接打印一下，我们来看看出来什么东西一保存。

嗯，什么HTML element head element me element title element script element是body element什么意思呀，就是我这个页面里边的所有元素，有一个算一个，这一个两个，三个，四个五个，加上我们这个body是不是正好六个呀？诶所以它表示什么呀？就是页面里边的所有元素啊，通过这个O可以获取到这个页面里边的所有元素啊，所有元素这是我们说的一个，诶那你现在看我这刚才我一打印长度是是六是吧？哎，然后呢，我这咱们先看一眼啊。六然后呢，我再给它加一个，给它加一个什么呢？加1DIV1保存同你是不是七呀，诶那div我这再加DIV1保存是不是八呀，哎哦，就表示什么呀，所有元素啊，所有元素有一个算一个，它都可以获取到啊，都可以获取到，叫做一个这个哦啊叫做一个，然后再来看啊这是一个，然后呢，其实这个呢，你用这种方式获取可以，还有一种方式可以干嘛呢？还有一种方式直接来一个啊来一个这个哦，等于一个叫做document的点一个get elements by t有个内，如果你写一个div，是不是获取我页面边所有div啊，如果你写一个什么呢？写一个body，获取页面里边的body，对吧？你写什么呢？写一个这个芯，芯表示什么呢？哎，所有元素啊，芯表示所有元素，所以你这来一个CAno.log一个这个哦，一保存这个就有东西了，诶你来打一下什么呢？点一个这个LES1保存是不是也是六啊，诶也是六，这个和这个是。

一样的啊，这两个是一样的，但是用哪个你就很明显了，是不是这东西更简单一点啊，哎，这有点麻烦，但是呢，其实差不多啊，其实差不多诶刀哦，代表我们这个页面里边的所有的这个元素啊，好，那这块呢，我们又说了这个window的这么三个，这个DOCUMENT3个属性啊，一个叫做body，对应body啊，然后单独的element对应的是我们这个根表皮啊，N根元素，然后呢，还有一个叫做O，是页面里边的所有元素啊，有一个算一个啊，一个算一个，好那这一块呢，是我们说的一个这个其他一些方法啊，咱们先给它列着，然后呢，其实咱们学到现在这些查询法，什么gets by ID啊，Gets by name gets by t name，你们有没有觉得少点什么东西？

咱们用这个CSS的时候，常用一个东西，比如说我这来个div，点一个BOXS1，这叫什么呀？Class对吧？我们写CSS的时候经常要通过这个来设置设置样式，那么说了class是我们用的比较多的，但是我们在说这个DOM查询的时候，却没有去干嘛呀，根据class去查询吧，诶根据class查询，那有没有这个方法，诶咱们来看看啊叫什么呢？诶根据我们这个元素的这个class属性值查询一组元素，诶节点对象啊，一组元素元由于什么呢？直接来一个挖一个这个BOX1等于什么呢？叫做一个document，点一个叫做一个get element，诶第一个看见叫什么呀？BY是不是class name呀？诶by class name就是by class啊，还是那个他这class关键字，它就起这什么by class name，我这来一什么呢？来一个叫做一个box。

对一那这什么效果呢？根据box一来获取这个元素，直接还是cancel.log一个，这个box1.1个Les，我这一保存走你一个吧，诶来我再复制一个，现在是不是两个了，一保存是不是二了呀，你再写一保存是不是就就三了，哎就三了啊这是盖按牌class内，诶那这这这个方法这么好，为什么不早说呢？这方法有个小问题，什么小问题呢？

来，我们来看一下啊by class那。兼容性问题。诶，你看它是什么呀，IE9以上的浏览器才支持，换句话说我们来说一下这东西IE8支不支持，诶盖艾斯白class内可以什么呢？可以根据我们这个class属性值获取B组元素节点对象，但是什么呢？但是该方法它不支持我们这个IE8及以下的这个浏览器啊，所以这里边如果你不需要尖转业发，你可以放心的去用，但是如果你一旦去兼容了，我们来看在IE8里是什么效果啊，直接打开我们这个IE浏览器F12这里边切换到我们这个IE8这一刷新，诶，就不用刷新了。是不是经出来了，对象不支持get al by class name属性或方法在IE8里就直接就给你报错啊，直接给你报错了，所以这里边注意了，我们现在呢，呃，PC端的开发还是需要去兼容I8的，所以这个呢，你就尽量去避免去用了啊，避免用了，那以前呢，我们可能还尝试自己去写一个get，但是写那个呢，一般都性能会很差啊很差，所以这次我就不再写它了啊，不再写它了，好这块你要了解，支持I9以上的啊，I9级以上，I8级以下的都是不支持啊，都是不支持，好那这一块看完了啊。

好，那这里边我们再看一个问题啊，除了这个class，有的时候我们还要干嘛呢？诶假设啊，咱们这样，我这样写一个，嗯，这个方法看明白了是吧？哎，咱们接着再往下说一个啊，再往下说一个，嗯，我这写一个什么呢？我这写一个div div，我这给他来一个这个。就写一个div吧，写一个div，然后呢，在这里边我也写一个div，那现在我这页面里边是不是有有三个div啊，来来我来干嘛呢？我来这获取我这个页面里边的什么呀？获取页面中的这个所有的div，我怎么获取啊，画一个div divs等于一个document，点一个get，摆tIgEr name来一个div，然后呢，我直接cancel.log一个divs，点一个Les，诶输出下长度，清空一下，我这一保存走你三个，这是123是不是正好三个呀，诶正好三个，获取三个div了，但是现在我不想获取三个div，我想获取什么呢？我想获取BOX1中的这个div，我想干嘛呢？我不想这么获取了，我想获取什么呢？获取我们这个class为这个BOX1中的这个什么呢？所有的这个点。

对，换句话说，我只想要谁，是不是只想要他呀，其他那些我是不是都不想要啊？诶，那这玩意儿怎么获取啊，还得BOX1里边的，那怎么办呢？

那你可以先获取BOX1是吧，然后再BOX1，这个get白来t name是吧，但是有点麻烦，有点麻烦，那我们想想，那这个东西如果是我们用CSS选择器的话，去选择这东西要怎么选择呀？诶是不是点BO1，然后空格是不是div啊，诶那这时候就获取BOX1里边的所有div啊，诶那我们想想，如果说我们在这个什么呀，在这个GS里能通过这个叫什么呀？这是不是叫CSS选择器啊？诶如果可以通过这个CSS选择器来选择元素，那是不是就就好了呀？哎，就方便了，那能不能用CS选择器呢？来还是再说一个新的方法，叫一个什么呢？叫做一个document表，一个叫做什么呢？叫做query que query什么意思呀？哎，查询啊，查询query什么呢？Query select。

Select什么意思啊，选择器啊选择器，我们来说一下这个方法。document.query select这个方法呢，很强大啊，很强大一个方法document.query select它可以什么呢？可以根据它需要一个什么，需要一个这个选择器的这个字符串作为什么呢？作为参数，它可以什么呢？可以根据一个这个CSS选择器来干嘛呢？来查询一个元素节点对象啊，可以根据一个S显器来查询一个元素节算镜像，那看我怎么写，我直接来什么呢？这直接来一个点一个BOX1，然后空格来什么呀？Div这是一什么呀，这是一个字符串，而这个字符串恰巧是不是就是一个这个CSS选择器啊，那这个方法干嘛？它可以根据这个选择器上页面里去给你找找对象啊，找对象咱们来看看他能不能找着啊，直接来一个挖一个这个div，等于它，然后呢，我这直接输出一下一保存走你。

Htm div艾是不是确实找着了呀？诶是不是他咱们来给他写点字啊，哎，我是这个BOSS1中的这个div这一保存咱们来干嘛呢？直接打印一下它这个音，那H填毛来一保存走，你是不确实是它呀？诶确实是它啊，所以注意这个方法是干嘛的呀，是很强大的，它可以干嘛呢？可以接收一个CS和选择器作为参数，那选择器我们是不是有很多种啊，那你就可以根据选择器选掉了，诶我一想它能根据选择器去调，那我这个点class是不是也是一个选择器啊？诶那我要这么写行不行呢？直接挂一个BOSS1等于一个do的点一个query select。

Select来什么呢？来一个这个什么呢？来一个这个点BOX1这么写行不行，这么写是不是就根据这个class叉了，诶我们先看看能不能找着啊，能不能找着直接还是来一个这个什么呢？Cancel点一个log来一个什么呢？BOX1保存，诶是不是确实能找着，哎，确实能找着，诶那么一想。如果这个方法，IE8它也支持。那是不是就好了呀，诶咱们来看看啊，Select a正好是不是I8以上啊，诶IE8以上我直接来一个，咱们再试一下啊，点一个BOX1，我这一保存，咱们回到IE8里看看，一刷新走你。是不是也能找着啊，哎，也能查询到这个对象，所以注意了，这个方法在IE8里是好用的，所以我要说什么，虽然什么呢？虽然我们这个IE8中没有什么呢，没有这个get elements，诶，By class name，但是什么呢？但是可以什么呢？我们可以使用我们这什么呀？哎，Query，诶，Selector，诶，Select干嘛呢？是不是代替呀？哎，代替这个玩意儿啥都有了，你说我不想根据I，根据这个类查，我想根据什么呀，ID查行不行啊，哎，没问题，只要是检测器就可以，你说我想根据什么呀，根据这个标签名查，你传个div是不是就行了呀，所以这个方法更加的什么呀，更加的这个灵活啊，更加灵活好叫做一个query select啊select，但是你要注意了，这有个问题啊，那你现在来看我这个复制，现在我有几个BOX1是不是三个呀。

哎，三个class于BOSS1的，好，那现在我这输出这个BOSS1啊，我这一看走你它是不是一个集合呀，是不是就一个元素，哎，一个元素，所以注意我们来说一下这有什么特点，使用该方法有个特点，它总会什么呀，总会返回唯一的这么样一个元素，如果什么呢？诶也就是说你这什么呀，他查只查几个，只查一个啊，只查一个，但是问题来了，我满足件的是不是有多个呀？哎，那怎么办呢？如果满足条件的元素有多个，那么它诶只会返回第一个啊，只会返回第一个，所以你看虽然有多个class为BO1的，但是我们来看它反映的是谁啊，我这里边给他加一个标志，随便写一个吧，写一个这个，诶我是第一个，这个BOSS1只在第一个里边写第二三个都没。

诶都不写啊，都不写，我直接来什么呢，点一个这个阴N码清空一下已保存。

是不是第一个boss一样，诶只会返回第一个，其他的干嘛呢？他就干嘛了，不找了，说白了他只找一个，往下就不找了，那问题又来了，嗯，有的时候需要这种用法，但是这东西是不是还是有有局限呀，哎，所以呢，还有一个方法，还有个什么呢，叫做document.q query select，你看有一什么呀，O啊query letter哦同样它也是支持IE8以上的一个浏览器，我们来看看这回来一个点一个BOX1，还是这来一个Y一个BOX1等于它，然后呢，我们来一个cancel，点一个log box1.1个Li，直接打印长度，咱们先看这模是吧，我这一保存走你是么呀，No list诶又是因为一个类数组成的一个对象啊，然后呢，打一下它长度一保存几个呀，三个比不是三个，因为是不是有三个div呀，哎，三个包括一个div，你再加一个精工一保存。

是不是就四个，哎，就四个啊，所以还有这么一个方法叫做query select。这个方法实际上和query select啊。哎，是不是一样的呀，哎一样它不同的什么呢？我们说哎该方法和我们这个query select一样，哎用法呢类似啊，用法类似，哎不同的是什么呢？不同的是它会什么呢？它会反，哎它会将我们这什么呀，符合条件的这个元素封装到一个什么呀，一个数组装返回啊说白了他查询到什么呀，他查询到的是多个，而他查询到的什么呀，是一个，而且你要注意了，假设我这块干嘛呢？我来一个这么一个div，来一个井号BOX2，我这是不是ID啊，哎，然后我这不写这个了，我来我这换一个来一什么呢？来一个号BOX2，我这是不是已经根据这个。

ID去查了呀，那已经跟ID查了，它是什么呀，是不是一定是唯一的呀，但是注意了，咱们来看它已保存有Le了。已保存。是不是还是一个数组啊，哎，所以这个方法什么特点呢？即使什么呢，即使符合条件的元素，哎，符合条件的这个元素只有一个，它干嘛呢，也会返回数组啊，会返回数组啊，所以注意这是我们说这几个方法给它回顾一下，首先呢，上边一个叫做一个document.body表示的是我们这对body的一个引用，Element表示的是我们这个H填毛那个跟标签根元素，然后呢，document.o是我这个页面里边的所有元素啊，所有元素还有一个叫做什么呢？叫做一个get elements by class name，根据class name获取一组原子卷以下，但是问题是它不支持I8及以下，所以如果你需要尖穿八的话，这个东西就不要用了啊，不要用了，你要用什么就用我们这个query select和query select，哦，Query selector query select后根据我们这个什么呀，CSS选择器来查询这个对象query select，它查询到的值是什么呀？

一个永远都是返回什么呀，返回第一个啊，返回第一个，而关select呢，缠到的是多个，会把多个封装到一个数组里边返回，即使你缠到的只是一个，它也会分到什么呀数组里，所以你用的时候选择一下，如果你只需要用第一个，就用query select，如果你需要返回多个，就用query select哦啊根据需求去简单好，那咱们这个查询呢，这些方法就给他是吧。