8. 尚硅谷_佟刚_JavaScript DOM编程_创建并加入节点.wmv原创

下面呢，我们要学一组操作，那这组操作呢，我们只学一个的话，它出不来，学一组操作这个效果才会出来，分别是创建一个元素节点，创建一个文本节点，以及为元素节点添加子节点，注意哈，只有原数节点调有子节点，所以说是为元数节点添加子节点。看一下三个方法，第一个叫create element，创建一个元数节点，按照给定的标签名创建一个元数节点，方法只有一个参数，就是可以创建的元素节点的名字是一个字符串的返回值，一个指向。新创建的元素节点的引用。返回的是一个元素节点，那么那么type的属性值当然是一，去理解新创建的元数节点，需要注意的是它不会自动的加到文档数里边，它是一个什么？它是一个存在于内存的DS对象，它不在那个，呃，不会自动的加到里边，我们怎么办呢？我们得通过。

添加的方法叫什么叫open child，把这个节点加进来，把给定的节点添加为element的最后一个节点，返回值是新增一点的指针。好了，我们先看这样的两个方法。好，我跟大家说的是这样的几个操作啊，第一个是新创建一个元素节点，然后把新创建的元素节点加为指定元素节点的子节点。

是新创建一个元素节点，并把该节点添加为。文中指定节点的节点。OK，看说。我新创建一个节点，Lino等于document.create看你们这么写啊，新创建一个。节点新创建的，然后呢，我把这个Li加为的节点。

这么写吧，Or not等于government.get element BYD，谁呢？K加为它的子节点not点。A child加的是lino，好，先看效果是什么样的。大家看这边是不是多了一个呀，在这里边还没有文本值。双C这个。也是一样的，多了一个，我们来看一下这个工具。开发者工具。好了，看elements。看着啊，你喜欢的城市打开大家看你是不是有个Li啊，但是的话呢，源码里边可没有，因为这个是只存在于上下文里边，源码里边没有还是这样。

哎，这边会有一个，好了，这就是我们新学的两个方法，第一个叫。调用document.element啊，里边是一个具体应该说是element。元素节点的标枪名。这是什么呀？要创建一个子节点，新创建一个元素节点，返回值为指向。元数节点的引用，第一个，第二个我们还学了一个叫。

这样什么呀啊，具体要是说的话，这应该是。点应该是加上一个，为什么呢闹。新。添加。New DELL的子节点。该子节点子节点将作为。将作为什么呀？将作为element no的最后。一个子节点。

这是我们的这两个方法，第一个第二个，那现在的话呢，这个还不太理想啊，你得有字啊，有字的话我们看另外一个方法叫create，创建一个包含着文本的文本节点，返回去，值指向文本节点的一个一目指针，它是一个文本节点，那么ta的值是三，这个的话呢，只有一个参数是新建。文本节点，这个文本这串新建文本节点也不会自动的带到文档里边，于是的话呢，我们看就我这来写一个吧，叫再创建一个文本节点来创建。啊，比方说我们几个。厦门，厦门的文本节点或厦门等于document.create note好out是下文听好了，那写好之后的话呢，这个也不会自动的加到上亚文里边，于是我下是谁啊？因ii not的节点。

厦门啊，大家看，如果说这个时候我出来之后，这个长啥样呢，长成这样。Li。LA，好了，那我这回我当上厦门之后长啥样了？这厦门是不加进去了，厦门很小。有了就这来好了，我们这块的话呢，我们讲了一个方法，说一下说点create里边是什么呢？里边实际上是一个字符串。

然后将创建。创建一个文本节点，参数为文本值，然后呢，返回该文本节点的引用。就行了。同样，这个节点也不会自动的填到散文里边，也通过a pen child把它加到某个。元素节点里面，然后把这个元素节点再加，就这么一个效果，于是你看。

下面出来了啊，我们可以这样看一下。停一下，你看我最开始打个乐，我说的什么呢，打个一。下来帮我打个二。这个打二没用啊。就这样看了没有，加上了有了，哎，就这么加的，就是这么一个情况，三个方法，创建一个元素节点，创建一个文本节点，把嗯创建的节点加为指定节点的子节点。我们来看一个练习，首先的话呢，看这练习的演示啊，是这样的，呃，城市游戏就是两个radio，我选一下说必须选一个类型，我选一个就没问题了，然后必须填入内容，这个内容是可以过滤前后空格的。

那我写一个，大家看刀塔好，我直接点三米的点上来了，就这么一个需求。好，我来写一下这个具体的需求，我们这应该是E3。啊，这个需求呢，是这样的。需求说点击sum按钮，选择是否选择T，这个检查是否选择，如果没有选择的话，有提示请选择类型，检查文本框里边是否输入，是否有输入可以去除相关空格哈，如果没有的话呢，提示请输入内容，如果检查都通过的话，就在相应的量节点里边建一个对应的LY节点。

