DOM学习以及循环删除数组下标减1问题（Q4）

1.dom对象的innerText和innerHTML有什么区别？

  • innerText 只获取对象里的纯文本
  • innerHTML获取对象里的子代元素，含标签
    示例：
<!DOCTYPE html>
<html>
    <head>
        <meta "charset= utf-8">
    </head>
    <body>
        <div class="ct">
            <div id="view"><span>hello world</span></div>
        </div>
        <script>
          var text = document.getElementById("view").innerText;

          var html = document.getElementById("view").innerHTML;
          console.log(text);
          console.log(html);
        </script>
    </body>

</html>
屏幕快照 2017-01-19 下午1.54.36.png

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

  • elem.childNodes 属性，标准的，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本。可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。
<!DOCTYPE html>
<html>
    <head>
        <meta "charset= utf-8">
    </head>
    <body>
        <div id="ct">
            你好世界
            <div id="view"><span >hello world</span></div>
        </div>
        <script>

          var ct = document.getElementById("ct");
          for(var i = 0,e; e = ct.childNodes[i++];){
             if(e.nodeType == 1){
                console.log("元素节点");
                console.log(e);
             }
             if(e.nodeType  == 2){
                console.log("属性节点");
                console.log(e);
             }
             if(e.nodeType  == 3){
                console.log("文本节点");
                console.log(e);
             }
              
          }
   
        </script>
    </body>

</html>
屏幕快照 2017-01-19 下午2.27.46.png
  • children 属性，非标准的，它返回指定元素的子元素集合。它只返回HTML节点，甚至不返回文本节点。且在所有浏览器下表现惊人的一致。和childNodes 一样，在Firefox下不支持()取集合元素。因此如果想获取指定元素的第一个HTML节点，可以使用children[0]来替代上面的getFirst函数。需注意children在IE中包含注释节点。
<!DOCTYPE html>
<html>
    <head>
        <meta "charset= utf-8">
    </head>
    <body>
        <div id="ct">
            你好世界
            <div id="view"><span >hello world</span></div>
        </div>
        <script>

          var ct = document.getElementById("ct");
          for(var i = 0,e; e = ct.children[i++];){
             console.log(e);
              
          }
   
        </script>
    </body>

</html>
屏幕快照 2017-01-19 下午2.30.13.png

3.查询元素有几种常见的方法？ES5的元素选择方法是什么?

  • 常用的获取元素的方法有：
    1、document.getElementById();
    2、getElementsByClassName();
    3、getElementsByTagName();
    4、document.getElementsByName();
  • ES5 新增方法
    1、document.querySelector();
    2、document.querySelectorAll();
<!DOCTYPE html>
<html>
    <head>
        <meta "charset= utf-8">
    </head>
    <body>
        <div id="ct">
            你好世界
            <div id="view"><span >hello world</span></div>
        </div>
        <ul>
            <li class="list">1</li>
            <li class="list">2</li>
            <li class="list">3</li>
            <li class="list">4</li>
        </ul>
        <script>
         var ct = document.querySelector(".list");
         console.log(ct);
         var cts = document.querySelectorAll(".list");
         console.log(cts);
        </script>
    </body>

</html>
屏幕快照 2017-01-19 下午2.47.35.png

4.如何创建一个元素？如何给元素设置属性？如何删除属性?

<!DOCTYPE html>
<html>
    <head>
        <meta "charset= utf-8">
    </head>
    <body>
        <div id="ct">
            你好世界
            <div id="view"><span >hello world</span></div>
        </div>
        <ul id = "creatnode">
            
        </ul>
        <script>
        var ul = document.getElementById("creatnode");
        var li = document.createElement("li");
        li.setAttribute("id","newli");
        li.setAttribute("class","newclass");
        li.removeAttribute('class');
        li.innerHTML = "hello jiregu";
        ul.appendChild(li);
        </script>
    </body>
</html>
屏幕快照 2017-01-19 下午3.05.20.png

5.如何给页面元素添加子元素？如何删除页面元素下的子元素?

  • 添加元素：
<!DOCTYPE html>
<html>
    <head>
        <meta "charset= utf-8">
    </head>
    <body>
        <div id="ct">
            你好世界
            <div id="view"><span >hello world</span></div>
        </div>
        <ul id = "creatnode">
            
        </ul>
        <script>
        var ul = document.querySelector("#creatnode");
        var frag = document.createDocumentFragment();
        for(var i = 0;i<5;i++){
            var li = document.createElement('li');
            li.innerHTML = i;
            frag.appendChild(li);
        }
        ul.appendChild(frag);

        </script>
    </body>

