JavaScript学习第十二天

DOM(文档对象模型)

 - 当网页被加载时，浏览器会创建DOM，DOM属于BOM的一部分，对document的操作。
 - HTML DOM被构造为对象的树。 DOM树。
 - DOM树包含 HTML元素，HTML文本，HTML属性。
 - JavaScript通过DOM可以改变HTML元素，HTML文本，HTML属性(CSS样式)，事件做出反应

DOM是什么？

 - 文档对象模型，是HTML文档的编程接口
 - 当网页被加载时，浏览器会创建页面的文档对象模型   
### DOM做什么？
 - JavaScript可以改变页面中所有HTML元素（内容）
 - JavaScript可以改变页面中所有的HTML属性 
 - JavaScript可以改变页面中所有的CSS样式
 - JavaScript对页面中的所有事件做出反应 

1.DOM操作HTML

 - 元素
   获取元素
    - getElement:动态获取
    - querySelector:静态获取
 - 节点
  nodeType
   元素节点
   文本节点
   属性节点
   注释节点
   document
  nodeName
  nodeValue     
 - 文本
 - 属性

通过DOM获取元素

    console.log(document);

     1.通过标签名 类名 id name 

     1.1通过id获取元素  唯一  getElementById("id名")
    var oHeader = document.getElementById("header2");
    console.log(oHeader);

     1.2通过class获取元素  一个或多个  getElementsByClassName("class名")
    // HTMLCollection 集合  类似于数组 伪数组  
    var aText = document.getElementsByClassName("text");
    console.log(aText);
    console.log(aText[0]);
    console.log(aText[1]);

     1.3通过标签名获取元素  一个或多个  getElementsByTagName("class名")
    // HTMLCollection 集合  类似于数组 伪数组  
    var aItem = document.getElementsByTagName("p");
    console.log(aItem);

     1.4通过 name 获取元素  主要用于form表单 getElementsByName("name名") 
    // NodeList  节点列表  伪数组
    var aSex = document.getElementsByName("sex");
    console.log(aSex);
    console.log(aSex[0]);
    console.log(aSex[1]);

     1.5 getElementsByTagNameNS()  获取多种元素
    // console.log(document.getElementsByTagNameNS("p","span"));

     1.6 ①获取根节点  getRootNode()
    console.log(document.getRootNode());

    ②通过元素也可以获取元素
    var oWrap=document.getElementById("wrap");
    console.log(oWrap);

    ③不能元素去获取通过id获取的元素
    console.log(oWrap.getElementsByClassName("text"));

通过选择器的方式 selector

     1.querySelector()  获取到一个元素
     id选择器 class选择器 标签选择器 ,选择器 后代选择器 亲代选择器

    var oHeader=document.querySelector("#header2");
    console.log(oHeader);
    var oText=document.querySelector(".text");
    console.log(oText);//第一个
    var oSpan=document.querySelector("span");
    console.log(oSpan);
    var oEls=document.querySelector("#header2,.text,span");
    console.log(oEls);


    2. querySelectorAll()  获取多个
    var aEls=document.querySelectorAll("#header2,.text,span");
    console.log(aEls);
    var aText=document.querySelectorAll(".text");
    console.log(aText);

    var aItem=document.getElementsByTagName("li");//动态
    var aItem2=document.querySelectorAll("li");//静态
    console.log(aItem);
    console.log(aItem2);

    var oList=document.getElementById("list");
    var oRemove=document.getElementById("remove");
    oRemove.onclick=function(){
        oList.removeChild(aItem2[0]);
    }

DOM的节点

    var oHeader = document.getElementById("header2");
    var oText = document.getElementsByClassName("text")[0];
    var oItem = document.getElementsByTagName("p")[0];
    var oSex = document.getElementsByName("sex")[0];
    var oWrap = document.getElementById("wrap");
    var oList = document.getElementById("list");
    
     一.nodeType  返回节点类型   对象.nodeType 

     1.元素节点    返回1
    console.log(oHeader.nodeType); //1
    console.log(oText.nodeType); //1
    console.log(oItem.nodeType); //1
    console.log(oSex.nodeType); //1

     2.属性节点   返回2
    var attrNode = oHeader.getAttributeNode("id");
    console.log(attrNode.nodeType);

     3.文本节点   返回3
    var content = oHeader.firstChild; //获取第一个子节点
    console.log(content.nodeType);

     console.log(oWrap.firstChild)

     4.注释节点   返回8
    console.log(oList.firstChild.nodeType);
     5. document   返回9
    console.log(document.nodeType);


    二. nodeName  返回节点名称 1.元素节点 返回大写的标签名
    console.log(oHeader.nodeName); //H2
    console.log(oText.nodeName); //P

    2. 属性节点  返回属性名
    console.log(attrNode.nodeName); //id

    3. 文本节点   #text
    console.log(content.nodeName); //#text

    4. 注释节点   #comment
    console.log(oList.firstChild.nodeName);



    三. nodeValue  返回节点值
    1. 元素节点  null
    console.log(oHeader.nodeValue); //
    console.log(oText.nodeValue); //
    console.log(oItem.nodeValue); //
    console.log(oSex.nodeValue); //
    console.log(oWrap.nodeValue);
    2. 属性节点  返回属性值
    console.log(attrNode.nodeValue); //header2
    3. 文本节点   返回文本内容
    console.log(content.nodeValue); //这是一个h2标签
    4. 注释节点   返回注释内容
    console.log(oList.firstChild.nodeValue);

DOM元素的属性 Attribute

    // 获取元素
    var oBox = document.getElementById("box");
    var aList = document.getElementsByClassName("list")[0];
    var oItem = aList.getElementsByClassName("item")[0];
    var oText = document.getElementById("text");
    var oSpan = document.getElementsByTagName("span")[0];
    var oAnchor = document.getElementsByTagName("a")[0];
    var oImage = document.getElementsByTagName("img")[0];


    1. 获取元素的属性  getAttribute("属性名") 返回属性值（行内的属性） 查 
    console.log(oBox.getAttribute("id"));
    console.log(oBox.getAttribute("class"));
    console.log(oBox.getAttribute("style"));
    console.log(oImage.getAttribute("alt"));

    2. 设置属性  setAttribute("属性名","属性值") 改
    document.getElementById("tab").onclick=function(){
        // oBox.setAttribute("class","box2");
        oImage.setAttribute("src","./car.jpg")
    }

    3. 移除属性  removeAttribute("属性名")  删
    document.getElementById("remove").onclick=function(){
        oBox.removeAttribute("style");
    }

    4. 创建属性  createAttribute("属性名")  自定义 增
    var attr=document.createAttribute("abc");
    attr.value="自定义的属性";
    document.getElementById("add").onclick=function(){
        oBox.setAttributeNode(attr)
    }