97.尚硅谷_JS基础_DOM查询

那刚才呢，我们这说了这么几个，一个方法三个属性啊，Gets name child呀，First first child last child，那这几个东西呢，它还是都是获取什么呀，获取我们这个。子节点是吧？哎，或者说是获取我们这个后代节都行啊，但是这里边我们来说除了子链后代节点我们还有什么呀？哎，父节点还有什么呀？是不是兄弟节点呀？哎，所以接下来呢，我们来说叫什么呢？叫获取父节点和兄弟节点啊三个属性，第一个呢，叫做一个parent parent什么呀，父母是吧？就是父，就是父亲的意思啊parent no叫什么呀？父节点啊，当前节点的这个父节点，然后呢，下边又叫做什么呀？S啊S什么意思？兄弟姐妹啊，兄弟姐妹previous sibling就什么呀，前一个兄弟啊，前一个兄弟next sbling呢叫什么呀？后一个兄弟啊，后一个兄弟啊三个属性操作我们这个副节点还有这个兄弟点的好，我们来看一下，还是就这几个来看，第一个叫什么呢？返回I地为。

北京的这个副节点，哎，这于北京副节点，那其实都不用想了，刚才我们绑定到BT06了，接下来我们是不是该给这个碧天零七榜呀，诶那这块你会发现我绑定这事儿吧，有点有点烦，我先写上啊为ID为这个BTN07的这个按钮来绑定一个这个单击响应函数这东西吧，你会绑定完绑定去吧，你发现点这东西，它这没有什么技术含量吧，哎，都是死的，我们看从第一个开始就是什么呀，先获取这个按钮，然后按钮点on格click是不是等于函数，这也是获取按钮，按钮点on格等于函数，这也是获取按钮，按钮点昂等于函数，是不是一直都在做重复性的工作呀，而且工作没有任何技术含量，那我们说了，我们那个优良传统药发起作用了，又开始干嘛了，又开始犯懒了，是吧，这东西不行啊，写的有点麻烦，写一种大量的重复性的代码，那这块怎么办？

嗯。诶，我们说了以后，如果也是这种啊，看到这种大量的重复代码了，你就想想我能不能把它给它提取成一个什么呀函数啊，我能不能给它提取出来，诶那我们想想我在这儿，在上最上边啊，在我们这最下边全局作用里边，我现在干嘛呢？我来尝试定义什么呢？定义一个这个函数，诶专门干嘛呢？诶专门用来为什么呢？诶指定元素来绑定我们这个单阶响应函数来，那么直接来定义一个，先把结构定出来叫什么呢？叫做function function什么叫什么，叫做一个my click，哎，我的点击啊my click这边起个名名，然后呢，函数结构名字定义出来了，然后这函数里边我们写什么呀，写什么呀函数，我们说了，你定义函数的时候，你是不是想把我们这个重复性代码给它提取出来呀，所以干嘛呢，你干脆你先把这个代码给它。

给它粘过来，把它粘过来，所以粘过来以后，但是这么写肯定不行，你粘过来以后，现在这么写是不是只能给BT01绑定啊，所以这块我把它改改，把这个重复性代码给它粘过来，但是但是呢，这些重复性代码里边是不是都是重复的呀，是不是有不同地方啊，不同地方怎么办？不同的地方我们需要以这个十参的形式，是不是给它传进来呀，哎，传进来，所以接下来我们来看哪需要改的，肯定这么写肯定不行，哪需要改的，首先我们来看这document.get element版ID，我这传的是BTN01，是不是获取BT01这按钮对项啊，哎，那我问你了，这能不能永远是BT01啊，你要永远是BTN01，你是不是永远都给那个按钮绑定啊，那我们需要干嘛呀，我是不是需要给这个任意的按钮绑定啊，所以那这东西干嘛，我是不是应该从外边给。

