WebAPI学习

MDN详细API: https://developer.mozilla.org/zh-CN/docs/Web/API

1.什么是DOM

DOM是用来处理可扩展标记语言的标准编程接口

2.获取元素

（1）通过ID获取

var element = document.getElementById(id);

1.element是一个 Element 对象。如果当前文档中拥有特定ID的元素不存在则返回null.
2.id是大小写敏感的字符串，代表了所要查找的元素的唯一ID.
3.返回一个匹配到 ID 的 DOM Element 对象。若在当前 Document 下没有找到，则返回 null。

（2）根据标签名获取

var elements = document.getElementsByTagName(name);

1.返回获取过来对象的集合，以伪数组的形式存储，可遍历输出
2.获取的内容是动态的

（3）通过HTML5新增的方法获取

class

var elements = document.getElementsByClassName(names); // or:
var elements = rootElement.getElementsByClassName(names);

选择器

element = document.querySelector(selectors);

1.表示文档中与指定的一组CSS选择器匹配的第一个元素,一个 HTMLElement对象。如果没有匹配到，则返回null。
2.如果您需要与指定选择器匹配的所有元素的列表，则应该使用querySelectorAll() 。

（4）获取body

var objRef = document.body;
document.body = objRef;

（5）获取html

var element = document.documentElement;

3.事件基础（触发——响应机制）

组成：事件源(获取元素) 事件类型(onclick…) 事件处理程序
常见鼠标事件

4.操作元素

(1)修改元素内容

var renderedText = HTMLElement.innerText;
HTMLElement.innerText = string;

const content = element.innerHTML;
element.innerHTML = htmlString;

1.设置元素的 innerHTML 将会删除所有该元素的后代并以上面给出的 htmlString 替代。
2.如果要向一个元素中插入一段 HTML，而不是替换它的内容，那么请使用 insertAdjacentHTML() 方法。

innerText与innerHtml区别：
1.innerText不识别html标签且去除空格和换行
2.innerHtml识别html标签W3C标准
3.均可读写

（2）改变元素属性

var img=document.querySelector('img')
img.src='路径'

（3）表单操作
输入框内容 input.value='内容'
按钮禁用 btn.disabled=true or this.disabled=true

（4）行内样式改变

//element.style
this.style.fontSize='200px'

（5）类名改变(覆盖原来的类名)

element.className='change'
element.className='change first'//多类名，可用来在原有的基础上添加

（6）获取属性值

element.属性  //获取内置属性值
element.getAttribute('属性')   //获取自定义属性
element.dataset.属性   //h5新增的获取自定义属性的方法（必须gata-开头的）

（7）设置属性值

element.属性='值'
element.setAttribute('属性',值)   //主要设置自定义属性

（8）移除属性

element.removeAttribute('属性')

5.节点操作

元素节点 nodeType 1
属性节点 nodeType 2
文本节点（文字、空格、换行等） nodeType 3

1.获取父节点parentNode

element.parentNode  //得到的是距离元素最近的父节点

1.获取子节点

element.childNodes   //得到所有子节点，包括元素节点文本节点（标准）
element.children   //得到所有元素子节点（非标准）
element.firstChild   //第一个子节点，不管文本节点还是元素节点
element.lastChild   //最后一个子节点，不管文本节点还是元素节点
element.firstElementChild   //第一个子元素节点，IE9以上才支持
element.lastElementChild   //最后一个子元素节点，IE9以上才支持
//实际开发中的用法
element.children[0]
element.children[element.children.length-1]

2.获取兄弟节点

element.nextSibling   //下一个兄弟节点，，不管文本节点还是元素节点
element.previousSibling   //上一个兄弟节点，，不管文本节点还是元素节点
element.nextElementSibling   //下一个兄弟元素节点  IE9以上才支持
element.previousElementSibling   //上一个兄弟元素节点  IE9以上才支持

3.创建节点

var li = document.createElement('li')

4.添加节点

//node(父节点).appendChild(孩子)   后面追加
ul.appendChild('li')
//node.inserBefore(child,指定元素)  指定元素前面插入
ul.inserBefore(li,ul.children[0])

5.删除节点

node.removeChild(child)  //删除父元素中的第一个子节点

6.复制节点（克隆节点）

node.cloneNode();  //括号为空或者里面是false浅拷贝只复制标签不复制里面的内容
node.cloneNode(true);  //括号为true深拷贝复制标签复制里面的内容

7.三种创建元素方式的区别

document.write()  //直接将内容写入内容流，但是文档流执行完毕，这会将导致页面全部重绘
innerHtml  //多个拼接字符串时间较慢（若改用数组的方式时间比document.createElement('li')快，结构复杂）
document.createElement('li')  //appendChild时间较快，结构清晰

