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

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

innerText 只获取对象里的纯文本
innerHTML获取对象里的子代元素，含标签
示例：



    
        
    
    
        
            hello world

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

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

elem.childNodes 属性，标准的，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本。可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。



    
        
    
    
        
            你好世界
            hello world

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

children 属性，非标准的，它返回指定元素的子元素集合。它只返回HTML节点，甚至不返回文本节点。且在所有浏览器下表现惊人的一致。和childNodes 一样，在Firefox下不支持()取集合元素。因此如果想获取指定元素的第一个HTML节点，可以使用children[0]来替代上面的getFirst函数。需注意children在IE中包含注释节点。



    
        
    
    
        
            你好世界
            hello world

屏幕快照 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();



    
        
    
    
        
            你好世界
            hello world
        
        
            1
            2
            3
            4

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

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



    
        
    
    
        
            你好世界
            hello world

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

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

添加元素：



    
        
    
    
        
            你好世界
            hello world

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

删除元素：



    
        
    
    
        
            你好世界
            hello world

屏幕快照 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



    
        
    
    
        
            你好世界
            hello world

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

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


   
       list1

       
list2

       
list3