96.尚硅谷_JS基础_DOM查询

咱们上回讲的这个DOM查询呢，主要是说这么三个方法，Get element by d啊get elements by台name get element by name这三个方法他们有一个共同的特点，这三个方法都是谁的，都是document对象，哎，就说你都是什么呀，你get ID，你得什么呀？document.get ID这个得什么呀，document.get by name，这也是document.get element by name啊都是document的方法，他们都是什么呀？诶都是返回元素节点，那接下来我们来说什么呢？叫做获取我们这个元素节点，这个子节点，或者说什么呀，后代节点，那这些方法干嘛的呢？是通过我们这个具体的元素节点调用的，也就是说我下边所写的东西还是不是点了。就不是了啊，是什么呀，具体的元素，比如说我们这块，咱们那天写的那个，那我这是不是查到一个这个北京元素啊，诶北京这个元素节点，那是什么呀，我在这个北京元素节点的基础上在做什么呀，进一步的一个查询啊，在做进一步的查询，那我们现在来看它有哪些东西，第一个叫做一个什么呢？叫做一个get elements by take name，诶这方法。

跟这是不是一模啊，都叫get a伦by t name，但是一不一样呢？一不一样啊，这通过谁调的呀？这是通过元素节点调用的，而这个是什么呀？通过document对线调用的方法名虽然一样，但是哪不一样，调用的对象不一样，调用的对象不一样就是什么呀，它的范围不一样，Document是在什么呀？在整个页面的范围内查询的，而我们这个呢，是在什么呀？在指定元素的什么呀，后代中查询的啊这个范围要干嘛呀？要小的多啊，要小一些啊，要做一个他内，然后就这一个方法，剩下的都是什么了，属性了，注意没有什么了，没有括号啊，都是属性了啊，都是属性诶第二一个什么呢？叫做一个child no child什么意思，孩子no呢？节点说白了就是获取什么呀，当前节点的所有子节点啊子节点，然后一个叫做。

First child叫什么呀？当前节点的第一个字节点，Last child叫什么呀？当前节点的最后一个子节点，反正哎来回来去都是什么呀，子节点啊，都是子节点，我们这来看看啊，我们来那咱们来把我们昨天我先新来创建一个这个外部项目，咱们来一个这个Z14，然后呢，我把这些呢给它复制过来，包括我们这个，诶不是到我们查询，还有我们这个带样式表都给粘过来。粘过来呢，我们这改个名，我们叫做一个这个定义，让我们查询这块呢，给它删掉啊，然后咱们来看这个东西啊，先来点开它页面呢，我们先抗R运行。

诶页面就出来了，那我们接下来看该做哪了，哎，我们零三零一零二零三都做完了，接下来是不是该做我们这个零四了呀，哎，所以接下来我们工作干嘛呢？诶为我们这个ID为这个什么呀？B天零四的这个按钮来绑定一个这个单击想要函数，接下来干嘛呀，挂一个B填哎这这这还零四啊B填零四等于什么呀，Document点一个GUIDE100IDB填零四啊填零四诶接下来获取按钮对象，然后按钮点on，哎，Click，哎，On click等于个这个function，诶等于一个function，然后在里边实现功能叫什么呢？叫做查找叫什么呀？井号CT是不是ID为CT的节点，它下面的所有LY节点，那这个事其实要分几完成，是分两步啊第一步先干嘛呀，我先。

取我们这个ID为CT的这个元素吧，直接怎么获取啊？挖一个CT等于一个document，点一个get element版ID来一个CT是不是有了呀？CT是谁呀？哎，CT是不是这个ul啊，哎，所以我们这个CT对象应该对应的是这个ul，然后他让我干嘛呢？让我获取CT下所有LY点，所有LY是不是就这四个呀？哎，那问你了，我要这么写行不行，Document点一个get t这么一写什么效果了，所有的吧，什么呀，是不是页面里边所有的LY啊，不止这四个，剩下这几个是不是也都获取到了呀？诶，所以这个不行，我应该干嘛呀，是不是应该是CT点啊，诶CT点那他们区别什么呀？如果我是document是在整个页面查询，而我如果CT呢，是在什么呀，当前这个。

Ul里边查询吧，哎，这么一个它的范围不同啊，范围不同，但是方法名其实都是什么呀，一样啊一样来写一个吧，这是所有的LY节点，直接挖一个，我们来一什么呢？来一个LIS吧，等于它，诶然后我们来看看啊，直接来一个什么呢？Alert，一个LIS，点一个lengths，我来打印一下它这个长度，现在我一看应该有几个呀，四个吧，诶四个啊，我这一保存，咱们来一刷新一点走，你是四个呀，诶北京上海东京首尔啊这四个LY来，那咱们可以干嘛呢？再确定一点，可以给他做一个这个便利或循环，Y一个I等于零，I小于Li，点一个LIS，然后来一个I加加，我们这来什么呢？看值alert alert，我们一个LIS，中号一个I，点一个in的S啊，还是打印一下它内部这个S代码，这一保存，我们一刷新，咱们一点走北京上海东京。

