30_尚硅谷_大数据JavaWEB_BOM 文档对象模型.avi原创

啊来，接下来我们再说另外一个啊，就是叫做DOM到啊，这两个呢，也是大家很容易这个搞混的两个东西啊，B是浏览器对象模型，而这个do呢，它叫做文档对象模型，就是这个D是什么呀？它是document，而我可以直接告诉大家，这个document其实就是我们报里面的这个document理解吧，哎，因此你也可以这么认为啊，这个呢，其实就是我们do里面的一个具体的一个document对象，好吧，哎，这个大家一定要把它什么区分清楚了啊，别记混啊，那么这个do是干嘛的呢？它是一个文档对象模型，然后它主要是把我们整个的一个HTML页面帮你生成一个倒数。看到了吧，它是一棵树啊，那么我们在听到一棵树的时候，我们应该想到的是有根对不对，然后呢，有各种什么节点吧，是不是这个样子的呀，然后呢，某个节点上面呢，还可以再有什么子节点嘛，竖叉了，是不是这样的一个结构啊，那么我们就来分析一下我们整个HTML，它是不是这样的一个结构，HTML里面有hi的，有body还有别的吗？

想一下还有别的吗？一个是投标记，一个是体标记，还有别的吗？没的吗？OK，剩下的再写的话就是什么head里面，我们比如说有met，有title，有我们的什么style，有我们的什么script等等那一堆，然后呢，Body里面的话，那东西就更多了，有我们讲过的标题标记啊，像这个什么列表的对吧？然后呢，比如说像这个标题里面呢，我还可以再有别的一些标记，像我们这个什么table标记里面有什么TRTR里面有什么什么TD，对吧，你就去想一下它那个整个结构，我是不是都都可以把它什么整个描述成一棵什么这个倒数的呀，嗯，能明白这个意思吗？你看我再给大家去说一下哈，呃，比方说呢，我们一个HTML里面的有一个表格吧，啊，我们就拿上这个表格来讲，那么你整个的这个样子应该是这个样子的，什么样子的呢？就是首先呢。

我有一个根节点就叫做什么呀，叫做这个HT，这个不好用是吧？啊，我就手画吧啊来就是我整个的一个根节点呢，应该就是一个什么HT啊ML，然后呢，在这个根节点上面呢，我又有两个，一个是我的head的，一个是我的body，能明白吧，Head里面的话呢，我又可以有东西啊，有什么东西啊，比如像我们的matter，然后呢，这个script，像我们这个什么什么style这一堆东西吧，然后呢，这个呃，像这里面的话，我们就一般就什么去写具体的内容了啊，主要来看一下这个body包里面呢，还可以有什么东西啊，那东西太多了，简单列几个哈，像我们的H标记可以吧。

对不对，有吧，H1H2H3，然后呢，像我们这个div可以吧，对不对，像我们这个table可以吧，OK，那div里面呢，我还可以再有div可以吧，Div里面我是不是还可以再有什么别的呀，比如说H标记呀，Table标记都是可以的吧，Table里面的话呢，我有什么有R嘛，是不是有多个TR啊，对吧，TR里面的话可有什么呀，有TD，那么大家就来看一下这个整个的这个文档结构，你看一下，看起来是不是就是一棵树啊，这个是不是一棵树啊，对不对，OK，所以说这个道是干嘛的呢？它就是帮我们把整个的HTML这个文档描述成一棵倒树，然后我们就可以啊，通过倒母的方式来去操作你当前这个文档里面的具体的每一个节点，比如说这个节点我能找得着，这个节点，我也能找得着，这个节点，我也能找得着。

每个节点我都能找得到，并且对它进行相应的一些操作。明白了吧，这就是我们的DOM到好，呃，那么我们在具体操作的时候呢，呃，我们主要是做一些这个元素的查询，然后呢，再给他做一些什么值，相应的一些什么修改啊，比方说接下来我就啊给大家去模拟一个简单的功能，好吧，一个什么简单的功能呢？大家来看一下，我在这个呃，Button下面吧，就是在这在我们这个div下面吧，我再加上一个东西哈，你看好了啊，加上个什么东西呢？我就加上一个这个SPA吧，我们不是用过吗？对不对，这里面的话我就写出一些内容来啊，写出一些什么内容来呢？呃，送大家一句话是吧，就是叫做啊。

啊，复杂的事情简单做，简单的事情重复做啊，复杂做啊，你咋没有复杂做呀，是吧，复杂的事情你就简单做，简单的事情呢，你就重复做，那什么意思呢？就是你在遇到一件很复杂的事儿的时候呢，你要把它拆分成。好几个对吧，你整整个去看这个东西太难了，但是呢，你把它拆分拆分拆分拆到这个很少很少很少的某一件事情上，那么对于某一件事情来说就特别简单了，那么你就需要把这每一件简单的功能做完了，那么其实拼起来就是一个很复杂的功能理解吧，那么这个其实也是要送给大家的啊，以后你们在开发的时候，你就必须得有这样的一个思路，你完整的去看一个功能，那太复杂了，但是呢，你把它能拆分开每一个子功能，那是比较简单的，你就得这么去做，明白了吧，但是你拆分开了以后呢，可能有些子功能是特别简单的，你有些东西就不屑于去做的，是吧，他认为这东西太简单了啊，有点侮辱我智商了，我不做了，但是我告诉你，如果你有这样的想法，那你可能就完蛋了。对于一些更复杂的事情来说，简单的事情来说，我们应该要重复性的去做。