6.事件高级

1.注册事件（绑定事件）

target.addEventListener(type, listener, options);

type表示监听事件类型的字符串click。
listener当所监听的事件类型触发时，会接收到一个事件通知
options 可选 一个指定有关 listener 属性的可选参数对象

eventTarget.attachEvent(eventNameWithOn,callback)  //eventNameWithOn  事件类型     callback处理函数  IE9以前的版本支持

2.删除事件（解绑事件）

element.onclick=null   //传统方式
//element.removeEventListener(type, listener, options);
element.removeEventListener('click',fn);
element.detachEvent('onclick',fn);

3.DOM事件流
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。
注意

1. Js 代码中只能执行捕获或者冒泡其中的一个阶段。2. onclick和attachEvent只能得到冒泡阶段。
2. addEventListener(type,listener[,useCapture])第三个参数如果是true，表示在事件捕
   获阶段调用事件处理程序;如果是 false(不写默认就是false )，表示在事件冒泡阶段调用事件处理程序。
   4实际开发中我们很少使用事件捕获，我们更关注事件冒泡
   5．有些事件是没有冒泡的，比如onblur、onfocus、onmouseenter、onmouseleave
   6．事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事件。

4.事件对象

e.target  返回触发事件的对象  标准
e.srcElement  返回触发事件的对象  非标准ie6-8使用
e.type返回事件的类型比如click mouseover 不带on
e.cancelBubble该属性阻止冒泡非标准ie6-8使用
e.returnValue该属性阻止默认事件(默认行为)非标准ie6-8使用 比如不让链接跳转
e.preventDefault()该方法阻止默认事件(默认行为)标准比如不让链接跳转
e.stopPropagation()阻止冒泡标准

5.事件委托

定义：不是每个子节点单独设置事件监听器,而是事件监听器设]在其父节点上,然后利用冒泡原理影响设置每个子节点。

6.鼠标事件

1.禁止鼠标右键菜单
contextmenu主要控制应该何时显示上下文菜单.主要用于程序员取消默认的上下文菜单

document . addEventListener( ' contextmenu', function(e) {
	e.preventDefault();
})

2.禁止鼠标选中( selectstart开始选中)

document. addEventLi stener ( selectstart' , function(e) {
	e. preventDefault() ;
}

e.clientX返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX返回鼠标相对于文档页面的X坐标IE9+ 支持
e.pageY返回鼠标相对于文档页面的Y坐标1E9+ 支持
e.screenX返回鼠标相对于电脑屏幕的X坐标
e.screenY返回鼠标相对于电脑屏幕的Y坐标

6.键盘事件

onkeyup某个键盘按键被松开时触发
onkeydown某个键盘按键被按下时触发
onkeypress某个键盘按键被按下时触发但是它不识别功能键 比如ctrl shift箭头等

7.BOM概述

BOM ( Browser Object Model )即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window.

8.window对象的常见事件

1.窗口加载事件

window.onload = function() {}
window.addEventListener ("load",function(){});
document . addEventListener ( ' DOMContentLoaded' , function() { }

window.onload是窗口页面)加载事件当文档内容完全加载完成会触发该事件(包括图像脚本文件、CSS文件等)，就调用的处理函数。

2.调整窗口大小事件

window.onresize = function(){ } 
window.addEventLi stener ("resize",function() {});

3.定时器

//setTimeout()定时器
window.setTimeout (调用函数，[延迟的亳秒数]);
setTimeout0方法用于设置-个定时器,该定时器在定时器到期后执行调用函数。

//setInterval()定时器
window.setInterval (回调函数，[间隔的亳秒数]);
setInterval()方法重复调用一个函数,每隔这个时间,就去调用一次回调函数。

//停止setTimeout()定时器
window.clearTimeout (timeoutID)

//停止setInterval()定时器
window. clearInterval (intexvalID) ;

4.Location对象

//Location对象的属性
location.href  //获取或者设置整个URL
location. host  //返回主机(域名) www.itheima.com
location.port  //返回端口号如果末写返回空字符串
location.pathname  //返回路径
location. search  //返回参数
location. hash  //返回片段#后面内容常见于链接锚点

//Location对象的方法
location.assign()  //跟href -样，可以跳转页面(也称为重定向页面)
location.replace()  //替换当前页面，因为不记录历史，所以不能后退页面
location.reload()  //重新加载页面，相当于刷新按钮或者f5如果参数为true强制刷新ctrl+f5

5.history对象
window对象给我们提供了-个history对象,与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的URL.

back()  //可以后退功能
forward()  //前进功能
go(参数)  //前进后退功能参数如果是1前进1个页面如果是-1后退1个页面