1. 尚硅谷_佟刚_JavaScript DOM编程_在什么位置编写 JS 代码.wmv原创

来学习javascript品种。那DS本身的内容呢，非常多，但是我们在开发的时候，最主要的用的是如何去操作to OK，具体看一下。什么是到文本对象模型D文档，这个文档的话呢，指的是HTML文档或者是XML文档，那实际上我们学完这个do以后，我们会发现Java里边也有一个do的实线，就是说我们用Java也可以去操作XL文档或者是H下面文档。也是可以的，那你只要符合这个规范就可以，账号里边提供的方法和属性跟DS里边提供这个方法和属性是一致的，它们都是一个广标准O对象包，我们的对象的属性和方法M模型，我们来看一下这个adk的帮转档。

对。看啊。哎，这就是W3提供的这个的接口，然后的话呢，它有一个呃，副接口就noe，我们实际上要讲的就是note里边对note这个。里边的属性和方法，一会的话呢，我们会看到这里边的大部分的属性的方法我们都会涉及到，只不过我们是使用ES来实现的。而不是发语言。嗯，那是针对于XL或者是HTML低于数的API。基于数，那数是什么呢？叫节点的层次。

那么一会我们会来看一个图哈，To把一个文档表示为一棵大朴树，里边有父子兄弟的概念。to定义了note接口以及许多节点类型，来表示XL节点的多个方面。现在我们来看一下这个报数。大家看我最上边的话呢，是非常简单的一个XL文档，那这个XL呢，我们看这个根节点是什么呀，是HTMLHTM，这个根节点的话呢，有两个孩子，一个是hi，一个是hide，还有两个孩子hi，还有什么me跟title me title body，有h EL h he pul，有三个Li，这画完之后的话呢，就这样这样的话。呃，表示这个HTM文档的话，是不是就像一棵倒过来的架口树啊这样式。

这不就是一个数了根节点，然后有这个一个一个的子节点，但是我们通常情况下的话呢，我们还是这样来写，那这是PL称之为。根节点，那对应的这个head跟body称之为它的子节点，然后Meta title就是head的子节点。那这样的话呢，形成这样的一个父子关系，那就是针对于数的API，就是我们会提供属性和方法来解析这个数。好，我们首先来看一个叫节点及其类型，什么叫节点呢？节点实际上是来源于。网络理论代表网络中的一个连接点，比方说咱们这个局域网里边哈，那每一台这个终端的这个主机就是一个节点。

我们来看一下节点的分类，我们以这个P节点为例哈，P节点然后有一个属性是开头。还有一个。文本。那这个时候呢，这个T实际上是HT文档里边的一个元素，它称之为。元素节点。Element not。开头是P的一个属性，它称之为属性节点，可以用的比较少，但是的话呢，它也是一个节点，我们通常情况下直接用处境的方式来操作它，那需要注意的是P节点。之间是不是有一个文本啊？这段文本称之为P节点的子节点，它叫文本节点。节点分为三种类型，分别是。

袁树节点。属性节点和文本节点，其中文本节点是属性节点的子节点。好，这是我们今天要说的啊，第一个内容比较重要哈，叫节点及其类型，元素节点，属性节点，还有文本节点，其中这个属性节点的话，就是我们所谓的什么呀，就是我们所谓的叫呃人数节点的属性。可以直接通过属性的方式。哎，操作就是说这个说什么呢？这个时候的话呢，我不通过这个属性节点的方式操作，而直接通过属性的方式操作也可以，那个对吗？而这个文本节点呢，啊是。元素节点的子节点，那元素节点的子节点可能是本本节点，也可能是元素节点吧。

你想明白吧，HTML它有两个子节点，一个是T，一个是body，而我刚才那个P的话，它的子节点就是一个文本节点。它是原数的一个子节点，然后的话呢，通常为文本是吧，其内容，其内容为文本，OK，这是我们节点及其类型。第三个节点，我们先有一个大致的印象啊。啊，一会儿的话呢，我们会来对其进行具体的操作，然后呢，我们要看什么呢？我们要学的是note接口的特性和方法，那这个图截自于earthscript的高级编程，很厚的一本书。看大家看啊，这里边有一些属性和方法，比如你看look name not value not time，这都是什么呀，叫属性，属性我们打开刚才我们打开的这个out，我们看说node有有一些方法，其中有一个叫什么，这个get name吧。

中的t cat中的value，我们前面讲JAP的时候，我们说过，说在大里边的话呢，这个属性是用get set方法来定义的吧，这个时候你看note name note type don't value就是note的三个。三个属性，那我同样我在这个里边，我这个属性这样写，当然了还有一些是方法。还有一解释方法，比方说open pen child加一个子节点，Open pen child，我们看这里边有没有加一个子节点，你看的跟那个是一样的，那以上讲的那些属性和方法呢，实际上就是什么呀？实际上就是我们所谓的这个杠网规范里边有直线，杠里边有直线c sharp里边也有直线，我们只要把这个规范学会了，这哪里边解道理和原理都知。

