DOM操作

JavaScript-------DOM部分（主要操作页面的元素）
JavaScript分三个部分

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

按钮响应代码如下
注：先有按钮，再有点击事件（顺序）

点击按钮显示图片事件

凡是成对的标签，中间的文本内容设置的时候都使用innertext这个属性的方式
点击按钮修改p标签的文本内容

修改多个p标签签内容：首先从文档中找到p标签区域的id（getElementById）,然后再从这个区域中找到所要修改的p标签
（getElementsByTagName（tagname意为标签名字））

点击每个图片弹出对话框

排他功能原理是在事件发生之前每个事件内容变成一样，那个被执行就变，每一次循环这样

点击图片修改图片路径为超链接里面路径

把获取的标签对象封装成一个函数，有利于减少代码量

点击按钮修改兴趣
规律：在表单标签中，如果属性和值只有一个，并且这个值是属性本身那么在js代码DOM操作的时候，这个属性值是布尔类型值就可以了

disabled属性

readonly=“readonly”表示只读

点击按钮设置样式
规律：

点击一个按钮显示和隐藏div盒子

应用类样式来点击按钮和隐藏按钮

WEB API(万维网方法)

DOM对象：通过DOM方式获取的对象
事件：事件源，触发，响应
页面中顶级对象------document

阻止超链接的默认跳转return false；

鼠标进入事件onmouseover
鼠标离开时间onmouseend
当鼠标进入到每个li标签中，li标签的背景颜色变成粉红色

通过name属性值获取元素-------正对表单标签，基本元素煤油name属性 document.getElementsByName（“name值”）
通过类样式名字找到元素

获取元素的几种方式

获取焦点事件onfoucs
失去焦点事件onblur
placeholder=“输入值”

设置标签中文本内容应该用textContent属性或者innerText属性
为什么写兼容代码

获取和设置文本内容的兼容代码

innerText和innerHTML区别

tab栏实现方法
思路：1、首先获取tab栏的头标签span，尾标签li
2、然后循环遍历span标签，把span标签索引作为属性存储起来，为span标签注册点击事件，再点击之前把所有属性删除，用排他方法，在点击时显示属性
3、用排他功能实现li标签实现

节点（Node）：页面中所有元素（标签，属性，文本（内容，换行，空格））


获取节点和元素代码

点击按钮设置div中p标签的的背景颜色（两种方法）

变量的拼接例子如下

创建元素的方式
1、document.write() 例document.write(“

这是一个p

”)

2、第二种创建元素的方式对象.inneHTML

动态添加一个表单

第三种创建元素方式
document.createElement(“标签的名字”)
分两步：1、首先创建出子元素
2、用appendElement把创建元素添加到父级元素中

如果循环添加事件用命名函数（提高代码效率）
如果不是循环添加函数 用匿名添加函数

’用第三种方法动态创建列表

动态创建table表单
注：在链接对象属性时必须用双引号

创建一个元素方式

为元素绑定多个事件（两种方法）


绑定事件的兼容性代码


给一个对象添加多个事件的区别

解绑事件的第一种方式



绑定事件的兼容性代码和解除绑定事件的兼容性代码

事件冒泡含义为：当标签有嵌套时，当内部标签执行事件发生时，外部标签事件会自动发生
阻止事件冒泡两种方式
1、window.event.cancelBubble=true;
2、对象e.stopPropagation（）；

用e.eventPhase()来获取事件的阶段
1为捕获阶段
2为目标阶段
3为冒泡阶段


BOM中特殊关键词
top和window输出结果一样，有时可互相代替

onload为页面加载完毕之后显示



window.history用法



pc端系统指电脑上系统 移动端指手机上系统
BOM中定时器
有两个定时器setInterval
settimeout
两者区别在于第二个是个一次性定时器，但也要清理避免占内存cleartimeout
定时器返回的是一个字符串类型的



总结：1、盒子在移动时要要脱离文档流 poaition：abosolute
2、如果样式在style标签中写的，那么外面就拿不到css样式；如果写在标签中则可以读取到


鼠标跟着图片走代码
clintx可视化横坐标
clinty可视化纵坐标

scroll系列

变速运动封装函数

获取元素的各种属性值


图片跟着鼠标飞

阻止超链接跳转事件
return false

阻止事件冒泡


面向对象编程----Object oriented programming简称oop 一种编程开发思想

构造函数和实例化对象的关系

原型·

原型的作用：1、数据共享，节省空间

构造函数 实例化对象 原型之间的关系


原型对象中的方法可以相互调用

函数的自调用




构造函数中和构造函数的原型属性中this指的都是实例对象

原型链

借用构造属性

两种不同方式拷贝属性和方法
第一种方式是把被拷贝对象地址给了要拷贝属性和方法的对象
第二种方式是把对象的属性和方法给了obj对象

函数角色


函数是对象，但对象不一定是函数
例如Math是对象，但不是函数

所有的函数实际上时Function构造函数创建处的实例对象
函数也是一种数据类型（function）
js高级中apply和call的用法和区别


bind用法

函数作为参数使用时

js中没有块级作用域

闭包原理

递归：函数中调用函数自己，此时就是递归，递归一定要有结束条件
沙箱是一个虚拟环境，为了保证内部变量与外部内容不冲突，用自调用函数实现（（）（））；
浅拷贝


深拷贝

正则表达式