前端_JavaScript_API

ゝ一世哀愁。 2022-03-08 15:06 139阅读 0赞

## 事件 ##

事件:鼠标事件,键盘事件,进度事件,表单事件,触摸事件,拖拉事件,其他常见事件.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)返回某个具体页面.