首尔是不是就有了呀，哎，所以注意啊，这块叫做一个guide elements摆t nameme和我们上边那个差不多，如果什么呀，范围不一样，Do cube呢，是在整个页面里边找的，而这个呢，是干嘛的呀，是在我们当前这个CT下边找的，是CT，你就在CT下边找，是别的，你干嘛呀，在别下边找啊，它的范围小一点啊，反正小一点，这做一个get i100才叫内好，那接下来我们再看，诶下边一个呢，叫你叫什么呢？叫返回CT的所有子节点，那还是先来绑定我们这个单阶显函数为我们这个ID，为这个B填零五的这个按钮，来绑定一个这个单接响应函数，来一个Y，一个B天零五等于一个do的点，一个GAW100IDB天零五，然后这来一个B填05.1个on click等于个function等于一个function，然后我们来看这功能叫什么呢？返回CT的这。

就所有子节点，那我一看还是分两步，第一步还得干嘛呀，是不是获取我们ID为CT的这个节点呀，诶直接挖一个这个CT等于一个do的点，一个get a100跟上边那个其实是一模一样，完全可以复制过来，然后让你干嘛呢？返回CT的所有子节点CT，我一看CT所有节节点是不是就是四个LY呀，这应该是一样的是吧？哎，我们来看看啊，那这里边所有子GM有一个属性叫什么呀？叫child的。No啊，Child no，所以注意它是一个什么呀。属性啊，它是一个属性来，那这里边我们直接来什么呢？来一个Y一个这个什么呀，叫做一个，哎叫做CCNS吧，诶child nose等于什么呢？等于一个CT点一个child nose child的孩子no什么呀，节点S是复数啊child nose子节点啊子节点，然后我们来干嘛呢？来一下alert，一个这个cns点一个lengths，还是看它长度，长度应该是几啊，诶这一看是不是应该是四啊，哎来咱们看啊，这一保存怎么一点走你呦。

孙子竟然有九个儿子是吧？哎，不对呀，我这一看他是不是？就四个2Y啊，他怎么给我冒出一个九来呢？是不是哪整错了呀？诶咱们来看看吧，咱们想他既然有九个儿子，我这一看怎么数怎么数，他也是四个，那既然有九个，那咱们最好干嘛呀，我是看他这九个儿子是谁呀，哎，把它拉出来，咱们来看看啊，Y一个I等于零，I小于三，S点一个Les来个I加加，我们来一什么呢？Alert一个这个cns来一个什么呢？哎，我就直接打印那个对象，我看看它到底是什么类型的啊，什么类型的，我这一保存，咱们来看效果一点，咱们来看走你诶。

他大儿子，大儿子是个text text什么意思呀？文本是吧？哎，文本咱们来看二儿子一点是个什么？哎喂，诶二儿子我们知道二儿子是不应该就是北京啊，再看他家老三，老三呢，哎呦，又是个文本，这是不是就两个文本了？哎，两个本了啊往走，诶，这是一个LY，这应该是谁呀？上海吧，哎，上海再往下走，咔，哎呦，又一个文本，几个文本了？三个文本了啊，三个文本了，再往下走一个什么呀？L，再往下走几文本了？四个文本了啊，再往下走，LY，再往下走看什么了？五个文本了吧，你会发现什么呢？这四个LY我认识北京，上海，东京，首尔是不是四个LY呀？诶，那这五个文本哪来的呀？诶，你要注意了，这个先看属姓名叫做一个什么呀？Child。

啊，Nod nod就包括什么呀，是不是所有的呀，什么文本呀，什么注释啊，什么元素，是不是都算noe呀，啊都note，所以这块注意它不是获取的什么呀，元素，所以这里边你要注意我们什么呢？我们这个child not。这个属性会什么呢？会获取包括我们这个元素节点叫做什么呀？包括我们这个文本节点在内的什么呀？哎，所有子只要是子电都干嘛呀，都给你算上啊，都给你算上，但是问题又来了，哪有文本哪有文本对吧？来注意了，而且还有五个是吧？还有五个咱们来看看啊，你来看这这LY和这ul之间是不是有这么一个换行啊，哎，你把这个这我数数啊，这有一个换行。

