DOM操作

题目1： dom对象的innerText和innerHTML有什么区别？
innerHTML会显示元素内部的HTML结构，在写入的时候也会自动构建DOM
innerText显示的是元素的文本内容，可读可写。
另外从安全的角度来看：如果写入一段恶意的script代码，innerHTML则会将代码执行，会对网站造成很大的隐患。但是innerText只会将这段代码作为文本展示。

image.png

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

<!-- 注意中间有空格 -->
<div id="hot_game">热门游戏<div>我是子节点</div> </div>

image.png image.png

element.children只输出普通的DOM元素；
element.childNodes会输出所有的子元素，包括文本节点、文字；
大多数情况下我们应该使用element.children；

题目3：查询元素有几种常见的方法？ES5的元素选择方法是什么?
getElementById()：返回匹配指定ID属性的元素节点
getElementsByClassName()：返回一个指定class名的元素的数组
getElementsByTagName()：返回一个指定标签的数组
getElementsByName()：返回name属性的HTML元素
querySelector()：返回指定的CSS选择器的元素节点。
querySelectorAll()：方法返回匹配指定的CSS选择器的所有节点
ES5的元素选择方法是：querySelector()，querySelectorAll()
可以在https://caniuse.com/查看兼容性

题目4：如何创建一个元素？如何给元素设置属性？如何删除属性
createElement()
createElement方法用来生成HTML元素节点。

var newdiv = document.createElement("div");

setAttribute()
setAttribute()方法用于设置元素属性

newdiv.setAttribute("my_attrib", "newVal");

romoveAttribute()
removeAttribute()用于删除元素属性

newdiv.removeAttribute('my_attrib');

题目5：如何给页面元素添加子元素？如何删除页面元素下的子元素?
appendChild()：在元素末尾添加元素

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);

insertBefore()：方法在某个元素之前插入元素

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.insertBefore(newContent, newDiv.firstChild);

removeChild()：方法可用于删除某元素下的子元素

parentNode.removeChild(childNode);

题目6： element.classList有哪些方法？如何判断一个元素的 class 列表中是包含某个 class？如何添加一个class？如何删除一个class?
add:新增 class
remove:删除 class
toggle:新增/删除切换class
contains: 判断是否拥有 class

var div=document.querySelector(".box");
console.log(div.classList);
div.classList.add('active')  ; //新增 class
div.classList.remove('active');  //删除 class
div.classList.toggle('active') ;  //新增/删除切换
div.classList.contains('active') ;  // 判断是否拥有 class

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

<div class="mod-tabs">
   <ul>
       <li>list1</li>
       <li>list2</li>
       <li>list3</li>
   </ul>
   <button class="btn">点我</button>
</div>

//选择所有li元素
var lis=document.querySelectorAll(" .mod-tabs>ul>li");
//选中button元素
var btn=document.querySelector(".btn");
console.log(lis);
console.log(btn);

image.png

总结在创建比较多的节点的时候使用createDocumentFragment()

createDocumentFragment方法生成一个DocumentFragment对象。

var docFragment = document.createDocumentFragment();
DocumentFragment对象是一个存在于内存的DOM片段，但是不属于当前文档，常常用来生成较复杂的DOM结构，然后插入当前文档。这样做的好处在于，因为DocumentFragment不属于当前文档，对它的任何改动，都不会引发网页的重新渲染，比直接修改当前文档的DOM有更好的性能表现。

实例如下：

var fragment=document.createDocumentFragment();
for(var i=0;i<results.length;i++)
{
   var node=document.createElement("li");
   node.innerText=results[i];
  fragment.appendchild(node);
}
ul.appendChild(fragement);