91.尚硅谷_JS基础_DOM简介

那我们来开始上课啊，那我们之前讲这个对象，之前我们说了对象分成三种，我们的这个内建对象，宿主对象，还有这个自定义对象，那实际上自定义对象和这个内建对象，我们暂时就了解到这行了，那个内建对象我们都已经给他整个过了一遍了啊过了一遍了，那接下来呢，我们要学习的就是我们那什么呀。宿主对象，什么叫宿主对象啊，就是有有我们这个浏览器，或者说有我们这个运行环境，为我们的提供的这个什么呀对象啊，我们提供这个对象，那这一块呢，主要讲两种对象，一种叫什么呀，DOM，还有一种叫做这个do啊这两种对象，那我们今天先来学谁么？先来学这个do啊，先来学do，学do之前呢，我们先来看一下这个do，它到底是什么意思，Do呢，实际上是三个词的缩写，D呢代表什么呢？Document文档，O代表object对象，M代表什么呢？Model，我们这个模型，所以这个do连一块叫什么呢？叫做一个文档对象模型啊，Document object model啊这个东西给它背下来，其实这东西呢，它这个名字是由三个词构成的啊，文档对象模型，那其实我们要了解一下这个do，它到底是什么意思啊，这三个词到底什么意思，为什么起的这么三个词，但是我们了解之前，我们先知道do是干嘛的，Do说白了干嘛的呀。

就是让我们可以通过GS来操作我们的什么呀。网页的啊，DOM的作用就是让我们可以通过GS去随心所欲的去操作网页啊，什么叫操作网页啊，网页里边是有各种标签啊，各种各样的样式都可以通过这个DOM来操作，那我们来看这三个词什么意思，第一个词叫什么呢？叫做。文档也就是我们说所说的什么呀，叫做一个document，什么叫文档，文档其实咱们早说过了，什么叫文档，诶一个页面是不是一个文带啊，诶一个X页面就是一个文档，所以说文档指的就是我们一个网页啊，一个网页就是一个文档，那什么叫对象呢？什么叫对象呢？对象指什么呢？那我们说了，我一个网页里是不是会有很多的东西啊，哎，咱们这里边可能还比较简单，我这网页里可能有什么呀，有各种各样的这种标签吧，标签里还有属性，然后标签中签，假如说我是有一个H1标签，中间是不是还有文本啊，我这页面里有各种各样的这个东西啊，各种各样的东西，那干嘛呢？我们这个对象指的什么呢？就是将我这个网页的每一个部分都转换成了什么呀，对象啊，把网页的每一个部分都转了一个对象，什么叫每一部分你看的一切，比如说我这一个H1 h1干嘛是个对象，我这有三个字母三个A，这三个H。

是个什么，是个对象，我这有个body标签，Body标签是个什么，是个对象，我们这有一个什么呢？我们这有一个这个HTML注释，这注释是什么，也是对象，所以注意所谓的对象就是把我这个网页里的每一个东西，每一个节点都转换成了一个什么呀，都转换成了一个对象，诶那我们说转换成对象有什么好处啊，转成对象什么好处啊。

诶转换成对象以后，我们就可以以这种纯面象对象的形式去操作网页，比如说我这页面里边有一个H1对象，就是它吧，H1对象我想去干嘛呢？我想修改这个H1对象里边这个文字，那你想想我第一件事现在干嘛呀，我是不是先找这个对象啊，把这个对象找着以后，我再通过这操作这个对象的属性或者方法，是不是来修改它这个显示的一个效果呀，诶显示效果，所以干嘛呢？以面向对象的形式操作，就说白了就为了一个，为了什么呀，为了简单啊为了简单，所以这边对象叫什么呀，把页面里边的每一个部分都转换为了一个对象，然后第三一个叫什么呀，叫。模型，模型是干的呢？模型是干嘛的呢？那么想想我这页面里有多少对象很多吧？诶，咱们这30多行页面很少见，你写怎么着也得，呃，1000行几百行的是吧？诶千百行的，那这一个大的网页里，我这个对象是不是会有很多呀？那对象多了会有什么问题？

嗯，对象多了是不是就不好管了呀，假设咱们上硅谷所有的学生我都给对到一个教室里，我好不好管呀，不好管我的个妈呀，我给大家分成一个班一个班级管理吧，哎，一个班级班级管理，同样我们这里边对象多了呢，也不好管，那于是干嘛呢？我们整出了一个什么呀模型，模型用来干嘛呢？用来表示我们对象之间的这个关系啊，用来表示我们对象之间的关系，这样呢，方便我们去获取这个对象，什么意思？我们来看看这个模型啊，最难理解就是这个模型，我们来看看什么叫模型，那这里边呢，现在我们说了，我这儿有一个这个简单的H页面，叫做一个1.a毛里边就是什么呀，H前面跟标签，然后两个子标签head，还有body head里边有title，然后有一个超链接对吧，这么一个结构，然后我们来说整个我这个页面叫做一个1.n门，首先你要注意它也是一个什么呀，对象一定注意，一切都是对象，这个1.0门呢，也是一个对象。