两个。三个。四个。五个，这是不是有个五个空白呀，诶那我们一想这五个空白干嘛了呢？诶它给你当成什么呀，子节点了，所以他加这五个，再搁那个四个一加是不是正好是九个呀？诶我们来看是不是啊，是不是还是我还是干嘛呢？呃乐一下它这个长度保存，我们来看效果，这一刷新所有子页，我这一点是不是九个呀，来咱们看看啊，我把这空白的给他删一个，删一个啊一保存走，你再1.8个了吧，诶你这删一空白不要紧，给他少一儿子再来走一个，一保存再一刷新走，你是不是七个了，诶来我再来点一个，再删一个，这就其实不用演示了是吧，然后一刷新走，你是不是六个呀，哎，六个，所以注意这九个是哪来的，这些中间这些什么呀？诶，空白的这个内容，它给你当成什么了，当成文本计量啊，文本定了，所以这块注意根据什么呢？诶。

根据我们这个do标准标签。间的这个什么呀，空白也会当成什么呀，当成这个文本。文本节点啊，或者文本子点都行啊，文本节点，所以这块注意这五个哪来的就是那些什么呀，空白啊，就是那些空白，诶，但是其实有时候感觉这东西它其实不太合理是吧，还不太合理，这空白对于咱们来说有没有用啊，哎，其实没用，但是它这个标准就这么设计的，所以咱们就记住了啊，所以你要用它的时候，叉的note时候，你要注意它有这么一个什么呀，隐患，这些空白的时候，他也给你给你算上啊，给你算上来，那咱们来看看其他浏览器啊，看看我们这个C。可是我们的子节点，我这一点走你。九个对吧，哎，九个，然后再看看我们这个IE。IE呢，哎呀妈呀，样式是没了呀，诶为什么呢？因为我这文件是个什么呀，中文名啊，中文名怎么来把它解我解决啊，就把这东西往里拖，别用服务器往外了，直接往里拖，然后允许这样就行啊，这样行，然后呢，我这再一点这个紫便走你九个对吧？哎九个F10，看看我们这个I9个先I9我一点走，你是不是也是九个呀，来再看谁呢，我们这个IEI8来我一点组你，哎呀妈呀四个了是吧？哎四个了，这是为啥呀，你不说到标准把空白的也当成这个文本吗？那问题就是什么呀，IE8没有完全实现这个什么呀，没有实现这个标准，所以这块你要注意一点什么呢。

但是注意在我们这个IE8级以下的这个浏览器中嘛呢，不会将我们这个空白当成什么呀，当成这个子节点啊，空白文本当成这个子节点，所以什么呢？所以该属性在我们这个什么呢？在IE8中的长度会什么呀，会返回四个元素啊，四个元素，而其他浏览器什么呀，而其他浏览器是什么呀，是九个啊是九个，所以这块你要注意他们之间有什么呀，有有差异啊，有差异，但是其实你是四个也好，是九个也好呢，我们都不怕，怕的是什么呀。

你是不是不一样啊，一个是四个，一个是九个，我们用的时候是不是得注意点了，他们俩反回的结果不同，但是这里边你觉得谁好一点？其哎八好一点是吧，你给我返回勾一堆空白文本，这破玩意儿，我要它干嘛是吧，其实要是没用啊，所以是IE8呢，更合理一点啊，IE8更合一点，好，那这是一个它啊，它看完了呢，我们再看一个啊，再看一个，除了这个呢，我们还有一个属性叫什么呢？直接看啊，挖一个来一个CNS2等于什么呢？等于一个CT点一个叫做一个children啊，Children什么意思，孩子们是吧？哎，也是一个复数，跟他其实有点像，我们直接来看啊，Alert一个什么呢？Cns2.1个Li，诶，这是第二个，我们来说一下children什么作用。

秋人这个属性可以什么呢？可以获取我们当前这个元素的所有子元素，一定注意啊，一定要能读懂这个东西，我这个说什么说子元素说明说子极点呀，没有一说元素了，肯定就是什么呀，是不是标签了，也就是说它还会不会包括那个空白的文本了，诶我这一保存，咱们来看刷新，我这再一点走你几个四个，诶看我们这个C一点走你是不是四个呀，诶来再看我们这个IE，我这一点是不是就是四个了，哎就是四个了啊所以注意children润呢，只包括我们这什么呀子元素，而不包括什么呀这些文本节点，所以这个方式呢，而且什么呀，它是所有浏览器都兼容的，所有器返回的结果都是一样，所以推荐的使用这啊这个因为它呢，更符合我们需求一些啊，更符合我们需求一些。

