9. 尚硅谷_佟刚_JavaScript DOM编程_替换节点及自定义的 replaceEach 方法.wmv原创

下面呢，我们来看关于节点的替换，叫replace，它把一个给定附件里边的一个节点替换为另外一个节点，什么意思啊？这是一个负节点，它把旧的节点换为新的节点，注意哈，新的在前边，旧的在后边，返回的是一个已被替换那个子节点的指针，就是什么那个旧的指针，这个方法呢，除了替换以外，还有移动的功能，该方法只能够单向替换，不能够双向替换，双向替换的话呢，我们可以自己来写一个函数，这个我们再说，先看这个倒八。几点的提款？好了，测试。

叫replace方法，节点的替换。好，那我们先不说需求啊，我们先说这个替换，我获取一个什么节点呢？我获取一个这个来北京，再获取一个红警来wall北京节点等于document.element BYD。北，最后有一个忘ill not等于document.at艾特的D谁呢？2L。啊，两个节点有了，我完成一个节点的替换功能，那我写一个负节点吧，比方说我写一个no。点等于government.by。

ID你看着啊。地铁怎么办呢？我想进行替换。Child可以new啊，Newl新的旧的北京啥意思啊？我想把北京这个替换为RL，看一下效果。是不是换了呀？看不着哈，这么看能停一下。这个很放心，这是北京红警，这是以前的吧，我说要把北京QQ红警，你看红警上去了吧，说我这个节点替换啊，除了替换以外的话，还有一个移动的功能，这就是节点的替换，诶它除了可以替换以外的话呢，还有一个移动的功能，就是刚才这个效果呗。

换完了，换完之后的话，我们觉得这么换其实不咋好，我怎么办呢？我能够实现这种节点的互换吗？注意哈，我想实现节点的互换，我们这个方法就测试完了，这个方法本身还是挺简单的。嗯，具体需求的话，我这块都有具体这个使用方式是吧。在这如何替换的话呢，这块我们都写清楚了，那现在的话呢，我们想有这样的一个需求，是说我想实现这两个节点的互换啊实现实现谁呢，北京。节点和RL。

节点的互换就是跟把含量换了啊，是互换，互换这个事儿应该怎么办呢？要是。互换的话，你就像两个变量，两个字符串是吧，那个值互换一下，你怎么互换。得有一个这有一个这有一个中间量吧，否则不行，就是A是比方说A那个字符串是abcb，那个字符串是DEFDEF想互换的话，我还需要一个中间的，这个道理是一样的，我们先来写如何互换，互换的话呢，应该是这样是吧，我把这个呃，北京换为。RL，同时L是不是也要换回北京啊？所以说我还需要获取一下这个game节点，写一下吧，这先不要了啊，过来过一个game no等于document.get element by ID。

嗯，写完好了，那我无论是先换哪个的话，我先换的时候，比方说我以前以前啊，我把这个刷新一下，我把这个什么呢，北京换为红景，这红景里不能没吧，因为红景我一会儿还要换成北京呢，所以说再换的时候的话呢，我们应该有一个克隆的节点。看克隆啊，北节点或北京node to等于北京node点克隆，克隆这个家伙有一个。米叫D。Deep什么意思啊？深度是吧，怎么克隆这地方啥意思呢？看API吧。这里边找到接SE那点克隆看着啊。

克隆not deep啥意思啊，如果要是真的话，它可以克隆什么呀？它可以克隆这个子节点吧，所以说这个的话呢，如果是真的话，可以克隆子节点，那当然我们要写触了是吧？说啊这个克隆no有一个什么呢？有一个did wrong。Keep为处则可以克隆子节点好克隆了，克隆好之后的话呢，我要使北京。哦，不是北京了是吧？我要使这个红警变为北京红警变为北京game not，点点。北京，然后是哎，我这么一写的话，大家是什么情况。

