JS笔记（三）

十四 Web APis

API是为程序员提供的一个端口，帮助我们实现某种功能，不必纠结内部如何实现

14.1 DOM

14.1.1 DOM树

14.2 获取页面元素

①getElementById获取元素

使用·console.dir返回的是元素对象，更好查看里面的属性和方法

②根据标签名获取元素getElementsByTagName
返回的是元素对象的集合，以伪数组形式存储

var lis=document。getElementsByTagName('li')

如果页面中没有这个元素则返回一个空的伪数组
若要获取父元素内部所有子元素，可以用这种形式：父元素.GetElementByTagName(‘子元素’)，父元素必须是指定的元素，加个索引号父元素（）

③通过HTML5新增方法获取（getElementByClassName）
（一）

（二）
返回指定选择器的第一个对象元素(querySelector)

<div class='box'>盒子1</div>
document.querySelector('.box')

（三）**返回指定选择器的所有元素对象（querySelectorAll）**取过来的对象是以伪数组形式存在

<div class='box'>盒子1</div>
<div class='box'>盒子2</div>
document.querySelectorAll('.box')

14.3 获取页面特殊元素

HTML与Body元素

14.4 事件基础

14.4.1事件由三部分组成：

• 事件源：事件被触发的对象，比如按钮
• 事件类型：如何触发什么时间，比如鼠标点击onclick触发
• 事件处理程序：通过一个函数赋值的方式，如弹出对话框

一个‘唐伯虎’按钮，点击了之后会弹出点秋香三个字

14.4.2执行事件的步骤

14.3 操作元素

14.3.1 修改元素内容

以上为修改元素内容的案例

两者都可以获取或者改变元素的内容
innerText与innerHTML区别

• 前者不能识别html元素，后者可以识别
  
  输出p的内容时，前者内容里面没有span字样且去掉了空格和换行而后者有

14.3.2修改元素属性

案例

onclick里面修改的src与title是元素的属性，鼠标一点击按钮就会改变图片。
案例。根据不同时间显示不同问候语

14.3.3 修改表单属性

可利用DOM操作以下表单元素如type，value，checked等等

若想直接修改栏目value的值直接input.value=。。。就行了
若想点击一次按钮就弃用此按钮，使用disable，this/btn.disable=true即可

算法：利用flag变量一正一反的按钮来改变文本框的属性，来判断flag的值，如果是1就切换文本框，flag设置为0；如果是0就切换密码框，flag设置为1，点击一次之后flag一定要变换一次

14.3.4 修改样式属性

可以修改元素大小、颜色、位置等样式
①element.style行内样式操作，适用于样式少，功能简单的样式修改
如果要修改div背景颜色

div.style,backgroundColor='pink'
//修改之后的样式是行内样式，权重高于css

案例 循环精灵图
因为精灵图图标有规律从上到下每个图标相隔44px且第一个图标y轴为0，依次类推，下面的图标y轴都是负数，lis[i].style.backgroundPosittion=‘0 -’+index+‘px’。第一个0是x坐标后面的封号与它有空格表示y轴的负号。用for循环遍历取出来的每个小li，每个小li安放一个图标

获得焦点：onfocus
失去焦点：onblur

②element.className类名样式操作

如果想要保留原先的类名，可以这样写

this。className='原先的类名  修改样式的类名'

14.4排他思想（算法）

如果有同一组元素，想要让某个元素实现某种样式，就要用循环的排他思想：

• 所有元素清除样式（干掉其他人）
• 给当前元素设置样式（留下我自己）

14.5鼠标事件

• 鼠标经过onmouseover

• 鼠标离开onmouseout

14.6 元素自定义的操作

14.6.1获取元素的属性值

元素属性可以由我们程序员自定义
方法