好，这是我们说这个CH，然后呢，接着往下来看啊，往下来看呢，是我们叫做返回这个ID为phone的第一个子节链，还是看它这功能，我们还是先来干嘛呢？为诶为我们这个ID，为这个B天零六的这个按钮来绑定一个单击响应函数，直接来一个Y一个这个天零六等于一个这个document点一个W100ID06啊按钮先有了，然后B填06.1个on立等于个function等于function，然后来看叫什么呢？返回I诶phone的第一个什么呀，子节点还是先来个嘛呀，就找到phone获取ID为的元素。

直接来一个Y一个这个等于什么呢？等于一个这个，诶document点一个guide and版ID来一个什么呢？来一个这个。哎，Phone应该是谁呀？我们来看这图里边的phone是不是应该是是这一组，哎，这一组，那我们说了它的第一个子元素应该是谁呀？我们一想根据之前那个经验，是不是应该还是那个空白吧？子元素是L，怎么说子节点，那我们说是不是应该还是那个空白是吧？哎，空白我们来看看那第一个怎么获取啊，第一个其实最简单的用我们刚才这个思路，Phone点一个这个child的not，这是什么呀？这是所有的吧，那第一个呢，是不是来个索引零啊，这时候就表示第一个呀，哎，这就表示第一个啊，但是这种方式稍微有点麻烦，他还给我们专门提供了一个属性叫什么呢？叫做一个first child绊示当前节点的第一个子节点，注意又说的是节点，一说节点肯定包括什么呀，文本了吧，哎，文本啊，空白的文本，来，那我们来看看，直接来一个Y一个fir吧，等于什么呢？For点一。

个first child啊，First child来，我们来干嘛呢？直接来一个alert f，这应该是个空白是吧？我们来看看是不是我这一点第一个走你哎呦LY怎么不是空白啊，难道他没有找文本吗？LY我们来看看啊，点一个这个音字，那是谁呀，一刷新这1.lys是这个LY吧，诶他怎么没找那空白呀，我们来看看啊，揭晓这个迷底，这应文边我先给就去了啊，我一保存往下看，往下看iOS搁哪呢？诶为啥不是它不是空白啊，诶什么是不是写一行了？诶来咱们给它换一行，一保存这一刷新走你再一点是不是text了，哎，Text啊，所以注意为什么没有获取到那个。

空白因为什么呢？因为人家压根就没有空白啊，没有空白，所以这里边我们来说叫做一个first child，可以获取到我们这个当前元素的第一个子节点，诶一定注意它包括什么呀，我们这个空白文本节点啊，包括我们这个空白文题，所以中间你只要有一个空格，它获取到一定是那个什么呀，一定是那个文本啊，一定是文本，所以这块一定要注意，所以当你这写一个空格的时候，你保存你发现就是什么呀，就是这个text啊text，然后呢，还有一个属性啊，还有一个属性跟它类似，我们直接来看一下啊，直接来就直接写吧。F等于什么呢？点一个叫做一个first child什么意思？哎，是不是第一个元素子元素啊，哎，这是可以获取什么呢？可以获取我们这个当前元素的第一个子元。

不换句话说，它包不包括空白的，诶不包括，好，那我们现在来看它之间是不是一个空白啊，诶咱们来看啊，保存我这一点走，你是不是还是L，诶还是L是子元素，它不会获取到那个文本啊百文本，但是注意了，这方法不建议就是不建议去使用，为什么呢？First iland Cha兼容性什么呀，90以上的，如果你要做PC端的话，我们毫无疑问肯定会需要兼容IE8的，那这块呢，你IE8里边咱们来看看效果，我这一保存，咱们来看你刷新IE8走，你完了安find啊，安find的，所以这块注意，如果需要兼容IE8，呃，First element child，诶不支持我们这个IE8及以下的这个浏览器，呃，如果什么呢？如果需要兼容他们，诶尽量干嘛呢？尽要不要使用，你说我不兼容这尾巴，那没事，哎，该用用，但。

如果一旦尖尾巴了，这东西尽量去避免去使用啊，尽量避免去使用好，这是我们说的first child啊，然后呢，再来说first child说完了，还有叫一个last last还用说吗？是不是一样的呀，First找第一个last是不是找最后一个，诶最后一个啊好，这个是我们说的这么几个，一个方法，还有这么几个属性，诶方法就是我们这get白t name，它不同的就是范围小了，然后呢，呃，属性child not，诶子元素，哎子集点那子点children是我们这个子元素，哎，First child是我们什么呀，第一个子源last child是我们这个最后一个，待会你来自己来测试一下我们那个last啊last来我把这个呢，先给它改回来啊，去测一下保存，我们来听一下。