DOM节点的概念

网页中所有的内容都是节点，在DOM中用node禁行标示

都可以通过js访问

一个node包含了三个属性，nodetype，nodename，nodevalue

属性的相关操作

<img src="" alt="">
<script>
  属性有一个重要的特征，就是存储值！
var img=document.querySelector("img");
    img.src="http://www.baidu.com"

getattribute  拿到属性值得函数
console.log(img.getAttribute("src"));

//设置属性的值 可以自定义属性
//例如 img.setAttribute("aaa-src","https://www.baidu.com")
img.setAttribute("src","https://www.baidu.com")

//删除属性 img.removeAttribute("src");

自定义属性

    <!--
    在标签上写上  data-*="";    
    -->
    <img data-type="jpeg" src="" alt="">  
<script>
    var img=document.querySelector("img");
    dataset获取到的是一个集合
       console.log(img.dataset.type)  ;
</script>

创建节点

    <script>
    var ul=document.querySelector("ul")
    //创建一个节点
    // create ：创建  element：节点
    var li=document.createElement("li");
        li.innerHTML="123"
    //添加节点
    //append:追加 child:孩子
    ul.appendChild(li)
    //追加到最前面的位置
    //insert:插入  before：在..之前
    ul.insertBefore(li,ul.children[0])
    </script>  

获取子节点

 <script>
    // var ul=document.querySelector("ul");
    // //获取了子节点
    // //如果使用了childnodes 那么换行和空格也算是子节点；
    // var list=ul.childNodes
    // //children 只打印元素
    // console.log(ul.children)

    // //firstchild    lastchild   都会识别文本内容。
    // console.log(ul.lastChild)
 </script>

父节点获取

<script>
    var li=document.querySelector(".myli");
    //nodetype 获取值1是一个元素，获取值是0是一个文本;
    console.log(li.nodeType);//1

    //通过li获取到li的父节点
    console.log(li.parentNode)
    
 </script>  

兄弟节点

 <script>
    var myli=document.querySelector(".myli")
    //打印兄弟节点  next:下一个
    console.log(myli.nextSibling)
    //打印上一个兄弟节点
    console.log(myli.previousSibling)
    //以上两个方法都识别text文本，换行符

    //以下两个方法不识别文本
    console.log(myli.nextElementSibling)
    console.log(myli.previousElementSibling)
 </script>