两。你下面实际上我们要学的就是。嗯，指的就是这里边儿的一种规范，要学这里边的属性和。哦。OK，那我首先来写个hello吧。好，还是找到我们这个里面，我来新建一个。Fo。既然代码了，我给的那个文件夹里边。好了，进来写一个。哦，代码写在哪。这是我们说的下一个问题啊，D方写在哪通老边可以写在任意位置，对，那通常写在开口这个，呃，积点的后边这样写，写的这里。

然后我们。如么写个hellowood呢？比如我来写个button，表示一个按钮，Click click你联网。然后呢，我要为这button添一个事件，说当我点这个按钮的时候，会弹出一个lo，嗯，写法的话呢，我们可以这样来写，我先写哈。分点on等于方。Button等于document element by。

T。零。然后呢，为其加一个主on click。等于方。哦。我啊，我这个的话呢，写的比较规范，我们先来看一下这个执行的情况，打开。Open with。好，我点一下，哎，弹出一个hello，就是我们获取的一顿开马。首先的话呢，我来解释一下每段代码表是什么意思。第一段代码。是什么呀？叫window的onload window是我们GX玩的一个对象，Load是一个属性啊，这个属性什么？呃，这个是他一个事件啊，这个事件什么时候被触发呢？当整个文档数都加载完之后触发。

嗯，整个HTML文档完全加载工后触发触发什么呀，触发温的onlo的事件。啊，那我在这个事件触发的时候，我让他干什么呢？事件触发的时候我执行这个。方式里边的内容啊，事件出发时。是。出发时。

执行后面。方程里面的函数题好了，然后这个什么意思呢？说获取所有的。节点，你看我这怎么写的，叫element，是不是一个集合by name，根据标签名button来获取所有的元素，那我现在我是不是只有一个呀？然后说并取得第一个元数。并。取得，取得。第一个元素，然后我们再说，诶为啊on click件赋值也是负一个什么，是不是也也是负一个函数啊，点击发分时。

执行函数体，函数体的话就是我里边这个内容，那还有一个是俄罗是什么意思呢？啊函出hello。四弹出那每一个细节的话，我们一会儿都还会详细的来讲述，大家先按我这样方式的话呢，先来写一下，先来亲密接触一下DS行吧。现在的话呢，我们研究一下这个hard word后边的每一个细节的话呢，我们还要具体的进行这个深入的说，大家先把这个写一下是吧，跟呃，JS有一个亲密接触，那下面的话呢，我们具体研究一下这个DS，我们第一个问题要解决的是，诶，我要在什么位置写JS代码。

TM代码的话呢，我们比较推荐把GM代码写在。这个位置比较推荐这样做，实际上的话呢，这个代码我们可以有很多种方式来写，大家看，比方说哎，我来写一个DSE。就是说我们看边再往里大写啊，最简单的写法，我可以怎么写呢？我可以这么写。右键open with htl ID好，可以这么写，我不写这么多。直接这么干，这个不要了，是个八是吧，直接这样写。On click等于a lot。Oh。

保存好。看一下这一打开。这不是是不是也好使啊，也有同学说老师这么写好啊，这么写这么写，这个代码不是整太多了吗？是吧，是这么写的话，我发现一个什么问题啊，这么写的话是不是我在写这个，呃，HTML代码跟JS代码是不是耦合起来啊，懂我的意思吗？就是我们在写代码的时候，你看我不但要写。HTML还要写GS吧？啊，其实TML跟GS耦合起来的，这样写不太好。第一种情况叫HTML跟GS相耦合。HTML代码。和代码和代码耦合在一起啊，我们必须得说哈，有时候这么写的确是很方便，比方说我中篇只有一个按钮，而且的话呢，做一个非常简单的工作，我按那个按钮，嗯，弹出。

一个很明显，这比这要实用的多。我们学员说我们后面也会讲什么MVC设计模式啊，包括一些什么解耦啊，那如果我要是仅着这一个功能的话，这写比这写要简单的多，举一个例子哈，那么正常情况的话呢，我们都应该我门从门过去跳墙是不好的。有一天我就到我们家那个南门了是吧，南门锁了，我发现我钥匙忘带了，这个时候比较正规的方法是我再走到东门，然后完了该绕回来，然后去坐车，很明显那样太慢了是吧，OK，我这个。身轻如练是吧，一翻就翻过去啊，差点就卡了啊，就是用这样的方式的话呢，嗯，有好处也有不好，如果要是代码特别多的话，这样做很明显有问题。

啊，有比较强的这个耦合度，如果要是代码不多的话，诶这样写，实际上这只是商品，但是我们写代码的话，我们不能这么写啊，因为我们的这个GS代码量是比较。比较多的，这是第一种，第二种。第二种呢，哎，我们推荐的方式就是我们说呀，这个代码我我要怎么办呢，要把这个代码放在。我把放在放在这个开这个这样写。这这这这。大家看正规要是写的话，应该这样写，第一步获取，第二步会button添加on click响应函数可以了，好这样写完之后的话呢，我来写下看一下啊。

