JavaScript（二）

DOM

文档对象模型：把文档当做对象
提供一套功能，程序员可以直接使用
针对浏览器做交互
同样有输入或者输出（传参或返回值）
 

一、DOM树

1、文档：一个页面就是一个文档，DOM中使用document表示
2、元素：页面中的所有标签都是元素，DOM中使用element表示
3、结点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示
DOM把以上内容都看做是对象
 

二、驼峰命名法

如果一般 html 标签里面有横杠（ - ）的，在js中使用驼峰命名法
 

三、事件

    ① 事件源：事件被触发的对象
    ② 事件类型：如何触发 什么事件
    ③ 事件处理程序：通过一个函数赋值的方式 完成

1、基础的事件格式：

var btn = docement.querySelector('btn'); //获取事件源

# 传统方式（只能唯一，不能多样绑定）
btn.onlick = () => {
   
	alert(' ... ');
	this. ...
}

# 事件监听（同个元素可以添加多个监听器）：
function xxx() {
   
	......
}
div.addEventListener('click', xxx,true/false（默认）);


格式：
function 方法名（）{
   
	方法体
}
元素.addEventListener('事件类型（click,mouseover）'，方法名,true/false);
（true代表这个事件是在捕获阶段中进行，一般不写默认是false，则是在冒泡阶段中进行）

捕获阶段指的是从大框架一步步到具体模块的过程
冒泡阶段指的是从具体模块一步步到大框架的过程

2、鼠标事件

使用监听器的时候，就不用加 on

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发（包括其中的子盒子都会触发）
onmouseenter	鼠标经过触发（和其中的子盒子区分开，只有经过自身才会触发）
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点出发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

3、删除事件

# 传统事件：
div.onclick = null;

# 监听事件：
div.removeEventListener('click',xxx);

function xxx() {
   
    ......
}

四、操作元素

1、创建

# 可以直接创建一个标签，但是如果页面加载完了，再通过方式创建标签，就会发生页面重加载
document.write('<div> 123 </div>');


# 使用数组形式配合innerHTML,效率是最高的，只是结构稍微复杂
var arr = [];
for(let i =0;i <= 100;i++){
   
	arr.push('<a href="#">123</a>');
}
父.innerHTML = arr.join('');


# 结构比较清晰，但是时效上不如innerHTML
var li = document.createElement('li');

2、增

添加节点
（在父级元素的子元素列表的末尾添加一个元素）

var ul = document.querySelector('ul');//获取父节点

# 添加元素节点（到后面)
ul.appendChild(li);

# 添加元素节点（到前面）
ul.inserBefore(li,ul.children[0]);

3、删

删除节点（删除第几个子元素）

ul.removeChild(ul.children[0]);

4、改

（1）修改元素内文字内容(innerHTML、innerText)

也可以不加事件，直接使用。

# 可以识别html标签
（可以使用HTML标签修饰内容，也保留了 空格 和 换行 ）
div.innerHTML = 新内容;

# 不可以识别html标签
div.innerText