11. 尚硅谷_佟刚_JavaScript DOM编程_添加删除节点的实验.wmv原创

练习六。好，看一下这个练习。当然了，我这个前后空格我得去了啊，确定要删除汤姆的信息吗？前后空格是应该去掉的啊，取消按确定的话就给删除了，这个比那个呢更复杂一些，刚才那个是不是我确定那个信息是不是直接就在哪啊，是不是直接我就可以获取啊，这个要复杂一点，你看我为delete特加事件，而这个汤姆呢，是在跟他。同一行的第一个TD的这个里面，然后的话呢，我还要去一个前后空格，这是一个，同时还有一个，哎，我可以把这个写上。At at.com，然后我这边写的这个，我按萨米我这没写完哈，萨米这应该加到这个。表的最后一行，哎，这是我们整个这个练习的要求，大家想一下这个练习怎么做，下课先休息一会儿练习我来说一下需求你的里边一些注意的一些点，我来说一下啊。

好看什么意思呢，这个意思啊。我首先的需求就是我想为呃这个C里边的所有的A节点添加on click显函数。喂，这个中的所有的A节点添加on click响应。

函数干什么呀？干这样一件事说。首先第一个弹出弹出确认对话框，确定要删除什么什么信息吗？叉叉为为谁呢？看啊为叉叉为这个。当前这个超链接所在TD的TR的第一个TD的文本。再说一遍啊，当前A节点所在的TD的TR的第一个TD的文本叉叉为。

嗯。当前A节点所在的T的D所在的所。在的TR的。第一个P地子节点的。文本值文本值切要去除，要去毒前后空格，OK。这是我们看到的啊。好了。若点击确认。The，删除the。

删除什么删除。A，节点所在的航班，好了，这是我们第一个需求新天新员工，这个的话呢，我们可以一会再一会来写写这个好了，这里边我们需要注意的跟大家交代一下。A节点。是什么呀，是一个是一个超级。点击可以在其在。即on click事件中，通过返回fo。

来取消其默认行为。二。第二个是什么？第二个是说哎，TR啊，直接负节点为而不是。哟，我们写了啊，大家看这有个什么，是不是有个底包的呀。DR的直接负节点是table而不是啊，是de而不是table，别的呢，就再没什么了啊，去前空格我们刚才已经写了是吧？三写一个吧，三可以把去除前后空格的代码写成。一个。

第二很数，别的呢都很正常，下去大家写一下来，咱们来写这个程序，咋写呢？window.onlo等于function必须的获取所有的A节点，A节点应该是哪个里边的，因为A节点外边可能也有，所以说我对好之获取这个里边所有的A节点来a nose等于document.at element by d这个里边的所有get elements by nameme这个里面会有A节点。OK，然后为每一个节点加上函数或循环，或I等于零，I小于a no点。

佳佳a nose。I啊，Click等于方式return，这个时候加完之后是什么特点啊他。Ex，这样看吧，EX5点加上之后，特点是我突然间点不动了，他不跑了啊，然后的话呢，呃，我首先要弹出一个信息，这个信息我说了哈，那个叉叉是什么呢？是A所在TD所在TR的第一个TD的文本值，或我要获取那个tr note等于s.current note是谁呀？

ED版在parent node，这就是那个天吧是吧，那这天我一会要删除带过。Text content等于T no.get element by name什么呀？第一个TD吗？第一个TD啊，First child的not value值拿到了啊，这个值拿到以后的话呢，我们还得干什么呢？我们得去除其前后空格，但我这个吧，我这个是不是刚好紧挨着呀，我这不去的话也看不出来，先打一下。保存刷新。帮我杰瑞我好了，去前后空格写个函数function。

FTR或IEG等于。以什么什么开始，以小S开始，或者是以小S结束可以有结束是这个多符可以有多个把它类。S tr.re replace，把什么呢？把跟它匹配的换成它，于是过来。Content等于next content写完，然后flag等于can form确定要删除什么什么的信息吗？

什么呢？On if flag，如果要是flag的话，那我就删，删谁呀？删tr no parent not，点屏幕tell，删tr note，保存效果。放心。Jerry，汤姆。鲍勃山出没了，好了，我现在的话呢，我把这个空格加一下。刚才这样我们看能不能去保存哈，放心老师不去了，删除，这样的话呢，这个练习就写完了，代码就这么多写了一个推，此外的每一个步骤你会发现都是我们前面写的，获取所有的A节点。

循环加事件一定要return for，取消默认行为，当前A节点的负节点是TD负节点，TD负节点的，呃，这个TD的负节点是TR，然后的话呢，我最终删的是TR，我来获取TR的第一个TD的文本值，去前后空格confirm，这不就完了吗？把你刚才没写完的，照着我这个写完，下一个呢，就是我们要呃，给这个这个按钮让它好用，OK看一下下一个需求这样的需求二。这句话是这样的，我们看啊为谁呀，为这个按钮跟上。隔离开始住会啊。