它对应的什么呢？我们叫做一个文档对象，或者叫文档节点啊，文档节点叫一个文档对象，整个，那我们看它下边有谁呀，它下边谁呀，它下边是不是就是HTM2跟标签啊，哎，N跟标签，所以再往下找到谁呢？我们这个HTM2节点，或者叫NL这个元素啊，找到N，那HTML有什么呀？它是不是有两个子元素，Hide还有body啊，还得还有BODY1保存，诶这个什么呀？A里面对应一个head，还有一个什么呀，Body啊，两个子元素，然后再看head里还有什么呀，Title body里边是不是还有这个超链接呀？诶所以你再往下展开，Title里边有一个title包，这里边有一个什么呀，超链接，超链接，那再来看title里边干嘛？

是不是有网页的标题这五个字啊，超链接里边是不是还有这个超链接这三个字啊，所以再往下延伸，Title头里边有什么呢？叫做一个文本节点，A里边有一个超链接，它也是一个文本节点啊文本节点那这个就是什么呀，这个就是我们所说的一个什么呀，模型，模型，这个模型你看它像什么呀？是不是像我们这个叫什么家谱是吧？哎，家谱这上边是一个祖先，然后往下是不是一个一个都是他的这个后代啊，诶像一个这个家谱或者也像什么呢？像一棵这种树，诶这是我们说倒过来的树，这是我们这个什么呀，树根，这是我们这什么呀，树杈对吧？诶倒过来的树啊，倒过来树，那我们说这模型你看它有什么好处，它能干嘛呀？哎，它能体现出我们节点与节点之间的关系，我这样一看，一看这个A和bodyy，一看什么呀？A是bodyy的什么呀？子元素对吧？Bodyy的是A的负元素，然后呢，这个body和head是A毛的这个什么呀？子元素对吧？一看这个A和N毛是什么呀？A和这个A毛是什么来是祖先和这个后代的关系吧？哎，通过这个东西就来体现出他们之间的一个关系，那问题来了，我知道他们关系有啥用啊，我知道他是他爷爷，他是他孙子有啥用啊？

诶，那现在咱们假设我现在手里边有一个对象是谁呢？是A，我想通过A去找到什么呢？Title，哎，我想通过A去找到title，好了，那我们现在说了，我现在根本就不知道这个A和title是什么关系，那我问你了，我能找到吗？找不到了，但是现在我知道他俩什么关系，我一看啊，你要找title啊，我有A了，A和title他俩爷爷是同一个人，对吧？那我想找title怎么办？我先找到他们，先找到A的父亲的父亲，再找到什么呢？再找到A的毛是什么呀，这个儿子的儿子是不是找着他了？哎，所以这个通过这个模型以后就干嘛呀，我可以在我手头上有任意一个节点的情况下，我随便这里边你只要随便给我一个，我是不是能获取到这个任意一个呀，只要我知道他们关系，可以获取到一个任意一个，就是方便我们去查询这个对象，但这个图呢，可能还不是特别形象，因为这个页面比较比较简单，来咱们看。

看看啊，我们W3死库这个文档里边，它给我们有一个更加这个大的一个文档do，看这是不是叫做一个do数啊，诶，它这个也是一个模型，跟我那个差不多，但是它这个比我这稍微的复杂一点点啊，复杂一点点，这也是一个什么呀，模型，模型就是干嘛呀，就是体现出我们这个节点与节点之间的一个关系啊，就是体现这个关系，好那这块看完了，然后呢，大家应该对我们这个文档对象模型都是什么，会有一个这个初步的一个了解了，然后我们接着往下说，往下说一个概念，我们叫什么呢？叫做一个节点，节点英文叫什么呢？叫做一个node，诶node叫节点，节点是什么呢？节点这个概念是我们从网络里边引申出来一个概念，网络是由什么呢？我们说我们的互联网是由什么呀？一个一个节点构成的，什么是节点呀，互联网里边的每一台计算机，每一个这个路由器，每一个交换机，它都是一个什么呀，都是一个节点，是节点。

