学习目标：掌握API和WebAPI的概念掌握常用浏览器提供的API调用方法能够通过API开发常用的页面交互功能会使用搜索引擎求解ProblemsWebAPIAPI（ApplicationProgrammingInterface，应用程序编程接口）的概念是一些预定义的函数，目的是为应用程序和开发者提供访问一组基于某些软件或硬件的例程的能力，而无需访问源代码，或了解内部运作的细节。任何开发语言都有自己的API特性。输入输出（I/O）API使用方法（console.log()）WebAPI的概念浏览器提供了一套操作浏览器功能和页面元素（BOM和DOM）的API，这里的WebAPI特指浏览器提供的API（一组方法）。WebAPI在后续课程中还有其他含义。掌握浏览器提供的API的常用调用方法。MDN-WebAPIJavaScript的组成ECMAScript-JavaScript的核心定义了javascript的语法规范JavaScript的核心描述了语言的基本语法和数据类型。ECMAScript是一组标准，定义了一个与具体实现无关的语言标准BOM-BrowserObjectModel一组操作Browse浏览器函数的API，可以通过BOM操作浏览器窗口，例如：弹出框，控制浏览器跳转，获取分辨率等。提供的API可以对树上的节点进行操作。BOMBOM的概念BOM（BrowserObjectModel）是指浏览器对象模型。浏览器对象模型提供了一种独立于内容的对象结构，可以与浏览器窗口进行交互。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶级对象，其他对象是该对象的子对象。我们在浏览器中的一些操作可以使用BOM方法来编程，比如：刷新浏览器、返回、转发、在浏览器中输入一个URL等。BOM窗口的顶层对象window就是顶层浏览器的对象。当调用window时，使用下面的属性和方法时，window可以省略注意：window下的一个特殊属性window.namedialogboxalert()prompt()confirm()pageloadeventonloadwindow.onload=function(){//执行当页面加载完成时//当页面加载完所有内容（包括图片、脚本文件、CSS文件等）时执行}onunloadwindow.onunload=function(){//当用户退出页面时执行}timersetTimeout()andclearTimeout()在指定的毫秒数到达后执行指定的函数，只执行一次//创建一个定时器，1000毫秒后执行，返回定时器的指针vartimerId=setTimeout(function(){console.log('HelloWorld');},1000);//取消定时器的执行clearTimeout(timerId);setInterval()和clearInterval()函数定时调用，可以按照给定的时间（以毫秒为单位）周期调用函数//创建一个定时器，每1秒调用一次vartimerId=setInterval(function(){vardate=newDate();console.log(date.toLocaleTimeString());},1000);//取消定时器的执行clearInterval(timerId);location对象location对象是window对象下的一个属性。窗口对象位置可以随时省略。location可以获取或设置浏览器地址栏中的URL地址。URLURLURL组成scheme://host:port/path?query#fragmentscheme:常用的通信协议，如http、ftp、maito等host:宿主服务器（计算机）域名系统（DNS）主机名或我Paddressport：端口号整型，可选，省略则使用scheme的默认端口，如http默认端口为80path：路径为字符串，由零个或多个'/'符号分隔，一般使用表示主机上的目录或文件地址。query：可选查询，用于向动态网页传递参数，可以有多个参数，用'&'符号分隔，每个参数的名称和值用'='符号分隔。例如：name=zsfragment：信息片段字符串，anchor.location有哪些成员？使用chrome控制台查看MDNMDN成员assign()/reload()/replace()hash/host/hostname/search/href...history对象back()forward()go()navigator对象userAgent可以通过userAgent判断用户浏览器平台类型浏览器的平台类型可以通过平台来判断。DOM文档对象模型（DocumentObjectModel，简称DOM）是W3C组织推荐的用于处理可扩展标记语言的标准编程接口。在网页上，组织页面（或文档）的对象以树状结构组织，用于表示文档中对象的标准模型称为DOM。文档对象模型的历史可以追溯到20世纪90年代后期微软和Netscape之间的“浏览器大战”。为了在JavaScript和JScript中进行生死较量，双方大规模地赋予了浏览器强大的功能。微软在网页技术中加入了很多专有的东西，包括VBScript、ActiveX、微软自己的DHTML格式等等，使得很多网页在非微软的平台和浏览器上无法正常显示。DOM是当时酿造的杰作。DOM也称为文档树模型文档：一个网页可以称为文档节点：一个网页中的所有内容都是一个节点（标签、属性、文本、评论等）元素：一个网页中的标签属性:标签的属性DOM经常执行操作获取元素动态创建元素操作元素（设置其属性或调用其方法）事件（何时做相应操作）获取页面元素根据id获取元素vardiv=document.getElementById('main');console.log(div);//获取的数据类型为HTMLDivElement，对象均为类型。//HTMLDivElement<--HTMLElement<--Element<--Node<--EventTarget根据标签名获取元素vardivs=document.getElementsByTagName('div');for(vari=0;i
我不会生成标签
';console.log(box.innerText);HTML转义字符""''&&<//大于大于一个空格??form元素属性值用于获取大部分表单元素的内容（option除外）type可以获取输入标签的类型（输入框或复选框等）()移除标签内联属性和元素。属性区别：以上三种方法用于获取任意内联属性。样式操作varbox=document.getElementById('box');box.style.width='100px';box.style.height='100px';box.style.backgroundColor='红色';类名操作varbox=document.getElementById('box');box.className='clearfix';创建元素的三种方式document.write()document.write('新设置的内容标签也可以生成
');innerHTMLvarbox=document.getElementById('box');box.innerHTML='新内容新标签
';document.createElement()vardiv=document.createElement('div');document.body.appendChild(div);性能问题innerHTML方法需要避免在循环中多次使用，因为它将解析字符串。可以替换为字符串或者数组，优化后设置为innerHTML。该节点的性能类似于document.createElement。节点操作varbody=document.body;vardiv=document.createElement('div');body.appendChild(div);varfirstEle=body.children[0];body.insertBefore(div,firstEle);body.removeChild(firstEle);vartext=document.createElement('p');body.replaceChild(text,div);nodehierarchy关注父子属性，兄弟属性绘制说明varbox=document.getElementById('box');console.log(box.parentNode);console.log(box.childNodes);console.log(box.children);控制台。log(box.nextSibling);console.log(box.previousSibling);console.log(box.firstChild);console.log(box.lastChild);注意childNodes和children的区别，childNodes获取子节点，和children获取子元素nextSibling和previousSibling获取节点，获取到的元素对应的属性为nextElementSibling和previousElementSibling获取元素。)replaceChild()节点层级，属性parentNodechildNodeschildrennextSibling/previousSiblingfirstChild/lastChild事件详解注册/删除事件的三种方式varbox=document.getElementById('box');box.onclick=function(){console.log('点击后执行');};box.onclick=null;box.addEventListener('click',eventCode,false);box.removeEventListener('click',eventCode,false);box.attachEvent('onclick',eventCode);box.detachEvent('onclick',eventCode);functioneventCode(){console.log('点击后执行');}事件对象的三个阶段捕获阶段当前目标阶段冒泡阶段。eventPhase属性可以查看事件触发时的阶段和事件对象的属性和方法event.type获取事件类型clientX/clientY所有浏览器都支持，窗口位置pageX/pageYIE8以前不支持，页面位置事件。目标||event.srcElement用于获取触发事件的元素event.preventDefault()取消默认行为并阻止事件传播。标准方法event.stopPropagation();IE低版本event.cancelBubble=true;常用的鼠标和键盘事件已在标准中被丢弃。释放鼠标按钮时触发onmouseup。按下鼠标按钮时触发onmousedown。鼠标移动时触发onmousemove。