传进来呀，哎传进来，所以这里边我定一个参数叫什么呢？叫做一个ids t，哎，ID的这个字符串，所以这里边我们来说第一个参数，第一个呢，我们叫做一个ids t s tr来表示它是一个字符串，哎要什么呢？要绑定单击响应函数的什么呀的对象的这个ID属性值，ID数性值，所以ID从外边传进来了，那我这还用不用写BT01了，写谁？哎是不是写这个IDS，换句说他给我传谁，我是不是就用谁啊好，那这传完了，那这块呢，最好也不叫B天零一了，就叫什么呀，B天就完事，那这也不能B天01点昂克0B天第二安克里不就OK了呀，这样你传什么ID，我是不是就给谁绑定啊，好，那这整完了，还有有哪需要动作。还有哪个学校变？诶，咱们看这这函数这有没有问题啊。

函数有没有问题？诶，那现在我给谁绑定，我一绑定单机项响函数是不是就是它呀？给谁绑定单项函数就是它，那现在这个东西就有意思了，我绑定完了以后发现什么呢？我点所有的按钮肯定都是什么呀，哎，是不是一个效果呀？诶点所有人的函数应该是一个效果，那是我们应该是什么呀？应该是我点按钮一是按钮一的效果，点按钮二是按钮二的效果，点按钮三是按钮三的效果呀，那他们能不能绑定同一个函数，不能，也就说这函数是不是也是会变的呀？诶那怎么办呢？哎，函数能不能传进来呀，能不能啊，哎，函数也是对象，是对象是不是可以做参数啊？所以干嘛呢？我再定一个第二参数，就叫一个FUF因该表示什么呢？表示我们这个事件的一个回调函数，哎，当我们这个哎单击我们这个对象时，单我们这个元素时该什么呢？该函数将会被什么呀触发啊将。

会被出发，所以这块你要注意，我们这传进来以后，我这还能不能写方式了，哎，不能了，等于谁了，等于f fun是不是就OK了呀？好，这函数定义完了，咱们来测测好不好用啊，好不好用来这里边我们来看这这要你干嘛呀？为ID为必填零级的按钮绑定一个单项函数，那我这就不写了，直接来什么呢？麦CLICK2个参数，第一个是必填零七，第二个传一个这个回调函数传过来以后alert一个hello，咱们先看看它行不行，第七个我这一刷新应该是它一点完了，还真不行啊。咱们来看看哪报错了，我这刷新一下啊，点一下它，诶退出，嗯，刚才是没刷新上还是什么玩意儿是吧，我者缓存类的啊，但是好使了是吧，好使了就不快了，好那现在这个能看懂吗？待会下去自己来写一下，一定注意函数也是对象，是对象就可以作为参数啊，可以作为参数，好那现在呢，比我们上边那种是不是稍微的简单了一点啊哎，稍微简单一点啊，然后再往下来，那让你干嘛呢？让你返回ID为北京的节点副节点，诶那这块还是分成两步，第一步干嘛呀？诶是找北京啊哎，获取ID为这个北京的这个节点，直接挖一个北京，等于一个do，点一个guide and版ID北京，北京是不是有了呀，然后你干嘛呢？找找他父亲，哎他父节点，他父节点IDV北京是不是Li啊？他父节点是谁呀？Ul啊ul。

二我们怎么用啊，叫什么叫做parent note啊，叫做一个负极点啊，负极点，所以这边直接来一个Y，一个这个PN等于一个BJ点，一个parent note啊，它的一个负节点啊，它的负极点，那这玩意儿其实说是负极点，这东西有没有可能是文本？