二看样子呢。原始呢？坏了，没换上。哦，这应该是什么呀？Game新的放前边，这个是新的，这个是旧的，写错了是吧，应该写谁呀？L弄的吧，是吧是吧，你应该谁呀，你应该是把I换为北京嘛，再来收北京的好了，然后的话呢，北京然后的话怎么样，我还要是以前那个北京换为。换为谁以前的北京，换为那个红景来北京我们看哈，应该city no.child新的应该是game，旧的是北京。

再看。刷新一把坏了，又又整错了，这应该写谁呀？好，写错了啊，现在应该是K弄的，是I弄的吧。一北京红警对吧，看一北京红警没问题啊，这就是什么，这就是互换这样的一个效果，那互换这个的话呢，在我们的这个呃，规范里边没有这样的一个函数，我们可以来写一个关于互换的函数来自定义。

互换。两个节点的函数写个吧。Function replace a和B呗，AB好了，怎么互换，大家数呀，第一步应该先获取AB和P啊。负节点吧，你看我这块的话呢，我为了换这个北京和红景，我是不是先搞乱这个city note跟game note，那负节点看一下怎么获取呢？Get有没有什么负负节点应该parent吧。有个这个属性叫是使用什么呢使用。

二文章豆子属性二怎么办？克隆A节点或B节点三什么呢？是不是两次互换呢，分别要用。这个AB节点的负节点和节点的负节点的与replace的方法实现节点的互换，可以就这么写，于是我们来写一个啊或A的。

等于a no.current not或b current等于B节点的current，好了啊，那前提是呢，我得A和B都存在负节点，我再进行。操作，如果要没有的话就算了哈，AB而且好，这个时候克隆克隆谁呢？任何都任何都都可以来word一个a node to等于a node，点克隆。减个处好，分好之后怎么办呢？分好之后分别调用进行互换，怎么互换？A啊，我换的是这个，先换B哈，B给谁呢？写a no吧。

换一下，换成换的是，然后在a.replace写replace replace，对replace is twelve，他问谁呢？A应该换换为B吧，换的是A节点本身写完写完之后的话，我们我们干什么呀，我们看它好不好用啊，那怎么看它好不好用呢，后边我都不知道。One。于是把这个写上。地址，北京节点红警节点好看效果过来刷新北京红景。

坏了没好使是吧，没好使是不是有问题啊，这两个是没问题的，这个方法的话呢，我也写了，这也没问题，看看吧，A节点B节点parent no没问题，A parent b parent。A节点to a克隆。克隆no吧，是吧，克隆no，我应该这么讲啊。这边再看。巴西北京红警互换了，哎，这就是我们自己写的这个啊，节点互换的方法好，那这个方法的话呢，大家就可以对吧，拿过来自己进行使用。看一下刚才呢，我们讲了一个知识，叫节点的互换，大家需要会用这个函数干什么，它是调用，调用什么，调用O的节点，负节点的方法，把这O换为新节点，返回值是那个O的节点的指针，那除了这个删除之外呢，除了这个替换的话呢，还有移动的功能，所以说要是想实现节点互换的话，我们需要有一个克隆的操作，否否则这个效果出不来，好我们还可以自己来写一个这个双向替换的一个函数，这是我们写的啊。

行，有了这个以后的话呢，我们可以来做下一个练习看一下。练习。四。这个练习我们前面已经讲过了是吧？啊，我点击的话呢，怎么样它可以实现对应节点的互换，这个我们在这个排班的时候，比方说我们排排一个值班表，然后的话呢，有两个人需要换值班，比方哎，我是周三也是周五晚上值班换一下，这个时候我们可以通过这样的方式来做Ajax，就是我这样一点页面上换了，然后的话呢，在后台把这个数据传到服务端，服务端的这个数据也换了，就是这样一个操作，大家可以思考一下，像这样的一个练习应该如何来进行完成呢？这个需求非常简单哈，就是实现。

节点的。但是按这个练习的话，做起来会很爽。四看没需求。需求实现什么会？

所有的Li节点添加on click响应函数实现什么呀？实现子节点和game子节点对应位置啊。袁术的互换。大家想想我这个基本步骤应该是怎么样的？第一步应该是获取所有的Li截屏，二步为每一个Li节点。添加on click响应函数。干什么呀？点击吧，是吧，啊点击什么说找到和当前节点对应的那个Li节点。