添加on click响应函数干什么呢？干这样一个事。第一步直接写获取什么呀？首先我要获取ID是name email sir这三个。文本框的值，你看我偏嘛是吧？A email a艾特硅股点com，比方说1000，我先要来获取这三个文本框的值。过来获取获取什么呀，井号，因为我这个写什么了，是不是写这个ID了呀，Name email过来。Email。Siri的文本框的文本框文本框的值。

好，二二获取完这个值之后的话，我们要干什么呀？我们目标是创建这样的一个TR吧，是吧？OK，出现这样一个TR的话呢，我先需要创建一个TD，再创建一个TD，再创建一个TD，还需要再创建一个TD，完创建类似于这样的一个TRCTRLC。来创建。利用一获取的。文本值创建。三个PD节点。在创建一个。第二节点，并把并把以上。放个。TD。

几点？加为T节点的子节点好了，这之后长什么样呢？长这样看着啊。I。长成这样，这是还没有呢。这没有所说，就长这样啊，这还不行，还得还得有什么呀，还得有一个三可创建一个TD节点，类似于这样，我们这个不是HX操作，所以说这个问号吧，这个ID值就没有，这空是不写叉叉叉，确实叉叉叉啊，然后呢把。怕什么呀？三创建的TD也加为加为。

加。为T的子节点哪啊，是不是是不是交到这个后边啊。五再干什么，再把。TR加为。单维单维谁呀单维。他的T的子节点谁呢，他咋。Bo子节点的子节点能明白什么意思吧，是它的子节点，然后的话呢，把这个TR应该是它的子节点，于是这个加就完成了，主共加完成还不够，还有别的还有什么呀。还有一个六。

为新创建的TR的A子节点子节点添加on。响应函数使其能吗？使其也具备，也具备删除的。功能这就可以了，那很明显我们前面写的这个单独操作这么老多的话，我们是不是可以给它重构为一个函数啊，直接把这个函数的引用付给他，那多好啊，所以说这块的话呢，我们可以这样写，这就是我们整个的这个第二个需求。我们一起来写吧。时间的关系啊，不让大家写了，但是课后的话呢，你需要给他写完啊，在这在这首先要取得这个点。

点idv，点。啊啊，可等于function去啊，因为这是一个按钮，所以说不需要bos，看这我刷新这是一个按钮，它不跑什么时候跑啊。Sum米提交按钮的时候才来跑，这是一个按钮，它没有这个功能，然后的话呢，获取那三个值，Name按钮等于document点。Get element by ID点啥意思嘞？看这是一个input吧，我获取这个input的Y流值，Y流值是什么呀？Y流值是不是就是这个文本值啊？

Value值，然后说一下小丽刚才问我说老师，这个note value跟这个value属性有什么区别呀，这个value指的是。一个。HTML节点就是一个一个HTML叫什么呢？比方说像input啊，像这个text啊，像radio啊，就是我的一个这个HTML里边的一个一个节点本身它有这个Y流属性值，懂这意思吧，你看它有这个Y流属性值，这个时候的话呢，我获取的是我获取的确实是某一个HTML节点的Y属性值，这个value和type name ID是不是一个一个level啊，就是一样的，而那个no的value呢，是任何一个节点都会有那个no的value流属性之外。

我们有三个属性，分别是node type node name node value，我是任何一个节点，无论这个节点是什么，它是不是都有那个node value node type node name那个属性值，而。而像我这样的一个节点，比方说B这个节点，这是一个什么节点，这是一个。嗯，一般的一个元素节点，你像这个节点它就没有Y流属性是吧，包括TR肯定没有Y流属性吧，但TR却有no的外流属性吧，的外流属性应该是。Now。好，我们比方说这个吧，以这个为例，看这个来点，再来点value。

这是个啥情况，你们这Y轴反问的是反应该是什么呀？这反问的应该是什么呀？这我们知道吧，这反问应该是道吧，是个什么，我这个S是不是一个元素节点啊，然像是空，而这个呢，压根我这个button就没有这个Y属性吧，Y6属性，你看我是不是这个有一个Y流属性啊，啊没有，但这个实际上它有啊，Y流属性代表了什么呀，代表它的文本值，而且现在你说我这个。这个这个这个这个这个button，他压根就没有value，还有。九块69Y6就写吧，写个ABC。好，刷新一下看ABC。小丽呀，懂得这个Y6跟no y6这个区别了吗？你说有啥问题，就是说这个value啊，指的是那个节点的具体的一个value属性，就是我们能够看得着的，写得上的一个Y流属性，听懂了吗？比方说你看我了这个八八，我是不是可以这样Y流写出来呀，这叫Y流属性，而那个node value流的话，那是写不出来的，它是任何一个节点本身都有的一个属性，就是说那个node value流是描述这个节点的一个属性，懂这个意思吗？

你可以认为node是一个类。Noe那个类里边有一个属性叫noe value，也确实是这样啊对对，那谁那个米菲说的对，你看这个你node还有一个属性叫get node value。这呢，你看这里边，比方说像next sibling not name note type not value，包括这个part note part note跟note value的作用是一样的，指的是某一个节点本身的属性，就是说我本身有这些属性的话呢，是来描述这个node节点本身的，懂这个意思吗？

