JavaScript DOM课后作业

课后作业

1. 封装函数insertAfter()功能类似insertBefore();
提示: 可忽略老版本浏览器，直接在Element.prototype上编程
2. 封装remove()使得child.remove()直接可以销毁自身
3. 将目标节点内部的节点顺序，逆序
eg:<div> <a></a> <em></em></div>
<div><em></em><a></a></div>

1、封装函数insertAfter()功能类似insertBefore();

系统提供了insertBefore()方法，想实现一个系统没提供insertAfter()功能。

之前可以把"p"标签放到"b"标签前面，可以用insertAfter(p, b)方法，现在把"p"标签插入到"b"标签后面，没有直接的方法可以间接的实现，

"b"标签的后面就是"span"标签的前面，找到下一个兄弟元素节点，放到下一个兄弟元素节点的insertAfter(p, span)就实现了insertAfter功能

<p></p>

<div>
    <i></i>
    <b></b>
    <span></span>
</div>

现在要把"p"标签插入到"i"标签后面，就等于插入到"b"标签前面，插入到"b"标签前面有insertBefore方法，这是一个同等转化的问题。

同等转化不能解决所有的问题，比如把p标签插入到span标签后面呢，找不到是什么标签的前面了，这种情况怎么解决？插入到最后一位用appendChild()方法，只要判断一下插入的位置是不是最后一位就OK。

insertAfter方法要到父级上找这个方法，所以写到原型链上。

<div>
    <i></i>
    <b></b>
    <span></span>
</div>

<script>

    Element.prototype.insertAfter = function (targetNode ,afterNode) {

        var beforeNode = afterNode.nextElementSibling; // 比如，在b标签后面插入，要把span求出来
        this.insertBefore(targetNode, beforeNode);  // 把p标签插入到b标签后面
    }

    var div = document.getElementsByTagName('div')[0];
    var p = document.createElement('p');
    var b = document.getElementsByTagName('b')[0];

    div.insertAfter(p, b); // 第一种情况下插入操作完了
    
    /*
    <div>
        <i></i>
        <b></b>
        <p></p>
        <span></span>
    </div>
    */
</script>

第二种情况是beforeNode是null

<div>
    <i></i>
    <b></b>
    <span></span>
</div>

<script>

    Element.prototype.insertAfter = function (targetNode ,afterNode) {

        var beforeNode = afterNode.nextElementSibling;

        if(beforeNode == null){
            this.appendChild(targetNode); // 如果beforeNode是null直接appentChild
        }else{
            this.insertBefore(targetNode, beforeNode); // 如果不是null是第一种情况
        }

    }

    var div = document.getElementsByTagName('div')[0];
    var p = document.createElement('p');
    var b = document.getElementsByTagName('b')[0];
    var span = document.getElementsByTagName('span')[0];

    // div.insertAfter(p, b);
    
    div.insertAfter(p, span);
    /*
    <div>
        <i></i>
        <b></b>
        <span></span>
        <p></p>
    </div>
    */
</script>

要学会在原型链上编程，在原型链上编程最好的一点是，this可以指代任何一个想调用的对象，如果不用this用function封装，this要变成一种参数被传进来，再有可以实现继承，下面的都可以用一劳永逸。

3、将目标节点内部的节点顺序，逆序

<div>
    <i></i>
    <b></b>
    <span></span>
</div>

<script>


/*
<div>
    <i></i>
    <b></b>
    <span></span>
</div>

怎么逆序逆序？

01/
先把b标签剪切到下面
<div>
    <i></i>
    
    <span></span>
    <b></b>
</div>

02/
再把i标签剪切到最下面来，就完成逆序了。怎么实现剪切？用appendChild()方法
<div>
    
    
    <span></span>
    <b></b>
    <i></i>
</div>



-----------------------------------------



第一次先操作倒数第二个，第二次操作倒数第三个
<div>
    <i></i>

    <span></span>
    <b></b>
</div>

第一次操作倒数第二个把b放到最下面了，这个i还是倒数第三个

<div>
    <i></i>
    
    <span></span>
    <b></b>
</div>

再操作倒数第三个i，放到最下面就ok

<div>
    
    
    <span></span>
    <b></b>
    <i></i>
</div>

写一个for循环转一圈，查好倒数第几个
*/