javascript-核心知识总结

（一）DOM基础

1、DOM对象

2、节点类型

3、获取元素

4、创造元素

5、插入元素

6、删除元素

7、复制元素

8、替换元素

（二）DOM进阶

1、用DOM对象对HTML属性操作

2、用DOM对象对CSS操作

3、DOM查找（遍历）

4、innerHTML和innerText

（三）事件基础

1、鼠标事件、

2、键盘事件、

3、表单事件

4、编辑事件、

5、页面事件

（四）事件进阶

1、事件监听器

2、event对象：

3、this

（五）window对象

1、窗口操作

2、对话窗

3、定时器

4、location对象

5、navigator对象

（六）documen对象

1、document对象属性

2、document对象方法

（一）DOM基础

1、DOM对象

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

DOM的结构是采用“树形结构”，用“树节点”的形式来表示页面中的每一个元素，HTML元素是树根，也叫根元素，在html下面，我们发现有head和body这两个分支，它们位于同一层次上，并且有着共同的父节点（即html），所以它们是兄弟节点。以此类推。

2、节点类型

在JavaScript中，节点分为很多种类型。DOM节点共有12种类型，但是常见的只有下面3种

元素节点：表示元素
属性节点：表示属性
文本节点：表示文本

<div id="wrapper">绿叶学习网</div>

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

3、获取元素

document.getElementById（"id名"）：通过id来选中元素
document.getElementsByTagName（"标签名"）：通过标签名来选中元素
document.getElementsByClassName（"类名"）：想通过class来选中元素
document.querySelector（"选择器"）：使用CSS选择器来获取选取满足选择条件的第1个元素
document.querySelectorAll（"选择器"）:使用CSS选择器来获取选取满足选择条件的所有元素
document.getElementsByName（"name名"）:通过name属性来获取表单元素
document.title：获取title元素
document.body：获取body元素

4、创造元素

创建元素节点：createElement（）：
创建文本节点：createTextNode（）

5、插入元素

在JavaScript中，插入元素有以下两种方法

A.appendChild（B）：A表示父元素，B表示动态创建好的新元素，一个新元素B插入到父元素A的内部子元素的“末尾”
A.insertBefore（B,ref）：A表示父元素，B表示新子元素。ref表示指定子元素，表示在ref之前插入B

6、删除元素

在使用removeChild（）方法删除元素之前，我们必须找到以下2个元素。被删除的子元素。被删除子元素的父元素。

A.removeChild（B）：删除父元素A下的某个子元素B

7、复制元素

obj.cloneNode（bool）

参数obj表示被复制的元素，而参数bool是一个布尔值，取值如下：

1或true：表示复制元素本身以及复制该元素下的所有子元素。
0或false：表示仅仅复制元素本身，不复制该元素下的子元素。

8、替换元素

A.replaceChild（new,old）：在父元素A中，用新子元素new代替旧子元素old

（二）DOM进阶

1、用DOM对象对HTML属性操作

获取HTML属性值：
1、元素名.属性名。
2、元素名.getAttribute（"属性名"）：来获取元素某个属性的值
设置HTML属性值：
1、元素名.属性名=值
2、元素名.setAttribute（"属性名","值"）
删除元素：元素名.removeAttribute（"属性名"）
判断元素是否含有某个属性：元素名.hasAttribute（"属性名"）

元素名是DOM对象，是通过getElementById（）等方法等获取到的元素节点。

2、用DOM对象对CSS操作

获取一个CSS属性的值：getComputedStyle(元素名).CSS属性名
设置CSS属性值：
1、style对象：元素名.style.属性名="值"
2、cssText：元素名.style.cssText="属性1：值1, ......" //同时设置多个CSS属性

元素名是DOM对象，是通过getElementById（）等方法等获取到的元素节点。

3、DOM查找（遍历）

查找父元素：元素名.parentNode
查找子元素：
1、childNodes、firstChild、lastChild 。//childNodes获取的是所有的子节点,子节点是包括元素节点以及文本节点的,例如包括换行也被算作子元素
2、children、firstElementChild、lastElementChild //children获取的是所有的元素节点，不包括文本节点
查找兄弟元素：
1、previousSibling、nextSibling：查找前一个兄弟节点、查找后一个兄弟节点（包括换行）
2、previousElementSibling、nextElementSibling：查找前一个兄弟、查找后一个兄弟（不包括换行）

元素名是DOM对象，是通过getElementById（）等方法等获取到的元素节点。

4、innerHTML和innerText

innerHTML：获取或设置元素内部所有的内容，
innerText：获取和设置一个元素的“内部文本”

（三）事件基础

一个动作之后会引发一件行动，就是一个事件，例如，当我们点击一个按钮时，会弹出一个对话框。其中，“点击”就是一个事件，“弹出对话框”就是我们在点击这个事件里面做的一些事情

JavaScript中，一个事件包含3部分：

事件主角：是按钮？还是div元素？还是其他？
事件类型：是点击？还是移动？还是其他？
事件过程：这个事件都发生了些什么？

JavaScript常见的事件共有以下5种：鼠标事件、键盘事件、表单事件、编辑事件、页面事件。

在JavaScript中，调用事件的方式有两种：在script标签中调用、在元素中调用

1、鼠标事件、

2、键盘事件、

键盘按下：onkeydown
键盘松开：onkeyup

3、表单事件

onfocus和onblur：onfocus获取焦点时触发的事件，onblur表示失去焦点时触发的事件
onselect：选中“单行文本框”或“多行文本框”中的内容时，就会触发onselect事件
onchange：用于“具有多个选项的表单元素”的操作，例如单选框选择某一项时触发。复选框选择某一项时触发。下拉列表选择某一项时触发。