DOM操作

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

• innerText属性主要用于获取元素(nodeElement)的内部文本元素

• innerHTML作用主要用于获取当前元素节点(nodeElement)的内部元素节点

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

• elem.children返回的是元素子节点

• elem.childNodes返回所有的子节点,包括HTML元素,属性,文本.

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

常见方法

getElementById() 通过ID查询元素
getElementsByClassName() 通过class查询元素
getElementsByTagName() 通过标签查询元素
getElementsByName() 通过选择有name属性的元素查询元素

es5

querySelector() 通过匹配指定的CSS选择器的元素节点查询元素
querySelectorAll() 通过匹配指定的CSS选择器的所有节点查询元素

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

创建元素
createElement()
设置元素属性
setAttribute()
删除属性
romoveAttribute()

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

添加子元素到元素末尾
appendChild()
删除页面元素下的子元素
removeChild()

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

element.classList的方法：

• element.classList.add():添加指定的类值。如果这些类已经存在于元素属性中，那么它们将被忽略(添加一个class)
• element.calssList.remove():删除指定的类(删除一个class)
• element.classList.item():按集合中的索引返回类值
• element.classList.toggle():
  • 当只有一个参数时：切换class value;即如果类存在，则删除它并返回false,如果不存在，则添加它并返回true
  • 当存在第二个参数时：如果第二个参数的计算结果为true，则添加指定的类值，如果计算结果为false，则删除它
• element.classList.contains():检查元素的类属性中是否存在指定的类值（判断一个元素的class列表中是否含有某个class）

// div是具有class =“foo bar”的
元素的对象引用
 div.classList.remove("foo");
 div.classList.add("anotherclass");

// 如果visible被设置则删除它，否则添加它
 div.classList.toggle("visible");

// 添加/删除 visible，取决于测试条件，i小于10
div.classList.toggle("visible", i < 10);

alert(div.classList.contains("foo"));

//添加或删除多个类
div.classList.add("foo","bar");
div.classList.remove("foo", "bar");

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

    

       
list1
       
list2
       
list3
    
    点我
 

选中所有的li元素：
1.document.querySelectorAll(".mod-tabs li")
2.document.getElementsByTagName("li")

选中btn元素：
1.document.querySelector("btn")
2.document.getElementsByClassName("btn")

【个人总结，如有错漏，欢迎指出】
：>