7. 尚硅谷_佟刚_JavaScript DOM编程_第一天复习.wmv原创

首先呢，我们创建一个。静态的外部工程。第二次。好了，然后呢，这外部count下边我们新建一个javascript，这节课的内容实际上都是javascript的，我直接在这篇段写了啊，我们首先来做一个复习，看我们昨天讲了哪些东西，我复制一个do过来copy，应该是到了六。我们首先呢，我们来做一个复习。拜拜。好了，首先还是先看一下我们这个ATM文件打开，打开之后呢，就长这样，这里边有什么呀？有这个，呃，城市游戏底下呢，还有两个单选，那么我们一会了，出明问题的话，我们再来写一个。

叫单行本。Name。Me at、硅谷。这个的话呢，我们可以叫做name。好，写完这个里边的话，就是这样吧，啊就是这样，然后呢，再看一下，像这样多了一个name OK，我们回想一下我们昨天讲了哪些东西啊，首先的话呢，我们讲了一个说节点可以分为几种类型。

我们来看呃，Li这个节点，看这个节点啊，Li北京这个节点，从这个节点上看的话，这个节点可以分为几种类型啊。三种。首先Li这个节点应该是一个。元素节点，然后的话呢，里边会有属性，这个属性要是起个名的话叫属性节点，然后Li这个节点的里边有一段文本，它称之为文本节点，诶节点分为三种类型，分别是。元素节点、属性节点和文本节点，但是我们在操作这个属性的时候呢，通常情况下不是以属性节点的形式来操作，而是通过点属性的方式直接读取或者是设置属性值。好，讲的第一个点，我们写JS代码的话，GS代码通常放在这个，呃，开头的后面用script这个里面好了两第一稿节点的类型。

节点可以分为元素节点。属性节点，还有一个文本节点。哎，我们通过这样一个Li就能够知道哪个是元素节点，哪个是属性节点，哪个文本节点，在这里边我们要说一个是什么呢？通常情况下啊，超速属性节点直接通过原数。捷田点属性名。的方式。

来补写。属性值。而不是。啊，获取属性节点。这我们要说一下啊，就是属性节点啊，我们通常情况下不是把这属性节点获取出来，而是直接通过这样的方式来进行读写操作，好了这是第一个点，其他的两个我们都需要获取，然后的话呢，具体进行操作。第二个我们讲了一个，呃，写。写JS代码的可在哪写呢？哎，通常情况下是在这个直接看吧哈，在这个title节点的后边，Script type等于text javascript这个里边。然后我们为了。

能够在这里边获取到整个文文档信息的话，我们最终需要把这个代码写写在什么里边。分点onload等于function需要写在这个里边，那这个道理就是啊。我这个事件当。整个文档被完全加载完毕之后才会触发，所以说这里边的话呢，我可以获取到当前文档的一切节点啊。这个这就是这个特点好了，然后的话呢，这个呃乐的是什么意思，我们说一下啊弹出。

对话框。弹出一个，弹出一个hello。好了。第二个我们讲了一个写GS代码的位置，这里边的话呢，具体说有两个，第一个。啊，具体位置在哪。第二个写在什么里面？说吧，Window点试件对负发的时间好，以及如何为这个事件赋一个检验函数。

不是我看到了。这是我们讲的第二个点，好了，第二完了之后的话，第三个我们讲了。如何获取节点，如何获取具体数是如何获取元素节点啊，应该是有三个方法，第一个。对。ID获取第二个根据name标签名是吧。三个根据name属性名。

来获取，OK，我们看就是获取原数节点第一个来，我们想获取什么呢？比方说我想获取这个北京这个节点，或者说L这个节点，我们都能获取到来。呃，在JS里面，变量使用货物来进行声明，这JS是一个弱类，弱类型的语言，它的所有变量都用我来声明，比方说我是一个字符串，那么我也可以给它复制一个，这个整形也没问题，入类型的跟这个pab是一样的。那这么一个变量，比方说我叫呃，这个北京no等于document点看element BYD看。北京这个节点已经获取到了俄了。北京no好看效果。

放心，这个节点是可以获取到的。好了，第一种方式，第二种方式，根据标签名来获取，那是过Li know等于点get element by，注意是element。所以说返回的应该是一个数组或者是集合Li，我得到的所有的Li节点了，Li know点名是几个？八个，嗯，八个没问题，好了，还有一个是根据名字来获取，我写了一个啊，根据名字获取，我写了一个什么呢？啊，有两个，这个名字叫geer，这个名字叫user nameme，我们来获取这个geer吧，那C看一下哇，No等于document.get element by name。