构成了我们整个什么呀，网络，那我们这节点主要谁呢？节点指的是构成我们网页的什呀最基本的组成部分，网页中的每一个部分都可以称为是什么呀，一个节点，比如说我们刚才举例子了，我这有一个标签，这是不是标签啊，这个是一个节点，比如说我这有一个什么呀，H1 h1里边有一个hello h1是一个什么呀？是一个节点，Hello呢，也是一个节点，我们这有一个哎Meta Meta里边有一个叉赛的，这是一个属性啊，这也是一个什么呀节点，网页里边的每一个部分它都是什么呀？都是一个节点啊，网页中的每一部分都是一个节点，但是问题来了，它都是节点，它类型一不一样啊。

诶都是节点类型呢，它也是不一样的啊，都是节点类型也是不一样的，所以这里边我们来说一下我们这个常用的节点，节点我们什么呀？叫做node构成NL文档的最基本的单元，那我们常用的节点的分为四类啊，分为四类，第一类我们叫什么呢？叫做文档节点文档我们就不再强不再强调了啊文档什么是文档啊，整个ML文档啊，所以文档里点代表什么呢？代表的就是我整个的一个网页啊，代表的是整个网页，然后呢，我们这个下边再说元素节点，什么是元素点点。诶，那这里边谁是元素节点，是不是P标签啊？哎，P标签就是元素节点，我们说了元素就是标签，标签就是元素，所谓的元素节点指的就是我们这什么呀，标签啊，各种各样的标签都是元素点，H1是h he元素节点，Bodyy是body点，元素点啊，都是元素节点，然后呢，还有什么呢？叫做属性节点，什么叫属性啊？

我标间里边这一个ID等于PID，这是不是就是一个属性啊，那这个就叫什么也是一个节点，它属于属性节点啊，属性节点然后呢，还有什么呢？叫做文本节点，什么叫文本呢？看标签之间是不是有文字啊，这个文字就是什么呀，文本节点啊，文本节点，所以这块我们介绍了四种的节点类型，文档节点，元素节点，属性节点，文本节点，它们都是节点，但是什么呀，但是类型不同，换句话说，所谓的节点其实什么呀，是四种对象啊，是四种对象，文档对象，元素对象，属性对象，还有一个文本对象，我们只是给他起一个统一的名字，叫做节点啊，叫节点，诶，那这个节点说完了，这是我们这几种对象，那这里边我们来说一下节点的一个属性，这一块先暂时简单的去了解一下，用的不是那么的多啊，首先我们来说我们这个节点的属性，这几个属性，Note name note type，还有note value是每一个节点都有的属性啊。每个。

点都有的属性，我们来看文档节点的noe name是什么呢？固定值就叫做一个井号，Document啊，固定值这是死的，只要是文档节点的no name呢，就是它啊，就是它。然后呢，元素节点的noe nameme是什么呢？是标签名，那什么意思呀？假如说我div元素节点它的no nameme呢，就是divv，我这个A元素节它的name no nameme就是什么呀，A啊，No name就是它的这个标签名，然后呢，属性节点的no name是什么呀？是它的属性名，比如说我属属性节点叫做一个ID等于的什么什么玩意儿，那这个属性名是谁呀？诶，就是ID，所以它的no name就是什么呀？就是ID，就是ID。然后呢，文本节点的node name是什么呢？也是固定值，叫做一个井号。Type啊，井号type先了解一下就行了啊，然后呢，还有第二个属性叫做一个noe type，这都是常量，都是固定值，文档节点的note typeb是九，元素节点的note typeb是一，属性节点的是二，文本节点的是三啊都是这么一个值啊，都这么一个值，那通过这值干嘛，有啥用啊？

我是不是通过这个值可以判断我们这个节点的类型啊，我一看你是九，我就知道你是个什么呀，文档我一看你是一，我就知道你是个元素，一看你是三，我就知道你是个文本，但你会发现他直有有点奇怪是吧，123，然后直接就什么了，九中间45678是不是没写呀，那有没有45678呢？有但是那几种呢？其实呢，我们用的不多，所以这块我们就不说了，文主要用的就是谁呢？就是文档还有。元素啊，主要用的就是文档还有元素，然后再来看他们的node value，文档节点还有元素节点，他们的noe value都是那啊，都是没有的，都是空的啊，空值，而我们属性节点的note y6呢，就是什么呢？就是它的属性值，比如说我这ID还是举例例的，等于一个乱七八糟，那这个什么是属性值，是不是乱七八糟呀？所以它的这个note value就是这个乱七八糟的这个值啊，爱是多少是多少，它获取的就是这个值啊，然后呢，文本几点的note value是什么呀？是它的这个文本内容什么意思呀？比如说我这是不是就一个文本节点呀，它的no note value是什么呀？哎，就是这段文字，字是什么，Note value它就是什么啊，字什么note value就是什么，所以这个属性里边唯一一个可能会用到的，其实现在来讲啊，就是我们这个文本节点的这个note value，其他的其实用的都不是那么多啊，你们了解一下这三个属性，每个节点都有的啊，每个键都有的，好，那这个是我们说的这一堆节点，那这里边下边我们对这个文档节点呀。

