-
关键词：DOM
DOM 带来了动态修改文档的能力
1. DOM 对象的 'innerText' 和 'innerHTML' 有什么区别？
- 返回内容不同
-
innerText：返回元素内包含的文本内容；若存在嵌套，按序由浅至深拼接文本内容 -
innerHTML：返回元素内包含的HTML结构，在写入时自动构建 DOM
2. elem.children 和 elem.childNodes 的区别？
- 包含节点的类型不同
-
elem.children：元素集合，只包含元素（HTML标签） -
elem.childNodes：节点集合，可包含元素（HTML标签）、文本节点、注释节点
3.1 查询元素有几种常见的方法？
-
getElementById()：返回指定条件的元素节点，匹配 ID属性；若无，则返回null -
getElementsByClassName()：返回指定条件的元素节点，匹配 class属性 ；返回值为 HTMLCollection类型的对象 -
getElementsByTagName()：返回所有指定标签的元素；返回值为HTMLCollection类型的对象
3.2 ES5的元素选择方法是什么?
-
querySelector()：返回指定的元素节点，匹配CSS选择器 - 若多个节点满足匹配条件，则返回第一个匹配的节点
- 若没有节点满足匹配条件，则返回null。
-
querySelectorAll()：返回指定的所有节点，匹配CSS选择器 - 返回所有、满足任一匹配条件（参数中任一选择器）的元素
- 该方法参数可以是：以逗号分隔的多个CSS选择器
- 返回值为NodeList类型的对象
4.1 如何创建一个元素？
- 方法
createElement()：用来生成HTML元素节点
createTextNode()：用来生成文本节点
createDocumentFragment()：用来生成一个DocumentFragment对象 - DocumentFragment对象：用来生成较复杂的DOM结构，然后将DocumentFragment对象插入当前文档，这样拥有更好的性能表现
- 例子
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);
4.2如何给元素设置属性？如何删除属性
- 方法
getAttribute()：用于获取元素的attribute值
createAttribute()：用于生成一个新的属性对象节点，并返回它
setAttribute()：用于设置元素属性
romoveAttribute()：用于删除元素属性 - 例子：设置元素属性
// 方法一
var newDiv = document.getElementById("div");
var a = document.createAttribute("newAttrib");
a.value = "newValue";
newDiv.setAttributeNode(a);
// 方法二
var newDiv = document.getElementById("div");
newDiv.setAttribute("id", "header");
- 例子：删除元素属性
var newDiv = document.getElementById("div");
newDiv.setAttribute("id", "header");
newDiv.removeAttribute('id');
5. 如何给页面元素添加子元素？如何删除页面元素下的子元素?
- 方法
appendChild()：用于在元素末尾添加元素
insertBefore()：用于在元素之前插入元素
replaceChild()：用于替换某个元素
removeChild()：用于删除某个元素
cloneNode()：用于复制元素 - 例子：给页面元素添加子元素
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);
- 例子：删除页面元素的子元素
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);
newDiv.removeChild(newContent);
6. element.classList 有哪些方法？
- 方法
classList.contains：用于判断一个元素的 class 列表中是包含某个 class
classList.add()：用于添加一个或多个 class
classList.remove：用于删除一个或多个 class - 例子：添加一个class？线上代码栗子
var getE = document.getElementById("newDiv");
getE.classList.add("mystyle");
- 例子：如何判断一个元素的 class 列表中是否包含某个 class？
var getE = document.getElementById("newDiv");
getE.classList.add("mystyle");
getE.classList.contains("newDiv"); // false
getE.classList.contains("mystyle"); // true
- 例子：删除一个class?线上代码栗子
var getE = document.getElementById("newDiv");
getE.classList.add("mystyle");
getE.classList.remove("mystyle");
7. 如何选中如下代码所有的 li元素？ 如何选中 btn元素？
<div class="mod-tabs">
<ul>
<li>list1<li>
<li>list2<li>
<li>list3<li>
</ul>
<button class="btn">点我</button>
</div>
选中 li标签、btn标签
// 选中 li 标签
var li1 = getElementsByTagName("li"); // 第一种
var li2 = querySelectorAll("ul>li")； // 第二种
// 选中 btn 标签
var btn1 = getElementsByClassName("btn"); // 第一种
var btn2 = getElementsByTagName("button"); // 第二种
var btn3 = querySelector("div>button"); // 第三种