我把这个。这个啊，我把这个文档复制给大家。这部分。CC。这边这个东西的话呢，挺多的，我们先需要额外的跟大家说一下。行好吧，我看我们需要额外掌握掌握哪些东西才能把这个练题给做出来，这个name呢，我可以去掉了啊要。

一三打开。现在我一点的话，他跑了，大家发现吗。好了，为什么呢？因为目前这个状态下，我这是一个表单，这是一个提交按钮，我点我点提交按钮的话呢，它就是去这个倒5.html了，我们这个是盗七，我写个七吧，你看。保存来，我再刷新我一点就这放弃啊这呢啊，再看我1.7了，这个不是这个是我们不希望的，所以说我们得先。阻止这个提交按钮的默认行为。当然我们先需要来获取这个按钮，同时给它加上一个on click显函数。OK，我们把这个步骤写一下，然后把难点呢我也来写一下。步骤第一步获取谁呀？我一切操作是不是都是基于这个，是不是都基于这个按钮啊，所以说我们先需要来获取这个按钮，有ID啊，Ctrl CI ID的话呢，用井号表示获取这个。

最硬的。二它有的话，比方说我们叫萨米一天。然后为sum米一天添加on click响应函数，必须的好了，可响应函数加上之后的话呢，加上安click了，并不意味着我可以取消默认行为，那我直接告诉大家哈，在安click。响应函数的结尾图。

添加一个return false不可以取消提交按钮的个人行为就可以。取消提交按钮的默认行为，就是我告诉你一个结论啊，这么多就可以取消，就是说你直接获取完，然后点on click等于function结尾处写个return false就可以取消这个默认行为好了，这个写完之后的话呢，四。四是干什么呀，四我们看。刷新一下好四我应该怎么样检查这个类型是不是被选中啊，怎么检查呀，怎么检查？首先我先需要获取谁获取video name等于type的这个input这样的一个什么这样的一个数组吧，然后看里面是不是有被选中的，具体说的话呢，应该是检查。

检查嗯类型是否会选中，是否选择，哎说若没有选择，给出提示叫什么呀，叫。请选择类型，具体步骤是这样的4.1。一先。

选择所有的name name等于爱的。节点那内点type吗？这两个他们是什么？他们是不是radio啊，那我如何验证这个radio是不是被选中啊？这是我们讲了如何验证啊吧啊，如果这个check取值为true的话，被选中了，或者说有check的被选中了，没有check的就没被选中wrong。选中了啊，然后的话呢，4.2电力。节点times吧，建立times，然后呢，检查其是否有一个啊。

属性。有效。属性为触吧，为数，就是说我要是有这个属性值就可以可以看我这个写法啊，大家往这看来看。对，默认这个值叫写个一二，我我写个ABC。看。放心，是不是也被选中了，这就是HTML不严谨的地方是吧，实际上这个他他就会发一个警告，我写个不你看。给发一个警告，这默认值的话呢，最好是下这说你警告没了，但是是其大值的话，你可以比方说哎，我这个诶有警告没问题。没问题，好了，我们这ctrl CA，然后括弧。

他就这样，所以说怎么说，所以说说有这个属性值的话，我们就说它是有效的，后来说如果有一个的属性这个存在。那。可以。说明这个说明什么呀，这个说明有一个type被选中了。啊，那出了问题了是吧，我如何来说是不是有效呢？这块我跟大家讲，我们可以这样来说，什么若某一个节点元素节点吧，元素。节点看点。

符敬明返回阿洛。通过这样吧，If。啊。啊，就是说我要是通过这样一判断的话呢，如果这个属性存在的话，这个if返回的结果将是true，不存在的话，这个结果将是false。我来说一遍啊，过来说如果呃，若某一个通过这样通过通过什么呢？通过然后的话呢，后边是元素节点属性来。判断某一个元素节点是否有该属性。这就可以判断，那我来写一个吧，写个window点等于方体，好，我写给大家看一下啊，看看什么呢，比方说哎，我要写一，我要点一个这个Li北京或北京no等于。

完了，然后呢，我做个义务判啊，If if。北京note.id这个属性哈，说存在ID属性，存在ID属近啊有再写一个or就什么呢，上海那我们就那么怎么获取啊。Get elements by tag name Li第几高？

第一个吧，第一个第二个元素嘛，好了，我再if一个什么呢？说上海的no.ID说A。啊，这个是文在ID属性。不存在ID属性，不存在ID属性，OK，这我也复制一份CTRLC上来，好看效果。呃，一三。刷存在不存在，看见了吗？再刷一遍，存在不存在，就这么来。并且去掉了，哎，我可以通过这样的方式的话呢，来判断它是不是有这个属性，那我这样一判断的话，如果要是比比方说啊，这个TS i.check说明有这个属性，有这个属性它不具备选中了。

