节点操作 （上） 详细 带例子 子级节点、父级节点、兄弟节点（相邻节点）、创建节点、添加节点

为什么要学节点操作

获取元素的方式有两种：
在之前的博客中 我们有说过用DOM提供的方法来获取元素
但是用起来很麻烦 只能一个一个的取
逻辑性还不强

而节点操作可以利用父子兄节点关系获取元素
只要取到一个元素的父级 就可以直接调用子级元素
虽然用起来方便但是节点操作兼容稍差 不过也有解决的办法

这两种方式都可以获取元素节点，以后两种都会使用，但是节点操作更加简单

节点概述

网页中的所有内容都是节点(标签、属性、文本、注释等) , 在DOM中,节点使用node来表示。
HTML DOM树中的所有节点均可通过JavaScript进行访问,所有HTML元愫(节点)均可被修改,也可以创建或删除。

一般我们节点至少拥有三个基本属性：nodeType（节点类型）、nodeName（节点名称）、nodeValue（节点值）

• 元素节点 nodeType 为 1
• 属性节点 nodeType 为 2
• 文本属性节点 nodeType 为 3（文本节点包含文字空格换行等）

节点操作主要操作的是元素节点

节点操作

节点层级

利用DOM树可以把节点划分为不同的层级关系 常见的是父子兄层关系。
1.父级节点

node.parentNode

//例子
<div class="fu" >
        <span class="zi" >

        </span>
    </div>
    <script>
    var zi = document.querySelector('.zi');  
        console.log(zi.parentNode);
    </script>

控制台中

注意 ！ node.parentNod得到的是它上一级的父节点 也就是最近的父级节点 如果没有找到父节点返回值为 null

2.子级节点

// 第一种 parentNode.childNodes (标准)
//得到的是一个子级节点的集合  此集合会及时更新。
 <script>
    var zi = document.querySelector('.zi');  
        console.log(zi.parentNode);
    var ul = document.querySelector('ul');
        console.log(ul.childNodes);
        
    </script>

控制台

这里显示十一个是因为 childNodes 包含元素节点 文本节点 等等
如果想只获得里面的元素节点，需要专门处理。所以我们一般不提倡使用childNodes

//只获得元素节点的程序代码
    var ul =document.querySelector('ul');
    for (i=0;i<ul.childNodes.length;i++){
   
        if(ul.childNodes[i].nodeType == 1){
   
            //ul.childNdoes[i]是元素节点
            console.log(ul.childNodes[i]