欢迎关注个人微信公众账号：byodian
个人博客：Byodian's Blog
JavaScript 基础知识总结(二)包括 DOM、事件、window 对象、document 对象
一、DOM 基础知识
1. DOM 简介
DOM 对象
DOM ， 全称 “Document Object Model” (文档对象模型)，它是由 W3C 定义的一个标准。简单来说，DOM 里面有许多方法，我们可以通过它提供的方法来操作一个页面中的某个元素，例如改变这个元素的颜色、点击这个元素实现某些效果，直接把这个元素删除等。
一句话总结：DOM 操作，可以简单理解为 “元素操作。”
DOM 节点层次
DOM 可以将任何 XML 或 HTML 文档描绘成一个由多层节点构成的结构。简单来说，DOM 采用的是 树形结构 ，用树节点形式来表示页面中的每一个元素。以下面的 HTML 为例：
前端技术
HTML
CSS
JavaScript
对于上面这个 HTML 文档，DOM 会将其解析为如下图所示的树形结构。
[图片上传失败...(image-47811-1519440903938)]
每一个元素就是一个节点，而每一个节点就是一个对象。也就是说，我们在操作元素时，其实就是把元素看成一个对象，然后使用这个对象的属性和方法来进行相关的操作。(这是理解 DOM 操作的关键)
2. 节点类型
在 JavaScript 中，节点分为很多类型，共有 12 种类型。这里常见的有三种，它们分别是：
- 元素节点
- 属性节点
- 文本节点
这里还有一点需要注意的就是节点跟元素是不一样的概念，节点包括元素。
nodeType 属性
在 JavaScript 中，我们使用 nodeType 属性来判断一个节点的类型。不同节点的 nodeType 属性值如下所示。
- 元素节点.nodeType = 1
- 属性节点.nodeType = 2
- 文本节点.nodeType = 3
此外，对于节点类型，有以下三点需要注意：
- 一个元素就是一个节点，这个节点称之为 “元素节点”。
- 属性节点和文本节点看起来像是元素节点的一部分，但实际上，他们是独立的节点，并不属于元素节点。
- 只有元素节点才可以拥有子节点，属性节点和文本节点都无法拥有子节点。
nodeValue 属性
元素节点的 nodeValue 属性值为 null
文本节点的 nodeValue 属性值为 文本内容
3. 获取元素
获取元素，准去来说，就是获取元素节点的。对于一个页面，我们想要对谋个元素进行操作，就必须通过一定的方式来获取元素，只有获取到了才能对其进行相应的操作。
在 JavaScript 中我们可以通过以下六种方式来获取指定元素。
- getElementById()
- getElementsByTagName()
- getElementsByClassName()
- querySelector() 和 querySelectorAll()
- getElementsByName()
- document.title 和 document.body
getElementById()
在 JavaScript 中，如果想要通过 id 来获取元素，我们可以通过 getElementById() 来实现。
语法：document.getElementById()
举例：
上面代码 doument.getElementById("div1") 会获取 id 为 div1 的 div 元素并将其标签中的内容颜色变为红色。
这里关于变量的命名习惯给一个 DOM 对像的变量开头加 o ，以便于其他变量区分开来，并且可以让我们一眼就看出来这是一个 DOM 对象。
getElementsByTagName()
通过标签名选中元素
语法：document.getElementsByTagName("标签名")
举例：
- HTML
- CSS
- JavaScript
代码中，首先使用 getElementById() 方法获取 id 为 list 的 ul 元素，然后在 ul 元素上调用 getElementsByTagName() 方法获取该 ul 元素下的所有 li 元素。
上面获取 li 元素如果使用 document.getElementsByTagName("li") 方法获取的是整个 HTMl 页面的所有 li 元素，而使用 oUl.getElementsByTagName("li") 获取的仅仅是 id 为 list 的 ul 元素下的所有 li 元素。
这里需要注意的是 getElementsByTagName() 方法获取的是一个 “类数组”（也叫伪数组）。
伪数组与数组的区别在于：
- 只能使用
length属性、方括号方法或者item()方法的形式。 - 不能使用
push()等方法。
getElementsByClassName()
通过 class 来选中元素。
语法： document.getElementsByClassName()
举例：
- HTML
- CSS
- JavaScript
代码 document.getElementsByClassName("selected") 会获取 class 属性为 selected 的列表元素，并将获取的列表元素中的内容 JavaScript 变为红色。
querySelector() 和 querySelectorAll()
这两个方法是我们可以通过 CSS 选择器的语法来获取所需要的元素
语法： document.querySelector("选择器") document.querySelectorAll("选择器")
querySelector() 表示选取满足条件的第一个元素，querySelectorAll() 表示选取满足条件的所有元素。其中这两个方法的选择条件的写法跟 CSS 选择器的写法完全一样。
举例：
document.querySelector("#main"); // 选取 id 为 main 的元素
document.querySelector(".main"); // 选取 class 为 main 的第一个元素
document.querySelectorAll("#list li") // 选取 id 为 list 的 ul 元素下所有的 li 元素
document.querySelectorAll("input:checkbox") // 选取所有的复选框
对于 id 选择器来说，由于页面只有一个元素，建议使用 getElementById() 方法，因为 这个方法效率更高，性能更好。
getElementsByName()
该方法用于表单元素，因为它有一个其他普通元素没有的 name 属性。
语法：document.getElementsByName
getElementsByName() 跟 getElementsByTagName() 类似，获取的也是一个类数组，可以使用 方括号法 或者 item()方法 获取其中的元素。
举例：
oInput[2].checked = true 表示将类数组中的第三个元素的 checked 属性设置为 true ，也就是第三个单选按钮被选中。
document.title 和 document.body
由于一个页面只有一个 title 元素和 body 元素，因此对于这两个元素的选取使用这些方法将会非常的方便。
语法：document.title document.body
举例：
document 对象的属性还非常多，这里只是其中两个属性，后面在 document 对像一节中还会说到。
小结
getElementById() 和 getElementsByTagName() 的区别
-
getElementById()获取的是一个元素，而getElementsByTagName()获取的是多个元素(类数组)。 -
getElementById()只能由document对象调用，也就是前面只可以接 document，而getElementsByTagName()前面不仅可以接document，还可以接其他DOM对象。 -
getElementById()不可以操作动态创建的 DOM 元素，而getElementsByTagName()可以操作动态创建的 DOM 元素。
4. 创建元素
createElement() 创建元素节点
createTextNode() 创建文本节点
语法：
var el = document.createElement("元素名")； // 创建元素节点
var txt = document.createTextNode("文本内容") // 创建文本节点
在前面介绍过：在 DOM 中，每一个元素节点都被看成是一个对象。因此我们可以像操作对象一样，来操作元素的特性，为它添加更多的子节点，以及其他操作。比如：
var div = document.createElement("div"); //创建 div 标签元素
div.id = "myNewDiv"; //设置 div 的 id 属性值
div.className = "box"; //设置 div 的 class 属性值
要把新元素添加到文档树中，可以使用 appendChild()、insertBefore()或 replaceChild() 方法。
5. 插入元素
前面介绍了创建元素，但创建的元素如果不添加到文档树，它只会游离于文档树中不会影响浏览器的显示。
怎么把新创建的元素插入到文档树中这里有两种方法：
- appendChild()
- insertBefore()
这两个方法都需要获取父元素才可以进行操作。
appendChild()
把一个新元素插入到父元素的内部子元素的末尾。
语法：A.appendChild(B);
其中 A 表示父元素，B 表示动态创建好的新元素。
举例：
// 部分代码
var div = document.createElement("div"); // 创建 div 元素
document.body.appendChild(div) // 将新创建的 div 元素插入到页面中 body 元素的内部子元素的末尾
代码 document.body.appendChild("div") 会将新创建的 div 元素插入到 body 元素内部子元素的末尾。
insertBefore()
把一个新创建的元素插入到父元素中某一个子元素之前。
语法：A.insertBefore(B,ref)
其中 A 表示父元素，B表示新创建的元素，ref表示指定的子元素。
举例：
- HTML
- CSS
- JavaScript
oUl.firstElementChild 表示获取 ul元素下的第一个元素。上面的代码表示在点击插入按钮后，会将文本内容插入到列表的第一项。浏览器预览效果如下图所示。
[图片上传失败...(image-437b8a-1519440903938)]
小结
如果想要创建一个元素，需要以下几步：
- 创建元素节点：createElement()
- 创建文本节点：createTextNode()
- 把文本节点插入到元素节点：appendChild()
- 把组装好的元素插入到已有的元素中：appendChild()
6. 替换元素
replaceChild() 可以替换元素。
语法：A.replaceChild(newELement,oldElement)
其中 A 表示父元素，newElement 表示新子元素，oldElement 表示旧子元素。
举例：
- HTML
- CSS
- JavaScript
oUl.replaceChild(oLi,oUl.firstElementChild) 表示将 ul 元素的第一个元素替换为新创建的 li 元素。浏览器预览效果如下图所示。
7. 删除元素
removeChild() 删除父元素下的某一个子元素。
语法：A.removeChild(B)
举例：
- HTML
- CSS
- JavaScript