陈诉节点，包括我们这个文本节点，还有我们这个属性节点，都做了一个这个简介，那好了，说了半天到我们到底是干嘛的，其实就是一句话，到我们这来干嘛的呢？就是用来操作我们这个什么呀，操作我们这个网页的啊，操作我们这个网页的，也就是说举个例子。这里边呢，我们来新建一个这个mmr文件，我们来一个零五，我们就叫一个这个do，这里边我们来干嘛呢？我这来写一个BT button来一个什么呢？我给他来一个ID，叫做一个这个B天，我这是不是有一个按钮啊，就叫一个B天，有这么一个按钮来写个字吧，哎，我是一个按钮一保存，那现在保存了这个是不是有一个按钮了呀？那现在干嘛呢？我想通过GS去操作这个按钮。

我想通过GS去操作这个按钮，那我们第一件事应该先干嘛呢？哎，我是不是先要获取到这个按钮的这个对象啊，哎，有了对象以后我是不是想干嘛就干嘛了，哎，有了对象以后我想干嘛就干嘛了啊，有了对象以后我就可以任意的去控制它啊，任意的去控制它，那所以我要先获取到这个对象，那问题来了，我们要获取对象肯定离不开什么呀，离不开我们这个什么呀，模型，但是现在我想想了，那既然离不开这个模型，我想想如果我的浏览器它一个对象都没给我提供啊，我这模型里边的一个对象都没给我提供，那我问你我能不能查。

查不了吧，为什么查不了，我没有入口吧，你得你最少你得给我一个随便给我一个对象，然后我才能根据这个关系去理的吧，你一个都不给我，我能不能查呀，根本就查不了啊，根本就查不了，所以这块呢，我们就需要浏览器要给我们提供好一个现成的对象，让我们直接是不是可以去查询啊，诶可以去查询，那我们现在想想，那他给我们谁合适，假如说这里边你觉得给谁最好。这是最好，诶那你假设咱们想想什么呀，想想这个你要猜不透，你可以想想什么呀，想想这种先进的经验是吧，比如说这个谁呀，这个蛇精，蛇精要抓这个葫芦娃，他要先抓谁呀？哎，是不是先把他的爷爷给抓起来呀，把他爷爷一抓起来以后，那堆那哥七个是不是一下都过来了，同样，那我们这块你要他呀，要他呀，要他呀都不好，为什么呢？这是不是都是单个的呀，我们最好能干嘛呀把它。

最上头那个是不是给加抓过住了，最上边是谁啊，就是我们这个文档节点，所以我们最想要的是不是就是就是他呀，你把它一逮住，诶，你看正好七个是吧，这哥七个是不是一块儿都过来了，哎，都过来了啊，那他给没给我们提供啊，诶给我们提供啊，我们这个浏览器已经把这个爷爷给我们抓住了，我们就拿过来就使劲的拷问它就行了啊我们来说一下sscript的标签叫做一个什么呀，文档节点，我们来说一下我们那个浏览器已经啊注意了，这回我把这个sscript的标签写到这个body里边了，写到这个button下边了啊，咱们先这么写，待会再讲为什么啊，待会讲为什么，浏览器已经干嘛呢？已经为我们提供了什么呢？提供了我们这个文档节点的什么呀，对象我们可以什么呢？这个对象什么呢？这个对象是我们这个window对象的属性，那换句话说，既然是window对象属性，那是不是意味着它是一个全局变量啊，哎，是一个全局变量啊，这个对象是window对的属。

属性我们可以什么呢？可以在我们这个页面中直接使用啊，直接使用文档节点代表什么呢？代表的是我们这个什么呀，整个网页它是什么呀？它是最大的了，整个网页都在它之内了，所以你有了它以后，你是不是想要谁你就要谁呀？诶，那这对象跟哪呢？是文档它是什么呀？Window对象的属性我们先看看它有没有啊，其实这东西我们已经用了好多回了，有些谁呀，我们是不是用一个document.right呀，那这个document就是我们这个什么呀，文档节点它代表的就是我们整个。网页啊，整个网页来，我们先看看有没有直接来一个cancel.log，来一个document，我这一保存总你object htl document有没有啊，诶对象是不是就已经有了呀，哎，对象就已经有了啊，所以注意这个document就是代表我们整个网页，通过它你可以获取到我们网页里边的什么呀，任意一个对象，好，那document有了，那现在我想找的是谁呀，还不想要document我想到谁呀？

