DOM操作

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

• innerText从对象的起始位置到终止位置的文本内容，去除了HTML标签
• innerHTML从对象的起始位置到终止位置的全部内容，包括HTML标签

<div id="test">
  <h1>welcome</h1>
  <p>hello</p>world
</div>

d45b9345fca0aa9d55531db8955373989e5eb9c7.jpg

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

• children：非标准的，它返回指定元素的子元素集合。它只返回元素节点，甚至不返回文本节点。需注意children在IE中包含注释节点。
• childNodes：标准的，它返回指定元素的子元素集合，包括元素节点、属性节点、文本节点（元素节点、属性节点和文本节点的属性类型分别是1、2、3）

e00278649d64172a46b77bb3c19e1a149812a3ae.jpg

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

• document.getElementById() ：匹配指定ID属性的元素节点
• document.getElementsByClasName()： 方法返回一个类似数组的对象（HTMLCollection类型的对象），包括了所有class名字符合指定条件的元素
• document.getElementByTagName('')返回所有指定标签的元素
• document.getElementByName('')方法用于选择拥有name属性的HTML元素
• es5方法
  1.querySelector()方法返回匹配指定的CSS选择器的元素节点,如document.querySelector(".myclass");
  2.querySelectorAll方法返回匹配指定的CSS选择器的所有节点
  其中，ES5元素选择的方法是querySelector和querySelectorAll，可以通过输入CSS选择器的形式来选中任意元素，比上面4种方法更加灵活方便。
  为了书写方便可以将querySelector和querySelectorAll封装如下函数：

function $(str) {
    return document.querySelector(str);
}
function $$(str) {
    return document.querySelectorAll(str);
}

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

//创建元素节点
document.createElement(tagName[, options]);
//创建文本节点
document.createTextNode(data);
//获取元素属性
element.getAttribute(attName);
//设置或修改元素属性
element.setAttribute(name, value);
//删除元素属性
element.removeAttribute(attrName);

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

//在子元素末尾添加新的子元素
parentNode.appendChild(childNode);
//在某个元素前插入新的元素
parentNode.insertBefore(newChild, referenceChild);
//替换子元素
parentNode.replaceChild(newChild, oldChild);
//删除元素下的子元素
parentNode.removeChild(childNode);

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

var ele = document.createElement('div');
ele.setAttribute('class','leftbar first');
ele.classList //['left','first']

//element.classList常用方法如下：
ele.classList.add('float') //添加一个class
ele.classList.contains('leftbar') //判断class列表中是否包含leftbar，返回true
ele.classList.remove('leftbar') //删除一个class
ele.classList.toString() //将类数组对象转为字符串

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

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

答：

document.querySelectorAll('li');//选中所有li元素
document.querySelector('.btn');//选中btn元素