• 关键词：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');

• 综合4题线上例子

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");  // 第三种

本文章著作权归饥人谷和作者所有，转载须说明来源！