DOM

注意JS在是编程语言：在赋值给HTML的元素属性的时候需要用到字符串的拼接等的知识

目录

DOM获取元素：

根据ID获取：

根据标签名获取：

根据HTML5新增方法获取：

根据类名：

根据指定选择器获取该选择器下的第一个元素对象：

根据选择器获取所有元素：

特殊元素获取：

事件基础：

事件由三部分组成：

操作元素：

修改元素的内容：（适用于普通盒子）

修改元素的属性：

修改表单的属性：

修改样式属性：

行内样式操作：

类名样式操作：

排他思想：

获取自定义属性值：

设置/移除属性值：

修改/设置属性：

移除属性：

H5自定义属性：

H5新增的特殊的获取自定义属性的值：

节点操作：

父级节点：

子节点：

方式一：

方式二：

节点操作之第一个和最后一个元素节点的获取：

方式一：

方式二：

方式三：实际开发使用

兄弟节点：

方式一：

方式二：

创建，添加，删除，复制：节点的使用：

创建节点：

添加节点：

appendChild( child)添加在父级末尾：

insertBefore(child，指定元素) 指定在父级的哪个子级前面插入元素：

简单留言板案例：

删除节点：

删除留言的案例：

复制节点：

三种动态创建元素的方式：

document.write()

element.innerHTML

document.createElement()

DOM的重点简介：

DOM事件的高级：

注册事件：

监听事件：

方式一：标准的

方式二：非标准

注册事件兼容性解决方案：

删除事件（解绑事件）：

对于传统方式的绑定事件：

新方式的解绑事件：

DOM事件流：

事件对象：

事件对象常见的属性:

e.target和this的区别：

阻止默认行为：

阻止事件冒泡：

事件委托：

常见的鼠标事件：

禁止鼠标默认行为：

获取鼠标在页面的坐标：

跟随鼠标事件mousemove：

常用的键盘事件：

键盘事件的对象属性keyCode:判断用户按下某个键

---

文档对象模型（documentobjectmodel,简称dom),是w3c组织推荐的处理可扩展标已语言（html或者xml)的标准编程接口。
w3c已经定义了一系列的dom接口，通过这些dom接口可以改变网页的内容，结构和样式。

DOM获取元素后可以在一个元素中操作别的已经获取的元素。

DOM获取元素：

获取的元素是一个对象的集合是可以进行遍历的

根据ID获取：

注意根据id则需要将script放在标签之后（后续有方法放在前面）

注意返回的数据是一个对象

根据标签名获取：

使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合。

动态指的是：当对象数据发生变化，DOM获取的也会变化。

---

实现获取特指ol中的li但是一般这种情况会考虑用id来获取

根据HTML5新增方法获取：

同样和id一样目前需要写在标签之后。

根据类名：

---

根据指定选择器获取该选择器下的第一个元素对象：

返回值该元素对象的内容

根据选择器获取所有元素：

特殊元素获取：

body，html元素的获取。

---

事件基础：

事件他是会判断触发事件的类型。

传统事件的形式，只能添加一种形式，后面的会覆盖前面的

事件由三部分组成：

事件源：事件被触发的对象

事件类型：如何触发 什么事件，如划过，点击...

事件处理程序： 通过函数赋值的方式进行完成。

---

流程：

1.获取事件源
2.注册事件（绑定事件）
3.添加事件处理程序（采取函数赋值形式）

这个焦点指：相当于选中，如搜索框被选中就是获取焦点

也存在foucus方法

注意一些事件可以在实际中不需要进行点击等操作，也就是说不一定需要有注册事件。但是这个事件一定会是直接展示的。

操作元素：

修改元素的内容：（适用于普通盒子）

element是元素（看DOM的分布）

识别指的是，会将标签隐藏（标签是不会输出的。）

特殊用法：

即可以作为添加元素的方式，但是他是以字符串的形式进行添加的

修改元素的属性：

如图片的改变

案例：随着时间改变图标吗

---

修改表单的属性：

this指向的是调用函数的调用者。

修改样式属性：

行内样式操作：

JS修改后添入行内样式里。

案例：循环精灵图

注意这里的位置书写时的”格式“

焦点案例：

---

类名样式操作：

change是已经写好的类名，类名选择器中有格式的修写。

注意类名样式操作：是直接进行覆盖的。

若想保留原来的，可以采用多类名的写法。

案例：密码框提示信息。（类名的改变）

下拉菜单案例：当父类进行onmouseover(鼠标经过) 是将子类元素的dispaly设置为

block现实/none隐藏。 onmouseout（鼠标离开）

排他思想：

案例：点击换皮肤

案例：表格隔行换色

表单全选和单选按钮 反选：

全选影响单选：

单选影响全选：

从上面例子可以看出同样是获取复选框是否选中，js的获取值是布尔值，即true 或者 false，而jQuery的获取值则是checked或者undefined

获取自定义属性值：

自定义属性：自己命名的仅作为程序员编写时方便等

设置/移除属性值：

修改/设置属性：

class比较特殊两种方式的设置格式不同。

移除属性：

案例：

详情页：

自定义给属性，获取属性用循环赋值，绑定事件后。用排他思想，当谁点击时，其他的元素都隐藏，自己进行显示

H5自定义属性：

属性目的：是为了保存并使用数据。有些数据可以 保存到页面中而不用保存到数据库中。

---

h5规定自定义属性data-开头做为属性名并且赋值。

