JavaScript DOM

JavaScriot DOM笔记

1节点（元素）的创建添加删除替换克隆

1.1 创建元素节点

document.createElement("标签名");       //返回创建好的元素

注意： 新创建的元素并不在文档结构中！

1.2 添加子节点

① 在最后面添加子节点

父元素.appendChild(新节点);  				//不是父元素也可以；可以进行一个元素的内容向另一个元素中移动

② 指定位置添加子节点

父元素.insertBefore(新节点，旧节点);

注意： 新的节点会在旧节点的前面！

1.3 删除子节点

父元素.removeChlid(要删除的节点);

1.4 替换子节点

父元素.replaceChild(新节点，旧节点);

1.5 节点克隆

元素.cloneNode(true);

注意： 方法的参数默认是false , 只克隆自己，后代和内容不克隆； 设置参数为true, 自己和后代内容都克隆。

2 document 对象

属性：
lastModified 		获取文档最后一次修改信息，只读
cookie				读写cookie信息，可读可写
all					获取文档中所有的元素，HTMLCollection，只读
documentElement		获取html 元素，只读
body				获取body 元素，只读
head 				获取head 元素，只读
title				获取页面标题，可读可写

方法：
write()				把内容写入到文档			

3 documentFragment对象

3.1 创建documentFragment对象

document.createDocumentFragment();

3.2 documentFragment 对象的特点

1. documentFragment 也是一类节点，nodeType 是11 ，并不是元素对象，他通常作为其他节点的一个临时容器。

2）documentFragment 不是真实的DOM 树的一部分，它的变化不会触发DOM 树的重新渲染，且不会导致性能等问题。

3.3 documentFragment 对象的应用

1. 如果连续给一个元素添加多个子元素，可以先把子元素添加都documentFragment 对象中，最后把 documentFragement 对象添加到父元素中，减少浏览器渲染次数。

2）利用documentFragment 实现对一组元素进行倒序排列。

5 HTML DOM

5.1 表单相关元素

① from 元素

submit () 		调用该方法，让表单提交
reset()			调用该方法，让表单重置

② 文本输入框和文本域（inout 和 textarea)

blur()		失去焦点
focus() 	获取焦点
select()	选中里面的文本

③ select 元素

属性：
length			下拉选项的数量（可读可写）
option			获取所有下拉选项的集合
selectedIndex	获取所选的下拉选项的索引
value 			获取所选的下拉选项的value 值

方法：
add()		添加一个下拉选项，参数是option 元素
remove() 	删除一个下拉选项，参数是要删除的下拉选项的索引
blur()		失去焦点
focus() 	获取焦点

注意：

​ new Option() 可以创建一个option 元素，Option()构造函数的第一个参数指定下拉选项的文本内容，第二个参数指定下拉选项的value 值。

5.2 表格相关元素

① table 元素

属性：
rows 		获取表格中所有行元素的集合
cells 		获取表格中所有单元格元素的集合

方法：
insertRow() 插入一行
deleteRow() 删除一行

② tableRow (tr 元素)

属性：
cells		获取本行内所有的单元格元素的集合
rowIndex	本行的索引

方法：
insertCell() 	插入一个单元格
deleteCell()	删除一个单元格

③ tableCell 元素（td 或 th )

属性：
cellIndex  		获取本单元格在行内的索引

5.3 快速创建img 元素

new Image();     //相当于 document.createELement('img');

6 事件

6.1 事件监听

① 给元素监听事件的三种方式

第一种方式：把事件作为HTML标签的属性：

<button onclick = "代码"></button>

第二种方式: 把事件作为元素对象的方法：

element.onclick = function () {
    
}

第三种方式：使用addEventLIstener方法：

element.addEventListener("click",function() {
    
});

总结： addEventListener 方式可以给同一个事件绑定多个回调函数！

② 解除事件的监听

如果是第一种方式和第二种方式监听的事件：

//重写写一遍事件监听，把前面的覆盖掉；使用null 覆盖原来的函数
element.onclick = null;

如果是 addEventListener() 的监听事件：

element.removeEventListener('click', 回调函数名);

注意： 使用addEventListener 监听事件，如果以后要解除监听，回调函数不能使用匿名的。

6.2 事件流

事件的触发会经历三个阶段：

捕获阶段： 从 window、document 一层一层到目标元素 (具体发生了事件动作的元素)

目标阶段： 获取目标元素，标志着捕获阶段的结束，冒泡阶段的开始。

冒泡阶段： 从目标元素开始，层层向上，一直到 document、window。

注意： 事件默认在冒泡阶段触发（回调函数执行）

注意： addEventListener 方法的第三个参数设置true ,可以设置事件在捕获阶段触发。