[JavaScript知识库]JavaScript的DOM

节点层级

Node类型

nodeName、nodeType与nodeValue

    let element = document.getElementById("test");
    let attribute = element.getAttributeNode("id");
    let text = element.firstChild;

    console.log(element.nodeType);      //1
    console.log(attribute.nodeType);    //2
    console.log(text.nodeType);         //3

    console.log(element.nodeValue);     //null
    console.log(attribute.nodeValue);   //test
    console.log(text.nodeValue);        //hello world

    console.log(element.nodeName);      //DIV
    console.log(attribute.nodeName);    //id
    console.log(text.nodeName);         //#text

操作节点

   	<p id="p3">hello world</p>  
    <div id="test">
        <p id="p1"></p>
        <p id="p2"></p>
        <p id="p4"></p>
    </div>   

• appendChild

    let test = document.getElementById("test");
    let p3 = document.getElementById("p3");
    let newNode = test.appendChild(p3);      //在childNodes列表末尾添加节点
    console.log(test.childNodes);

• insertBefore

    let test = document.getElementById("test");
    let p3 = document.getElementById("p3");
    let p1 = document.getElementById("p1");
    let newNode = test.insertBefore(p3,p1);      //insertBefore两个参数：要插入的节点和参照节点
    console.log(test.childNodes);

• replaceChild()

 	let test = document.getElementById("test");
    let p3 = document.getElementById("p3");
    let p1 = document.getElementById("p1");
    let newNode = test.replaceChild(p3,p1);      //replaceChild两个参数：要插入的节点和要替换的节点
    console.log(test.childNodes);

Document类型

获取节点

• getElementById、getElementsByClassName和getElementsByTagName

  	let test1 = document.getElementById("test");
    let test2 = document.getElementsByClassName("test");
    let test3 = document.getElementsByTagName("p");

文档写入

    document.write("<strong>" + (new Date()).toString() + "</strong>");

Element类型

获取属性

• getAttribute

    let element = document.getElementById("test");
    console.log(element.getAttribute("id"));        //test
    console.log(element.getAttribute("class"));     //test

• attributes

    let attributes = element.attributes;            //获取元素属性集合
    console.log(element.attributes.getNamedItem("id").nodeValue);       //test

设置属性

• setAttribute

  	element.setAttribute("style","color:red");      //设置元素样式颜色红色

创建元素

• createElement

    let div = document.createElement("div");
    document.body.appendChild(div);

Text类型

    let div = document.getElementById("test");
    let textNode = div.firstChild;
    console.log(textNode);

创建文本节点

• createTextNode

    let element = document.createElement("div");
    element.className = "test";

    let textNode = document.createTextNode("Hello world!");
    element.appendChild(textNode);

    document.body.appendChild(element);

DOM扩展

• querySelector

    let body = document.querySelector("body");      //body元素

    let myDiv = document.querySelector("#myDiv")    //id为"myDiv"元素

    let selected = document.querySelector(".selected")  //类名为"selected"的第一个元素

• querySelectorAll

跟querySelector一样用法返回NodeList