DOM操作

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

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

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

• elem.children：elem.children获取当前元素的所有子元素节点（只返回html节点，不返回文本节点），是HTMLCollection的实例。
• elem.childNodes：返回元素中的所有子节点（包括空白文本节点），childNodes中保存着一个NodeList类数组对象（有length属性但并不是Array的实例），可通过方括号语法来访问NodeList的值。

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

7种，ES5的元素选择方法是 querySelector() 和 querySelectorAll()

• getElementById()：接收一个参数：要取得的元素的ID（区分大小写，必须严格匹配），找到则返回该元素，没找到返回null。
  docyument.getElementById('ct');
• getElementsByClassName()：接收一个参数，这个参数可以是多个空格分隔的class名字，返回一个类似数组的对象（HTMLCollection类型的对象），包括了所有class名字符合指定条件的元素（搜索范围包括本身），元素的变化实时反映在返回结果中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。
  document.getElementsByClassName('nav');
• getElementsByTagName()：接收一个参数，要取得的元素的标签名（不区分大小写）返回所有指定标签的元素（搜索范围包括本身）。返回值是一个HTMLCollection对象，也就是说，搜索结果是一个动态集合，任何元素的变化都会实时反映在返回的集合中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。
  document.getElementsByTagName('p');
• getElementsByname()：接收一个参数，带有给定name属性值的元素，用于选择拥有name属性的HTML元素，比如form、img、frame、embed和object，返回一个NodeList格式的对象，不会实时反映元素的变化。
  document.getElementsByname('color');
• elementFromPoint()：接收两个参数：分别是相对于当前窗口左上角的横纵坐标，单位为CSS像素，返回位于页面指定位置的元素，如果该元素不可返回（如滚动条）则返回它的父元素，如果坐标值无意义（如负值）则返回null。
  document.elementFromPoint(100,100);
• querySelector()：返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。
  document.querySelector('#ct .colors');
• querySelectorAll()：返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中。
  document.querySelector('.nav li');

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

• 创建
  • 创建元素：createElement() 方法用来生成HTML元素节点。
    var newDiv = document.createElement('div');
  • 创建文本节点：createTextNode() 方法用来生成文本节点，参数为所要生成的文本节点的内容。
    var newText = document.createTextNode('hello world');
  • 创建DOM片段：creatDocumentFragment() 方法生成一个DocumentFragment对象，DocumentFragment对象是一个存在于内存的DOM片段，但是不属于当前文档，常常用来生成较复杂的DOM结构，然后插入当前文档。这样做的好处在于，因为DocumentFragment不属于当前文档，对它的任何改动，都不会引发网页的重新渲染，比直接修改当前文档的DOM有更好的性能表现。
    var docFragment = document.createDocumentFragment();
• 设置属性：setAttribute() 方法用于设置元素属性

var node = document.getElementById('ct');
node.setAttribute('class','contain');

• 删除属性：romoveAttribute() 方法用于删除元素属性
  node.removeAttribute('class');

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');
    new.insertBefore(newContent, newDiv.firstChild);
  

• 替换：replaceChild() 方法接受两个参数：要插入的元素和要替换的元素
  newDiv.replaceChild(newElement, oldElement);
• 删除：removeChild() 方法可以删除元素
  parentNode.removeChild(childNode);

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

• 方法
  • add(value)：新增 class
  • remove(value)：删除 class
  • contains(value)：判断是否拥有 class
  • toggle(value)：如果列表中存在给定值，删除它，如果不存在，添加它。
• 判断一个元素的 class 列表中是包含某个 class
  用 contains() 方法

if(element.classList.contains("className")){
  //  执行操作
}

• 添加一个class
  用 add() 方法

var a = document.querySelector('#ct');
a.classList.add('class')

• 删除一个class
  用 remove() 方法

var a = document.querySelector('#ct');
a.classList.remove('class')

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

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

    <script>
        var li = document.querySelectorAll('.mod-tabs>ul>li');
        var btn = document.querySelector('.mod-tabs>.btn');
        console.log(li);
        console.log(btn);
    </script>