对吧，这样的话呢，你才能提高你自己，就是把你这个基本功会打的特别的扎实。不能眼高耸低啊，就这个意思啊，好吧，那现在呢，我们这里面呢，诶有了这样的一句话，那我现在想做什么事呢？就是我再去点你这个八阵的时候呢，你就不要说什么是谁在点我是吧，我在点你对吧，谁点你啊啊我想做什么事呢？我点它的时候呢，我想要把这里面的内容给它去掉，或者说呢，我替换成另外一句话。

明白了吧，OK，那怎么做呀，那思路是这个样子，你听我说，首先我点它的时候，它得触发这个函数，而在这个函数里面呢，我要想办法获取到这个节点，对不对？拿到这个节点以后呢，我再想办法把你的内容做一个更换，是不行吧，能明白什么意思吧？OK，来吧，那我们就来做这样的事啊，那我把这个SPA呢，我们加个ID吧，就简单一点操作出来啊，比如说这S1好怎么做呢？我点它会触发这个函数，那么在这个函数里面呢，我们就不能说是谁在点我了，是吧？啊这个呢，先注释这了，我就写什么东西啊，注意了啊，就是我们要直接使用一个window.document，就是我们的什么动对象，好这个里面就能找到任何一个节点，它里面有个方法叫做get element by ID。

就是我要获取一个element元素，并且通过ID来获取，那么你的ID是不是叫做S1啊，对吧？这里面写什么呀，这里面你就直接写上你的S1就可以了，那么这个获取到就是我们那个span的这个，你看啊，声明变量就是五啊，比如说我叫做什么span I吧，这是我的一个变量名，那么现在其实我就已经拿到这个span对象了啊，就是这个SPA的这个对象我就拿到了，拿到以后呢，它里面的这个内容怎么去做一个更换呢？给大家简单的去说一说啊，就是span EL l一点叫做NHTML。明白吧，什么样的N呢，HTL呢？注意这个A呢，HTML代表的就是标签与标签之间的这个内容，这个是标签与标签之间的这个家伙，叫做婴儿HTML，听懂了吧，你看了哈，如果说诶我直接这么写的话，那就相当于获取到了，明白吧，你看吧，Message等于它，然后我给你弹个床A，我给你弹个这个message，这相当于是获取到了，你看了啊，演示一下来刷新。

呃，Index点加啊注意了哈，你看了哈，我这个呃点一下你看是获取到这句话了，看到了吗？OK，那我现在只需要怎么做呢？我不获取你，我给你赋个值是不是相当于改了你了，嗯，对不对，那我就可以怎么写的呢？spael1.inhtml等于什么呀，你想说什么你就给它放到这就行了，听懂了吧，啊啊，再说句什么话呀。

啊叫做什么来着啊，什么拼搏到拼到什么来着，无能为力是吧？啊然后呢，啊，什么努力到不能自已是吧啊是吧，啊你们就记住这句话啊，然后呢，你看一下，那我就相当于把这句话呢，诶就给到什么这个SPA的这个什么s in hml，那现在这个东西我们就不要再求了起了啊所以大家现在再来看我们的效果变成什么样子的了呢，很动态，你看了哈，大家看这个位置哈，我点一下，我点换了没有换了吧，再来看一下啊啊我点换了没换了吧？啊这个鼠标应该是因为我这个经过它了哈，看到这个效果了吧，OK，好，那就是说我们在这个基础之上呢，再来加一下，加个什么东西呢，比如说现在。

我来一个在这个下面啊，最下面注意我在它下面呢，我再来个东西，我再来个input check呢，等于一个check是不是一个文本框啊，对吧？啊，内容的随便这个东西写不写都无所谓了啊，比如说就是一个呃呃，这叫什么呀，叫做消息版message吧，随便写一个东西啊，这个无所谓了，那我现在希望怎么做呢？注意我希望当我去点它的时候呢，不仅要把这个内容呢给它更换一下，而且呢，还要把原来的这个内容呢，诶给我显示到这个文本框里面，你看哈，现在是什么样子的呀，就是给刷新一下啊，刷新一下是不是这个框框啊对不对，我想做什么事呢？当我点它的时候呢，你把这个内容给我更换了，并且呢，把这个内容给我放到这里面。那更换这些内容是不是已经做到了，放到这里面怎么放啊，那我是还能获取这个文本框法，所以说你看看哈，我们最直接的一个方式就是我来把它加个idid等于什么呀，比如说IE看到了吧，叫做一，那么接下来我们做的事就是什么，你看啊，当我我首先呢，我必须得拿到这个值吧。

这个置我是得拿到啊，因为我要用它嘛，然后呢，接下来我就把它更换了，更换以后呢，再接下来干嘛呀，我就要什么呀，你看了哈，呃，Document是不是能省略的呀，CU加get element by ID，我要获取到谁呢？哎，获取到这个IE，然后呢，给IE的什么东西啊，是不是IE里面要显示的内容，是不是就是它的这个Y6属性啊，对不对？诶我要给它的Y流属性，所以说怎么写的呢？你看哈怎么写的，就是给它的这个Y6负合值等于什么呀，等于messageage是不就行了。

是不是把我们获取到的那个值就给他什么设置到这个里面了吧，对不对，OK，好，来我们再来看这个效果刷新一下啊，我来点一下看到没有，首先这个更换了，然后呢，这个值是不是进入到这个里面了，看到这个效果了吧，OK，那么这就是我们的啊do以及这个什么do啊，就是主要是给大家就说一下这个do的一个什么操作学会了吧，那么呃，因为它这个查询元素的话呢，其实我们主要用的是这个方法，那么它除了这个之外呢，还有别的那么别的这两个呢，我们暂时就不说了，因为我们也用不上听懂了吧，大家只要知道有这么一个东西就行了啊好，这就是我们的宝。