94.尚硅谷_JS基础_dom查询

DOM的这个基本介绍，那么就给他大概介绍了一下啊，接下来呢，我们来看一下我们DOM里边的一些这个方法，诶就是说现在我们刚才只讲了一个叫做一个guide is的版ID，根据这个ID是不是查找一个元素啊，查找一个元素，接下来呢，我们来看看还有哪些方法啊，那这里边第一组我们叫什么呢？叫做获取元素节点对象，换句话说，我这些方法查询到的节点都是什么呀？都是元素，元素是什么呀？标签啊，标签就是元素，元素就是标签，第一天就给你们说这个东西了啊，然后呢，叫做这些方法都是什么呀？都是通过document对象去掉的啊，都是document对象的方法啊，那这边我们来看有几个方法，第一个方法我们已经用过了，叫做什么呢？叫做get element by ID啊，叫什么呀？通过ID属性获取一个元素键对象，注意这突出是一个，为什么是一个呀？ID是什么呀？唯一的吧，哎，唯一的，所以你要通。

做ID获取一定是唯一的那个啊，唯一唯一的那个元素啊，唯一那个元素再往下看，下边一个叫什么呢？叫做get element s，诶，By t name啊get element s版t name，哎，为什么要突这个S它是什么呀？复数啊，它是复数叫什么呢？诶p name什么意思呀？标签名啊，通过标签名获取一组元素节点对象，什么叫标签名啊？你获取获div是不是所有的div啊，H1是不是获取所有的这个H1啊，一定注意它返回的是。一组，为什么是一组啊，因为相同标签名的这个元素是不是会有多个呀？诶，所以注意啊，它是负数，叫做一个埃S啊，Elements啊，然后呢，下边一个叫做get element s诶，By name啊，Get elements by name，当你咱们上课我给你强调一下，你这么说是吧？以后出去面试你可别这么说，跟别人交流别这么说是吧？那你有病的是吧？哎，盖艾利斯你说什么？你是伏地魔请来的是吧？这么说话，诶，Get elements啊，By t name啊，Get elements by name啊，Get elements by name叫什么呀？通过name属性获取也是什么呀？一组元素检对象啊，根据内幕属性获取一组元素检验对象内幕属性，哪有内幕属性啊？哎，我们那些什么表单项吧？哎，什么input呀，什么那个sli呀，是不是有内部属性啊？哎，那这个主要是获取我们这些表单项，同样它也是什么呀，复数。

它也是获取一组啊，获取一组，这是我们说这三个方法啊，都是通过我们这个document的对象来调用啊，而且他们返回都是什么呀。元素啊，都是元素节点对象啊，都是元素点对象，好，那接下来呢，我们来演示一下这几个方法，那怎么演示呢？我们这有这么一个小的一个页面啊，叫做一个盗查询这么一个页面，它包含一个这么一个样式表啊，CTRLC我直接给它粘过来，CTRLV粘过来以后呢，改个名，我们来叫一个这个零八到网查询这页面展杀模式呢，来打开，我们在外部来看一下，这样清楚一点，页面呢比较简单，这一块呢，其实就是两个这个大div啊，两个大div，然后呢，这div里边有什么，你喜欢的城市是吧？什么北京上海，东京首尔，你喜欢的这个单机游戏，什么红警实况，极品飞车，什么魔兽一堆，那这个我们先看看这个结构什么啊，这这北京上海东京首尔这四个玩意儿，这是什么玩意儿啊，什么标签啊，诶咱们看看呗，这猜也猜不着是吧，直接看一点。

