一、查看节点

 <body>
    <div id="box">hello box</div>
  </body>
  <script>
    var oDiv = document.getElementById("box"); //div元素对象
    // var oDiv = document.getElementsByTagName("div")[0];
    // console.log(oDiv.nodeName); //节点名称 DIV
    // console.log(oDiv.tagName); //标签名称 DIV

    // console.log(oDiv.nodeType); //1  节点类型
    // console.log(oDiv.nodeValue); //null  节点值

    // var attr = oDiv.getAttributeNode("id");
    // console.log(attr);
    // alert(attr); //[object Attr]属性对象
    // console.log(attr.nodeName); //节点名称  属性名
    // console.log(attr.nodeType); //节点类型  2
    // console.log(attr.nodeValue); //节点值  属性值

    var ch = oDiv.firstChild; //第一个子节点
    // console.log(ch);
    // alert(ch); //[object Text] 文本对象节点
    console.log(ch.nodeName); //节点名称  文本
    console.log(ch.nodeType); //节点类型 3
    console.log(ch.nodeValue); //节点值  文本值

    // get获取
    // Attribute 属性
    // Node  节点

    // 节点类型：
    // 元素节点   1
    // 属性节点   2
    // 文本节点   3
  </script>

二、查看节点

<body>
    <ul id="box">
        <li id="list">列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>
  </body>
  <script>
    var oUl = document.getElementById("box");
    var oLi = document.getElementById("list");

    // console.log(oUl.firstChild);//第一个子节点  可能有文本节点 换行
    // console.log(oUl.firstElementChild);//第一个子元素节点

    // console.log(oUl.lastChild);//最后一个子节点   可能有文本节点 换行
    // console.log(oUl.lastElementChild);//最后一个子元素节点

    // console.log(oUl.childNodes);//ul里的所有的子节点对象 可能有文本节点
    console.log(oUl.children);//ul里的所有的子元素节点对象

    // console.log(oUl.firstChild.nodeType); //3
    // console.log(oUl.firstChild.nodeValue); //

    // console.log(oUl.childNodes.length); //7
    // var elArr = [];
    // for (var i = 0; i < oUl.childNodes.length; i++) {
    // //   console.log(oUl.childNodes[i]);
    //     if(oUl.childNodes[i].nodeType === 1){
    //         elArr.push(oUl.childNodes[i])
    //     } 
    // }
    // console.log(elArr);



   console.log(oLi.parentNode); //查找父节点
   console.log(oLi.parentElement);//查找父元素

  

    // 父节点查找子节点

    // 通过父节点对象查找子节点对象（可能会有文本节点）  兼容性好
    // 父节点对象.firstChild  查找父节点下的第一个子节点
    // 父节点对象.lastChild   查找父节点下的最后一个子节点
    // 父节点对象.childNodes   多个  查找父节点下的所有的子节点

    // 通过父节点对象查找子元素节点对象   
    // 父节点对象.firstElementChild  查找父节点下的第一个子元素节点
    // 父节点对象.lastElementChild   查找父节点下的最后一个子元素节点
    // 父节点对象.children   多个  查找父节点下的所有的子元素节点


    // 子节点查找父节点
    // 子节点对象.parentNode  通过子节点查找父节点
    // 子节点对象.parentElement  通过子节点查找父元素
  </script>

三、查看/修改/删除属性节点

<body>
    <ul id="box" a="10">
        <li>列表1</li>
        <li id="list">列表2</li>
        <li>列表3</li>
    </ul>
</body>
<script>
   var oUl = document.getElementById("box");
//   console.log(oUl.id);
//    console.log(oUl.a);//无法获取自定义的属性值
//    console.log(oUl.getAttribute("id")); 
//    console.log(oUl.getAttribute("a")); //可以获取自定义属性

// 设置
    // oUl.title = "hello"
    // oUl.b = 100;

    oUl.setAttribute("title","hello")
    oUl.setAttribute("b",100);
    // oUl.removeAttribute("a");
    oUl.removeAttribute("a");

//    节点对象.getAttribute("属性名") 根据属性名获取属性值
//    节点对象.setAttribute("属性名","属性值") 
//    节点对象.removeAttribute("属性名")   删除对应的这对属性
</script>

四、创建和增加节点的方法

 <style>
        img{
            width: 100px;
        }
    </style>
</head>
<body>
   <div id="box">
       hello world
   </div>

   <button id="btn">点击添加图片</button>
</body>
<script>
    var oDiv = document.getElementById("box");
    var oBtn = document.getElementById("btn");
    // var oSpan = document.createElement("span");
    oBtn.onclick = function(){
        var oImg = document.createElement("img");//创建图片节点对象
        // oImg.src = ""
        oImg.setAttribute("src","./img/biaoqing.webp");//设置图片节点对象src属性
        // oDiv.appendChild(oImg);//把创建好的图片节点对象追加到div内部最后
        document.body.appendChild(oImg);//把创建好的图片节点对象追加到body内部最后
    }
    
    // console.log(oSpan);//元素对象
    // console.log(oImg);//元素对象
    // alert(oSpan);
    // oSpan.innerHTML = "我是span";
    // console.log(oSpan);//元素对象

    // 追加
    // oDiv.appendChild(oSpan);


    // 创建元素对象
    // document.createElement("元素名称") 

    // 追加元素对象到父元素内部最后
    // 父节点对象.appendChild(子节点)

</script>

五、属性操作

<body>
    <ul id="box" a="10">
        <li>列表1</li>
        <li id="list">列表2</li>
        <li>列表3</li>
    </ul>
</body>
<script>
   var oUl = document.getElementById("box");
//   console.log(oUl.id);
//    console.log(oUl.a);//无法获取自定义的属性值
//    console.log(oUl.getAttribute("id")); 
//    console.log(oUl.getAttribute("a")); //可以获取自定义属性

// 设置
    // oUl.title = "hello"
    // oUl.b = 100;

    oUl.setAttribute("title","hello")
    oUl.setAttribute("b",100);
    // oUl.removeAttribute("a");
    oUl.removeAttribute("a");

//    节点对象.getAttribute("属性名") 根据属性名获取属性值
//    节点对象.setAttribute("属性名","属性值") 
//    节点对象.removeAttribute("属性名")   删除对应的这对属性
</script>