</html>
屏幕快照 2017-01-19 下午3.25.43.png
  • 删除元素：
<!DOCTYPE html>
<html>
    <head>
        <meta "charset= utf-8">
    </head>
    <body>
        <div id="ct">
            你好世界
            <div id="view"><span >hello world</span></div>
        </div>
        <ul id = "creatnode">
            
        </ul>
        <script>
        var ul = document.querySelector("#creatnode");
        var frag = document.createDocumentFragment();
        for(var i = 0;i<5;i++){
            var li = document.createElement('li');
            li.innerHTML = i;
            frag.appendChild(li);
        }
        ul.appendChild(frag);
        
        //删除元素
         var ct = document.getElementById("creatnode");
          for(var i = 0,e; e = ct.children[i++];){

            var _parentElement = e.parentNode;
            if(_parentElement){
                _parentElement.removeChild(e);
                i--;  //remove后数长度会自动减1 这个要注意
            }

          }

        </script>
    </body>

</html>

屏幕快照 2017-01-19 下午4.07.48.png

PS：一开始由于没有加i--，导致元素没有完全删除，后面查询资料才发现，因为通过ct.children或者ct.childNodes获取到的是类数组对象，有部分数组的特性，当对数组进行removeChild操作时，数组的长度会自动减1，这就导致下一次循环偏移。
错误示例:

//删除元素
         var ct = document.getElementById("creatnode");
          for(var i = 0,e; e = ct.childNodes[i++];){

            var _parentElement = e.parentNode;
            if(_parentElement){
                _parentElement.removeChild(e);
                //i--;  //remove后数长度会自动减1 这个要注意
            }

          }

错误输出：

屏幕快照 2017-01-19 下午4.16.21.png

6.element.classList有哪些方法？如何判断一个元素的 class 列表中是包含某个 class？如何添加一个class？如何删除一个class?

element.classList的方法包括：

  • classList.add()用来添加一个class
  • classList.remove()用来删除一个class
  • classList.toggle("visible", i < 10); 添加/删除 visible，取决于测试条件，i小于10
  • classList.contains()用来判断一个元素的class列表中是否包含某个class
<!DOCTYPE html>
<html>
    <head>
        <meta "charset= utf-8">
    </head>
    <body>
        <div id="ct">
            你好世界
            <div id="view"><span >hello world</span></div>
        </div>
        <ul id = "creatnode">
            
        </ul>
        <script>
        var ul = document.querySelector("#creatnode");
        var frag = document.createDocumentFragment();
        for(var i = 0;i<5;i++){
            var li = document.createElement('li');
            li.innerHTML = i;
            frag.appendChild(li);
        }
        ul.appendChild(frag);
        var lists = ct.classList;
        lists.add("hi");
        lists.add("hii");
        lists.remove("hii");
        console.log(lists.contains("hii"));
        </script>
    </body>

</html>
屏幕快照 2017-01-19 下午4.30.50.png

7. 如何选中如下代码所有的li元素？ 如何选中btn元素？

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

<!DOCTYPE html>
<html>
    <head>
        <meta "charset= utf-8">
    </head>
    <body>
        <div class="mod-tabs">
            <ul style= "list-style-type:none">
               <li>list1<li>
               <li>list2<li>
               <li>list3<li>
            </ul>
        <button class="btn">点我</btn>
        </div>
        
        <script>
        
        //查找到按钮
        var btn=document.querySelector('.btn');
        //查找到所有的li
        var Li=document.querySelectorAll('.mod-tabs ul li');
        btn.onclick=function(){
            for(var i=0;i<Li.length;i++){
                Li[i].style.border = "solid 1px";
            }
        }
        </script>
    </body>

</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • DOM操作
    基本介绍 文档对象模型 (DOM) 是HTML和XML文档的编程接口。它给文档（结构树）提供了一个结构化的表述并且...
    草鞋弟阅读 476评论 0赞 0
  • DOM相关操作
    DOM对象的innerText和innerHTML有什么区别？ 共同点：innerHTML和innerText是d...
    LeeoZz阅读 348评论 0赞 0
  • DOM（进阶8作业）
    题目1： dom对象的innerText和innerHTML有什么区别？ innerText返回的是元素内包含的文...
    Feiyu_有猫病阅读 393评论 0赞 0
  • DOM操作
    题目1： dom对象的innerText和innerHTML有什么区别？ innerText是一个可写属性，返回元...
    QQQQQCY阅读 202评论 0赞 0
  • HTML基础笔记及实例1
    实例
    阿r阿r阅读 224评论 0赞 5