什么呀，LY吧，诶LY是一个无序列表啊，Ul里边放的是LY，所以这实际上是什么呀？是三个无序列表啊，三个无序列表，然后下边呢，这是一个什么呀，两个这个单选按钮吧，诶单选按钮再往下边一什么呀，这个文本框啊文本框，然后呢，右边这一排是一溜的，这个一溜是一溜按钮是吧？一溜按钮那一个按钮呢，对应一个什么呀功能，我们通过这些功能来学习我们这个do的一个查询啊do查询那这块我们来看一下，嗯，直接来打开页面，还是看一下页面结构，页面结构呢，Qui的标签，这引入了一个样式表，待会你们如果引入的时候是没有样式啊，看看样式表是不是引错了，然后往下呢结构啊div，然后里边什么呀，P标签，然后是我们这个无序列表，无序列表一共有这么几个是吧？哎，这么几个无序列表，然后下边呢，一排这个什么呀，按钮按钮的功能按钮都有什么呀，ID从B天零一是不是到B。

跟11啊，哎，都有ID啊，然后往上看，我们来实现功能，这些功能呢，都给我们列下了，第一个功能是第一个按钮的第二个按钮，第三个按钮，第三按钮，依此类推，都列出来了，好，那我们来写这东西，我们第一步现在干嘛呢？现在干嘛呀？哎，所以你上来不用想别的，咱们现在目前为止上来你就是什么呀？哎window.load啊上来就是它来写上一个window.load等于三个，然后把这些功能的给它，哎挪进去，来一个一个看叫什么呢？查找井号北京节点井号什么意思，是不是我们那个ID选择器啊，那这个功能说白了就是查找我们这个ID为诶北京的这个节点ID北京的是谁呀？是这个Li吧，诶ID为北京的节点，查找ID为北京节点，那我们先说第一个问题，查找好查问题是什么呀？

啥时候查呀，啥时候查呀，点的时候查吧，哎，点按钮的时候查，所以我第一件事需要先干嘛呀，是不是先给我们这个ID为BP01的这个按钮去绑定这么一个单击响应函数吧，哎，函数，所以咱们第一件事来干嘛呢？为我们这个ID为BTN01的这个按钮来绑定一个单击响应函数，怎么绑定啊，我先来一个Y一个B填零一等于一个document，点一个GET100ID，我先获取B填零一这个按钮的对象吧，然后B填01点安可B等于一个方啊等于一个方，然后在这里边我是不是可以实现功能了，我先测一下啊alert一个那个hello，我先看看好不好使啊，一保存咱们一刷新走你一点是不是好使了，你们写的时候也是啊，尽量写一步呢，就测一下，因为。

那你写多了以后，你毛病就不好找了啊，写点测呀，然后呢，我们来实现功能叫什么呢？查找ID为北京的节点，ID为北京的节点，那怎么查呀，用谁呀，是不是用我们那个盖。ID啊，诶ID为北京嘛，肯定是用我们这个get element版ID直接来吧，哇，一个这个北京等于一个这个document点一个get element版ID来一个北京，这个是不是就查找ID为北京这个节点啊，诶来我们直接来一什么呢？乐一个这个北京咱们来看效果啊，我这一保存，咱们一刷新，现在我这一点走你诶叫什么object HTML Li是不是获取到这么一个对象啊，哎，它是一个对象H号叫什么呀，叫做一个。

是Li啊哎，那确实获取到是一个Li，因为我们北京是不是IV北京是不是就是一个Li啊，诶那时确实就获取到了，诶是不是非常简单啊，诶那在这儿来打印这个北京话写一下注释，打印我们这个北京，但是问题来了，我这LY是不是好几个呢？你怎么就知道你获取那是北京的。ID对肯其实基本上可以确定是吧，因为北ID为北京就他一个，但是我想更确定一点，那我说什么呢？如果你能打印出北京这两个字儿里，那是不是最好了，诶最好了，那怎么打印呢？诶我们来说叫做什么呢？叫做一个inner。

