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) 是HTML和XML文档的编程接口。它给文档(结构树)提供了一个结构化的表述并且...
    草鞋弟阅读 80评论 0 0
  • DOM对象的innerText和innerHTML有什么区别? 共同点:innerHTML和innerText是d...
    LeeoZz阅读 30评论 0 0
  • 题目1: dom对象的innerText和innerHTML有什么区别? innerText返回的是元素内包含的文...
    Feiyu_有猫病阅读 95评论 0 0
  • 题目1: dom对象的innerText和innerHTML有什么区别? innerText是一个可写属性,返回元...
    QQQQQCY阅读 21评论 0 0
  • 实例
    阿r阿r阅读 107评论 0 5