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

作者: 陈智涛 | 来源:发表于2017-01-19 16:43 被阅读0次

DOM学习以及循环删除数组下标减1问题（Q4）
选择排序
JS问题记录
splice()方法在for循环中可能会遇到的坑
数组
9，java删除不特定元素的2中方法
shell遍历数组3种方法
原生JS，通过classs删除元素
集合，数组，字典的快速遍历和排序
Vue 使用随笔（持续更新）

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学习以及循环删除数组下标减1问题（Q4）
1.dom对象的innerText和innerHTML有什么区别？ innerText 只获取对象里的纯文本 in...
选择排序
原理 1丶进行元素数量减一次循环2、找出最小元素的数组下标。3、将找出的数组下标与当前循环次数进行交换4、跳过以循...
JS问题记录
一、数组问题 1、数组添加元素 2、数组删除指定下标元素 3、数组排序
splice()方法在for循环中可能会遇到的坑
因为splice 是直接操作并修改数组的，所以当找到数字3时在循环中的 i 下标是2，而当删除数字3后，数组下标 ...
数组
1、数组倒序输出 2、删除数组中指定下标对象 3、根据条件获取数组中指定对象下标 4、遍历数组 4、过滤数组
9，java删除不特定元素的2中方法
1，使用下标的方式进行删除在代码中，删除元素后，需要把下标减一。这是因为在每次删除元素后，ArrayList会将...
shell遍历数组3种方法
0. 首先创建一个数组 1. 标准的for循环 2. for … in 不带数组下标带数组下标 3. While...
原生JS，通过classs删除元素
采坑：如果上面的 For 循环是正向循环会删除不掉所以有该 class 的元素。因为删除一个元素后dom数组长度...
集合，数组，字典的快速遍历和排序
遍历 for 循环遍历原理:通过for循环的循环变量用作数组元素下标来获取不同下标的元素循环次数就是数组元素的个...
Vue 使用随笔（持续更新）
数组删除元素表示先获取这个元素的下标，然后从这个下标开始计算，删除长度为1的元素this.users.splice...

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

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

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

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

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

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

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

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

相关文章

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

选择排序

JS问题记录

splice()方法在for循环中可能会遇到的坑

数组

9，java删除不特定元素的2中方法

shell遍历数组3种方法

原生JS，通过classs删除元素

集合，数组，字典的快速遍历和排序

Vue 使用随笔（持续更新）

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

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

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

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

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

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

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

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

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

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