四互换啊，就这么几个步骤。互换的话呢，我们前面我们写了一个replace each那样的一个函数，我们在这里边的话呢，我们重新把这个过程再写一遍，一会的话呢，我们再给它抽出去。那我们看哪块是难点啊？第一个获取Li这步应该很容易，No等于document.at element I。下一步。为每一个Li click重写。或循环吧，循环或等于0I小于Li no点。写吧，I加加好了，然后Li know。

I的方click等于。方式好，加上这个比较麻烦，我如何找到我对应的那个Li节点。如何来找呢？那我们可以写一下，说我得知道当前的是哪个节点，然后我好去找对应那个吧。我再说一遍哈，我得找到当前的，然后完了我去找，我去找那个对应的吧，那我们看一下目前这个样子。打开。打开大家看当前的，比方说我要是点上海的话，对应的这个是实况吧，是吧，那我怎么知道它是跟我对应的。想啊，我怎么知道，比方说我要是首尔的话，应该是魔兽吧，那我怎么知道这个我我怎么知道跟首尔对应这个是魔兽呢，反过来跟魔兽对应这个是首尔呢，我们得用角标吧，是吧，但是现在的话呢，我们知道这样一件事，我这里边的角标啊，不靠谱。

整折什么都是八呀，他讲过这个事吧，为什么都不发呀？在我赋值的时候，它的确曾经是01234567，的确是这样，但是当我点这个试价的时候，这个时候这个I是不是已经变成八了呀，能理解吧，当我点它的时候，因为我这个复制已经复完了嘛，我点的时候这个I已经是八了，所以说我们这样写一个，你看他。哎，在GS里边没有局部变量，这个全局变量这么一说，反正你这块说明了我这块我可以用，于是你看怎么还没点那吧，是不是就是八了呀，那你点的话当然也是八，所以说这个时候你靠这个什么，你靠这个I的话呢，就不行了，因为这个I的话找不着当前的缩引，当然你也找不到。

目标的水怎么办呢？怎么办，我得在在啊，在每一个lii便利过程中写一步一步，以前没讲过啊说啊人工手动吧，手动为每个Li节点添加一个index属性，加一个我写个Li nose。I index等于I。好了，这个时候的话呢，这个I啊就被存到了这个属性里面，然后的话呢，我来打印它。CCV，再看刷新。啊对当前的吗？他是不存在的啊。

再看。零七这个有了吧，好了，那我可以利用这个index找到那个目标的index怎么写，或它给它index等于零，那如果当前的index它是不是刚好是八个呀？如果当前的index X小于四的话，那目标的引X这是几啊，等于。四加上。这点index能理解吧，比方说当前的是零，目标的是四，当前的是三，目标的是P对吧，那反过来如果要是比这个，嗯，三要大大于等于四呢，它index等于。

八减还四减。几减，你看当前这个要是七的话，这应该是几啊，这要是七的话，这应该是三吧，所以说应该是s.in text减减40吗？好了，反应一下alert和了谁呢？Li know。他index。First child.no我们看看这个对不对，我翻一下前面，这肯定是对的，红警。魔兽好了，极品飞车对吧？哎，这就什么呀，我就确定了这个目标的这个节点是什么？好了，下边的话呢，我要实现互换，那实现互换这个的话呢，我实际上以前写过，我们这里边的话呢，我们把这个过程啊，我们再写一遍实现互换，实现互换的话呢。

我先拿过来吧，这里边互换的方法。Open with HTML act好了，我们写了一个方法，在这呢实现互换呢，我先给它复制过来放这儿。OK replace replace。这写的啊，一个是this，一个是他给的Li know Li know，他给他index，那看效果能实现互换吗？

