DOM

Dom对象的innerText和innerHTML有什么区别？

• innerText：可写属性，返回元素内包含的文本内容，在多层次的时候会按照元素由浅到深的顺序拼接其内容
• innerHTML：不是返回元素的文本内容，而是返回元素的HTML结构

elem.children和elem.childNodes的区别？

• elem.children：返回元素内的 HTML 子元素的集合（即HTMLCollection）
• elem.childNodes：返回元素内的子节点列表（包括空白文本节点，即NodeList）

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

方法	作用
getElementById	返回匹配指定ID属性的元素节点
getElementsByClassName	返回一个类似数组的对象（HTMLCollection类型的对象），包括了所有class名字符合指定条件的元素（搜索范围包括本身），元素的变化实时反映在返回结果中
getElementsByTagName()	返回所有指定标签的元素（搜索范围包括本身）
getElementsByName()	选择拥有name属性的HTML元素，比如form、img、frame、embed和object，返回一个NodeList格式的对象，不会实时反映元素的变化
querySelector()	返回匹配指定的CSS选择器的第一个元素节点
querySelectorAll()	返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象
elementFromPoint()	返回位于页面指定位置的元素

ES5的元素选择方法是 querySelector()、querySelectorAll()

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

var h1 = document.createElement('h1');  //创建元素
h1.setAttribute("class","123"); //设置class 属性
h1.removeAttribute("class");  // 删除class属性

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

添加元素：

1. appendChild()
   在元素末尾添加元素
2. insertBefore()
   在某个元素之前插入元素

删除元素:

removeChild()

var h1 = document.createElement("h1");  //创建h1元素
var h1Text = document.createTextNode("123");  //创建文本元素
h1.appendChild(h1Text);  //  在h1标签末尾添加文本元素
var body = document.getElementsByTagName()[0];  // 获取body标签
body.appendChild(h1);  // 在body元素末尾添加h1标签
body.removeChild(h1);  //在body的子元素中删除h1元素

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

1. element.classList.add()：添加一个类名
2. element.classList.item(index)：按集合中的索引返回类值。
3. element.classList.remove(className)：为元素删除指定的class
4. element.classList.contains(className)：是否包含指定类名，返回布尔值,用于判断一个元素的 class 列表中是包含某个 class

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

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

var List1 = document.querySelectorAll('li')
var List2 =document.getElementsByTagName('li');//第二种方式


//三种方式选中btn
var btn0 = document.getElementsByTagName("button");
var btn1 = document.getElementsByClassName("btn");
var btn2 = document.querySelector(".btn");