H5新增的特殊的获取自定义属性的值：

但是只能获取以date- 开头的。

dataset是一个储存了所有，以date开头的自定义属性对象的集合

---

节点操作：

还是为了获取元素，但一般需要先获取一个元素

同时也可以知道可以通过一个已经获取的元素获取一些部分可以获取的元素

相当于元素上调下调。

---

---

---

nodeName（节点名称） nodeValue（节点值） nodeType（节点类型）

最常见的节点是父子层的节点：

父级节点：

只能够得到距离它最近的父级节点。

子节点：

获取父级元素下子元素的长度。

方式一：

得到的所有子类的节点包括：元素节点，文本节点等等

方式二：

该方式，只会获取子元素节点。不会获取文本节点等。

该方式更多使用。

节点操作之第一个和最后一个元素节点的获取：

方式一：

同样存在的缺点是，会获取返回所有的节点。

方式二：

方式三：实际开发使用

先获取多个子元素的父级的对象集合，然后访问第n个元素

---

下拉菜单案例：

使用ul li作为一个单元进行下拉式子的形式。

兄弟节点：

方式一：

方式二：

方式三：

根据元素节点的nodetype为1来进行的。

创建，添加，删除，复制：节点的使用：

需要先进行创建元素，然后使用添加元素，添加在指定位置。

创建节点：

添加节点：

appendChild( child)添加在父级末尾：

该方式实现的情况是用子类形式：

insertBefore(child，指定元素) 指定在父级的哪个子级前面插入元素：

---

简单留言板案例：

删除节点：

注意下面这种方式：删除的是子节点。注意语法

这个子元素的删除，也可以先通过标签等获取指定的元素之后再放进再去进行删除。

或者直接使用父级.children[n]

还有其他删除的方案。

删除留言的案例：

注意删除的语法是父亲里的孩子（因为既要删除内容又要删除链接，不如直接删除li）

---

复制节点：

---

案例：动态生成表格

注意这里的dates[i] [k]

i的产生是由于获取对象 ，[的获取是获取属性名]之后获取属性值

三种动态创建元素的方式：

---

---

document.write()

这个就出现了问题他会出现重绘

element.innerHTML

他是进行拼接字符串的形式的。

参考上文修改内容属性

document.createElement()

正常使用参考上文添加节点

该方式是进行创建的形式实现的

效率更高效（比innerHTML）

DOM的重点简介：

DOM事件的高级：

注册事件：

事件的触发会判断触发事件的类型。

监听事件：

方式一：标准的

注意：listener可以直接写为funtion( ){ } 或者调用写好的函数名即可（不需要括号）

优点在于，一个元素可以添加多个监听事件。

当触发行为是一样的时候会先后显示。

但事件监听又产生冒泡等的影响需要考虑设置方案

方式二：非标准

ie9之前的可以使用

注册事件兼容性解决方案：

一般现在不在考虑直接启用较高市场普遍的浏览器内核版本

删除事件（解绑事件）：

对于传统方式的绑定事件：

触发后，将事件赋值为null

新方式的解绑事件：

对于event的：

对于attach的:

DOM事件流：

即事件传播的过程

即：确定的是事件传播的路径 ，以至于影响事件的执行过程

此流程也会影响产生点击一个，导致多个（父子级）点击事件的产生

如：如果父子级都绑定了同一种触发事件（如都是click）就会影响触发

事件对象：

事件对象相当于形参，他是事件的相关的信息

ie8以上是如下：

1.event就 就是一个事件对象写到我们侦听函数的小括号里面当形参来看
2.事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
3.事件对象是我们事件的一系列相关数据的集合跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息比如半 口判断用户按下了那个键

ie8以前：

window.event

解决兼容性问题，一般不需要考虑

---

事件对象常见的属性:

e.target和this的区别：

e.target是返回触发该事件的对象

this返回的是绑定该事件的对象

currenttarget和this的返回值一样

---

阻止默认行为：

阻止如：链接的跳转

按钮的提交等基本默认行为

注意该类代码是要写在function里的

阻止事件冒泡：

但注意的是阻止冒泡只能够影响两个层级的关系，如果多余2层则需要多个写

方式一：

对于标准写法的阻止

此时，当点击子类的时候，父类就不会触发相同触发源的事件

方式二：

对于低版本的阻止冒泡的触发

事件委托：

在jQuery中叫事件委派：

如此时：即使子元素li没有点击事件，但由于监听方法的使用冒泡影响到了父元素的监听事件。

---

利用此，甚至可以父类的事件改变子元素的效果

---

---

常见的鼠标事件：

禁止鼠标默认行为：

contextmenu是右键

selectstart是选中

获取鼠标在页面的坐标：

由此可以制作点击效果等。

但是需要注意的是：获取的坐标是数字，在使用坐标产生点击等效果的时候需要有单位

跟随鼠标事件mousemove：

但是需要注意的是：获取的坐标是数字，在使用坐标产生点击等效果的时候需要有单位

注意默认的时候定位的是图片的左上角使得鼠标会在效果的左上角，如果需要在中间的话，需要减去图片宽度高度的一半。

---

---

常用的键盘事件：

这个按下键，只要一直被按，就会一直触发

键盘事件的对象属性keyCode:判断用户按下某个键

注意keyup和keydown返回的值不区别大小写。

keypress区分大小写。

案例： 输入框对应放大提示框