不止这个。这个是。是不是换了呀，看见了吧，再刷这个是不是换了呀？好，换完之后下一个问题我还能再换回来吗？是不是没有啊，是不好用啊，我一次换好使，你看这个换行好了，我再点它，或者我再点它都换不回去，我们希望它能够持续的进行互换，但是初步这个互换已经成功了，那为什么不能够在接着互换呢？因为我们在进行互换的过程中，我们有一个什么呀，我们那个安click事件并没有互换，我只是简单的换了这两个。节点。再说一遍哈，我只是简单的换了节点，于是的话呢，我们加一个吧，说换什么呢，来。

换。这个交换吧，是吧，交换on click是这样，这个我也要换。这个我要换，然后的话呢，还有一个交换，就是隐带的属性再交换。Index属性index性我们再说，我们一个一个看，第一个说换on click on click事件，那首先的话呢，我们看换没换啊，一会我加上一个aler，先写上一个叫嗯，可以保存。刷新这个好用的好了，回来之后的话点这个还有大家看见了吗？红警啊，点一次之后也没有了，北京也没有好了。刷回来再看一遍北京是有的啊好，我点红警这个有这点就没有了，我点北京，北京压根就没有好了，我们来换的时候的话呢，我们这个什么呀，我们这on click呀，貌似有一次，然后。

貌似可以换一次是吧，然后有的时候就不能换了，那我于是我们看吧，我克隆这个呀，我得让克隆的这个节点a nose。A not put on click，它只换节点而不换事件，等于，而谁呢？等于a no，啊，On click。哎，这个时候怎么样克隆，应该说克隆节点的同时，然后的话呢，把这个安可支件加上克隆。A节点的。同时。把方。Click试驾。啊，也复制。

好，我们看到这看到这块以后的话，我们再看啊，会有不一样吗？我点一下这个有反应啊，这第二次有看见北京是不是也有啊，但你这点不好使，这点还好使么？他不换。他不换，那这个我们昂可立克我们都已经加完了，好了，那下一个的话为什么不换呢？因为我在换完之后啊，我们来打他。来打他来打引X。加谁呢？x.index我们看这个index值是几，我一下值是零没问题，红警大家红警这个值是不是还是四啊好了，北京这个是没定义。就是说我在复制的过程中，我还要保证index属性也进行复制，哎，CTRLCCTRLV写吧，A no a no good inex等于A节点的index好写上，再回来再刷看精灵。

红警四这个是零没问题，没问题，但这个时候问题是这个时候我这个所引这个位置是不是已经变了呀，这个时候这个应该是零，这个应该是400是吧，你否则的话，我这个我找不到，我这个我要再换的话，我就给我就给自个儿换了，懂这意思吧，因为这个时候我这个数组已经发生变化了，这个时候数组下标是四的那个是它。那你换就换不了呗，那于是的话呢，我还需要在这个，嗯。这个换的过程中，我得把那个index，把index进行交换过来。交换什么呀，Index属性那得交换一下，你不交换就是我应该是重新那个index排序。

Index重新交换一下，怎么交换呢？咋交换呢？Index等于Li no。Target index啊，Index或time方index等于index，然后呢，Li。他给index index等于单方index。是吧，零四来看是不零了，这个时候怎么样就可以永久进行互换了，把这个我先给拿掉效果。

好了，进而的话呢，这个练习就起来了。好了，我们看一下哈，看一下这里边有一些点是需要我们重新来进行审视的，呃，大体上这个架子的话呢，是没问题，细节细节，我们第一个细节就是如果我在这里边去打印这个I的话，是不靠谱的，知道吧，因为I在我翻完值之后，这个I的值就已经是八了，你要是打印的时候那个I也是八，那怎么样把这个缩音保存起来呢？诶同学再加一个属性，然后的话呢，这里面这个属性我还还可以给它读出来一个点。一个点好了，然后的话呢，我们在进行节点克隆的时候，我们发现。我们不能够克隆属性，具体哪些属性呢？比方说on click跟index都不能进行克隆，那我就手工给它加上第二个点，第三个点，当我两个节点互换以后，那这个时候这个数组的这个圆柱的水眼也应该进行互换，所以说的话呢，我互换inex属性，整个这个。

练习就写完了，发给大家，大家看一下。