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. 为同一个元素绑定多个不同的事件,指向相同的事件处理函数
网友评论