这个时候你看哈，比方说no name not type not value，以及。看的那个apartment node，或者是our document这些都是啊，Node的属性我们只不过当当时提了几个呀，提了这三个，比方说part notde也是其中的一个，我们不也可以讲出了吗？而现在的话呢，这个属性是什么呀？这个属性是我具体能在写某一个属性节点的时候，它的确是有这么一个属性，比方说跟ID一样，跟type一样看。Type跟name也一样，具体用的话，No的value我们用处目前只有一个，就是获取文本节点的那个文本值。而Y流属性呢，是获取。

HTML文档里边表单的这个表单值用Y流说一下在这来还有什么时候用哈A用于获取HTML。表单元素的值，这个时候用NOEY6了，目前只有一个哈，No的Y流干什么呀？用于获取文本节点。文本节点的文。本值或者是说note value目前只有唯一的一个么？用就是这个时候用紫外的时候都不用懂吧。行好了，先说到这课后的话呢，看一下啊，这个值搞到了同样。

还有一个email。就这。还一个sari。完了之后，然后干什么呀，放建三个题笔。然后再把。上边创建的这个name y6加为它的的节点，这干什么，那我是不是创建了一个一个这个东西啊。

是不是一个一个这玩意啊是吧，我目前在在构建它。这是一个还有。OK，这个是没。没有外流。这个是。这个是三。好，然后还得干什么，我还得创建一个TR吧，T等于document.create element。然后加加点child。Name pd。

没T。戴瑞提。还有啥是还有一个，还有一个，还有这么一个东这个的这个来吧，还有这么一个弟D。这个。Create element节点。然后节点的。属境外等于。云浮值啊。CTRLC我直接写了啊A节点点open，这样放什么呢？放一个文本document点。Note叫啥呀？

好，然后呢，我把这个A节点得放到一个TD里边，或ad等于点create element。D点。Open放谁呀？A节点吧，把这个再放到PR里边去。A child。Tad，然后把这个再放到我们。这个的deposit里边去document.create，或者get get element BYD，它的TD节点获取啊，Get element element name。

The。零。0ELEMENTS吗？零？点open票放点我看一下。他买A。BCD。硅谷抗1200。没好使是吧，没好使，没好使的话，中间哪一步出问题了，过来看吧。五对吧。TR。Child noe，这个时候怎么调呢？我们可以在一个位置打一个alert，就是说这样写的哈，如果这个aler要是打印出来的话，说明这个问题在后边，没打出来的话，说明这个问题在前面，能理解这个意思吧，出问题的话后边就不执行，就像发生异常一样。

坏了，前面有问题。嗯，那个T标签里面是不是加那个的时候加文加TS。第几行？64行60我说啊，这不能加，哎，我困哦，不能加，不能加，我是不是还得创建那个对应的文本节点啊是吧，这是一个TD吧，你要加的话是不是得加加文本节点呢，是低。有一个什么呀，文本节点忘了啊啊，那太麻烦。Name，明天我们学那个quiry的话，这个代码会特别。

Email value。三再来。保存出加了呀，这就可以了，来你看。ABCDAB。Abcd点看1234。加上了吧，这加一加加好了，但我这个删除数还不好用啊，我让这个删除也变得好用，怎么加呀，删除也好用，我们看我们是不是创建了一个A节点呢。哎哎，这块创建的这个A节点在这，好了，我让这个A节点也具备那样的一个功能，于是我来写来写啊，A节点点等于那很明显function我怎么办？我不能把刚才代码再写一遍了吧，于是这个我需要给它重构一下，怎么重构啊，CTRLC，我想写一个函数拿过来，我们看写什么呢？这里边需要这个是谁，是不是A节点呢？A not过来。

CRCCR。也就没有了吧，就一个它好了A节点，于是这块这个写法就变成了。去掉CD，后来变成起名的function。屏幕板屏幕。一行，第二面写了一个其中一行，于是后来写什么呢？写好这个复值是不要的C再来。

粘贴好再看。刷新来。硅谷。过来看这。主持AA的信息啊，取消。删成功成功，这就是我们整个的这个练习。好了，那这个练习里边的话呢，把我们前面学的所有知识呢，基本上我们都归结了一遍，比方说查找节点。创建节点。删除节点，但目前这边没有修改啊，天山改查修改节点这块没有我，但是我们前几个的话呢。

都有，OK，这是一个比较典型的练习，在我们后边学AX的时候，我们就可以这样写，比方说哎，我这块我写了个提交，那我真的后边加一条记录，但同时我把这个数据发送到数据库服务器，在数据库服务器里边把这个信息录入到数据库里边，数据表加一条记录，但是前台操作的话，你就感觉好像没跟没跟服务器交互一样，你要是删啊，你确定一删的话，那我把这个信息传到后台，后台把这个记录的确是进行删除，我们这块的话呢，直接使用GS上面就可以了，整个GS代码就这么写，但这种代码的话呢，过于繁琐，明天学解块的时候，这个代码将极度简化。嗯，基本上会减到目前的。1/3吧。或者是1/4，就是代码会简化很多很多。放下去看一下。