DOM操作

DOM:文档对象模型：文档指的是网页：把网页变成一个Js可以操作的对象，给了JS可以操作页面元素的能力；

 

DOM:操作基础：获得操作的对象：

1.获得标签的 方法：（id选择法）；

document.getElementById

document是DOM操作的关键字；get获得 element 元素 by 通过；

-------假如设置一个div id=“dic”--------

var dic=document.getElementById（“dic”）；

dic.style.backgroundColor="red";

--------------无论之前是什么颜色都会被改成红色；----

2.通过TagName（标签名）获得标签；

var array=document.getElementsByTagName（“p”）；

for（var a=0；a<array.length; a++）{

        array[a].style.backgroundColor=“blue”；

}

3.通过className获得你标签（类名）

----------设置一个div类名为oge

var array1=document.getElementsByClassName("oge");

     array1[0].style.color="orange";

 

 

----------html5标准提供的新方法来获得标-------

1.查询单个标签  

                       querySelector：query查询；selector方法；

（1）通过id来获得：

document.querySelector("#id").style.backgroudColor='orange”;

（2）通过className获得：

document.querySelector(".dic").style.backgroundColor="skyblue";

（3）通过tagName获得

document.querySelector("div'").style.backgroundColor="pink";

----------------------只选中一个标签-------

2.查询多个标签(数组）：

（1）className

                        var array=document.querySelectorAll（“oge”）；

                             for (var a=0;a<=array.length;a++){

                                   array[a].style.backgroundColor=“yellow”；

                       }

（2）tagName

 

                         var array2=document.querySelectorAll（“div”）；

                               for（var a=0; a<array2.length;a++）{

                                     array2[a].style.backgroundColor="skyblue";

                              }

 

-----------------------创建新的标签---------------------------

 

 

    (1)创建一个新的标签

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

    (2)找到这个div

        var div = document.querySelector("div");

    (3)给div增加子标签

        div.appendChild(p);

 

 

------------------------删除标签元素------------ ---------------

       1.找到要删除的标签

        var div = document.querySelector("div");

        2.找到父标签

        var body = document.querySelector("body");

        3.让body删除它上面的子元素div

        body.removeChild(div);

------------------删除的子元素中的子元素都会跟着这个div删除----

     多个相同标签在不同的父标签中：

   ------ 利用遍历数组，然后找到每一个a标签的父标签删除他们 -------

        for(var n = 0;n<array.length;n++){

 

            -------------parentNode是父标签元素，让a标签的父标签删除自己----------

            array[n].parentNode.removeChild(array[n]);

 

        }

 -----------------------替换-------------------

         （1）找到要被替换的标签

         var button = document.querySelector("button");

           (2)创建一个新的标签

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

         div.style.width = "200px";

         div.style.height = "200px";

         div.style.backgroundColor = "orange";

 

         (3)替换他们 replaceChild(替换的元素，被替换的元素)

         button.parentNode.replaceChild(div,button);

 

 

 

----------------插入--------------------

        insertBefore(将要插入的元素,原有元素);

 

        新建一个标签，放到h4标签之前

       （1）创建要增加的新标签

        var newDiv = document.createElement("div");

        newDiv.style.width = "200px";

        newDiv.style.height = "200px";

        newDiv.style.backgroundColor= "skyblue";

 

       (2)要找到h4标签

        var h4 = document.querySelector("h4");

 

        (3)调用h4的父亲将newDIV插入到h4之前

        h4.parentNode.insertBefore(newDiv,h4)；