哦，我通过这样的方式来进行判断，OK，好了，那4.3说若若没有。任何一个type被选中，则弹出什么呀？请选择。请选择类型，然后呢啊减方法结数响应方法后边这不对执行了哈，方法结束什么结束啊对看告，因为你不能让它那个函数函数那个日执行是吧？False就可以这样就行了。

好了，这是我们第一个，第一个是什么呢？看这个cap是否被选中了。五好，如果太阳被选中的话呢，我后来获取谁呀，获取。这个name等于name的这个。它的什么，它的啊，安化文网框，那文本值文本值本值怎么获取啊，通过什么，通过从外流属性吧获取完，获取完之后的话呢，六去除二除六时我们写个吧，比方说叫name v l去除name v的前后空格去一下。

我们去前后空格啊，看一下去除前后空格wall name v等于我写一个，哎，椎骨OK，叠好，我要去前后空格。先这么写。Name怎么去呢？使用动词IG前后空。格I用1LOGO前边的空格，空格大S还是小S啊？这是空格吧，后边也是。空格，然后的话呢，我给它去掉name v l等于name v l点怎么去啊。

嗯，IG你看再重新整一遍。好，这个先出掉了。好一下，这是小S OK，这就是去除前后空格的方式啊，去除前后空格之后。六然后呢，把把谁呀，把name v l和谁比，和这个进行。进行进行比较，若。这个是它的话说明什么，说明就输入一半空格吧，是吧，说明只输入了空格，然后的话呢，弹出要请输入内容。

请输入内容，然后同时怎么了方法结束还是好了这个说了之后的话，然后怎么创建节点。八利用name v创建文本。爹点九八。八加为七的节点十，再把什么呀把。啊，七加为该怎样选中的。

选择的type对应的什么节点，L节点吧，Type，因为我这个type值是什么呀，要么是要么是game吧。加为这个节点，加为T对应的ul节点，Ul的子节点，整个这个练习就这了。那这里边的话呢，我们谈到什么呀，这里边儿还是有一些新东西。我们在高中的时候学化学的时候，大家记得有一种题叫信息给予题，东西没学过，然后呢，根据你已经学的东西呢来推断，哎，这个新知识长成什么样？我们我们以后去做开发的话，比方说你用A公司去B公司，你发现B公司用的技术跟A公司完全不一样，怎么办，重新学。

所以说，我们更希望传递给大家的信息就是学习能力真的非常重要。OK，看一下步骤哈，获取这个三米的这个没啥问题，加上click函数没啥问题，然后的话呢，Return false结束默认行为，选择type，这应该是怎么选择呀。用name选择吧。诶选择type第一个name，选择types，然后呢，便利看是不是被选中，我已经写了哈，如果没有一个任何被选中的话呢，直接return false，有被选中的话，继续获取name，获取value值，去除全空空格，讲怎么去，然后的话呢，去完之后的话呢，跟他比如果。跟它还一样的话，说明只输入空格，这个时候怎么说请输入内容不法结束，否则的话呢，创建Li节点，利用这个内value，利用文本节点把八加为七的子节点，这把七加为type，选中的type对应的U节点，整个这个练习就写完了，OK，开始吧啊。

首先呢，写个温lo。已经好了啊，这部分代码呢，我去掉了，一会儿我重新我来加。CTRLX。还是比较。把这个一个一个复制过来。下下下。看着多了是吧，上一个一个。慢慢。Eagle。Sum等于document.at BYD sum。然后一定要return。嗯嗯。

不是这个吗，刷金。是不又跑了，白整了？刷新看看。我们这个ID叫sum。看一个事件是吧，这往这写三米这点啊。没有on click等于function，这这块价值高啊，OK。

不跑了，不跑的话，然后。写完了啊，这是上一步写的，就拿到最后吧。X放这。哦。现在看什么呀？过去或X等于document。什么情况卯利？二循环。或I等于零，I小于k.I加加看被选中的if if什么呢？如果有被选中的type。

I。什么属性啊，这的属性减重我们可以不可值或type等于好空哈，这个时候的话呢，I。Y就等于XI的那个Y6值，然后结束这的话呢，看容易被选中，怎么看呢，If如果。哎，好开就被选中的话，我们加上一个否就是在JS里边啊。0NOW false都可以作为false来用，但是你也你也可以这么写说如果这个值还等于now的话，这样也可以，怎么了？告请选择类型，请选择A请选择。

类型，然后的话呢。你看好看。好了，如果要是我已经选中了呢，我弹一下那个值是不是有啊。汉博va。再过来。这不game吗？这是啊，这就取到。就是我让VL等于什么，等于这个Y6，我们这边六是谁呀？是不是CT或者是game啊，选中的CT或者是game的这个value值再来，然后的话呢，获取name的文本值。