没有可能文本啊，哎，没有可能，一说负了肯定是什么呀，肯定是元素啊，一说负了肯定是一个元素，所以我们就直接来一个alert，一个这个PN，然后一保存，咱们来看效果可以刷新一点怎么样，NL u list element是不是有那个ul啊，哎，Ul啊就获取到了啊，这是我们叫做一个parent note，获取一个元素的什么呀，负元素啊，获取一个元素的一个负元素，好那这块还是这问题，你虽然获取到了，但是它是ul是吧，但是我们需要最好是不是能证明一下啊，诶我们来还是干嘛呢？打印一下这什么呀，In呢？诶还有一个问题，Part note它可不能，可不可能返回一个数组啊，哎，不可能，它返回的什么呀，一个一说负了肯定是什么呀，肯定是唯一的那一个，这东西能确定啊，能确定我一保存咱们来看效果，我这一刷新咱们一点走你，诶是不打印堆LY啊，为什么是LY啊，诶因为我的这个ul内部是不是就是LY啊，诶内部的连H。

代码呢，就是这堆啊，就是这堆叫做一个inner毛，诶然后呢，咱们就是再说一个东西，除了inner h毛呢，我们还有一个属性叫什么呢？叫做一个inner n呀，Inner text，诶我们说该属性可以获取到我们元素内部的这个文本内容，什么意思，我们来看一下，刚才我们这是不是alert一个inner htl啊，这个换了来一个PN点一个inner text啊inner text我们来看效果啊，一刷新咱们一点走你诶发现什么了，哎，是不是标签没了呀？诶标签没了啊，所以这块注意它的特点什么呢？它和inner n牌呢类似。Inner h Mr类似不同的是什么呢？诶不同的是它会什么呢？它会诶自动将我们这个什么呀，HTML标签去除啊去除，所以注意你用inner text获取的东西是没有什么的，没有标签的，就这么一个区别，Inner Mr呢有标签，Inner text呢没有标签，剩下的都一样啊，剩下都一样好那这个呢，是我们说的这个叫做一个part note，获取这个负节点啊获取负节点接着往下走，往下走下边改我们这个BTN008了是吧，为ID为这个BTN08的这个按钮来绑定一个这个单击响要函数。

直接Y，诶直接来一个这个my click来一个ID，我们这个BT08，然后逗号来一个function，诶function，然后呢，让你干嘛呀，返回ID为Android的前一个兄弟间，咱们这样吧，我先给它弄出来啊，都得绑定是吧，咱们干脆呢，我在这都给它写上啊，都给写上，到会咱们就不一个个写了，然后呢，不要忘了这ID干嘛了，你想着改啊，你不改后边就改，把前面给覆盖掉了啊幺零，这是我们这个幺幺啊幺幺，然后这是一个叫什么呢？让我们返回爱D为安卓的前一个兄弟节点啊前个兄弟点，那这块还是分两步，现在干嘛呀？哎，获取我们这个ID为Android，诶Android and卓的一个什么呀，节点元素，直接挖一个ND吧，等于一个document的点一个guide and版ID，诶Android获取到它，然后。

后呢，他的前一个兄弟，他前一个兄弟是谁呀？安卓是不是跟这那呀，前一个应该是谁呀？是不是这个iOS呀，As那怎么获取呢？我们有一个属性叫做previous sibling啊previous sibling叫做前一个兄点节点，所以这块我直接来一个哎来一个Y一个这个等于什么呢？等于个这个and点一个previous s啊叫做前一个兄弟节点啊，然后我直接来一个alert一个，咱们就直接点音直接打印吧，我这一保存咱们来看一刷新咱们一点。

Li吧，诶这应该是我们那个什么呀，LS啊LS直接来看一下，第二一个这个in呢，给毛这一保存，一刷新这一点是不是los，哎叫做前一个兄弟结，但是注意了它，你看它的描述叫什么呀，前一个兄弟节点，换句话说，如果中间有个空格，你猜猜是谁，这就空格啊，哎，空格啊，所以我们来看笑话一点走，你这个时候就变成text了，哎变成text了啊所以注意诶它也会获取什么呀，空白的一个文本啊，也会获取空白的文本，也可能诶获取到我们这个空白的一个文本啊，一定要注意它有这么一个问题，然后呢，还有一个方法啊，我们来看看啊，直接来一个and安卓点一个叫什么呢？Previous。

