JavaScript基础略，JS借鉴了C，Java等语言的语法，而python借鉴了JS的语法

JS三部分：ECMAScript语法、DOM、BOM

1. 术语

DOM：Document Object Model

BOM：Browser Object Model

2. DOM构成

由文档及文档中的所有的元素（标签）组成的一个树形结构图，叫树状图（DOM树）

document：文档

root：根节点。例如html标签

node：节点。页面中所有的内容都是node：标签、属性、文本

element：元素。页面中所有的标签都是元素，元素可以看成是对象

3. DOM基础 和 onclick事件

3.1 设置标签的属性值

点击按钮显示一张图片，并改变原始图片尺寸

3.2 设置成对标签之间的文本内容

点击按钮修改p标签里的内容

3.3 同时设置双标签的 属性 和 内容

点击按钮，修改超链接

3.4 批量修改同名标签里的内容

简单批量修改

根据id选择修改

PS:

getElementsByTagName返回的是一个伪数组，遍历数组方法同数组

3.5 批量修改同名标签的某种类型的值

点击按钮，批量修改文本框中的值

3.6 在对象本身的事件中，修改自己的属性

在对象本身的事件中，修改自己的属性，除了使用对象名，还可以使用this

点击按钮，将点击的按钮切换成文本框

3.7 按钮的排它性（实现banner轮播按钮效果）

按钮轮播效果

*3.8 实现图片放大效果

一般网站实现点击图片后放大图片，能点浏览器的回退按钮回到点击图片之前的页面

3.9 单属性规律

在表单中，如果属性和值只有一个，并且值是这个属性本身，那么在写js代码，DOM操作的时候，这个属性值，赋予true/false就可以了

这些属性有：

checked，selected，disabled，readonly等等

3.10 外部引用js代码 和 css样式的设置方法

点击div，改变div的样式

3.11 div的显示/隐藏 通过类样式来实现

在js代码中DOM操作的时候，设置元素的类样式，不用class关键字，应该使用className

点击按钮，切换div的显示和隐藏

3.12 禁用超链接的默认跳转

a连接点击之后默认有onclick跳转超链接，现在改成不跳转超链接，而弹出框显示超链接内容

只需要在a标签的onclick中return false

另一种写法：

css与js代码混搭

3.13 简单相册：点击小图，不跳转显示大图

代码略长。提示：使用嵌套ul结构显示相册缩略图

3.14 根据name属性获取元素对象：getElementsByName

获取到的值也是一个伪数组，同getElementsByTagName使用方式相同，都需要遍历

代码略

3.15 根据类名选择器 获取元素对象：getElementsByClassName(H5才支持)

获取到的值也是一个伪数组，同getElementsByTagName、getElementsByName使用方式相同，都需要遍历

3.16 总结获取元素对象的方法

document.querySelector("#btn"); // id选择器

document.querySelectorAll(".cls"); // 类名选择器

4. onmouseover和onmouseout事件

onmouseover：鼠标进入

onmouseout：鼠标移开

4.1 鼠标进入设置高亮显示手型，鼠标离开恢复原色显示指针

4.2 二维码的显示和离开

5. 焦点事件

onfocus:获取焦点事件

onblur:失去焦点事件

5.1 模拟搜索框

6. 兼容性处理

中小公司内部项目不需要做兼容性，大家统一浏览器。

6.1 innerText 与 textContent

略

6.2 innerText 与 innerHtml

略

7. 自定义属性

自定义属性，可以自己存储一些数据，用于渲染后的页面的后续操作处理

7.1 获取自定义属性 getAttribute

实现点击li，获取每个li中自定义的属性值

错误的获取方式：

错误的获取方式

错误获取方式的结果

上面this.data的this是通过DOM方式获取的对象，这个对象在DOM树中是没有data这个属性的。

也可以理解成，标准的li标签是没有data这个属性的

但是用户自定义了一个属性，这个属性不存在于DOM树的Node中，只能通过this.getAttribute("data")来获取

正确的获取方式：

正确的代码

期望的结果

7.2 设置自定义属性：setAttribute()

例子略

7.3 移除自定义属性

8. 节点操作（Node）

Node节点包括：标签、属性、文本（页面中的除了标签和属性之外的文字，换行、空格）

通过上面DOM的操作获取元素的方式不能做到下面的需求

想获取div下的所有元素的信息

除非给每个元素加id，否则因该用节点的方式来获取元素

8.1 12行代码！

12行代码

总结:

1. 凡是获取Node的代码在谷歌和火狐得到的都是  相关的Node

2. 凡是获取Element的代码在谷歌和火狐得到的都是  相关的element

3. 从子节点和兄弟节点开始,凡是获取Node的代码在IE8中得到的是element,获取element的相关代码,在IE8中得到的是undefined----元素的代码,iE中不支持

调试验证：

布局例子

得到元素节点中多个属性的指定属性节点：

getAttributeNode("id")

9. 创建元素

元素创建三种方式：

1. document.write("标签的代码及内容");

缺陷:如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉

2. obj.innerHTML = "标签及代码";

3. document.createElement("标签名字");

10. 事件绑定、解绑

10.1 事件绑定的区别

10.2 事件解绑

onclick = null

removeEventListener

11. 事件冒泡 和 阻止事件冒泡

多个元素嵌套，有层次关系，这些元素都注册了相同的事件，如果里面的元素事件触发，外面元素的该事件自动触发

阻止：window.event.cancelBubble=true;

12 事件三个阶段

1. 事件捕获阶段：从外向内

2. 事件目标阶段

3. 事件冒泡阶段：从里向外

13. 为同一个元素绑定多个不同的事件,指向相同的事件处理函数