1、dom对象的innerText和innerHTML有什么区别？
- innerText属性: 返回元素内部的文本内容
- innerHTML属性: 返回元素内部的HTML结构，包括文本和标签
<div id="box"><p>文本内容</p></div>
<script>
var ct=document.getElementById("box");
console.log(ct.innerHTML); //<p>文本内容</p>
console.log(ct.innerText); //文本内容
</script>
2、elem.children和elem.childNodes的区别？
- elem.children: 只返回普通DOM元素。
- elem.childNodes: 返回所有元素，包含DOM元素、文本节点、文字，即元素和元素之间的换行也属于文本节点，注释也属于文本节点。
<div id="box">一级列表<p>文本内容</p></div>
<script>
var ct=document.getElementById("box");
console.log(ct.children); //["<p>文本内容</p>"]
console.log(ct.childNodes); //["一级列表","<p>文本内容</p>"]
</script>
3、查询元素有几种常见的方法？ES5的元素选择方法是什么?
| 方法 |
含义 |
| document.getElementById() |
通过id来查询元素 |
| document.getElementsByClassName() |
通过class来查询元素，返回的是数组，所以要使用加数组下标 |
| document.getElementsByTagName() |
通过元素名称来查询元素 |
| document.getElementsByName() |
通过元素的name属性来查询元素 |
| document.ElementFromPoint(x,y) |
通过定位来查询元素 |
| document.querySelector("#box .wrap") |
ES5支持，参数写法可按照CSS选择器，返回单个元素 |
| document.querySelectorAll("#box .wrap") |
ES5支持，参数写法可按照CSS选择器，返回多个元素 |
4、如何创建一个元素？如何给元素设置属性？如何删除属性
| 序号 |
操作 |
代码 |
| 0 |
查询元素 |
var div=document.getElementById("box"); |
| 1 |
创建元素 |
var a=document.createElement("a"); |
| 2 |
添加文本节点 |
var aText=document.createTextNode("hello"); |
| 3 |
给创建的元素添加文本节点 |
a.appendChild(aText); |
| 4 |
设置属性 |
a.setAttribute("href","http://www.baidu.com"); |
| 5 |
添加到元素中 |
div.appendChild(a); |
| 6 |
删除属性 |
a.removeAttribute("href"); |
5、如何给页面元素添加子元素？如何删除页面元素下的子元素?
<div class="box"></div>
<script>
var box=document.getElementsByClassName("box")[0]; //查询元素
var img=document.createElement("img"); //创建元素
img.setAttribute("src","https://www.baidu.com/img/bd_logo1.png"); //设置新元素属性
box.appendChild(img); //在元素末尾添加新子元素
box.removeChild(img); //删除元素的子元素
</script>
6、element.classList有哪些方法？如何判断一个元素的 class 列表中是包含某个 class？如何添加一个class？如何删除一个class?
| classList方法 |
含义 |
| element.classList |
获取元素的class名称，返回数组 |
| element.classList.add(class1, class2, ...) |
给元素增加class |
| element.classList.remove(class1, class2, ...) |
删除元素的class |
| element.classList.contains(class) |
判断元素中有没有包含参数的class |
| element.classList.toggle(class,true/false) |
在元素中转换类名，第一个参数为要在元素中移除的类名，并返回 false。如果该类名不存在则会在元素中添加类名，并返回 true。第二个是可选参数，是个布尔值用于设置元素是否强制添加或移除类，false表示强制移除，true表示强制添加。 |
<div class="box"></div>
<script>
var box=document.getElementsByClassName("box")[0];
console.log(box.classList.contains("box")); //返回true，表示元素中包含class名为box
box.classList.add("box1","box2"); //给元素添加class
box.classList.remove("box1","box2"); //删除元素中的class
</script>
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(".btn");
var btn1=document.getElementsByClassName("btn")[0];
var btn2=document.getElementsByTagName("button")[0];
</script>
(mission 8)
