JavaScript 基础知识总结（二）

这是 JavaScript 基础知识总结的第二篇文章，内容主要包括 DOM 操作、JavaScript 事件、event 对象、this 对象、Window 对象和 Document 对象。

1.DOM 基础

DOM 进阶部分主要包括获取元素、创建元素、插入元素、替换元素、删除元素和复制元素相关的内容。

DOM 简介

DOM，全称 “Document Object Model” (文档对象模型)，它是由 W3C 定义的一个标准。

简单来说，DOM 里面有许多方法，我们可以通过它提供的方法来操作一个页面中的某个元素。

例如改变这个元素的颜色、点击这个元素实现某些效果，直接把这个元素删除等。

节点层次

简单来说，DOM 采用的是树形结构，用树节点形式来表示页面中的每一个元素。

每一个元素就是一个节点，而每一个节点就是一个对象。也就是说，我们在操作元素时，其实就是把元素看成一个对象，然后使用这个对象的属性和方法来进行相关的操作。

节点类型

在 JavaScript 中，节点分为很多类型，共有 12 种类型。这里常见的有三种，它们分别是：

元素节点

属性节点

文本节点

这里还有一点需要注意的就是节点跟元素是不一样的概念，节点包括元素。

nodeType 属性

在 JavaScript 中，我们使用 nodeType属性来判断一个节点的类型。不同节点的 nodeType 属性值如下所示。

元素节点.nodeType = 1

属性节点.nodeType = 2

文本节点.nodeType = 3

nodeValue 属性

元素节点的 nodeValue 属性值为 null

文本节点的 nodeValue 属性值为 文本内容

获取元素

获取元素，准去来说，就是获取元素节点的。对于一个页面，我们想要对谋个元素进行操作，就必须通过一定的方式来获取元素，只有获取到了才能对其进行相应的操作。

在 JavaScript 中我们可以通过以下六种方式来获取指定元素。

getElementById()

getElementsByTagName()

getElementsByClassName()

querySelector() 和 querySelectorAll()

getElementsByName()

document.title 和 document.body

创建元素

创建元素节点 createElement()

创建文本节点 createTextNode()

插入元素

前面介绍了创建元素，但创建的元素如果不添加到文档树，它只会游离于文档树中不会影响浏览器的显示。

怎么把新创建的元素插入到文档树中这里有两种方法：

appendChild()

insertBefore()

这两个方法都需要获取父元素才可以进行操作。

替换元素

replaceChild() 可以替换元素。

删除元素

removeChild() 删除父元素下的某一个子元素。

复制元素

使用 cloneNode() 方法来复制元素。

2.DOM 进阶

DOM 进阶包括 HTML 属性操作、HTML 方法操作、CSS属性操作和 DOM 遍历，当然这里介绍的只是基础的内容，更深入的以后会慢慢介绍。

不管是用对象属性还是对象方法方式，都会涉及以下两种操作。

获取 HTML 属性值

设置 HTML 属性值

HTML 属性操作(对象属性)

HTML 属性操作，指的是使用 JavaScript 来操作一个元素的 HTML 属性。比如一个元素的 id 、class 等属性。

获取 HTML 属性值，一般都是通过属性名，来找到该属性的对应的值。

语法：obj.attr

obj 是元素名，它是一个 DOM 对象。这里的 DOM 对象，指的是使用 getElementById()、getElementsByTagName() 等方法获取的元素节点。

attr 是属性名，通过“.”运算符获取。

设置 HTML 元素的属性值，同样是使用属性名来设置。

语法：obj.attr = "值"

HTML 方法操作(对象方法)

这里有四种对象方法来操作 HTML 属性。

getAttribute()

setAtribute()

removeAttribute()

hasAttribute()

CSS 属性操作

在 JavaScript 中，CSS 属性操作同样有两种：

获取 CSS 属性值

设置 CSS 属性值

获取 CSS 属性值

使用 getComputedStyle() 方法来获取一个 CSS 属性的取值。

语法：getComputedStyle(obj).attr

obj 是元素名，它是一个 DOM 对象。attr 表示 CSS 属性名。这里的属性名使用的是 骆驼峰型 的CSS 属性名。

举个例子，font-size 应该写成 fontSize，border-bottom-width 应该写成 borderBottomWidth 。

设置 CSS 属性值

设置 CSS 属性值有两种方式实现：

style 属性

cssText 属性

DOM 遍历

DOM 遍历，可以理解为 “查找元素” 的意思。

DOM 遍历，这里分为三种情况：

查找父元素

使用 parentNode 属性来获取某个元素的父元素。

语法：obj.parentNode

查找子元素

使用下列来两组方式来获得父元素中的所有子元素或某个子元素。

childNodes、firstChild、lastChild

children、firstElementChild、lastElementChild

查找兄弟元素

使用以下两组方式来获得兄弟元素：

previousSibling、nextSiling

previousElementSibling、nextElementSibling

innerHTML 和 innerText 的使用

3.事件基础

在 JavaScrit 中，一个事件应该有三个部分：

事件主角：是按钮还是 div 或者其他

事件类型：是点击还是移动或者其他

事件过程：这个事件都发生了些什么

JavaScript 中常见的事件：

鼠标事件

键盘事件

表单事件

编辑事件

页面事件

4.event 对象

当一个事件发生的时候，这个事件有关的详细信息都会临时保存在一个指定的地方，这个地方就是 event 对象。

event 对象常见的属性

事件类型 type

键码值 keyCode

是否按下 shift 键 shiftKey

是否按下 Ctrl 键 ctrlKey

是否按下 Alt 键 altKey

5.this 对象

在事件操作中，可以简单理解为：哪个 DOM 对象（元素节点）调用了 this 所在的函数，那么 this 指向的就是哪个 DOM 对象。

6.Window 对象

一个窗口就是一个 window 对象，这个窗口里面的 HTML 文档就是一个 document 对象，document 对象是 window 对象的子对象。

window 对象的属性（子对象）

document 文档对象，用于操作页面元素

location 地址对象，用于操作 URL 地址

navigator 浏览器对象，用于获取浏览器版本信息

history 历史对象，用于操作浏览历史

screen 屏幕对象，用于操作屏幕宽度高度

window 对象的方法

窗口操作

对话框

定时器

location 对象

navigator 对象

7.Document 对象

Document 对象属性

document.title 获取文档的 title

document.body 获取文档的 body

document.forms 获取所有的 form 元素

document.images 获取所有的 img 元素

document.links 获取所有的 a 元素

document.cookie 文档的 cookie

document.URL 文档的 URl

document.referrer 返回使浏览器到达当前文档的 URL

Document 对象方法

document.getElementById() 通过 id 获取元素

document.getElementsByTagName() 通过标签名获取 元素

documnet.getElementsByClassName() 通过 class 获取元素

document.getElementsByName() 通过 name 获取元素

document.querySelector() 通过选择器获取元素，只获取第一个

document.querySelectorAll() 通过选择器获取元素，获取所有

document.createElement() 创建元素节点

document.createTextNode() 创建文本节点

document.write() 输出内容

document.writeIn() 输出内容并换行