02-javascript/28-尚硅谷-JavaScript-dom对象查询练习

最后呢，我们来讲一下这个节点的常用属性和方法，那么首先有个事情咱们先确认一下，我说啥是节点，节点呢就是标签对象啊，你可以这么理解，节点就是标签对象，但是远远不止。比如说打开某个页面啊，比如说这是节点，没错吧，连文字都是节点。啊，连文字都是节点，你在这里面整一个注释，这个注释都是节点，但是对于咱们开发而言，咱们一般操作是不是只关心标签，所以呢，我们简单一点说啊，就是节点就是标签对象，因为其他我们操作不当，能理解吧？好，那么节点的常用属性和方法是什么？就是指这些标签对象啊，都有哪些属性和方法可用，就这个意思好了，那么常用的方法呢，有两个，一个呢是get element by，这是不是很熟？就是按照标签名查对吧，还记得吧，你这是干嘛的呢？你看下哈，获取当前节点指定标签名的孩子节点就是掌握的子节点当中指定标签名的。

刚刚那个document是什么，是不是查询整个包的里面指定的名呢？啊，现在呢，是指向某个指定里面，就比如说。我这个地方有个div。是吧，我觉得这个标签在这里面，我拿到这个标签对象之后，按照标签没查是不是只有他这个input跟他们其他没没什么关系，能理解了吧，这个啊。好，这个呢，A pen child是什么？你看到啊，可以添加一个子节点，这个参数就是要添加到孩子节点，一会我们会演示啊，添加直接点。有哪些属性呢？呃呃，To路啊，这是什么？当前节点的所有子节点这个呢，第一个子节点这个，最后一个指节点这个它能弄复值点吧，对吧，哎，Next是零对吧，就下一个就是上一个这个呢，Class内。

是class属性的值，诶大家发现没有，这个好像跟前面以往不同，咱们前面要获取ID的值的时候，用的是ID属性是吧？然后获取type用的check，然后获取value的value，然后获取check check，诶唯独到了class属性的时候换了，为啥？因为你想想哈，你前面是一个done。对象诶动对象点class是不是感觉到什么东西了，这是不是关键字啊，它是Java中的关键字嘛，为了防止这个关键字冲突啊，所以。人家就用这个class name能理解了吧，就解决这个问题啊，还有这个in呢，HTML in HTML档期也用过，表示设置和获取起始标签和结束标签里的内容，那么inner test呢，是表示设置和获取起始标签和结束标签中的文本。

啊，但这么讲呢，肯定是没有什么效果的，我们给大家做个练习，这个内容呢在这里。我们回到我们今天这个内容里面来啊，在我们笔记里面有一个零五的查询，把这个目录都复制过来，打比方说的例题就在这里面，给它贴到第二贴里面来。是吧，粘贴进来好，粘贴进来以后啊大注意看他这里有个查询，你把它刨起来。双击一下啊，把它跑起来，诶接下来咱们要干的就是什么呢？就是点击这些按钮，完成这些按钮上指定的功能，去查找左边这些标签内容。

就这样子，那这个页面里面有啥呢？我们也可以看看这个页面，你看啊，动查询的里面先是引入一个样式文件法，呃，就是引入这个啊，然后这里是不是页面加载完了之后啊，然后呢，他就按照ID啊，查找某些标签绑定的这些单机事件，看见吗？都一样吧，呃，都一样，直到这里body里面就是这里面的内容哈，然后他先有个div。这个div呢，就是外面这个大的框，看见吧，里面又有一个，然后说你喜欢哪个城市，这是一个段落。就到这里了，看见吗？然后这个东西特别像菜单嘛，这东西是怎么回事呢？哦，原来它是一个无序列表，看见吗？咱们昨天看到那个无序列表是不是从上往下那加了样式之后呢，其实可以从左到右排，你看见吗？哎，这是个无序列表，北京上海东京收入看见吧，然后到你喜欢哪款单机游戏。

那就这个，然后就是红警实况极品飞车，又是一个无学列表，看见吧，红警实况飞车魔兽对吧？然后到你的手机操作系统是什么。就这个。然后这里是什么呢？IOS啊，安卓呀，Win phone啊这些啊，你看就就是也是个无序列表吧，啊，又是他们接着到下一个框。下一个框就是下面这个小框，看见吗？然后呢，真的哎，一个性别两个性别嘛，对吧，一个男女嘛，对吧，拿去他们，然后到这个name。然后有个输入框，有个name，有个输入框看见了吗？剩下的就是。一个div啊，然后里面都是按钮，看见了吗？啊，其实就是这个。

