DOM

//    1.通过ID（只返回一个节点）
                var p1 = document.getElementById("one");
                 console.log(p1);
//    2.通过类名(多个值，返回的是包含一个或多个的数组)
        var pArr = document.getElementsByClassName("two"); 
        console.log(pArr);
//    3.通过标签名（多个值，返回的是包含一个或多个的数组）
        var pArr1 = document.getElementsByTagName("p");
        console.log(pArr1);
//    4.通过选择器来查找元素节点(返回的是一个数组)
        var p2 = document.querySelectorAll("#one");
        console.log(p2);
        var p3 = document.querySelectorAll("p,a");
        console.log(p3);
//    5.通过选择器查找匹配到body里第一个的元素节点
        var p4 = document.querySelector("a,p");
        console.log(p4);

//        1.document文档节点 
        console.log(document);
//        2.html节点
        console.log(document.documentElement);
//        3.body的节点
        console.log(document.body);
//        4.head的节点
        console.log(document.head);
//        5.声明节点
        console.log(document.doctype);

       <ul id="food">
            <li id="baoZi">包子</li>
            <li id="dumpling">饺子</li>
            <li id="laTiao">辣条</li>
        </ul>        

var fatherNode = document.getElementById("baoZi").parentNode;
这样找出来的就是ul

var child =  document.querySelector("ul");
console.log(child.childNodes);//这样是找出ul所有的li(包子,饺子和辣条)
console.log(child.firstChild);//这样是找出ul第一个子节点li(包子)
console.log(child.lastChild);//这样是找出ul最后一个子节点li(辣条)

var dumpling = document.getElementByID("dumpling");
console.log(dumpling.previousSibling)//饺子节点前的兄弟元素节点(包子)
console.log(dumpling.nextSibling)//饺子节点后的兄弟元素(辣条)

//        1.获取子元素节点元素
        console.log(document.querySelector("ul").children);
//        2.获取第一个子元素节点元素
        console.log(document.querySelector("ul").firstElementChild);
//        3.获取最后一个元素节点元素
        console.log(document.querySelector("ul").lastElementChild);
//        4.获取父元素节点元素
        console.log(document.querySelector("ul").parentElement);
//        5.获取上一个兄弟节点元素
        console.log(document.querySelector("ul").previousElementSibling);
//        6.获取下一个兄弟节点元素
        console.log(document.querySelector("ul").nextElementSibling);

//        a.innerHTML:获取标签内的所有内容,包含文本节点,元素节点等等
//        b.innerText:获取标签中的文本节点,并且会去掉换行,不显示隐藏内容
//        c.textContent:获取标签中的文本节点
        var content = document.getElementById("XXX");
        console.log(content.innerHTML);
        console.log(content.innerText);
        console.log(content.textContent);

<input type="text"  value="" />
var input = document.querySelector("input");
//        1.设置元素属性(属性名,属性值)
        input.setAttribute("placeholder","请输入密码");
//        2.获取元素属性值
        console.log(input.getAttribute("placeholder"));
        console.log(input.placeholder);
//        3.删除属性
        input.removeAttribute("placeholder");

<h1 style="color:gold">标题</h1>
var title = document.querySelector("h1");
//        1.获取内联样式
        console.log(title.style);
//        2.获取所有样式
        console.log(title.currentStyle);//仅支持IE
        console.log(getComputedStyle(title,null));//支持所有浏览器
        console.log(getComputedStyle(title,"::after"));
//        getComputedStyle(元素,伪元素选择器)
        //3.获取某个样式
        console.log(title.style.color);
//        如果内联样式中没有,打印空
        console.log(title.style.backgroundColor);
        console.log(getComputedStyle(title,null).backgroundColor);
        console.log(getComputedStyle(title,null)["backgroundColor"]);
        var c1 = getComputedStyle(title,null).color;
        var c2 = getComputedStyle(title,"::after").color;
        console.log(c1,c2);

//创建节点
        //1.元素节点
        var img = document.createElement("img");
        img.src ="img/1.jpg"; 
        img.style.width = "200px";
        //插入节点
        document.body.appendChild(img);
        
//        注释节点
        document.createComment("注释内容");
//        文本节点
        document.createTextNode("文本内容");
//        插入节点,在所有子元素的最后面
        document.body.appendChild(img);
//        在节点a2之前,插入节点a1;
//        insertBefore(a1,a2);
        var p5 = document.createElement("p");
        p5.innerHTML = "hellow word";
        document.body.insertBefore(p5,img);
        //一定保证img 是body的子节点
        
        //替换节点
//        replaceChild(a1,a2) 用a1替换a2
        var sp = document.createElement("span");
        sp.innerHTML = "你好";
        document.body.replaceChild(sp,p5);
        
//        删除节点
        document.body.removeChild(sp);
        

<table border="1px"></table>
var table = document.querySelector("table");
//        var tr = document.createElement("tr");
//        var td = document.createElement("td");
//        td.innerHTML = "单元格";
//        tr.appendChild(td);
//        table.appendChild(tr);
        table.insertRow(0);//在表格的第几行插入一行
//        insertRow(i)在table的第行插入一行
        table.rows[0].insertCell(0);//在第一个位置添加一个单元格
//        insertCell(i)在tr的第i个位置插入一个单元格
        table.rows[0].cells[0].innerHTML = "单元格";
//        rows[0]获取表格的所有行tr
//        cells[0]获取表格的所有单元格td
//        deleteCell(i)删除第i个单元格
//        table.rows[0].deleteCell(0);
//        table.deleteRow(0);
//        deleteRow(i)删除第i行