《JavaScript高级程序设计（第3版）》学习笔记34：chapter_10-1.1 Node类型_childnotes列表里所有节点不一定具有相同的父节点-CSDN博客

本文链接：https://blog.csdn.net/weixin_44582681/article/details/100905443
这是第34篇学习笔记！！
让学习“上瘾”，成为更好的自己！
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Node类型</title>
    <script>
    /*
    1, DOM1级定义了一个Node接口，该接口将由DOM中的所有节点类型实现，这个接口在JavaScript中是作为Node类型实现的
       除了IE外，其他浏览器都可以访问到这个类型
       JavaScript中的所有节点都继承自Node类型，因此所有节点类型共享着相同的基本属性和方法
    2，每个节点都有一个nodeType属性，用以表明节点的类型
        节点类型由在Node类型中定义的12个"数值常量"表示【见书本】
        节点类型：Document,  Element, Text, Comment等等
    
    
    
    
    */
    // 每个节点都有一个nodeType属性，用以表明节点的类型
    // if(someNode.nodeType == Node.ELEMENT_NODE){  // IE 无效
    //     alert('Node is an element');

    // }

        // 这个的“1” 代表了 Node.ELEMENT_NODE！！
    // if(someNode.nodeType == 1){  // 适用于所有的浏览器
    //     alert('Node is an element');
    // }

    // a, nodeName and nodeValue属性： 完全取决于节点的类型
    // if(someNode.nodeType == 1){  
    //     value = someNode.nodeName;     // nodeName的值是元素的标签名
    //                                    // nodeValue的值始终是null， 因为元素节点保存的始终都是元素的标签名
    // }

    // b, 节点关系
    // (1)每个节点都有一个childNodes属性， 保存NodeList对象（类数组对象）  --> 不是Array实例
    // childNodes属性只需通过“关系指针”，就可以通过他访问文档树中的任何节点
    // NodeList对象：保存一组有序的节点，通过位置可以访问
    // NodeList对象：基于DOM结构动态执行的查询结果，DOM结构的变化能够自动反映到NodeList对象中


    // 访问节点：方括号  或者  item()

    // var firstChild = someNode.childNodes[0];
    // var secondChild = someNode.childNodes.item(1);
    // var count = someNode.childNodes.length;  // length属性表示的是访问NodeList的那一刻，其中包含的节点数量

    // 转换成数组
    // var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes, 0);  // IE 8以及更早版本


    // 所有浏览器都适合
    // function convertToArray(nodes){
    //     var array = null;
    //     try {
    //         array = Array.prototype.slice.call(nodes, 0);
    //     } catch(ex){
    //         array = new Array();
    //         for(var i=0, len = nodes.length;i < len;i++){
    //             array.push(node[i]);
    //         }
    //     }
    //     return array;
    // }


    // (2) 每个节点都有一个parentNode属性，该属性指向文档树中的父节点
    //      包含在childNodes列表中的所有节点都具有相同的父节点，因此，他们的parentNode属性指向同一个节点
    //      包含在childNodes列表中的所有节点相互之间是“同胞节点”，因此，通过使用previousSibling和nextSibling属性，可以访问同一列表中的其他节点
    //      第一个节点的previousSibling为null， 最后一个节点的nextSibling为null

   
   //  (3) 父节点的firstChild and lastChild属性分别指向其childNodes列表中的第一个和最后一个节点
   //      someNode.firstChild 始终等于 someNode.childNodes[0]
   //      someNode.lastChild 始终等于 someNode.childNodes[someNode.childNodes.length - 1]
 


  //    (4) hasChildNodes()方法：在节点包含一或者多个子节点的情况下返回true


  //    (5) 每一个节点都有一个ownerDocument属性，指向表示整个文档的文档节点
  //          任何节点都属于他所在的文档，任何节点都不能同时存在两个或者多个文档中


    // c, 操作节点

    //  (1) appendChild()： 用于向childNodes列表的末尾添加一个节点
    //      添加节点后，childNodes的新增节点、父节点以及之前的最后一个子节点的关系指针都会相应地得到更新
    //      更新完成后，该方法返回新增的节点

    // var returnNode = someNode.appendChild(newNode);
    // console.log(returnNode == newNode);  // true
    // console.log(returnNode == someNode.lastChild);  // true
    
    // 如果传入到appendChild()方法中的节点是文档中存在的节点，则该节点将从原来的位置转移到新位置

    // var returnNode = someNode.appendChild(someNode.firstChild);
    // console.log(returnNode == someNode.firstChild);  // false
    // console.log(returnNode == someNode.lastChild);  // true

    
    // (2) insertBefore()方法：把节点放在childNotes列表中某个特定位置
    //  接收两个参数：要插入的节点和作为参照的节点（插入的在参照的前边），方法返回要插入的节点
    //  如果参照节点是null, 则insertBefore and appendChild() 是一样的效果

        
    // var returnNode = someNode.insertBefore(newNode, null);


    // var returnNode = someNode.insertBefore(newNode, someNode.lastChild);

    // (3) replaceChild()方法：替换节点
    // 接收两个参数：要插入的节点和要替换的节点
    // 要替换的节点将由这个方法返回并从文档树中被移除，同时由要插入的节点占据该位置

    // var returnNode = someNode.replaceChild(newNode, someNode.firstChild);




    // (4) removeChild()方法：移除节点
    // 接收一个参数：要移除的节点

    // var returnNode = someNode.removeChild(someNode.lastChild);

    //【注意】 
    // 经过replaceChild() and removeChild()处理的节点仍然为文档所有，只不过在文档中已经没有了自己的位置！！
    
    // 【注意】以上的操作都是在某个节点的子节点上，要使用，必须先获取父节点！！！
    //         并不是所有的类型的节点都有子节点！！！



    // d, 其他方法
    // 有两个方法是所有类型的节点都有的：cloneNode() and normalize()
    //  (1) cloneNode()：用以创建调用这个方法的节点的一个完全相同的副本
     // 接收一个参数：布尔值，表示是否执行深复制
    //              true  --> 深复制，复制节点及其整个子节点树
    //               false -->  浅复制，只复制节点本身
    //            复制后返回的节点副本属于文档所有，但并没有为他指定父节点

    //  (2) normalize(): 处理文档树中的文本节点
    //   first case: 文本节点处包含文本
    //   second case: 接连出现两个文本节点

    // 在某个节点上调用这个方法，就会在该节点的后代中查找上述的两种的情况
    //     a, 空文本节点，删除它   
    //     b, 相邻的文本节点，将他们合并为一个文本节点



    
    </script>





</head>
<body>
    <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ul>

    <script>
        var myList = document.getElementsByTagName('ul');
        var deepList = myList.cloneNode(true);  // 包含3个列表项
        console.log(deepList.childNodes.length);
     
        var shallowList = myList.cloneNode(false); // 不包含子节点
        console.log(shallowList);
    
    
    </script>



</body>
</html>```