好。N no点这这应该是几啊几个名字是不是两个呀，看对对。哇，谁做不是by name，是by name是吧，By name，我为了流畅一点的话呢，我先抽讲。OK，可以看没问题，诶这是BY，那by name这个有需要注意的地方，需要什么呀，说弱。落HTML元素本身没有name属性，然后怎么了啊，我们应加。

嗯，添加了一个内容属性，然后呢，使用这个代法，使用get。使用这个，使用这个。对于IE是不好用的。是这这这的，比方说我们这个节点啊，北京这个Li节点来北京等于点。

Guys are element by name I。Get。啊，我这块的话比我来C这是所以可以一。北京点好了看一下。这个是零，我们看CTRLC。我们这个可以获取到叫1A。

这个是零啊，实践方式不一样，实践方式不一样的话，人家不能用，因为这个IE的这个占有率还是很高的。好了，这是我们这个获取元素节点的三种方式。那每种呢，这里边儿的每种都比较常用，那其中我们要说一下其中这个第二种，第二种还有什么特点啊，第二种还有这么一个特点，说该方法。并非。Document对像所独有。然后任何元素节点都可以。都可以调用该方法，什么已获取，什么已获取指定的子节点，好看一下什么意思呢？这个意思，比方说诶，我这个C节点想获取下边的LS节点，注意啊，CT节点或CTA no等于。

government.at element BYD c点，我想获取city的所有Li节点等于是或Li等于document，不行就全部了啊，City not点。哎，Element by，于是写个L，大家看，这日记里就是四个。CT lino点。看效果。刷机四没问题。

好了，这是啊，第二个方法，Get elements by PI name的一个作用，好了，这是我们学习的如何获取元素节点，那下一个第四个。会结束节点之后的话，我们又学什么了？获取子节点啊，获取子节点呢，有有几个几个方式，第一个叫child属性。First child和last child属性。这还有一个4.3，就是刚才我们已经介绍了啊，使用元数节点的什么呢？Element by name方法。

哎，这都是可以的，要获取主节点，那我们看一下吧。我们还是先得到打开到这个以后的话呢，取的子点我们看。Li。等于node点。的，那我这是一个属性哈，好了，Alert打印一下Li children针点长度。看九九这个的话呢，如果要在大家的那个。嗯，咱们班同学按照那个叉P上要是跑的话，可能还是四。

就是每一个IE的版本变换之后的话，它的对这个嗯，GS的支持都会有不一样，那我现在的话呢，这个是99怎么来的呀，是是包含这个文本节点啊，然后Li文本Li这种一共是九个，所以说这个方法的话呢，不是特别的常用，因为这个一获取就全来了。那同学说我想就获取这个Li的话，我们这边是不是讲了呀，Get elements by name，那我在这个ul下边，我想获取指定节点的话，我可以调get elements by Tech name，如果我想获取。非文本基诊计算节点怎么办呢？你就只能是全获取，然后再用if进行筛选，怎么筛选叫no的type不等于三的话是其他节点吧，或者no的type等于一的话就是其他节点吧。但是这种情况的需求的。

需求挺少的，所以说大家知道啊这个事儿就可以了，特别是我们后边的话呢，我们明天要学j query，学query的时候，你会发现用j query原来是那么的方便。所以说大家不用特别去纠结这个事儿。但是提这样的问题呢，是很好。好了，那这个呢，是获取。指定。元素的所有子节点，子节点，但不怎么常用啊，不怎么常用，因为获取所有的这个意义不大，而这比较常用就是获取第一个节点或者是最后一个节点啊，我们看一下这个，这我先就这样好获取第一个节点或者最后一个节点，我们先看哈，先看来哇。

First吧，First child等于no.first twelve好了，我先把乐先打印一下。For是谁呀？是不是这个空格啊，这是一个文本，好，嗯，果然是一个object，是一个对象啊，但是它是一个文本对象，哎，这是一个文本节点，好了，我把这个提一下。这是一个HTML的element是一个元数节点，那这个的话呢，比较常用，具体是什么时候用呢？那使用方式就是啊，如果要是获取元素节点的文，这个文本节点，文本节点这比较常用，具体说一下应该是什么呀，说如果。

