JavaScript学习的第十二天

**DOM文档对象模型

-当网页被加载时，浏览器会创建DOM，DOM属于BOM的一部分，对doucument的操作。

-HTML DOM被构造为对象的树 DOM树。

-DOM树包含HTML元素，HTML文本，HTML属性。

-JavaScript通过DOM可以改变HTML元素，文本，属性（css样式），事件做出反应。

###1、DOM操作HTML

-元素

-文本

-属性

###2、DOM操作css

- style

###3、DOM事件

-鼠标事件

-键盘事件

-表单事件

-窗口事件

-event事件对象

***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("标签名")

HTMLCollection 集合 类似与数组 伪数组

var aItem=doucument.getElementsByTagName("p");
console.log(aItem);

1.4、通过name获取元素  主要用于form表单

getElementsByName("name名")

Nodelist  节点列表  伪数组

var aSex=doucument.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());

***2、通过选择器的方式  selector

2.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.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]);
    }

***3、DOM的节点

    <div id="wrap"><a href="http://www.baidu.com">百度一下</a>
        <h2 id="header2">这是一个h2标签</h2>
        <p class="text">这是一个段落标签1</p>
        <p>这是一个段落标签2</p>
        <p>这是一个段落标签3</p>
        <span class="text">这是一个文本标签1</span>
        <span class="text">这是一个文本标签2</span>
        <form>
            <input type="text" name="user"><br>
            <input type="password" name="psw"><br>
            <input type="radio" name="sex">男
            <input type="radio" name="sex">女
        </form>
        <p name="sex">这是有name属性的段落标签</p>
    </div>
    <ul id="list"><!-- 这是一个注释 -->
        <li>菜单1</li>
        <li>菜单2</li>
        <li>菜单3</li>
        <li>菜单4</li>
        <li>菜单5</li>
    </ul>
    <button id="remove">移除</button>

    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);

 4.注释节点   返回8

console.log(oList.firstChild.nodeType);

5. document   返回9

console.log(document.nodeType);

**nodeName  返回节点名称

元素节点  返回大写的标签名 

    console.log(oHeader.nodeName); //H2
    console.log(oText.nodeName); //P

属性节点  返回属性名

console.log(attrNode.nodeName); //id

文本节点   #text

console.log(content.nodeName); //#text

 注释节点   #comment

console.log(oList.firstChild.nodeName);

 **nodeValue  返回节点值

元素节点  null 

    console.log(oHeader.nodeValue); //
    console.log(oText.nodeValue); //
    console.log(oItem.nodeValue); //
    console.log(oSex.nodeValue); //
    console.log(oWrap.nodeValue);

 属性节点  返回属性值

console.log(attrNode.nodeValue); //header2

 文本节点   返回文本内容

console.log(content.nodeValue); //这是一个h2标签

 注释节点   返回注释内容

console.log(oList.firstChild.nodeValue);

***4、DOM元素的属性

    <button id="tab">切换</button>
    <button id="remove">移除</button>
    <button id="add">添加</button>
    <div id="box" class="box" style="border: 10px solid green;"> 
        <a href="http://www.baidu.com">百度一下</a>
        <p id="text" class="text">这是一个段落标签</p>
        <span>这是一个文本标签</span>
        <ul class="list">
            <li class="item">菜单01</li>
            <li>菜单02</li>
            <li>菜单03</li>
        </ul>
        <img src="./DOM树.png" alt="这是DOM树">
    </div>

    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];

 DOM元素的属性  Attribute

 获取元素的属性  getAttribute("属性名") 返回属性值（行内的属性） 查

    console.log(oBox.getAttribute("id"));
    console.log(oBox.getAttribute("class"));
    console.log(oBox.getAttribute("style"));  //只能获取行内样式
    console.log(oImage.getAttribute("alt"));

 设置属性  setAttribute("属性名","属性值") 改

    document.getElementById("tab").onclick=function(){
        // oBox.setAttribute("class","box2");
        oImage.setAttribute("src","./car.jpg")
    }

 移除属性  removeAttribute("属性名")  删

    document.getElementById("remove").onclick=function(){
        oBox.removeAttribute("style");
    }

 创建属性  createAttribute("属性名")  自定义 增

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