1-8 JS基础语法复习之【DOM】

1 APIs简介

1.1 API 与 Web API

2 DOM简介

DOM把以上内容都看作对象（文档、元素、节点）

2.1 获取元素

2.1.1 根据ID获取：document.getElementById()

2.3.2 根据标签名获取：document.getElementsByTagName()

可以返回带有指定标签名的对象的集合（伪数组）

2.3.3 H5新增方法

第三个最方便，但这些方法需要考虑到兼容性的问题

2.3.4 获取body和html元素

2.2 事件基础

事件三要素：事件源 事件类型 事件处理程序

常见鼠标事件

2.3 操作元素

2.3.1 改变元素内容

通过querySelector提取HTML中的标签进入< Script >
通过方法 innerText 修改标签里的内容

innerTEXT 和 innerHTML 的区别

inner HTML是W3C标准的，更常用，可以识别html标签
两者都可以读取或写入

2.3.2 改变元素属性

案例：

2.3.3 修改表单属性

修改value：

修改type：
仿密码框显示与隐藏的功能

修改样式style


案例：关闭淘宝二维码

HTML部分：

CSS部分


JS部分：

2.3.4 通过className修改样式

在这里插入图片描述

2.3.5 操作元素总结

2.4 排他思想

2.5 自定义属性

2.5.2 H5中的自定义属性

2.6 节点操作

2.6.1 父子节点

2.6.2 兄弟节点

2.6.3 创建和插入节点

2.3.4 删除节点

2.3.5 克隆节点（浅拷贝/深拷贝）

总结：在不同浏览器下，innerHTML效率要比createElement高

3 DOM重点核心