DOM操作

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

  


  
innertest 
sasaf
  

• innerText是一个可写属性，返回元素内包含的文本内容，在多层次的时候会按照元素由浅到深的顺序拼接其内容
• 而innerHTML属性虽然作用和innerText类似，但是不是返回元素的文本内容，而是返回元素的HTML结构，在写入的时候也会自动构建DOM

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

  


  
热门游戏
我是子节点
 
  

• element.children只输出普通的DOM元素,elem.children 属于HTMLCollection对象；
• element.childNodes会输出所有的子元素，包括文本节点、文字,elem.childNodes 属于NodeList对象；
• 最大的区别就是HTMLCollection是元素集合，而NodeList是节点集合（即可以包含元素，也可以包含文本节点，即元素之间的空白或换行也属于文字节点，注释也属于文本节点）

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

函数	功能
getElementById()	指定ID找元素
getElementsByClassName()	指定class找元素
getElementsByTagName()	指定元素标签找元素
getElementsByName()	指定name属性找元素
querySelector()	ES5支持，参数写法可按照CSS选择器，返回单个元素
querySelectorAll()	ES5支持，参数写法可按照CSS选择器，返回多个元素
elementFromPoint()	指定位置找元素

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

函数	功能
createElement()	创建HTML元素
createTextNode()	创建文本节点
createAttribute()	创建属性
setAttribute()	设置属性
romoveAttribute()	删除属性

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

函数	功能
appendChild()	在元素末尾添加元素
insertBefore()	在某个元素之前插入元素
replaceChild()	替换元素
removeChild()	删除子元素

// 

//  foo bar
// 

// 创建一个空的span元素节点
// 没有id,没有任何属性和内容
var sp1 = document.createElement("span");

// 添加一个id属性,值为'newSpan'
sp1.setAttribute("id", "newSpan");

// 创建一个文本节点
var sp1_content = document.createTextNode("新的span元素的内容.");

// 将文本节点插入到span元素中
sp1.appendChild(sp1_content);

// 获得被替换节点和其父节点的引用.
var sp2 = document.getElementById("childSpan");
var parentDiv = sp2.parentNode;

// 用新的span元素sp1来替换掉sp2
parentDiv.replaceChild(sp1, sp2);

// 结果:
// 

//   新的span元素的内容.
// 

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

1. add( String [, String] )添加指定的类值。如果这些类已经存在于元素的属性中，那么它们将被忽略。
2. remove( String [,String] )删除指定的类值。
3. item ( Number )按集合中的索引返回类值。
4. toggle ( String [, force] )当只有一个参数时：切换 class value; 即如果类存在，则删除它并返回 false，如果不存在，则添加它并返回true。当存在第二个参数时：如果第二个参数的计算结果为true，则添加指定的类值，如果计算结果为false，则删除它
5. contains( String )检查元素的类属性中是否存在指定的类值。

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

   

       
list1
       
list2
       
list3
   
   点我

document.getElementsByTagName('li')//选中所有的li元素
document.querySelectorAll('li')//选中所有的li元素
document.getElementsByClassName('btn')//选择btn元素
document.querySelector('.btn')//选择btn元素