WebAPIs
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