哇，这个文本怎么获取啊？Name。那就得了，直接写。等于document点在element by name吧，我只有name。零啊，还有值好吧，然后去除前后空格，刚才在给大家写了。B、以什么什么以这个空格开始多个或者是以空格结束。多个去除它等于name v l.replace什么呢？IG成它说再判断if，如果这个时候把它name v还等于空，那我就A了，告诉什么呀？请输入内容，请输入。

内容，然后看再看发类型内容看着啊。内容，但这个时候有个问题，就是我这个时候的话，我这个是不是没归到原处啊，那归到原处怎怎么让它归到原处啊，我让我的这个值再负回去，所以说一块写一个块name element等于让这个值再回去CTRL。XX。Hoping。

这边可以连接一下，因为我还要用的，这个时候的话呢，我让这个如果OK的话，我让。写在这吧，点等于的作用是什么？Name的文本框也去除。前后空。这么去发看看发类型。内容好好写一下看。都回来了啊，这个时候的话呢，有了根据Li节点吧，过Li node等于document.create叫什么呀，创建一个文本节点哇，文本节点应该是康的吧。

等于document.create什么text no放应该是谁啊？NAME6吧，好了，八加七的字点点I know的点骗子，这应该选谁？Con质这样吧，好，然后把七加为对应ULUL是谁呀？Ul我们是不是要根据这个type去选啊？我这有个type value啊，那个type value这个值是谁？是不是刚好是CD或者是game啊？我用这个CD是game，刚好可以获取到ul，于是这样写啊，看着。

Document点。点。这样那谁呢，那也就进来了，来心类型内容内容高塔。我们可以去哈，加上号能是下面。都OK啊，整个这个程序就就完了，大家看一看你的程序插法，把你的程序给修改一下。

在这编辑的基础上的话，我们还有呃进一步的需求，这样大家看我在加入任何一个节点，我在加入任何一个这个呃操作之前呢，实际上他们有干什么呀，他们可以弹出一个呃信息，我的每个Li都可以弹出这个文本值，现在我希望我加的这个也能弹文本值。看他也可以看，就这么一个需求，我来写一下这个需求哈，在刚才这个基础上，我们有一个额外的需求。地球二。装使。包括新增港Li都能响应。

支架。干什么呢，弹出。Li的文本值这么一个需求去看一遍。我之前的可以谈，新加的也可以谈。行，好，大家把这个需求完成一下，想一想怎么样才能够使代码得到重用，这个是我们想说的。那之前的Li都用的话呢，这个我们是可以搞定的，什么Li等于document.element by Li被每个Li都加上，这个前项函数I等于零，I小于Li no点。

I know？I等于。Function什么呀？打出this.first.not看效果。可以谈好吧，如何使新加也谈呢？是不是把这个过程重复一遍啊，CTRLC过来进去了Li嘛，是吧，Li，我使这个Li呢，也写上这个来，我们写一句话。十吧11未新创建的Li添加。

Click。响应函数。Am I know。第二。是这个意思吧。I弄click再看。F。不别有了，这样写完之后的缺点是什么呀？这写完之后的缺点就是比方说我们的需求变了是吧，我不但要弹出这个，呃，弹出这个这个值，我还需要加这么一个东西，然后加个笑脸，那这样怎么办呢？这样一改你是不得改多个地方C，你看这样的话他也得改。

啊，那我们的想法是什么呢？我们希望这个代码能够得到重用，我改一处就可以了，于是怎么办？我把整个的这个方身拿出来进行定义，CTRL。C来写个方程，方程是什么呢？比方说so。Content，那这个不能用了吧。逗谁呀？Li也点来看Li。节点so ctrl c怎么写？这个块写谁呀，写这写当前的节点，这块的话呢，也一样。

在这。再看。Do一样的，然后然呢，我要是再想改需求的话，直接改它就可以了。在一处都改了，有这个井号啊。这个也是一样的，好吧，这样的话呢，这个链接就写完了，我们写它的时候，我们看到一个什么呀，我们还可以把这个函数给它定义一下，让它可以重用，这是定义函数的基本格式，这是一个关键字，这是一个函数名，这是函数的参数，JS里边函数参数的话不需要有类型，因为JS本身是一个弱类型的，不需要有类型。

问一个问题啊，刚才的问题去前后空格那个。我没注意哈，那个。王一龙同学把这个问题提出来了，在这儿呢。这节奏不对啊。去前后空格后应该怎么写？饿吧。这个时候还是去前后呢，你看要是要是就这样写的话，你看这个结果啊X3打开看这游戏随便写。好，这个活没有看看这个，注意看这个，这个活是没去啊，怎么去后边啊，后边应该是高以什么什么结尾保存，这不就好了，刷新。

六看啊。二空格注意好了，上来就没有了，就是这个地方刚才写错了。