题目1： dom对象的innerText和innerHTML有什么区别？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="content">innertest <p>sasaf</p></div>
<script>
var elem = document.getElementById('content')
console.log(elem.innerText)//innertest sasaf
console.log(elem.innerHTML)//innertest <p>sasaf</p>
</script>
</body>
</html>
- innerText是一个可写属性，返回元素内包含的文本内容，在多层次的时候会按照元素由浅到深的顺序拼接其内容
- 而innerHTML属性虽然作用和innerText类似，但是不是返回元素的文本内容，而是返回元素的HTML结构，在写入的时候也会自动构建DOM
题目2： elem.children和elem.childNodes的区别？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="content">热门游戏<div>我是子节点</div> </div>
<script>
var elem = document.getElementById('content')
console.log(elem.children)// ["热门游戏" ,<div>我是子节点</div>]
console.log(elem.childNodes)// ["<div>我是子节点</div>"]
</script>
</body>
</html>
- element.children只输出普通的DOM元素,elem.children 属于HTMLCollection对象；
- element.childNodes会输出所有的子元素，包括文本节点、文字,elem.childNodes 属于NodeList对象；
- 最大的区别就是HTMLCollection是元素集合，而NodeList是节点集合（即可以包含元素，也可以包含文本节点，即元素之间的空白或换行也属于文字节点，注释也属于文本节点）
题目3：查询元素有几种常见的方法？ES5的元素选择方法是什么?
| 函数 | 功能 |
|---|---|
| getElementById() | 指定ID找元素 |
| getElementsByClassName() | 指定class找元素 |
| getElementsByTagName() | 指定元素标签找元素 |
| getElementsByName() | 指定name属性找元素 |
| querySelector() | ES5支持，参数写法可按照CSS选择器，返回单个元素 |
| querySelectorAll() | ES5支持，参数写法可按照CSS选择器，返回多个元素 |
| elementFromPoint() | 指定位置找元素 |
题目4：如何创建一个元素？如何给元素设置属性？如何删除属性
| 函数 | 功能 |
|---|---|
| createElement() | 创建HTML元素 |
| createTextNode() | 创建文本节点 |
| createAttribute() | 创建属性 |
| setAttribute() | 设置属性 |
| romoveAttribute() | 删除属性 |
题目5：如何给页面元素添加子元素？如何删除页面元素下的子元素?
| 函数 | 功能 |
|---|---|
| appendChild() | 在元素末尾添加元素 |
| insertBefore() | 在某个元素之前插入元素 |
| replaceChild() | 替换元素 |
| removeChild() | 删除子元素 |
// <div>
// <span id="childSpan">foo bar</span>
// </div>
// 创建一个空的span元素节点
// 没有id,没有任何属性和内容
var sp1 = document.createElement("span");
// 添加一个id属性,值为'newSpan'
sp1.setAttribute("id", "newSpan");
// 创建一个文本节点
var sp1_content = document.createTextNode("新的span元素的内容.");
// 将文本节点插入到span元素中
sp1.appendChild(sp1_content);
// 获得被替换节点和其父节点的引用.
var sp2 = document.getElementById("childSpan");
var parentDiv = sp2.parentNode;
// 用新的span元素sp1来替换掉sp2
parentDiv.replaceChild(sp1, sp2);
// 结果:
// <div>
// <span id="newSpan">新的span元素的内容.</span>
// </div>
题目6： element.classList有哪些方法？如何判断一个元素的 class 列表中是包含某个 class？如何添加一个class？如何删除一个class?
- add( String [, String] )添加指定的类值。如果这些类已经存在于元素的属性中，那么它们将被忽略。
- remove( String [,String] )删除指定的类值。
- item ( Number )按集合中的索引返回类值。
- toggle ( String [, force] )当只有一个参数时：切换 class value; 即如果类存在，则删除它并返回 false，如果不存在，则添加它并返回true。当存在第二个参数时：如果第二个参数的计算结果为true，则添加指定的类值，如果计算结果为false，则删除它
- contains( String )检查元素的类属性中是否存在指定的类值。
题目7： 如何选中如下代码所有的li元素？ 如何选中btn元素？
<div class="mod-tabs">
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
<button class="btn">点我</button>
</div>
document.getElementsByTagName('li')//选中所有的li元素
document.querySelectorAll('li')//选中所有的li元素
document.getElementsByClassName('btn')//选择btn元素
document.querySelector('.btn')//选择btn元素
