DOM节点方式：利用节点层级关系获取元素

利用父子兄节点关系获取元素。

节点：网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM中，节点使用node来表示。

一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。

元素节点 nodeType --> 1 

属性节点 nodeType --> 2 

文本节点 nodeType --> 3（文本节点包含文字、空格、换行等）

通过属性去获取元素：

<ul id="oUl">
    <li><li>
    <li><li>
    <li><li>
    </ul>
var oUl=document.getElementById("oUl");
var li3=oUl.childen[2];

console.dir();//显示所有属性

获取父子级标签:

节点操作之节点创建：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>节点操作之节点创建</title>
        <style type="text/css">
            .oUl {
                border: 1px solid red;
                width: 100%;
                height: 100px;
                ;
            }
        </style>
        <script type="text/javascript">
            var oBtn = document.getElementById("oBtn");
            oBtn.onclick = function() {
                //创建元素节点 
                var newli = document.createElement("li");
                console.log(newli);

                //创建一个文本节点
                var newli = document.createTextNode("文本内容");
                newli.appendChild(Text);
                //创建属性
                var myId = document.createAttribute("id");
                //在li标签上设置属性
                newlo.setAttributeNode(myId);

                //指定标签中添加标签 appendChild(向指定的末尾追加)
                var oUl = document.querySelector(".oUl")
                oUl.appendChild(newli);

                //insertBefore  在指定的节点之前添加一个新的节点
                // node.insertBefore(newNode,指定的节点)
                var oBtn3 = document.getElementById('oBtn3');
                oBtn3.onclick = function() {
                    //需求：在ul之前追加一个p段落标签
                    var oUl = document.querySelector('.oUl');
                    var lis = oUl.firstElementChild;

                    //创建一个p段落标签
                    var newP = document.createElement('p');
                    var textP = document.createTextNode('我是P段落');
                    newP.appendChild(textP);
                    
                    //inserBefore();新增
                    co  nsole.log(oUl.insertBefore(newP, lis));
                };
            }


            var oBtn3 = document.getElementById('oBtn3');
            oBtn3.onclick = function() {
                //需求：在ul之前追加一个p段落标签
                var oUl = document.querySelector('.oUl');
                var lis = oUl.firstElementChild;

                //创建一个p段落标签
                var newP = document.createElement('p');
                var textP = document.createTextNode('我是P段落');
                newP.appendChild(textP);

                //insertBefore  在指定的节点之前添加一个新的节点
                // node.insertBefore(newNode,指定的节点)
                console.log(oUl.insertBefore(newP, lis));
            };
        </script>
    </head>
    <body>
        <ul class="oUl">

        </ul>
        <button type="button" id="oBtn">点击按钮创建li添加到ul列表中</button>
        <button id="oBtn3">insertBefore</button>
    </body>
</html>