DOM

课程任务

题目1： dom对象的innerText和innerHTML有什么区别？

答：innerText获取的是dom对象内的文本内容，inner HTML获取的是dom对象内的元素结构。

题目2： elem.children和elem.childNodes的区别？

答：elem.children只返回HTML元素节点，不包括文本，elem.childNodes返回元素节点和文本以及所有属性节点。一般用children。

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

答：document.getElementById('id'),document.getElementsByClassName('className'),document.getElementsByTagName('TagName'),document.getElementsByName('Name').ES5 的元素选择方法是document.querySelector('#id .className' 'TagName'等CSS选择器),document.querySelectorAll('#id .className' 'TagName'等CSS选择器)，elementFromPoint方法返回位于页面指定位置的元素。var element = document.elementFromPoint(x, y);

题目4：如何创建一个元素？如何给元素设置属性？如何删除属性

答：创建一个元素：document.createElement('div') 元素设置属性，elem.setAttribute('myAttribute','myAttributeValue')或者var myAttribute =document.createAttribute('myAttribute'); myAttribute.value ='myAttributeValue';var node =document.getElementById('id');node.setAttribute(myAttribute);删除属性：elem.removeAttribute('myAttribute')。上面方法也可以直接操作元素属性来实现，elem.Attribute = ''

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

答：

var newElem =document.createElement('div')
 var text =document.createTextNode('新创建的段落')
 newElem.appendChild(text)
 var pElem =document.querySelector('#a')
 pElem.appendChild(newElem)
 //五秒后删除这个p下面的子元素
 setTimeout('yourFunction()',5000);
 function yourFunction() {
 pElem.removeChild(newElem)
 }

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

答：add('anotherclass'),添加指定的类值。remove( String [,String] )
删除指定的类值。item(Number)，按集合中的索引返回类值。toggle ( String [, force] )
当只有一个参数时：切换 class value; 即如果类存在，则删除它并返回false，如果不存在，则添加它并返回true。当存在第二个参数时：如果第二个参数的计算结果为true，则添加指定的类值，如果计算结果为false，则删除它。contains( String )
检查元素的类属性中是否存在指定的类值。

 ele[0].classList.add("anotherclass");
 undefined
 ele[0].classList.remove("anotherclass");
 undefined
 ele[0].classList.item
 function item() { [native code] }
 ele[0].classList.item(0)
 "mod-tabs"
 ele[0].classList.item(1)
 null
 ele[0].classList.add("anotherclass");
 undefined
 ele[0].classList.item(1)
 "anotherclass"
 ele[0].classList.toggle('anotherclass')
 false
 ele[0].classList.toggle('anotherclass')
 true
 ele[0].classList.toggle('anotherclass')
 false
 ele[0].classList.item(1)
 null
 ele[0].classList.toggle('anotherclass')
 true
 ele[0].classList.item(1)
 "anotherclass"
 

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

    

       

           
list1

           
list2

           
list3

       
       点我


    //选中所有的li元素
    var liAll =document.querySelectorAll('.mod-tabs li')
    //选中btn元素
    var btn =document.querySelector('.btn')