Element sibling，哎叫什么呀，前一个元素什么呀，兄弟啊，前一个元素兄弟来一个Y一个这个PE吧，等于它然后直接输出这个PE啊来我这一保存，咱们一点走，你是不是LY啊，LY来咱们看看加一个这个什么呀，加一个这个。空格已保存，可以刷新。是不是还是Li啊，哎，还是Li啊，所以注意叫做一个previous，叫做一个element sian它是获取前一个什么呀，兄弟元素啊，我先给它改回来啊，这是我们获取前一个兄弟元素，获取前一个这个兄弟元素它是什么呀？不包括那个什么呀，空白的文本，但是它的问题什么问题呢？IE8及以下不支持啊，不支持，所以这阶段咱们是不用的，咱们考虑兼容IE8，所以这个东西咱们是不用的啊，你就了解一下以后，诶在移动端的时候，或者不需要兼容外八的时候才可以用啊，它可以用兼容八的，就尽量避免去用啊好，这也是我们说previousian叫做前一个，还有一个叫什么呢？还有个叫做一个nexian叫什么呀，下一个，诶下一个，那对于我们这个安卓来说，下一个是谁呀？是不是这个Windows phone这个LY啊LY啊，那我们就不演示了啊，大家自己来测试一下啊，自己来测试一下，然后再往下来看，下边一个叫什么呢？叫做读。

取咱们直接往下说了啊，其实下边咱们都讲过了，咱们再回顾一下叫什么呢？读取ID为username的value属性值，那这个工作其实也是分成两步，第一步叫什么呀？获取ID为username的这个元素吧，直接挖一个U等于一个do的，点一个get by ID叫做一个这个username是不是就有了呀？Username是谁呀？ID跟这的是吧，是个什么呀？是个的是不就是我们这个文本框本框啊好，那现在获取到他个对象了，那接下来让你干嘛呀？让你读取它的这个Y6使用值吧，哎，Y6使用值它怎么读啊？那是不是就点Y6啊？哎，读取这个um的这个Y6属性值，直接alert um.Y6，我们说了读什么是不是就点什么呀？

哎，咱们来看的Y6是多少，是不是abcde啊，诶abcde我这一保存咱们来看效果，我这一点咱们一读走你，诶是不是abcde啊，诶你看正好是谁呀，是不是就是这里边那个内容啊，诶你发现我这一点读的是不是就是文本框里边内容啊，诶来我们来看改一个改一个哈，我这一我这一改啊这一点走你是不读hello啊诶来我改一个改一个这个你好。

我这一点是不是读你好啊，哎读你好啊，所以注意我们说了，哎这个文本框的Y的使用值就是什么呢？文本框了Y6属性值就是什么呀，就是我们这个文本框中，诶文本框中这个什么呀，填写的这个内容啊，填写的内容它里边写的是什么，我们获取到了就是什么啊，写的是什么，获得就是什么啊好，那这个呢，是我们说的这个读取，然后接下来让你干嘛呀？诶是不是设置啊，诶设置呢。是不是就更简单了呀，读取你就直接点Y了，那你要设置呢，直接什么呀？诶Um.Y0是不是等于一个值啊，诶等于个值，等一个值来什么呢？诶今天诶天气是真不错，诶写这么一个一保存咱们来看效果啊，现在我一刷新，现在这是不是还是你好的呀，诶来我现在获取一下是一个你好，然后看着啊我一点走你干嘛了？是是不是变成今天天气真不错了呀，诶来我再获取从你是不是今天天气真不错呀，哎，然后你再改一个，再写一个。

