day 11 DOM

一.DOM模型（document object model）文档对象模型

   DOM (所有document下面的html元素)

  1、对象

       属性、方法、事件

  2、节点

        定义：把所有的标签，文本内容，标签属性，都叫节点（一切都是节点）

                  html : 是dom模型的根节点

       1）节点的类型：

                元素节点：标签

                属性节点：标签属性

                文本节点：文本内容

        2）属性：

                  节点.nodeName  获取节点名称 

                  节点.tagName      标签名称  

                   节点.nodeType    节点类型

                    节点.nodeValue    获取文本节点内容

   3.节点关系

       父子关系：

            parentNode:老子

            childNodes:所有的儿子节点（节点集合）,包含所有的文本节点。

            children:所有不包含文本节点的儿子元素。

            firstChild:第一个儿子节点（包含文本节点）；

            firstElementChild:第一个儿子元素节点（不包含文本节点）；

            lastChild:最后一个儿子节点（包含文本节点）；

            lastElementChild:最后一个儿子元素节点（不包含文本节点）；

       兄弟关系：

            nextSibling下一个兄弟节点（包含文本节点）

            nextElementSibling下一个兄弟元素节点（不包含文本节点）

            previousSibling上一个兄弟节点（包含文本节点）

            previousElementSibling上一个兄弟元素节点（不包含文本节点）

        所有的属性节点：attributes;一个节点集合，获取的是所有元素的属性

        只要找到一个节点 就可以通过这个节点查找到任何一个想要的节点

节点关系的操作案例：

body>

        <div id="box" class="content" style="color: red;border: 1px solid black;" aa="22">

            <ul id="oUL">

                这是一段文本

                <li>1</li>

                <li id="oli">2</li>

                <li>3</li>

            </ul>

        </div>

    </body>

</html>

<script type="text/javascript">

    var oUL = document.getElementById("oUL");

    var box = document.getElementById("box");

    //alert(oUL.childNodes.length);//7    包括了文本节点

    //alert(oUL.parentNode.innerHTML);

    //alert(oUL.childNodes[0].nodeValue);//这是一段文本

    //alert(oUL.children[0].innerHTML);//1

    //alert(oUL.firstElementChild);

    

    var oli = document.getElementById("oli");

    //alert(oli.nextElementSibling);

    

    //console.log(box.attributes[1].nodeValue)//content

    //alert(box.style.nodeValue)//undefined

</script>

4.节点动态操作（增，删，查）

   1)增：创建节点

             a.创建元素节点：

                document.createElement(元素名称);

             b.创建文本节点：

                document.createTextNode("文本内容");

            添加：

                父节点.appendChild(新的节点);把“新的节点”    添加到父节点的最后。

                父节点.insertBefore(新的节点,父节点的某个子节点);把新的节点添加到某个子节点的前边。

     2） 替换

            父节点.replaceChild(新的节点，父节点的某个子节点);把新的节点替换掉父节点的某个子节点

            例子：

             var li = document.createElement("li");

             li.innerHTML = "这是一个新的li节点，用来用替换的";

             table.replaceChild(li,table.firstElementChild);

     3）克隆

            节点.cloneNode();//复制了一个新的节点。

            节点.cloneNode(true);    //连同这个节点的所有内容都被复制了。

             例子：var li = table.firstElementChild.cloneNode(true);

                       console.log(li);

                       table.appendChild(li);

      4）删除：

            父节点.removeChild(父节点的某个子节点);

            节点.remove();

             例子：table.removeChild(table.firstElementChild);

                       table.firstElementChild.remove();

自定义将新节点插入到后面的方法：

function insertAfter(newEle,targetEle){

     //得到父节点

        var parent = targetEle.parentNode;

        //如果目标节点是最后一个子节点，直接把新节点添加到父节点的最后就可以了

        if(parent.lastElementChild === targetEle){

            parent.appendChild(newEle);

        }else{

            //如果目标节点不是最后一个子节点，把新节点添加到这个子节点的下一个兄弟节点的前边

            parent.insertBefore(newEle,targetEle.nextElementSibling);

        }

    };

5.动态创建星星：

    一旦调整位置，一定离不开position

    window.innerWidth:获取浏览器可视区的宽度

    window.innerHeight:获取浏览器可视区的宽度

    document.documentElement.clientWidth;//兼容性好

    document.documentElement.clientHeight;//兼容性好

6.文档碎片

    createDocumentFragment();

   作用：创建一块缓存区（文档碎片） 提高程序执行效率

 

var cache = document.createDocumentFragment();

    for( var i = 0 ; i < 1000; i ++ ){

       var opt = document.createElement("input");

       opt.type="button";

       opt.value = "删除";

       cache.appendChild(opt);

    }

    document.body.appendChild(cache);   

 

7.元素节点的操作

  1）获取当前节点的所有属性节点

        obj.attributes;//可获取：不可设置

        获取属性节点的值：

        obj.attributes[index].nodeValue

  2）获取和设置单个属性节点：

       两种方式：

              属性操作方式：

                   obj.属性名 //获取

                   obj.属性名 = "属性值" //设置

                   注意：obj.class;//非ie为undefined,ie报错，正确用法是obj.className

               方法操作：

                   obj.getAttribute("属性名");//获取

                   obj.setAttribute("属性名","属性值");//设置（可修改）

                   说明：setAttribute在ie7及更早的ie版本该方法设置class和style是无效的

  3）删除属性节点：

        removeAttribute("属性名")

        说明：ie6及更早的ie版本该方法不支持

8.自定义属性操作（一般不怎么用）

  1） 设置自定义属性

                 元素.属性名 = "属性值"; （在控制台elements中没有显示设置的属性）

                元素.setAttribute("属性名","属性值");(设置行内属性)（在控制台elements中显示设置的属性）

    2）获取自定义属性

                元素.属性名：(注：行内自定义的属性不可获取,setAttribute设置的属性也不能获取；通过元素.元素名设置的属性可以获取)；

                元素.getAttribute("属性名"):（注：获取行内属性，不可获取元素.元素名设置的属性；通过setAttribute设置的属性可以获取）。