web APIS

web APIS

1. 获取元素

---

• getElementById()
• getElementByClassName() 类名对象元素集合
• getElementByTagname()标签名对象集合

2. 基础事件

---

• 触发-响应机制
• 事件源：事件被触发对象

var btn = document.getElementById("btn“)

• 事件类型：如何触发
• 事件处理程序 ：可以用函数封装

3. 操作DOM

---

3.1 改变元素内容

• element.innerText

不识别html标签

• elemrnt.innerHTML
  此外，大量创建节点时候，将标签元素字符串，用数组拼接，效率最快

支持html标签

其中可以拿到元素内容，而且第二种可以拿到标签 ，推荐使用第二种，严谨，而且这是针对普通盒子元素

3.2 改变元素属性值

直接

元素.属性 = value

3.3 修改表单元素内容

this 是事件函数的调用者

3.4 修改元素样式

element.style.field

1. js修改的style样式，是行内样式，权重比较高，优先显示

2. 同时修改许多样式，可以用预先定义的类来包装，但是会覆盖以前的类名，但直接把原先的类名，直接写着就可以了。
   example：

this.className ='ex1';

3.5 获取和设置自定义属性值

• 得到

element.getAttribute("属性名");

• 定义

 element.setAttribute("属性名","value")；

• 注意
  更改类时候，属性名应该是 “ class” ，不是” className “

  用”data-“来规范自定义属性

4. 节点操作

利用节点层级关系，来获取元素
任何元素都是节点，主要是
1 == 元素节点
2 == 属性节点
3 == 文本节点

4.1节点关系

• 父亲节点:

node.parentNode
/* 拿到它亲爹节点 */

• 儿子节点

 node.childNodes
 // 拿到所有儿子节点集合，包括元素节点和文本节点 

node.children 
// 拿到的是子元素节点

推荐使用children，拿到的都是子元素节点集合
没有兼容性问题，以及拿到第一个子元素节点
children[0]

• 兄弟节点

node.nextElementSibling

4.2 创建节点

---

步骤：

1. var li =document.createElement('li') 创建节点
2. ul.appendChild(li) 将节点添加到末尾，类似 css的after
3. ul.insertBefore(要添加的节点，子节点的位置 child[i]) 添加位置为 i-1
4. ul.removeChild(ul.children[0]) 删除元素

---

5.事件

5.1 注册事件

传统注册事件具有唯一性。
监听事件 addEventListener()
事件类型是字符串，监听器是函数

5.2 解绑事件

eventarget.removeEventListener('事件类型',funciton)

其中function不能是匿名函数，调用时候不用写括号。

5.3 阻止事件

普通版本

e.preventDefault()

6.Dom事件流

事件会逐级寻找对应的元素，只要在捕获和冒泡阶段，父级事件有绑定相同事件，就会触发。

7.事件对象

1.event 就是一个事件对象，写到侦听函数小括号里面，当形参来看。
2.事件对象要在有事件才能存在，参数都是与事件有关，也都是系统自动创建
3.事件对象通常命名为event、e等

7.1 e.target和this的区别

this指向的是绑定对象，e.target执行的是，你点击的那个对象。
要做到这个this效果，可以用e.currentTarget.

7.2 阻止事件冒泡

e.stopPropagation() 直接冒泡时候阻止父级元素触发相同事件

7.3 事件委托

将事件监听器设置在父节点上，利用冒泡原理影响设置每个子节点。

例子：
给ul注册点击事件，然后利用事件对象的target找到当前点击的li，点击li后，冒泡到ul，因为ul注册过点击事件，就会触发监听器

7.4 键盘事件

• onkeyup 按键弹起
• onkeydown 任意键按键按下
• onkeypress 非功能键按下

7.4.1 判别按下的是那个键

keyCode 返回该键的ASCII码值
keyup和keydown 不区分字母大小写，
keypress区分字母大小写

8. BOM 浏览器对象模型

8.1浏览器窗口大小事件

 window.onresize();
 window.addEventListener("resize",funciton(){ 
 })

8.2 定时器 ------自动播放

setTimout(function(){
},time)

其中的function是回调函数

停止计时器

clearTimeout(timer)

重复调用定时器

setInterval(function,time)

9.offset

style 是可读写
offset 只读，能读所有样式表