• element.属性：获取的是元素内定属性值例如id，class
• element.getAttribute(‘属性’)：得到的是自定义元素的属性值`

14.6.2 设置元素属性值

更改属性值
方法

• element.属性=更改的内容
• element.setAttribute(‘属性’,‘值’):主要针对自定义属性（也可以用这个修改内定属性）

移除属性
element.removeAttribute(‘属性’)

14.7 H5自定义属性

自定义属性的目的：为了保存并使用数据
H5规定自定义属性data-开头作为属性名并且赋值例如

<div daya-index='1'></div>

获取自定义属性

element.getAttribute('data-index');

14.8 节点操作

网页中所有内容都是节点（标签、属性、文本、注释等）
利用父子兄节点关系获取元素
优点：逻辑性强

14.8.1节点层级（子节点）

①父节点parentNode

最后一句的console可以获得box（erweima的父亲），比之前的方法简便（注：得到的是离元素最近的父级节点）

②子节点parentNode.childNode

console.log(ul.childNodes);

但是返回的是所有子节点包括元素节点、文本节点等等

parentNode.children返回的是所有子节点，比较常用

console.log(ul.children);

parentNode.firstChildren
返回的是第一个子节点，找不到就返回Null，同样也是包含所有节点

parentNode.lastChildren
返回的是最后一个子节点，找不到就返回Null，同样也是包含所有节点

parentNode.firstElementChild
返回第一个子元素节点

（两种方法均只有IE9以上才支持）
parentNode.lastElementChild
返回最后一个子元素节点

实际开发中，一般用下面parentNode.children这种方法来取第一个或者最后一个元素子节点

14.8.2节点层级（兄弟节点）

node.nextSibling
返回当前元素的下一个兄弟节点，包含所有节点

node.previousSibling
返回当前元素的上一个兄弟节点，包含所有节点

node.nextElementSibling
返回当前元素的下一个兄弟元素节点

（兼容性问题）
node.previousElementSibling
返回当前元素的上一个兄弟元素节点

14.8.3 创建与添加节点

创建节点

添加节点

创建了li还要添加进去才会显示。若ul中已有了一个li则添加的li在原有li后面追加

14.8.4 删除节点

从DOM中删除节点并返回删除的节点

node.removeChild(child)

14.8.5复制节点（克隆节点）

如果括号为空或者里面是false为浅拷贝，只复制标签不复制内容，如果想深拷贝就要node.cloneNode(true)，把内容也一起复制过来。

node.cloneNode()

14.8.6 三种动态创建元素的区别（重点了解）

十五、事件高级

15.1 注册事件

即给元素添加事件，注册事件有两种方式

• 传统方式（之前已学）
  

• 方法监听注册方式
  方法①addEventListener()
  
  

实例

方法②attachEvent()（ie9以前的版本才支持）
使用方法与addEventListener()一模一样

15.2 删除事件

15.2.1传统方式删除事件

15.2.2 方法监听删除方式

方法①（重点掌握）removeEventListener
把fn函数写到外面，注册事件时直接调用函数fn，删除事件再直接调用就行，此时调用不用写括号

方法②（ie9之前适用）detachEvent

15.3 DOM事件流

father盒子包含了son盒子，最后执行结果也是先弹出父亲的窗口再弹出儿子的窗口，前提是父亲儿子都要处于捕获阶段（true）

father盒子包含了son盒子，document包含了father，最后执行结果也是先弹出儿子的窗口再弹出父亲的窗口，最后document，前提是父亲儿子document都要处于冒泡阶段（false或者空白）

15.4 事件对象

15.4.1事件对象概念

var div=document.querySeleyor('div')
div.onclick=function(event){}

//event就是一个事件对象，写到侦听函数的小括号里面，当作形参来看，事件对象只有有了事件才会存在，是系统给我们自动创建的，不需要我们传递参数。事件对象是事件一系列相关数据的集合，例如鼠标点击事件里面就包含了鼠标点击位置的坐标等等信息。

15.4.2 事件对象常见属性和方法

一定要有形参e才能引用输出e.event
div的两个输出都是div，都是e.target与this有区别，例如下面一段中this输出ul，而e.target输出的是li，因为要点击ul里面的li才能触发效果。

阻止事件冒泡（面试）
标准写法：事件对象里面的stopPropagation()方法

儿子添加了阻止冒泡，点击儿子儿子会弹出，但是父亲和document都不会弹出，点击父亲就会继续冒出父亲和document。

15.5事件委托（事件委派）

原理（重点）：不是给每个子节点单独设置事件监听器，而是事件监听器设置在父节点上，然后利用冒泡原理影响设置每个子节点
案例·

通过事件委托，点击其中任意一个li都能使弹窗弹出，因为li可以影响ul，让ul执行函数。

通过target来指定，点击到哪个li这个li就变色

15.6常用鼠标事件

15.6.1 阻止默认事件（了解）

第一个禁止右键，第二个禁止选中文字

15.6.2 阻止默认事件

重点：page，了解：screen，page是鼠标点击在页面文档的坐标，滑动到页面下面点击坐标会改变，client是鼠标点击在可视区的坐标，滑动到页面下面点击坐标不会改变

案例：跟随鼠标的天使

15.7 常用的键盘事件

15.7.1 键盘常用事件

当这三个都有指令时，先去执行down，再执行press，最后执行keyup

15.7.2键盘事件对象（keycode）

案例：按s定位光标至搜索框

keydown和keypress在文本框里面的特点，先触发他们两个的事件，此时文字还没输入文本框中。key事件触发的时候，文字已经落入文本框中了。

手打收集不易，望动动小手点个赞