Button等于document.at。II。Element by，好了，这号叫八，我们先不说别的哈，我们看能不能获取找alert一天S点，但它有一个长度保存，看效果应该是它刷新一下，看是不是零呀，是不是零呀。你看啊，当我弹出这个对话框的时候，这个文档是不是还完全没有加载呢？诶来看我这个加载，加载的话呢，是是顺序执行的吧，先执行这段代码，然后再再执行它吧，于是我在写这段代码的时候。

这个还没被。还没被加载呢，那我怎么能获取着呢，所以说出现了这样一个情况，你看我一行是零没有，因为这个文档数啊，那个8K，那个节点还没有被加载，那我怎么能获取着呢？所以说你要光这样写的话不行，那于是就想了一个招是吧，说我为了我为了能够获取到这个节点的，我怎么办呢？我把这个放在后面。这样写好，我们看一下好不好用。了，然后的话呢，我再为其去加假函数BTS。一。Click等于function什么呢？

嗯，这两个账号再看。一点有点胀。一天S1.2，零对零对，从零开始是吧，零。OK，这个时候的话可以获取到，就又是一种写法，这种写法的话，为什么这么写呢？因为我希望在整个文档被下载完之后，获取到文档里边的内容，然后说这种写法。是啊，在整个。HTML文档被加载后，获取获取获取其中的节点怎么办呢？我就把。

这个节点放在HTML文档的最后。好处是什么呢？好处就是我的确是可以获取到了，不过缺点有点突出的是吧，缺点就是那不符合写GS代码的习惯，不符合。写ES代码的习惯，你放后边的话呢，感觉不常好，正常情况下我们这个代码都是放在呃，Hat这个部位，这样其实也非常好，但是这么写能够实现了，好吧，上期也不好的话呢，我们看第三种，第三种呢是这样的。点三。这样好，我们看第三种的话呢，我说这个代码还是放在这个位置。

Script。然后的话呢，我首先来写写几个aler a来begin开始写110，然后这去掉个去掉。比较OK，我们看一下这个效果。ES3。打开。一一这个时候是不是啥也没有呢？二你文档已经都这个被加载完了吧，2OK，那先执行一，执行一的时候的话呢，这个body还没被加载，Body被加载完的话呢，执行二，于是的话呢，我们看有这么一个事件，等于这么一个事件，这个事件里边我写个俄罗等三。

好看这个三什么时候被执行一二，这不是这个二二执行完的话，这不是因为这个文档你摘改完了呀，然后来执行三，那于是的话呢，诶我可以这个时候来写代码，那这个时候我们就说到了按人写的啊window on是一个事件。事件。在整个。H加L文档被完全。加百。后五发。好啊，既然这样的话呢，于是我们知道什么呀，不知道这里是完全加载之后我再执行，那就意味着什么，意味着我可以在这个里边去写任意的GS代码，它可以获取到。

文档里边的任何元素。所以。在其间，在其中可以获取到HTML文档的任何元素，好了，那于是的话呢，我们就这样写代码就写到这个里边了啊，所以说我们最终的这个情况就是我们写代码的话呢，写GS代码要放在title节点的后边，用这个script，但是的话呢，这个代码要放在这个window.onload里边，因为这个时候这个里边可以获取到当前文档的这个呃，任何节点。这样写啊，你说把这个。代码拿出去的话，那个我们后边我们再说，所以说我们就解决了一个问题啊，在什么位置去写JS代码，看一下笔记，说一种方法的话呢，直接在HTML页面写，这是我们写过，缺点是JS跟HTML强耦合，不利于代码的维护。

第二个，如果可立显示函数比较复杂的话，这个时候我们先需要定义一个函数，然后在按可Li属性中引用这个函数，比较麻烦，就是我们这块如果要直接弹这种信息的话，要说了，那你如果这个GS代码要是比较复杂的话，比方说我弹的不只是它，我希望把这个内容弹出来，我再说一遍哈，我希望把这个内容弹来，这个时候你要直接写的话，你就写不了。或者你就比较麻烦，这个时候的话呢，我们先需要什么，我们先需要去定义一个函数，再进行引用，这就比较好，这是第一种情况，第二种情况诶。我们不能在包节点之前来获取包节点，就是说我要这样写，你看我要这样写，我直接去获取什么呀，我直接去获取包里边的这个什么CD note呀，我获取不着，因为这个时候，因为这个时候这H下面文档还没有被加载完成，我获取不到指定的节点。

不行不行，就说不好用，那于是的话呢，再看吧，然后还有一种方式是在整个H2文档的后边写代码，这该不符合习惯，于是的话呢，我们写了个什么呢？我们写了说啊，Window州有一个lo的事件，该事件是在文档完全被加载完成后被触发，所以说。在这个里边我可以获取到当前文档的任何节点，把这个代码的话呢，写在这个里边就比较合适。最终结论就是写代码的话呢，还是放在单个节点的后边，然后只不过我们要放在windowlo的这个响应函数的里面，这种解法比较合适。