JS DOM（dom很多长单词）

DOM

• DOM：Document Object Model 文档对象模型

• 浏览器渲染：

  • DOM树：浏览器会html标签解析成树型结构，由节点组成

  • CSS树

查找节点

• DOM获取节点

  • 通过id获取 ： document.getElementById("id名")

  • 通过类名获取 ： document/父元素.getElementsByClassName("类名")

  • 通过标签名获取 ： document/父元素.getElementsByTagName("标签名")

  • 通过选择器获取

    /*4.选择器获取: ie8以下不兼容
        document.querySelector("选择器") : 获取选择器的标签中第一个元素，返回节点列表，
        document.querySelectorAll("选择器")：获取选择器选中的所有元素，返回节点列表，
        和集合一样的使用方式
    */
    //document.querySelector("选择器") : 获取选择器的标签中第一个元素
    var oLis1 = document.querySelectorAll(".list li");
    console.log(oLis1); //<li>梅菜扣肉</li>
    ​
    //document.querySelectorAll("选择器")：获取选择器选中的所有元素
    var oLis2 = document.querySelectorAll(".list li");
    console.log(oLis2); //NodeList(6) [li, li, li, li.yang, li, li]

  • 各种获取方式区别

    var oId = document.getElementById("box");
    var oLis1 = document.getElementsByTagName("li");
    var oLis2 = document.querySelectorAll(".list li");
    ​
    oUl.innerHTML += "<li id='box'>西红柿炒番茄</li>";
    console.log(oId); //id是静态获取，获取的时候有就是有，没有就是没有
    console.log(oLis1);//tag.class是动态获取，后面添加的也能获取到
    console.log(oLis2); //是静态获取，获取的时候有就是有，没有就是没有