走你就换这个了，哎换这个了啊，所以注意它获取到的就是我们这里边这个内容设置的时候干嘛呀，你改它里边是不是就就跟着变了，哎就跟着变了啊好，那这个呢，是我们说的一个修改这个Y6属性值，然后下边一个最后一个，最后一个其实就就更简单了，获取I地为北京的这个文本值吧，诶上礼拜咱们是不是就做了呀？诶来先来干嘛呢？获I地为北京的这个元素Y一个北等于一个document，点一个guide and100id北京，然后要获取它里边的文本值，直接干嘛呀，Alert呗，Alert一个北点in的码，我这一保存北京里边我怎怎么知就北京这俩字啊，哎俩字我一保存，咱们一点走你是不是北京啊，诶当然这块你用inner什码行，用这个什么呀？诶inner tax也行，这俩现在没区别，为啥没区别呢？因为你这里边没有没有标签啊，没有标签，所以用哪个呢都行一点。

是不是一样的效果呀，哎，一样的效果啊，但是如果有标签那就不一样了，有标签上边这包括标签下边这个嘛呀，没有标签啊，没有标签好，这也是一种方式，然后还要说一种啊，还要说一种相对来说有一点点麻烦的，但我们要说一下它的思路啊，首先我们这个北京是一个什么呀？是一个元素节点吧，北京是不是就是这个Li啊，现在我要获取的是谁？获取的是北京里边这个这两个字吧，这两个字是一个文本节点吧，那我现在问你了，我这个元素节点和这个文本节点它们之间是什么关系？是父子啊，这个元素节点是不是我这个文本节点的这个负元素啊，负元素，那而且什么呀，而且这个北京是不是还是我们这个LY的第一个子元素，也是最后一个，它是什么呀，是是唯一的那个子元素吧，诶那我一想，诶，那我能不能获取京这个文本机电。

能不能呢？来，那就直接来什么呀，来获取北京中的这个什么呀，文本节点，直接来一个北京点一个叫做什么呀，叫做一个fourth child是不是第一个文本呀，诶第一个文本，那北第一个子节点，我这Li是不是就一个子点呀，所以你这获取到的肯定是什么呀，诶北京，而且还是一个什么呀，文本旗垫啊问你看直接来一个Y，一个FC，第一个T的，然后呢，我直接来一个alert FC，然后一保存咱们来看啊，刷新一点走，你是什么呀，Tax啊，这个对象我们是不是获取到了？诶当然问题来了，我要的是对象吗？不要对象要的什么，要的对象这个字吧，哎，要这个内容他怎么获取啊，对象有了，你再想获取它的字，那简不简单了？诶诶别证了，这可不能证了啊，文本里边就更没有了，这可不能in了，那怎么办呢？我们说了每个节点都有的三个属性，Not no type，还有一个no。

Value，其中文本节点的note value就是什么呀？是不是就是文本内容啊哎，文们内容那你节点已经有了，你要想获取它的内容，直接点什么呀？点node value6是不是行了呀？哎，Noe value6这样一保存，一刷新，再一点是不是就有了呀，哎，就有了这种方式呢也可以，但是其实呢，这种方式明显要比我们这个要干嘛呀，麻烦的是不是太多了呀？诶麻烦有点麻烦啊，但是你要知道它的思路是什么，首先你要获取那个文本节脸对象，然后来获取它的什么呀，No value啊noe value，好，当然这个这种写法呢，可能用的更不多，我们更常见的可能是这样写，直接北京点一个first child，现在我们是不是分着写的呀，更常见的什么呢？点一个first child，然后紧接着点一个no呢Y这样可能会用的比较多一点啊，比较多一点已保存，但是效果呢，是一样的啊是一样的诶但是呢，还是用的话，最好还是用这什么呀阴。

A牌简单一点，这稍微有点麻烦，还点麻烦，但是这几种方式你要知道啊，以后看到这东西你知道它是干嘛的啊，它是干嘛的，好，那这个呢，是我们说这个DOM查询，整个就给他这个说完了啊，我们来听一下。