去做些按钮了吗？所以这里叫做b TN list，看见了吗？按钮列表。按钮列表，好，那现在我们就来看看这东西是怎么做啊，首先第一个按钮咱们先看看瞅一瞅啊，他说要查找。ID为BG的这个节点。有同学就会问了，老师，这上面哪里写ID了？我只看到井号这个东西是啥？咱们讲选择器的时候，井号打头是不是ID选择器啊，因为程序员写的是程序员的这个话哈，这个是什么？就是ID选择器，就是按照ID查，ID是北京的，这个节点能看到吧，那你来这里看看啊，ID是北京的，那我们找找是谁，ID是看见了吧啊，ID是北京的，那接下来我们干的是啥？你是不是先给这个按钮绑上事件呢？来回来看这按钮有什么元素没有，这个按钮是不是有IDID到VTN01，那我们先按照ID查绑定一下啊，那其实上面这里呢，它刚好就是除了第一个没有绑定，后面都给你绑定。

对吧，那自己写一个吧，Document get element BYD。BTM01.on click。我我这样写你能看得懂吗？这个是不是一个对象啊，那么对象点事间名是不是直接写啊，这是连起来写而已啊，跟前面是一样的，然后这个按钮点了以后咱们要干啥，咱们是不是查ID是BG的是吧，那还是按照ID查document.get element BYD BG嘛，是吧，OK，嗯。笔记吧。BGO啊BJ，那这是啥呀？瞅一下呗，BGBG来运行一下我们点。它是不是一个Li，你看下面。别着急啊。

这是个Li，看见了吗？那老师这么多Li，我哪知道你这个L是谁呀？对吧？怎么去确认呢？这个Li里面是不是北京，我只要取了它起始标签和结束标签的内容，瞅一瞅不就知道了吗？是吧？哎，怎么写大家看啊，这是那个对象啊，这是那个对象，我点in呢，诶，还记得吧，这不就获取它里面的内容吗？他是不是北京就好了吗？是北京吧，啊好，第一个按钮咱们就解决了，接着咱们看看第二个按钮查找所有Li的节点，那你觉得这个怎么查呀？对，是不是按照标签明查。诶，因为你想想啊，Li的是什么东西，Li其实就是你往下看啊，是不是就是标签名，按照标签名场啊，就是get对吧，那第二个按钮里面别着急啊，这是第二个按钮来写上document.get element by对吧？啊另。

好，那么这里面ays是什么？还记得吗？咱们讲过是不是插头那个集合呀，来刷新一下，点这个集合吧，那这个集合到底是几个呢？点Le。刷新再点11个443嘛，11嘛，啊，这没啥可说的啊，接着看第三个。查找name等于真的所有节点等于真的是哪呢？你往下拉啊，其实性别那个地方来来来往下，别着急啊，别着急。看到这里了吗？Name等于转这性别这个地方是不是按照name来查啊？回到第三个按钮啊，第三个按钮，Document get element by name什么呢是吧。

啊，叫做啊。也累几个呀，两个吗？找找第三个，这俩没啥可说的啊，第四个按钮。他说查找ID时线写下的所有Li节点，那这个你就得按照两个步骤来查了，第一获取ID为CA呀，City的节点没错吧，第二呢，就是通过CA这啥呀C节点应用一个方法，咱方胖你看啊。是不是有按照标签明查这样的方法就好了嘛，他就可以帮你按照标签明查呀，哎，按标签明查子节点就这样。那其实这个代码呢，你可以连在一起写，就是document.get element by d，这是不是city啊，然后再get element by什么啊，那这里是Li打通B。

然后是Li。啊，Ays，好，那么我们来看看city在哪啊，City city city看见了吗？这是不是city，它下面是不是只有四个那所以这里弹出来的时候是点四个吧，好，走一走。来走这个吧，OK，然后咱们再看看第五个啊，他说返回C点下的所有节点，大家注意啊，就是这里的文字啊，其实就是这个按钮上的文字，看见吧，就你方便怎么看怎么看，能理解吧。

啊来第五个返回ID下的所有资金点，那你是不是还得也得一样，你得先查到city，第二就是通过。C铁过去所有子节点没错吧，你这么看啊，那这个咱们说是不是查找C铁的，那它的所有子节点呢，注意看点。Children lose，这就是他全部的点了，有同学可能会说，这个没印象啊，别着急，咱们用的少吧，往下看。看见了吗？说明是什么？是不是所有节点，那咱们看看是几个啊，咱们看是几个。这个点九个是吧，我们看现在想是不是九个啊。筛一下，诶，这不就四个吗？哪来的九个，其他五个都是四升的是吗？大家注意看一下哈，为什么是九根呢？它是这么算的，他说这是一个。

