美高梅网投网站-美高梅手机网投-美高梅官方网站
做最好的网站

您的位置:美高梅网投网址 > Web前端 > 自己加了边框背景象和文字),innerHTML重返调用

自己加了边框背景象和文字),innerHTML重返调用

发布时间:2019-09-29 07:10编辑:Web前端浏览(193)

    DOM成分querySelectorAll大概让你不意的本性表现

    2015/11/07 · HTML5 · DOM, querySelectorAll

    原稿出处: 张鑫旭   

    1: dom对象的innerText和innerHTML有啥分别

    innerText:
    经过innerText读取值时,它会听从由浅入深的顺序将子文档树中的全体子文本节点拼接起来。在写入值时,会删除成分的享有字节点,插入饱含文本节点与相应的文本值。

    innerHTML:
    在读形式下,innerHTML重回调用成分的全部子节点(蕴涵成分,注释,文本节点)的附和html标签。在写情势下,innerHTML会依据钦点的值 成立新的DOM树,然后新建的DOM树会完全替换调用成分在此以前的全体子节点。

    一、时间十万火急,废话少说

    正文所在的页面藏匿了上边那个代码:

    <img id="outside"> <div id="my-id"> <img id="inside"> <div class="lonely"></div> <div class="outer"> <div class="inner"></div> </div> </div>

    1
    2
    3
    4
    5
    6
    7
    8
    <img id="outside">
    <div id="my-id">
        <img id="inside">
        <div class="lonely"></div>
        <div class="outer">
            <div class="inner"></div>
        </div>
    </div>

    就是底下那样的展现(为了有助于旁观,小编加了边框背景观和文字):

    图片 1

    第一说点我们都领会的热热身。

    • querySelectorquerySelectorAll IE8+浏览器匡助。
    • querySelector重临的是单个DOM成分;querySelectorAll回来的是NodeList.
    • 咱俩常常用的多的是document.querySelectorAll, 实际上,也支持dom.querySelectorAll.例如:
    JavaScript
    
    document.querySelector("#my-id").querySelectorAll("img")
    
    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f2fbc48034065158916-1">
    1
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f2fbc48034065158916-1" class="crayon-line">
    document.querySelector(&quot;#my-id&quot;).querySelectorAll(&quot;img&quot;)
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>
    

    采取的正是里面那几个妹子。例如,小编在支配台出口该选择NodeList的长短和id,如下截图:
    图片 2

    好了,上边都以分明的,好,下边开首显得点风趣的。

    世家看下下边2行轻松的查询语句:

    JavaScript

    document.querySelectorAll("#my-id div div");

    1
    document.querySelectorAll("#my-id div div");

    JavaScript

    document.querySelector("#my-id").querySelectorAll("div div");

    1
    document.querySelector("#my-id").querySelectorAll("div div");

    图片 3

    咨询:上边多少个语句重返的NodeList的从头到尾的经过是不是是同样的?

    给大家1分钟的年华动脑筋下。

    //zxx: 假诺1分钟已经离世了

    好了,答案是:不等同的。臆想非常的多人跟本身同样,会以为是同样的。

    实际上:

    JavaScript

    document.querySelectorAll("#my-id div div").length === 1;

    1
    document.querySelectorAll("#my-id div div").length === 1;

    JavaScript

    document.querySelector("#my-id").querySelectorAll("div div").length === 3;

    1
    document.querySelector("#my-id").querySelectorAll("div div").length === 3;

    世家如若有疑问,能够在调控台测量试验下,下图正是自个儿自身测验的结果:

    图片 4

    怎会这么?

    首先个切合大家的明白,不表达。这下二个说话,为啥再次来到的NodeList长度是3呢?

    首先,遍历该NodeList会开采,查询的八个dom成分为:div.lonelydiv.outerdiv.inner.

    奇异,诡异,怎会是3个吗?

    jQuery中有个find()艺术,大家很只怕蒙受这几个点子影响,导致现身了有的体会的主题素材:

    JavaScript

    $("#my-id").find("div div").length === 1;

    1
    $("#my-id").find("div div").length === 1;

    假诺利用find方法,则是1个拾壹分;由于协会和效力类似,我们很自然疑问原生的querySelectorAll也是其一套路。真是太错特错!!

    要解释,为何NodeList长度是3,只要一句话就足以了,作者特地加粗标红:

    CSS选取器是单独于一切页面包车型地铁!

    如何意思吧?比方说你在页面很深的三个DOM里面写上:

    <style> div div { } </style>

    1
    2
    3
    <style>
    div div { }
    </style>

     

    整整网页,富含父级,只借使满足div div老爹和儿子关系的成分,全体会被选中,对吗,那么些大家应该都精晓的。

    这里的querySelectorAll中间的采取器也同样是这也全局天性。document.querySelector("#my-id").querySelectorAll("div div")翻译成白话文正是:查询#my-id的子成分,同不常间满意方方面面页面下div div选取器条件的DOM成分们。

    大家页面往上滚动看看原始的HTML结构,会发觉,在大局视线下,div.lonelydiv.outerdiv.inner成套都满意div div本条选拔器条件,于是,最终回到的长短为3.

    2: elem.children和elem.childNodes的区别

    elem.children:它回到钦点成分的子成分集结,只回去html节点,不回去文本节点。
    elem.childNodes:它是正统属性,再次来到钦点成分的子成分集合,富含HTML节点,全部属性,文本节点。

    二、:scope与区域选取范围

    其实,要想querySelectorAll背后采用器不受全局影响,也许有主意的,就是运用如今还处于试验阶段的:scope伪类,其职能便是让CSS是在某一限量内使用。此伪类在CSS中行使是金锭,不过也足以在querySelectorAll语句中采用:

    JavaScript

    document.querySelector("#my-id").querySelectorAll(":scope div div");

    1
    document.querySelector("#my-id").querySelectorAll(":scope div div");

    宽容性如下:

    图片 5

    自己写此文时候是15年5月中,近期可能就FireFox浏览器协理,作者推测,以往,会补助更扩充的。为啥吗?

    因为Web Components须要它,能够达成真正独立包装,不会受外部影响的HTML组件。

    关于:scope此时此刻帮衬尚浅,机缘未到,小编就没要求乱打开了,点到停止。

    3:查询成分有三种分布的格局?ES5的因素选拔方式是何等?

    询问成分
    1.document.getElementsByTagName主意重回全体钦定HTML标签的成分,重临结果中,各种成员的次第就是它们在文书档案中出现的顺序。
    2.document.getElementsByClassName办法重临三个近乎数组的靶子,包罗了独具class名字相符内定条件的因素。
    3.document.getElementsByName格局用于采取具备name属性的HTML成分,如<form>、<img>等。
    4.getElementById方法再次来到匹配内定id属性的因素商点。

    //返回当前文档的所有p元素节点
    var els = document.getElementsByTagName('td');
    //返回所有class=classname的所有元素。
    var els = document.getElementsByClassName('classname');
    //返回name属性为name的所有元素。
    var els = document.getElementsByName('name');
    //返回id为xxx元素。
    var el = document.getElementById('xxx');
    

    ES5的成分选拔格局:
    1.document.querySelector主意接受一个CSS选用器作为参数,重临相称该选取器的因孟秋点。假设有多少个节点满意相配原则,则赶回第2个极其的节点。
    2.document.querySelectorAll办法再次来到全数相称给定选择器的节点。

    // 返回当前文档中第一个类名为 "myclass" 的元素
    var el = document.querySelector(".myclass");
    
    // 返回一个文档中所有的class为"xx"或者 "xxx"的div元素
    var els = document.querySelectorAll(".xx, .xxx");
    

    三、结语仍然要的

    参照他事他说加以考察作品:querySelectorAll from an element probably doesn’t do what you think it does

    谢谢阅读,迎接纠错,接待交换!

    1 赞 1 收藏 评论

    图片 6

    4:如何创造一个成分?怎么着给成分设置属性?怎么着删除属性

    创设新因素
    1.document.createElement(),该格局创造新的成分,这一个情势只接受叁个参数,便是要开创的新的要素标具名。如:

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

    由于新因素未被加到文档树中,由此不会潜移暗化浏览器的显得,要用,appendChild(),只怕insertBefore()把新因素增加到文书档案中。
    2.施用document.createTextNode()来创立新的公文节点,这几个点子接受二个参数,即要插入节点中的文本。
    3.仍是能够使用appendChild()方法向节点加多最终贰个子节点只怕用insertBefore()在钦点的已有的子节点在此以前插入新节点。(也不知底那四个算不算新创设三个要素)
    何以给成分设置属性
    使用setAttribute() 方法增添钦命的性质,并为其赋内定的值。
    一经那一个钦命的属性已存在,则仅设置/退换值。

        <input type="text" >   
    <script>
         document.getElementsByTagName("input") [0].setAttribute("class","test");
    </script>
    

    图片 7

    Paste_Image.png

    删除属性
    使用removeAttribute() 方法删除钦命的属性

      <input type="text" >   
    <script>
      document.getElementsByTagName("input")[0].removeAttribute("class","test");
    </script>
    

    图片 8

    Paste_Image.png

    5:如何给页面元素加多子成分?怎样删除页面成分下的子成分?

    使用appendChild()方法向节点加多最终三个子成分或然用insertBefore()在钦定的已有的子节点从前插入新节点,这么些办法常常与创设新节点的createElement()和createTextNode()方法协作使用。

    1.
    <body>
    <ul id="demo">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    
    <script>
        var newLi=document.createElement("li");
        document.getElementById("demo").appendChild(newLi);
    </script>
    </body>
    
    2.
    <body>
    <ul id="demo">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    
    <script>
        var newLi=document.createElement("li");
        var li=document.getElementsByTagName("li");
        document.getElementById("demo").insertBefore(newLi,li[1]);//插到第二个li的前面
    </script>
    </body>
    

    图片 9

    Paste_Image.png

    图片 10

    Paste_Image.png

    剔除子元素
    1.使用element.remove()方法,

    <div id="rele">删除元素</div>
    <script>
       var rele=document.getElementById("rele");
        rele.remove();
    </script>
    

    2.removechild 函数能够去除父成分的钦命子元素,假使此函数删除子节点成功,则赶回被去除的节点,不然重回null。

    <body>
    <ul id="demo">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    
    <script>
       var ul=document.getElementById("demo");
        var lis=ul.getElementsByTagName("li");
        ul.removeChild(lis[0]);
    </script>
    </body>
    

    图片 11

    Paste_Image.png

    回来第叁个li

    图片 12

    Paste_Image.png

    6: element.classList有如何方法?怎么样推断叁个元素的 class 列表中是带有某些 class?如何加多一个class?怎样删除三个class?

    classList 属性再次回到成分的类名,该属性用于在要素中加上,移除及切换 CSS 类,有以下这几个办法:
    1.add(class1, class2, ...):该方式在要素中增多三个或多少个类名。假使钦命的类名已存在,则不会加多。

     <style>
            .myDiv{
                width: 200px;
                height: 200px;
                background: #2b2b2b;
            }
            .myDiv2{
                background: #ff0000;
            }
        </style>
    </head>
    <body>
      <div>测试</div>
    <script>
       document.getElementsByTagName("div")[0].classList.add("myDiv","myDiv2");
    </script>
    </body>
    

    未增加以前:

    图片 13

    Paste_Image.png

    加上事后:

    图片 14

    Paste_Image.png

    2.contains(class):该格局再次回到布尔值,剖断钦命的类名是或不是存在。
    true - 成分包已经包括了该类名
    false - 成分中荒诞不经该类名

      <div class="myDiv">测试</div>
    <script>
      console.log( document.getElementsByTagName("div")[0].classList.contains("myDiv"));//true
    </script>```
    3.item(index):返回类名在元素中的索引值。索引值从 0 开始。如果索引值在区间范围外则返回 null。
    

    <body>
    <div class="myDiv myDiv2">测试</div>
    <script>
    console.log( document.getElementsByTagName("div")[0].classList.item(0));//myDiv
    </script>
    </body>

    4.remove(class1, class2, ...):移除元素中一个或多个类名
    
    <style>
        .myDiv{
            width: 200px;
            height: 200px;
            background: #00ff00;
        }
        .myDiv2{
            background: #ff0000;
        }
    </style>
    

    </head>
    <body>
    <div class="myDiv myDiv2">测试</div>
    <script>
    document.getElementsByTagName("div")[0].classList.remove("myDiv2");
    </script>

    未移除之前:
    
    ![Paste_Image.png](http://upload-images.jianshu.io/upload_images/5572128-fa338b4aa641813a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    移除之后:
    
    ![Paste_Image.png](http://upload-images.jianshu.io/upload_images/5572128-3b446202f5922a8b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
    5.toggle(class, true|false): 在元素中切换类名。
    

    <style>
    .myDiv{
    width: 200px;
    height: 200px;
    background: #00ff00;
    }
    .myDiv2{
    background: #ff0000;
    }
    </style>
    </head>
    <body>
    <div class="myDiv">测试</div>
    <button onclick="toggle()">点小编切换</button>
    <script>
    function toggle(){
    document.getElementsByTagName("div")[0].classList.toggle("myDiv2");
    }

    </script>

    使用classList.contains()判断是否包含某个class。
    使用classList.add()添加class。
    使用classList.remove()删除元素的一个class。
    
    ## 7: 如何选中如下代码所有的li元素? 如何选中btn元素?
    

    <div class="mod-tabs">
    <ul>
    <li>list1</li>
    <li>list2</li>
    <li>list3</li>
    </ul>
    <button class="btn">点我</button>
    </div>

    选中li:
    

    var lis=document.getElementsByTagName("li");

    var lis=document.querySelectorAll("li");

    选中btn:
    
    1. var btn=document.getElementsByClassName("btn");

    var btn=document.querySelector('.btn')

    本文由美高梅网投网址发布于Web前端,转载请注明出处:自己加了边框背景象和文字),innerHTML重返调用

    关键词:

上一篇:没有了

下一篇:没有了