事件
事件:鼠标事件,键盘事件,进度事件,表单事件,触摸事件,拖拉事件,其他常见事件.GlobalEventHandler接口
DOM(文档对象模型)是JavaScript操作网页的接口,将网页转为一个树状结构,所有的节点都有借口.
DOM的最小单位是节点,节点的类型有七种且都继承Node,Document(整个文档树的顶层节点),DocumentType(doctype标签),
Element(网页的各种HTML标签),Attrbute(网页元素的属性),Text(标签之间或标签包含的文本),Commnet(注释),
DocumentFragment(文档的片段).浏览器原生提供document节点,代表整个文档.网页的第一个标签<html>,作为根节点,其他节点有三种层级关系:父节点关系,子节点关系,同级关系.
DOM:nodeName:节点的名称nodeValue节点的值nodeType:节点的类型.除根节点,所有节点都有:父节点,子节点,同级节点.
(1):子节点: childNodes:获取子节点列表 firstChild:第一个节点 lastChild:最后一个节点 children: 元素的子节点 firstElementChild:第一个子元素节点 lastElementChild :最后一个节点
兄弟节点: previousSibling:前一个兄弟节点 nextSibling下一个兄弟节点 previousElementSibling:前一个兄弟元素节点. nextElementSibling :后一个兄弟元素节点.
创建节点: createElement() : 创建新的元素节点 createTextNode():创建一个新的文本节点
node_textContent : 获取或设置元素节点的文本内容 node_innerHTML :获取或设置元素的HTML内容
向上获取:parentNode 获取已知节点的父节点. parentElement和closest
向下获取:querySelector() querySelectorAll() children firstchildren lastChildren chilNodes
兄弟元素: nextElementSibling prevliousElementSibling nextSibling previousSibling
2.document(4):
getElementsByName() : 返回带有"指定名称"的节点树对象的"集合""==返回元素的数组.
getElementsByTagName() : 返回带有指定”标签名的节点对象”的集合,返回的顺序与在文档中相同.
getElementById() : 获取元素ID.
getElementsByClassName(classname) :返回所有指定class元素相同的元素.
document.querySelector("CSS选择器") //返回的内容始终找到的是HTML中指定的第一个元素.
document.querySelectorAll("CSS选择器") // 函数返回所有元素,它找到匹配你提供的任何选择器.
3.属性操作(3):
获取属性 getAttribute() : 通过元素节点的属性名称获取属性的值.
设置属性 setSttribue() : 创建或改变元素节点的属性.
删除属性 removeAttribute : 通过元素节点的属性名称删除节点属性.
4.节点操作(8):
插入节点 appendChild() :在指定节点的最后一个子节点列表之后插入一个新的子节点
插入节点 insertBefore() : 在已有的子节点前插入一个新的子节点.
删除节点 removeChild() : 删除子节点列表的某个节点,删除成功,返回被删除的节点,否返回null.
复制节点 cloneNode 语法: 节点.cloneNode(true/flase). 复制当前节点及其所有子节点 flase 仅复制当前节点.
替换节点 replaceChild() : 实现子节点(对象)的替换,返回被替换对象的引用.
创建元素节点createElement:创建元素节点,此方法可返回一个Element对象.语法document.createElement(tagName).
创建文本节点 createTextNode : 创建新的文本节点,返回新创建的Text节点. 语法: document.createNode(data).
创建属性节点createAttribute :创建属性节点.语法: document.createAttribute(元素元素属性).
5.文本操作(6):
insertData(offset,String) : 从offset指定位置插入string.
appendData(String) : 将string插入文本节点的末尾处.
deletaDate(offset,count) : 从offset起删除count个字符.
replaceData(off,count,string) 从off将count个字符用string替代.
splitData(offset) 从offset起将文本分成两个节点.
substring(offset,count) 返回由offset起的count个节点.
6.小操作
console.log(document.getElementsByTagName("*"));
console.log(document.all);
事件:所有的元素都有事件,为事件绑定函数,元素事件发生,就会触发对应的函数.
HTML与JS之间的交互通过事件来实现,事件是文档与浏览器窗口发生的一些特定的交互瞬间,每种动作:load,click等.
冒泡事件:由里向外,最里层的元素先执行,然后冒泡到外层.
捕获事件:由外到内,最外层的元素先执行,然后传递到内部.
只需修改 addEventListener的第三个参数，true 为捕获，false 为冒泡，默认为冒泡
在页首的脚本添加onload事件,可以使其延迟加载.等待DOM结构完成之后,故最好将外部js脚本放在页尾.
常见事件:
onclick 鼠标单击时触发的事件 ondblclick 鼠标双击时触发的事件 onmouseover 鼠标移动到某对象范围的上方时触发此事件
onmouseout 鼠标离开某对象范围时触发 onmousedown 鼠标按下时触发此事件 onmouseup 鼠标按下后松开鼠标时触发此事件
onmousemove 鼠标移动时触发此事件
键盘事件:
onkeypress 键盘上的某个键被按下并且释放时触发此事件 onkeydown 键盘上某个按键被按下时触发此事件
onkeyup 当键盘上某个按键被按放开时触发此事件
页面相关事件:
onscroll 浏览器的滚动条位置发生变化时触发此事件 onload 页面内容完成时触发此事件
onbeforeunload 当前页面的内容将要被改变时触发此事件 onerror 出现错误时触发此事件
onmove 浏览器的窗口被移动时触发此事件 onresize 当浏览器的窗口大小被改变时触发此事件
onstop 浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断 onunload 当前页面将被改变时触发此事件
表单相关事件:
onfocus 当某个元素获得焦点时触发此事件 onchange 当前元素失去焦点并且元素的内容发生改变而触发此事件
onsubmit 一个表单被递交时触发此事件 onreset 当表单中RESET的属性被激发时触发此事件
页面编辑事件:
onbeforecopy 当页面当前的被选择内容将要[复制]到浏览者系统的剪贴板前触发此事件
onbeforecut 当页面当前的被选择内容将要[剪切]到浏览者系统的剪贴板前触发此事件
onbeforeeditfocus 当前元素将要进入[编辑]状态
onbeforepaste 内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发此事件
onbeforeupdate 当浏览者[粘贴]系统剪贴板中的内容时通知目标对象
oncontextmenu 当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件
oncopy 当页面当前的被选择内容被[复制]后触发此事件 oncut 当页面当前的被选择内容被剪切时触发此事件
onpaste 当内容被粘贴时触发此事件 onselect 当文本内容被选择时的事件
onselectstart 当文本内容选择将开始发生时触发的事件ondrag 当某个对象被拖动时触发此事件 [活动事件]
ondragdrop 一个外部对象被鼠标拖进当前窗口或者帧
ondragend 当鼠标拖动结束时触发此事件，即鼠标的按钮被释放了
ondragenter 当对象被鼠标拖动的对象进入其容器范围内时触发此事件
ondragleave 当对象被鼠标拖动的对象离开其容器范围内时触发此事件
ondragover 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragstart 当某对象将被拖动时触发此事件 ondrop 在一个拖动过程中，释放鼠标键时触发此事件
onlosecapture 当元素失去鼠标移动所形成的选择焦点时触发此事件
数据绑定:
onafterupdate 当数据完成由数据源到对象的传送时触发此事件
oncellchange 当数据来源发生变化时
ondataavailable 当数据接收完成时触发事件
ondatasetchanged 数据在数据源发生变化时触发的事件
ondatasetcomplete 当来子数据源的全部有效数据读取完毕时触发此事件
onerrorupdate 当使用onBeforeUpdate事件触发取消了数据传送时，代替onAfterUpdate事件
onrowenter 当前数据源的数据发生变化并且有新的有效数据时触发的事件
onrowexit 当前数据源的数据将要发生变化时触发的事件
onrowsdelete 当前数据记录将被删除时触发此事件
onrowsinserted 当前数据源将要插入新数据记录时触发此事件
外部事件:
onafterprint 当文档被打印后触发此事件 onbeforeprint 当文档即将打印时触发此事件
onfilterchange 当某个对象的滤镜效果发生变化时触发的事件 onhelp 当浏览者按下F1或者浏览器的帮助选择时触发此事件
onpropertychange 当对象的属性之一发生变化时触发此事件 onreadystatechange 当对象的初始化属性值发生变化时触发此事件
BOM:浏览器对象模型.浏览器内置JavaScript脚本语言,也就是内置JS引擎.提供各种借口.让JS控制浏览器各种功能.
location用于存储当前页面URL信息的对象.
方法: reload(): 无参数，重新载入当前页面,也可以location=location.
Navigator 对象包含有关浏览器的信息
方法: appCodeName：浏览器名字符串表示 appName：返回浏览器的名称 appVersion：返回浏览器的平台和版本信息
platform：返回运行浏览器的操作系统平台 userAgent 返回由客户机发送服务器的user-agent头部的值
screen对象用于获取用户的屏幕信息。
方法: availHeight:可用的屏幕高度. availWidth：窗口可用的屏幕宽度. colorDepth：浏览器表示的颜色位数.
pixelDepth：用户浏览器表示的颜色位数. height：屏幕的像素高度. width：屏幕的像素宽度.
history对象: back()返回前一个url forward()返回下一个url go(+1/-1)返回某个具体页面.浏览器实现原理
浏览器把url变成屏幕显示的网页
1. 浏览器首先使用 HTTP 协议或 HTTPS 协议，向服务端请求页面；
2. 把请求回来的 HTML 代码经过解析，构建成 DOM 树；
3. 计算 DOM 树上的 CSS 属性；
4. 最后根据 CSS 属性对元素逐个进行渲染，得到内存中的位图；
5. 一个可选的步骤是对位图进行合成，这会极大地增加后续绘制的速度；
6. 合成之后，再绘制到界面上。
在进行上述操作时,不需要等到上一步骤完全结束，就开始处理上一步的输出，这样我们在浏览网页时，才会看到逐步出现的页面。HTTP协议格式大概划分如下:
path 是请求的路径完全由服务端来定义，没有很多的特别内容；
version 几乎都是固定字符串；
response body 是我们最熟悉的 HTML;
HTTP Method（方法）:GET,POST,HEAD,PUT,DELECT,CONNECT,OPTIONS,TAACE.
HTTP Status code（状态码）:100,200,300,400,500等.
Status text（状态文本）:如304 又是一个每个前端必知必会的状态，产生这个状态的前提是：客户端本地已经有缓存的版本，并且在 Request 中告诉了服务端，当服务端通过时间或者 tag，发现没有更新的时候，就会返回一个不含 body 的 304 状态
HTTP Head (HTTP 头):可以看作一个键值对.
HTTP Request Body:HTTP 请求的 body 主要用于提交表单场景.一些常见的 body 格式是：application/json或application/x-www-form-urlencoded或multipart/form-data或text/xml.
HTTPS 有两个作用，一是确定请求的目标服务端身份，二是保证传输的数据不会被网络中间节点窃听或者篡改。
HTTP 2.0 最大的改进有两点，一是支持服务端推送，二是支持 TCP 连接复用。
如何解析请求回来的 HTML 代码，如何构建的DOM树
浏览器是如何把 CSS 规则应用到节点上，并给这棵朴素的 DOM 树添加上 CSS 属性的。
CSS 计算是把 CSS 规则应用到 DOM 树上，为 DOM 结构添加显示相关属性的过程。
浏览器中的位图操作部分
包括渲染、合成和绘制三个部分。渲染过程把元素变成位图，合成把一部分位图变成合成层，最终的绘制过程把合成层显示到屏幕上。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。