我想要这button这个对象吧，哎，我想要这个button这个对象，那怎么办呢？那我是不是要通过它去找button呀，那我怎么通过它去找button呀，那无非就是什么呀，某个方法或者是某个属性吧，诶属性来我们来说一下怎么找，诶我们来说一下通过我们来干嘛呢？获取到我们这个button这个对象，怎么获取呢？我们来看啊，文档也有了，文档我们看button里边有个什么呀，是不是有个ID啊，哎，有个ID，我们document里边有一个方法叫什么呢？叫做一个get get什么意思呀？获取得到get什么呢？EL get什么玩意儿，Element什么意思呀，元素，诶get element by ID啊get element BYD什么意思呀？我要获取一个元素，通过什么呢？通过ID，那我这来什么呢？来一个这个ID是多少BTN，那BTN这样我就干嘛呢，我可以获取到我们这个ID为B。

TN的那个什么呀，元素啊，或者叫I为BT那个元素，那IVBTN的是不是就是我们那个button呀？诶button我们先看看有没有啊，有没有直接我这放一个B拼N等于它，然后呢，我们这来cancel点一个log一个B拼，我们先看看啊获没获取到，现在呢，我一保存走你诶出来东西了，叫什么玩意儿，Object的HTMLL的内容叫什么呀？Button是不是按钮啊，Element它还是一个什么呀元素啊，Button element，那现在我是不是已经获取到这个BP这个对象了，这个对象对应的是谁呢？就是我们这个什么呀按钮，一定注意我们这个。Do里边的对象都是和我们网页的东西，它是有一个什么呀，有一一对应的关系的，这个B天现在就是这个什么呀，按钮它俩是能什么呀，他俩是一回事啊，他俩是一回事，那好了，那对象已经有了，那接下来我想干嘛呢？

诶，那怎么能证明他确实是他呢？怎么能证明确实是他呢？诶如果我修改这个对象，他这干嘛呢？他有反应了，那是不是证明确实是他呀？哎，咱们来看看吧，我要修改什么呢？现在咱们没啥可改的，咱们假设改一什么呢？我这B贴里边是不是有有文字啊，诶我要修改这个按钮里边的这个文字，来修改我们按钮的一个什么呀文字那怎么改呢？怎么改呢？咱们想想怎么改，对象已经有了，那我要改这个对象的里边的内容，那怎么改？无非就是两招，要么调方法，要么是不是改属性啊，诶要么调方法，要么改属性，我们来说一下这里边要改的这文字用的是什么呢？叫做一个一天找到我们这个按钮对象有一个属性叫什么呢？叫做点inner htl inner什么意思呀？内部的nmr呢，HTM代码，这叫什么呢？要改我这个BT这个对象内部的M代码，那我们说了它内部的代码是谁呀？

是不是就是我是一个按钮啊，哎，咱们先来看看能不能获取到了，我直接来一个cancel，点一个love，我输出一下必拼，点一个in in头我这一保存走你什么玩意儿，我是一个按钮，这段文字我们是不是就获取到了呀？诶你能读了，那我要改是不是也是小菜碟啊，来咱们改一个直接修改怎么改属性等于一个你看我实际上我这么写是不是就在修改这个按钮的这个音里面属性啊，诶来我们看改一个吧，改一什么呢？改一个哎。MB改个英文的是吧，哎，我是一个按钮，现在来看看啊，咱们看效果，我这一保存。走，你。

看见了吗？这按钮上的文字的时候就变了呀，你会发现我修改这个对象的属性的时候，这个按钮同时也就变了，那足以说明我们这个按钮它就是什么呀，是不是就是这个对象啊，哎，这两个实际上是什么呀，一个东西你想操作它直接通过什么呀，这个对象来完成就OK了啊，通过这个对象完成就OK了，所以这个呢，就是我们到我们的一个基本操作，比较简单，那现在我们是操作按钮，如果你想操作别的，是不是也是一个道理啊，你想找谁先来干嘛呢？先来获取啊，他那个什么呀，对象有了对象以后你就干嘛了。你是不是就随心所欲，想干嘛就干嘛呀，哎，想干嘛就干嘛啊，所以注意做我们这个盗路操作的时候，就两件事儿，第一个事儿我们干嘛呀，找对象，第二个件事搞对象啊就这两个步骤好，那这块呢，是我们说盗的一个简介，那这里边啊，注意先这么写，待会我们来讲为什么啊，待会来讲为什么，我们先停一下。