N in的一个HTML，我们说这个属性什么呢？诶通过这个属性可以获取到我们元素内部的什么呀，HTM代码啊，元素内部的，那我们来看我Li内部的N代码是谁呀？是不就北京这俩字啊，诶凭俩字，所以你完全可以干嘛呢？北京点一个inner h t码，我这一保存，咱们来看效果，一刷新再一点走，你是不是北京啊，诶确实获取到这个北京啊，所以注意叫做一个get island版ID，根据ID属性获取到什么呀？唯一的那个什么呀？元素节点对象啊，唯一的那个元素点对象叫做get by ID啊get的ID，然后下边再来找下边一个功能叫什么呢？叫做查找所有的Li节点，查找所有的Li，还有这个问题什么时候查呀？是不是点击第二个按钮是不是？哎，所以接下来我们来问第二个按钮。为什。

那为我们这个ID为B填零二的这个按钮来绑定一个单击响应函数，还是先来获取这个Y，一个B天零二等于一个doin的点一个GAW的100ID来一个BT02，然后呢，来个B天02.1个on click等于一个这个function，我于function这写完了，然后实验功能叫什么呢？叫查找所有Li节点，Li是什么玩意儿？这是标签名吧，换句话说他是不是让我根据这个标签名去查找这个节点啊，诶根据标签名，那我有什么方法呀，叫什么呀，Get elements，摆t name呀，哎，摆这个标签名啊，通过标签名，所以这里边我们来直接掉了，直接来一个Y，一个咱们就叫一个LIS啊一堆Li等于什么呢？等于一个document点一个get elements by tIgEr name啊通过什么呀，标签名来获取一组元素间对象啊，我们来写一下gets by t name可以什么呢？哎，可以根据我们这个标签名来获取我们这个一组元素节点对象，我们来看看这哥们获取到的是一个什么东西，还是我们来打印一下我们这个LIS加了S表示一个复数啊，直接alert一个LIS，我这一保存，咱们来看效果刷新。

一点走你诶这是一什么东西，Object h天L是个集合，这什么什么鬼玩意儿，首先我们来说，我这一个页面里Li对签有几个是不是一堆的呀？诶所以他这呢是不可能给我们只返回什么呀，一个的啊一个的，所以注意哎我们说了这个方法，人家说啊，哎这个方法，那你想想它应该怎么个返回，假如说我有十个LY，它应该怎么返回，诶是不是应该把这十个LY保存到一个数组里功的返回啊所以注意啊，这个方法会给我什么呢？会给我们返回一个什么呀，类数组对象啊类数组对象所有什么呢？所有查询到的这个元素都会封装到我们这个什么呀数组中啊，这个对象中啊，这个对象中一定注意它也是什么呀，类数组和数组很像，但是它不是一个什么呀，不是一个数组啊，不是一个数组。

那好了，那我们来看看今天是个类速度直接来什么呢？对我是不是打一下长度啊，哎，我看我这有几个LY啊，我这一刷新这这这绿色是不是就LY啊，诶这是四个，这是四个24得八加上31个对吧？诶11个我这一抬走你。

诶，是不是正好11个，哎，正好11个L啊好，那11个也不过瘾，你刚打印长度，我们希望了看到数组，看到数组了，我们忍不住应该干嘛呀，老是应该忍不住要变历一下，哎哎，变利我们这个数组直接来一个负循环，Y一个I等于零，I小于Li，点一个Les，然后来一个I加加，然后呢，直接alert alert LIS中号一个I，我这一保存，咱们来看效果一刷新走你诶LY吧，诶应该是一共是11个LY，这玩意弹半天它也没用是吧，我们有当然有变化了，这是不是同一个对象是吧？但是这对象的掌印模认是吧？那我们希望什么呀？是不是能打印出他们里边这个字是这样，哎，怎么办呢？点一个inner a哪啊，这块一保存，咱们再看，一刷新，咱们一查走，你北京上海东京，首尔乱七八糟，乱七八糟，乱七八糟是不是都有了呀？啊，这都有了啊，所以加一个in的可以看到它里边这个内容啊好，这是一个gets by tag name啊，可以根据我们这个标签名来查询一组元素间对象，注意它返回的是一个类数组对象，即使它查询到的元素只有一个，它也会返回一个数组，只不过数组里边只有什么呀，哎，只有一个元素啊，所以这边我们来说一下，即使我们这个什么呀，查询到的这个元素它只有一个，它也会什么呢？也会封装到我们这个数组装范围啊，也会分摸到我们这数组的范围啊，这是我们说第二一个啊，然后再往下看，那就先不用看功能了，肯定接下来为我们这个ID，为这个必填零三。