第二个第三个第四个第五个第六个第第七个第八个第九。第九，那为什么这些也算呢？大家想想这些是不是空格字符，空格字符是不是最终解析的时候是一个空格是吧，那你一个空格它也是字符串法。能理解吧，这东西它也是一个字符串呢，那一个字符串它是不是也算一个字符，这字符串值也算一个节点呢？咱们刚刚讲那个动力向它有印象吗？Document对象的时候，我们说过，这里面只要你是字符串，只要是文本，是不是都是一个节点，对象也是子节点，对吧，所以它也是，如果不信我们可以试试看怎么试，你把这个东西放下来是不是少一个，你试一下嘛，是吧，咱们刷新来。

少一个了啊，就这样子啊，OK，那我回复一下好呃，接着再看啊，咱们看第六个返回ID是form下的第一个直节点，ID是form是谁啊，ID是form是不是这个第一个直节点是不是这个I iOS啊，然后我们看怎么做啊。啊，第一点。查找ID为form的节点，那么document的点ad吧，放吧，然后取第一个直接怎么办呢？还记得吧，第一个嘛，好，我们alert一下。哎，别着急，好，那现在运行一下啊。第一个吧，点它是LY，但问题是这个Li到底是不是iOS呢？怎么去确认呢？对，In赢了HT没啊。

对吧，OK，那么我们刷新一下。变了对吧，IOS好，这是我们再来看返回。ID是北京的负节点，那你大概是什么样子？第一是查找ID为北京的节点，迪奥在通过这个什么呢？北京节点获取负节点是吧？那ID是北京是谁呀？是不是这个呀？他的父亲也是不是这个无序列表啊，好来啊。document.get d BG。BGOBBG，那么它的负节点就是BG.parent note负节点。

好，那么我们来看看是不是无序列表。U，看对吧，就是个无序列表啊好，但是这个无序列表到底是不是就是这个呢？因为无序列表是不有好几个在里面呢，怎么算呢。ID也行啊，也行都可以啊。再看。这是它的复原数据里面的内容吗？这不就取出来了吗？你怎么设都行啊，就测一下好，然后看第八个返回ID是安卓的前一个兄弟ID是安卓是谁。这是不是安卓ID，是安卓吗？前一个不就这个iOS吧，还是他来瞅瞅啊，怎么做？第一获取ID为按注的节点，第二就是通过。

按最节点获取前面兄弟节点就这样，那来吧，接连在一起写就可以了啊document.getd按作位吧，是吧，前一个呢，Previous是吧，这个啊好。好，我们瞅一下吧，看一看啊，这是前一个是吧。也是个AI，我这个A到底是谁，再测试一下。咱们刷新。

大吧，好，咱们还差三个啊，那第三个什么呢？他说返回ID是U0的Y6出现值，那第六是哪呢？稍微看看，别着急啊。ID是他是吧，这是个啥？这是我们输入框啊，咱们刚刚讲这个验证用户名是否有效的时候，是不是就获取过了，好，那这个简单name咱们记住他的ID了，来走一下直接查就行。这里面是username是吧，然后怎么获取，是不是点六啊，刚刚不就讲过一次吗？来。走咱们数的内容啊，走这是不是过去了啊，过去了那设置设置它里边的值啊，设置就对它赋值呗，能理解吧，来走赋值会发生什么，就会改变这个文本框里的内容，比如说国歌你真牛逼是吧，好，咱们跑跑啊，然后呢，这时候一点是不是进去了。

啊，是真的牛逼对吧？来再看看这个返回ID是北京的文本值是啥意思，咱们看看哈，ID是北京是不是这个是吧，文本只是取它里面的内容，能理解吧？啊，那来吧，这个应该不难。啊，document.a点点get BYD啊这个BG取它里面的内容是不一呢，HT没有啊，咱们先说HT吗？一会再说test啊，有那个咱们还没没怎么演示过来，走取这是不是取出来了，那么test呢，也可以取这个内容，但它俩有什么区别？我先住脚哈。别着急。也可以去。你发现是一样的，看见吧，那它俩有什么区别，你先看这个说明啊，咱们这里。来，咱们说一个是即时标签和结束标签的内容，一个是文本，那内容和我们有啥区别呢？请看现在啊，我怎么测呢，我换一个对象测，你再加一个测不出来，你换一个东西测。

比如说我换这个无序列表就能测出来了，我现在换成无序列表，看见吧，把它换成它换成它。下面这个是不是只取文本呢？你看看文本是啥效果啊。看出来了吗？标签他是不是不要了，他只要里面的文字可以吧，那内容呢，没。都去掉了啊。内容呢，你看啊，内容就是都要。你看懂了吧，都这样OK。