DOM操作
1.概述
1.1DOM
DOM是JavaScript操作网页的接口，全称为“文档对象模型”（Document Object Model）。文档对象模型 (DOM) 是HTML和XML文档的编程接口。它给文档（结构树）提供了一个结构化的表述并且定义了一种方式—程序可以对结构树进行访问，以改变文档的结构，样式和内容。
浏览器会根据DOM模型，将结构化文档（比如HTML和XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。所以，DOM可以理解成网页的编程接口。
DOM 提供了一种表述形式将文档作为一个结构化的节点组以及包含属性和方法的对象。从本质上说，它将web 页面和脚本或编程语言连接起来了。
要改变页面的某个东西，JavaScript就需要获得对HTML文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过DOM来获得的
1.2 document对象
每个载入浏览器的HTML文档都会成为document对象。document对象包含了文档的基本信息，我们可以通过JavaScript对HTML页面中的所有元素进行访问、修改。
1.3节点
DOM的最小组成单位叫做节点（node）。文档的树形结构（DOM树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。
节点的类型有七种。
-
Document：整个文档树的顶层节点 -
DocumentType，声明节点 ：doctype标签（比如<!DOCTYPE html>） -
Element，元素节点：网页的各种HTML标签（比如<body>、<a>等） -
Attribute，属性节点：网页元素的属性（比如class="right"） -
Text，文本节点：标签之间或标签包含的文本 -
Comment，注释节点：注释 -
DocumentFragment，文档节点：文档的片段
这七种节点都属于浏览器原生提供的节点对象的派生对象，具有一些共同的属性和方法。
1.4节点树
一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是DOM。
最顶层的节点就是document节点，它代表了整个文档。文档里面最高一层的HTML标签，一般是<html>，它构成树结构的根节点（root node），其他HTML标签节点都是它的下级。
除了根节点以外，其他节点对于周围的节点都存在三种关系。
1.父节点关系（
parentNode）：直接的那个上级节点 2.子节点关系（childNodes）：直接的下级节点 3.同级节点关系（sibling）：拥有同一个父节点的节点
DOM提供操作接口，用来获取三种关系的节点。其中，子节点接口包括firstChild（第一个子节点）和lastChild（最后一个子节点）等属性，同级节点接口包括nextSibling（紧邻在后的那个同级节点）和previousSibling（紧邻在前的那个同级节点）属性。
2. DOM对象的innerText和innerHTML有什么区别？
<body>
<div id="test">
<span style="color:red">test1</span> test2
</div>
<script>
var test=document.getElementById('test');
console.log(test.innerHTML);//输出 <span style="color:red">test1</span> test2
console.log(test.innerText);//输出test1 test2
</script>-
innerHTML可以用來取得从对象的起始位置到终止位置的全部内容,包括HTML标签； -
innerText也可以用來取得从对象的起始位置到终止位置的全部内容，但是会把其中的HTML标签去除掉。
特别说明： innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText。
3.elem.children和elem.childNodes的区别？
- children：非标准属性，它返回指定元素的子元素HTMLCollection集合，该集合只包含HTML节点，不包含文本节点。
- childNodes：标准属性，它返回指定元素的子元素NodeList节点集合，包含HTML节点、所有属性、文本节点。
举例：
<div id="ct">asdad
<p class="p1">段落
<a href="#">链接</a>
</p>
</div>
<script>
console.log(ct.children);
console.log(ct.childNodes);
console.log(ct.children[0]);
console.log(ct.childNodes[0]);
</script>
image.png
4.查询元素有几种常见的方法？ES5的元素选择方法是什么?
document.getElementById():返回匹配指定ID属性的元素节点对应的对象,如果没有发现匹配的节点，则返回null。document.getElementsByClassName():返回一个对象数组（HTMLCollection类型的对象），包括了所有class名字符合指定条件的元素（搜索范围包括本身），元素的变化实时反映在返回结果中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。document.getElementsByTagName():返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。返回值是一个HTMLCollection对象，也就是说，搜索结果是一个动态集合，任何元素的变化都会实时反映在返回的集合中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。document.getElementsByName():用于选择拥有name属性的HTML元素，比如form、img、frame、embed和object，返回一个NodeList格式的对象，不会实时反映元素的变化。
ES5的方法：
document.querySelector():返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。document.querySelectorAll():返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中。document.elementFromPoint():返回位于页面指定位置的DOM元素，如果该元素不可返回（比如文本框的滚动条），则返回它的父元素（比如文本框）。如果坐标值无意义（比如负值），则返回null。
5.如何创建一个元素？如何给元素设置属性？如何删除属性
创建元素：
- createElement( )：用来生成HTML元素节点。
- createTextNode( )：用来生成文本节点，参数为所要生成的文本节点的内容。
给元素设置属性：
- 使用setAttribute( )，里面传入两个值，第一个值为元素的属性，第二个值为定义的值。setAttribute( )可以为元素添加指定的属性，并为其赋指定的值；如果这个指定的属性已存在，则仅设置/更改值。
元素的添加：
- 在元素末尾添加元素：appendChild( )
- 在某个元素之前插入元素：insertBefore(newElement,targetNode)
元素的删除：
- 使用removeChild( )，在父元素上调用用来删除子元素节点。
- 使用removeAttribute( )删除属性.
如下为一个创建元素、设置元素属性、添加元素、删除元素的例子：
<div id="ct">
<p class="p1">一个段落</p>
<a href="#">一个链接</a>
</div>
<script>
var ct = document.getElementById("ct");
//获取id名为ct的元素，命名为ct
var ct2 = document.createElement("div");
//创建新的div元素，命名为ct2
ct2.setAttribute("class","ct2")
//给ct2元素设置属性class名ct2
var newcontent = document.createTextNode("in div");
//创建一段文本内容，命名为newcontent
ct.appendChild(ct2);
//将ct2元素添加到父元素ct内的末尾位置
ct2.appendChild(newcontent);
//将newcontent文本内容添加到其父元素ct2内
var newspan = document.createElement("span");
//创建新的span元素，命名为newspan
ct2.insertBefore(newspan,ct2.childNodes[1]);
//将newspan插入其父元素ct2下第一子元素newcontent之前，并占据第一子元素位置。
ct2.removeChild(ct2.childNodes[1]);
//将ct2元素下的第一子元素删除，即删除newspan
</script>6.element.classList有哪些方法？如何判断一个元素的 class 列表中是否包含某个 class？如何添加一个class？如何删除一个class?
<div class="one two three" id="myDiv"></div>
<script>
console.log(document.getElementById('myDiv').classList);
// {
// 0: "one"
// 1: "two"
// 2: "three"
// length: 3
// value: "one two three" }
</script>
从上面代码可以看出，classList属性指向一个类似数组的对象，该对象的length属性（只读）返回当前元素的class数量。classList对象有下列方法。
- add()：增加一个class。
- remove()：移除一个class。
- contains()：检查当前元素是否包含某个class。
- toggle()：将某个class移入或移出当前元素(如果指定的class不存在就加入，否则移除)。
- item()：返回指定索引位置的class。
- toString()：将class的列表转为字符串。
myDiv.classList.add('myCssClass');
myDiv.classList.add('foo', 'bar');
myDiv.classList.remove('myCssClass');
myDiv.classList.toggle('myCssClass');
myDiv.classList.contains('myCssClass'); // true
myDiv.classList.item(0); // "one"
myDiv.classList.toString();//"one two three foo bar myCssClass"7.如何选中如下代码所有的li元素？ 如何选中btn元素？
<div class="mod-tabs">
<ul>
<li>list1<li>
<li>list2<li>
<li>list3<li>
</ul>
<button class="btn">点我</button>
</div>
//选中所有的<li>元素
document.getElementsByTagName("li")
document.querySelectorAll("li")
//选中btn元素
document.getElementsByClassName("btn")[0]
document.getElementsByTagName("button")[0]
document.querySelector(".btn")
document.querySelectorAll(".btn")[0]腾讯云开发者