N的这个按钮来绑定一个什么呀？单击想要函数，直接把一个B填零三等于一个的，点一个GET100ID填零三，然后来一个必填零三，点一个on click等于这个，Function等于function个，然后把功能粘过来，功能叫什么呢？查找name等于粘的什么呀？所有节点name等于粘name等于粘name等于谁的name等于。

是这两个呀，哎，两个单选按钮，Radio是单选按钮，他们的name是不是等于单啊，哎，让你获取这哥俩，那这哥俩是个什么呀？是个这个input的标签吧，哎，Input的标签来咱们获取呗，那用什么呀，Name等于粘的，我们用什么呀？Guide elements by吧，所以这直接来一个一个这个S等于什么呢？Document点一个guides by name啊根据name属性获取来什么呢？GND啊是不是根据啊，诶那现在问题来了，我问你，他反问的应该是一什么东西，这东西我们也是，它是不是也是复数啊，既然复数返回的肯定是什么呀，哎，是是一个数组啊，哎，也是一个not list跟那拉是一样，它都是一个这个类数组的一个对象，直接还是来打印一下它这个什么呀，长度，长度我们来看是多少，这块一保。

保存应该是多少，是不是两个单向钮啊，诶我这一保存走你是不是就是二啊，诶长度是二啊，长度是二好那就获取到了我们这个音input子，但是还是这个问题，咱们来干嘛呢？诶便利一下呗，对吧，来一个这个或循环Y一个I等于零，然后来一个I小于这个in input点一个Les，然后来一个I加加，这里边我直接来一个alert，一个in兔中号来一个这个哎，咱们输出一下子一保存这块一刷新走你这1.inputelement，这来一个什么呢？Input element是就获取到了呀，两个input的，但是还是这个问题，你这输出这个对象不过瘾，我是不是需要输出里边这个内容啊，比如说我想输出这个什么呀，Mail或者这个非mail是吧？诶那怎么玩？

哎，我先说我这来一个阴字毛行不行，试试是吧，试试来我这一点走你哎呦哎呦没有吧，怎没有啊，刚才不好好的吗？这怎么没有了，哎我们来说一下啊，Inner HTML注啊inner mr4个字母HMR4个字母全都是大写的啊，全是大写用于什么呢？用于获取我们这个什么呀？标签叫什么呀？元素内部的什么呀？HTM2代码的啊，用来获取我们元素内部的M代码的，但是你要注意的是，我这音input的是个什么标签啊，他是自结束标签吧，他有没有内幕呀，有没有内有不是有没有内部啊，没有内部啊哎，他就哥一个，他就自己一个人，他没有内部，所以你要获取他阴德么？能不能获取到啊，哎呀，获取不到就跟什么呀，你问一个这个这个太监你有没有孩子一样，他是不。

可能的是吧，诶不可能的啊，所以注意对于什么呢？对于我们这个字结束标签它干嘛呀？诶这个属性没有意义啊，没有意义，所以这块一获取111获取什么玩意儿是不是返回空的呀，告诉你什么呀，或这没有哎啥也没有啊，啥也没有，所以这块一定要注意啊，这个东西对于自己属标签没有意义啊，所以注意对于自己属标签千万不要用这个什么呀，In的这面用了也没用啊，用了也没用，那完了，那我想识别一下是怎么办呀，我一看它这里边是不是有属性啊，诶那这这第一个Y6是什么呀？Ma第二个Y6是不是这个C麦啊，诶如果我可以把这个属性打印出来是不是就行了呀？诶那问题来了，那我怎么读这个属性啊？诶怎么读啊，读取对象的属性，但这玩意是不是没有比这个还简单的了，呃是不是直接点啊，呃如果什么呢，我们说如果需要读取我们这个什么呀？呃一个这个呃元素节。