如果一个圆柱节点只有一个。文本子节点。文本子节点这个就非常的常用了，具体用的话呢，应该是在这个时候用，我们看这颗已经住掉了哈。什么时候用呢？我获取北京这个节点的文本值的时候，它很常用。或北京澳等于al。在element by。

ID看北京，然后的话呢，我获取其文本值A看。北京这个节点的。第一个子节点，第一个子节点是不是就是这个文本节点啊，它的not value就是获取这个值保存。抛起来就是北京，当然我们也可以来设置这个值，北京弄点。这点Y6等于正规，好，再看。哎，改了，哎，这个是这个比较常用的地方，而其他的这个child nose就不怎么常用啊，这个已经讲过了，好了，这是获取子节点。

五我们讲了获取和设置读写吧，读写文本节点，读写文本节点的话呢，我们有几个前提需要说一下，5.1是什么呀？文本节点一定是。元素节点的子节点点二获取文本节点的步骤是什么呀？步骤。获取文本节点所在的圆柱节点。然后呢？利用first child获取文本节点。然后。

利用。节点的no的value属性来读写文本值，是这样吗？就是这个过程刚才已经写过了，获取这个节点，然后利用for child获取那个文本节点，利用not value来进行读写操作，好，这是跟文本节点相关的再来。You。哎，我们还讲了一个什么呀，叫节点的属性，好这个属性的话呢，老师同学问了这样一个问题，说老师这个name跟这个name有什么区别啊，没区别，都叫节点的属性，只不过我本身我这个Li这个节点它就是没有内幕属性啊，这是我硬加的，而这个呢，我本身隐破的这个节点啊，我有内幕属性，这是啊，已经定义好的，就这么一个区别。

好了，那这个name啊，包括这个value啊，包括这个type啊，这个是指定的某一个节点的属性，而我们这个属性它是什么呀？是所有节点都有的属性，是所有节点都有的属性，具体有三个。嗨。殴打Li。Not value，其中最常用的是not value啊，No time，我们说一下啊，说啊。这个对于原柱节点的返回值是。

一属性，属性节点的返回值是。二同学的百分之是三，好了，是毒属性。好，按人数节点属性节点。文本节点。来说明OK，是节点的名字，返回对应的节点的名字，那这个也是一个只读属性。

比方说我要是一个这个，呃。原柱节点的话，那是啥就是啥，属性节点的话，那个属性名完美节点返回是一个井号text这两个吧，平常开发的时候呢，用的不大，用个value可以用，具体的话呢，也是在读写文本节点的时候用那个value叫什么？对于原著节点返回now，对于属性节点属性值，对于文本节点文本值，这是一个什么可读写的属性？行了，七我们来说一下，我们刚才讲的这个叫属性节点，首先节点的话我们要说一下啊，一般情况下我们不单独提这个属性，一般情况下，一般情况下不单独获取。

属性节点，而是通过什么呀？而是通过元素节点。表属性名的方式来。读写。属性值。好了啊，半径花的话呢，我们都这样，比方说举个例子。举个例子。我们看这。我们有一个什么呀，我们有一个name吗。或name node等于document.get elements by name。Username吧。然后写刚。零，因为它只有一个，有什么呀。U name啊，只有这一个，只有这一个这个节点，然后的话呢，我我获取一下Y流属性值name。

高达点value，这应该是谁呀？点写的正规谷，放心硅谷好了，我还可以来设置这个值内no.value等于串上硅谷再看。看改了，哎，注意哈，这个value跟我们那个no value不一样吧，说不一样啊，我本身是个什么节点，我本身我是不是一个元素节点啊，我现在我怎么样，我读写的是读写的是这个属性值吧，这不一样，以上的话呢，就是我们昨天讲的内容，大家看一下学的哪一块还不清楚。可以问一下同学说了这样的几个问题，大家看第一个问题呢，是这样的说呀。

这个位置为什么加个零。大家看我这块是不是get elements by name啊，是不是用名字获取了elements elements是应该是好多个元素节点吧，它们是一个集合或者是一个数组，我获取第一个节点的话，我加上一个角标零。懂这意思吧，啊，这是一个。这是一个问题，第二个问题说，老师你get elements by name，这获取的不是一个属性节点吗？大家看我是用这个name属性获取的什么呀？获取的elements吧？获取的不是属性节点，而是元素节点的集合。好了。