zoukankan      html  css  js  c++  java
  • 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);
  • 相关阅读:
    IBM Tivoli Netview在企业网络管理中的实践(附视频)
    应用Linux远程桌面(附视频)
    轻松八步搞定Cacti配置安装(原创视频)
    从程序详解拒绝服务攻击
    基于Linux平台的Openvas配置使用视频教学
    Sco Unixware 7.1.3企业版服务器安装视频教程
    P1305-新二叉树
    P1087-FBI树
    P1115-最大子段和
    P1996-约瑟夫问题
  • 原文地址:https://www.cnblogs.com/cntt/p/6434893.html
Copyright © 2011-2022 走看看