点的这个什么呀，属性怎么读呢？诶直接使用我们这什么呀，元素点什么呀，属性名啊，直接使用元素点属性名，所以现在我们想读的什么呀，读的是它的这个Y6属性吧，你就直接点一个什么呀，诶点一个Y6，我这一保存，咱们来看一刷新，咱们一读走你卖了。是非麦啊，哎读什么你就点什么，你说不想读Y6了，想读什么呢？我想读它是不是还有一个name呀，Name你就点什么呀，哎点name，哎来我这一刷新走，你一点粘粘是不是都是粘呀，你说读粘读这name也不过瘾，我想读一什么，还有一个type对吧，一保存我们这一刷新走，你一读是不是radio啊，诶radio啊，想读什么你就点什么啊，想读什么就点什么，但是注意注意什么看着啊加一个。

Class等于一个hello，随便写一个class ctrl c，我把下面给它写上，Class等于hello，我想读什么呢？我想读class属性。来我这来一什么呢？直接来一个点class，咱们看看行不行，来我这保存，咱们来走你you喝，Andy find Andy fun，但是有没有class，有啊，哎，但是它却读出来是一个Andy fan，为什么呢？我们来说一下啊，但家注意所有的属性都适合这个我们说什么呀，比如举个例子啊，举个例子，我们什么呀，ID就是什么呀，元素点ID，我们这个name就是元素点name y6就是元素点Y6，读什么都行，都是这样，唯独特殊的什么呀，哎，但是注意我们这什么样class属性不能采用呢？这种方式，为什么不能采用这种方式，我之前说了，Class是我们这个GS里边什么呀，这个保留字，诶保留字，换句话说，这个东西它其实按理来来讲，它是不让你干嘛的，不让你作为这个属性名的，而我们的盗墓标准定义的时候，它确实也没有。

都采用什么呀，这个属什么样？哎，所以注意读取class属性时需要什么呢？诶需要使用我们这个元素点什么呢？你不能用class.class什么呢？Class。Name啊class class是我们保留字，不让你直接用，于是呢，他想了一招代替，代替什么呢？用class name啊class name我一保存，咱们一刷新搜，你这一读，Hello hello是不是出来了呀？诶，所以其他的呢，都不特殊，唯独就是我们这个class要用class name，其他的都是直接。

写啊，其他的都是直接写啊好，这个呢是我们说到我们查询的这个三个方法，再来回顾一下哪三个方法，Get is100id，根据ID获取一个元子件根gets版name，根据那个标签名获取一组元子件，GETS100NAME，根据name属性获取一组元素键，应注意他们返回的都是什么呀，元素检第一个返回的是一个，这两个返回都是一个什么呀？那数组啊，返回都是一个这个数组啊，那其实这三个方法你感觉哪个最好用，其实还是ID最好用，为什么呀，是精确定位啊，想找谁就直接拿ID找了，你下边这两个还得给你返回一个什么呀，数组啊比较麻烦一点，最好用的还是我们这个ID啊，但是这里边我们这个方法它都有一个特点，什么特点呢？这个名吧，它起的贼长是吧？哎，特别特别长，为什么这么长呢？咱们也不知道怎么想的是吧，反正长有一个好处，一看名你知道什么呀，你说什么意思，这一看名你知道它是根据ID获取，获取谁呢？获取元素，一看这个你就知道什么呀，根据标签名去获取，获取什么呀，元素，而且获取的什么呀，一组元素啊，一组元素，这个呢，虽然很长啊，但是把这些方法都给它干嘛呀，背下来啊，一定都给它背下来，也就说什么呢，咱们现在你这写的时候是不是有提示啊，哎，即使没有提示你也得干嘛呀，能写啊，你也得能写，都是非常非常常用的方法啊，非常非常常用的方法，好，我们这来听一下。