Web API
-
API与Web API-
API
- APl ( Application Programming Interface,应用程序编程接口)是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。
简单理解︰API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。
-
Web API
- Web API是浏览器提供的一套操作浏览器功能和页面元素的API( BOM和DOM).
比如：我们想要浏览器弹出一个警示框,直接使用alert(“弹出”)
-
总结
- 1.API是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现2.
- Web API主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果。
- Web API一般都有输入和输出（函数的传参和返回值)，Web API很多都是方法
- 学习WebAPI可以结合前面学习内置对象方法的思路学习
-
-
DOM
-
DOM简介
-
文档对象模型(Document Object Model，简称DOM )，是W3C组织推荐的处理可扩展标记语言(（HTML或者XML)的标准编程接口.
-
DOM树
-
文档:一个页面就是一个文档，DOM中使用document表示
-
元素:页面中的所有标签都是元素，DOM中使用element表示
-
节点∶网页中的所有内容都是节点（标签、属性、文本、注释等）,DOM中使用node表示
DOM把以上内容都看作对象
-
-
-
获取元素
-
根据ID获取
var element=doucument.getElementById("id") element:对象 id:是一个大小写敏感的字符串，代表所要查找的元素的唯一ID 返回：返回的是一个元素对象 -
根据标签名获取
<ul> <li>1<li> <li>2<li> <li>3<li> <li>4<li> </ul> <script> var lis=doucument.getElementByTagName("li") console.log(lis) console.log(lis[0]) //返回li第一个元素 </script>注意：因为得到的元素是一个对象的集合，所有我们想要操作里面的元素就要遍历
得到的元素是动态的
for(var i=0;i<lis.lenght;i++){ console.log(lis[i]) } -
根据HTML5新增方法获取
doucument.queySelector（“选择器”） //根据指定选择器返回的第一个元素对象
<ul class="box"> <li>1</li> <li>2</li> </ul> <ul class="box"> <li>1</li> <li>2</li> </ul> <script> var firstBox=doucumnet.queySelector(".box") var li=doucumnet.queySelector("li") </script>doucument.queySelectorAll("") //根据指定选择器的所有对象
var allBox=doucument.queySelectorAll(".box") var lis=doucument.queySelectorAll("li") -
特殊元素获取
-
获取body元素
var bodyEle=doucment.body console.log(bodyEle) -
获取html元素
var htmlEle=doucment.doucmentElement console.log(htmlEle)
-
-
-
事件基础
-
JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。
-
事件是由三部分组成:事件源 事件类型 事件处理程序称为事件三要素
-
事件类型：如何触发什么事件 比如:鼠标点击(onclick)，还是鼠标经过，鼠标按下
-
事件处理程序 通过一个函数赋值完成
<button class="btn">点击</button> <script> var btn=doucument.queySelector(.btn) btn.onclick=function(){ alert("弹出") } </script>
-
-
执行事件的步骤
- 获取事件源
- 注册事件（绑定事件）
- 添加事件处理程序（采取函数赋值的形式）
-
常见的鼠标事件
-
-
操作DOM元素属性
JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性
-
改变元素内容
element.innerText //从起始位置到终止位置的内容,但它去除 html标签，同时空格和换行也会去掉
<a>aaa</a> <Script> var a=doucument.querySelector("a") a.innerText="bbb" </script>element.innerHTML //从起始位置到终止位置的内容, 包括html标签，同时保留空格和换行
<a>aaa</a> <Script> var a=doucument.querySelector("a") a.innerHTML="<div>bbb</div>" </script>两者的区别：innerText 不识别Html标签，而innerHTML识别标签
-
src href
<body> <button id="ldh">刘德华</button> <button id="zxy">张学友</button> <img src="img/ldh.png" alt=""/> <script> var ldh=document.querySelector("#ldh") var zxy=document.querySelector("#zxy") var imgs=document.querySelector("img") ldh.onclick=function(){ imgs.src="img/ldh.png" imgs.title="刘德华" } zxy.onclick=function(){ imgs.src="img/zxy.png" imgs.title="张学友" } </script> </body> -
表单的操作元素
value disabled
<body> <button>按钮</button> <input type="text" value="输入内容" /> <script> var btn=document.querySelector("button") var input=document.querySelector("input") btn.onclick=function(){ input.value="被点击" //表单里的值 文字内容通过value来修改 this.disable=true //如果想要把某个表单被禁用不能再点击 this指向btn } </script> </body> -
样式修改属性操作
1.element.style 行内样式操作
2.element.className 类名样式修改
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> div{ width: 200px; height: 200px; background: pink; } .style{ width: 300px; height: 300px; } </style> </head> <body> <div></div> <script> var div=document.querySelector("div") div.onclick=function(){ this.style.backgroundColor="purple" this.className="style" } </script> </body> </html>
-
-
操作元素总结
-
-
节点操作
网页中的所有内容都是节点(标签、属性、文本、注释等），在DOM中，节点使用node来表示。
利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。
-
父级节点
-
parentNode
<body> <div class="fuqin"> <span class="erzi"></span> </div> <script> var erzi=document.querySelector(".erzi") //得到的是离元素最近的的父节点，如果指定的节点没有父节点就返回null console.log(erzi.parentNode) </script> </body>
-
-
子节点
-
childNodes firstElementChild lastElementChild
<body> <ul> <li></li> <li></li> <li></li> <li></li> </ul> <script> var ul=document.querySelector("ul") //子节点 childNodes 所有的子节点 包含元素节点 文本节点 等等 console.log(ul.childNodes) //不推荐 console.log(ul.firstElementChild) //第一个子元素节点 console.log(ul.lastElementChild) //最后一个子元素节点 console.log(ul.children) 所有的子元素节点 </script> </body>
-
-
兄弟节点
-
nextSibling nextElementSibling previousElementSibling
<body> <a>aa</a> <div>div</div> <span>span</span> <script> var div=document.querySelector("div") console.log(div.nextSibling) //返回下一个兄弟节点，包含元素节点，文本节点等等， console.log(div.nextElementSibling)//得到下一个兄弟的元素节点 IE9以上支持 console.log(div.previousElementSibling)//得到上一个兄弟节点 </script> </body>
-
-
创建节点
document.createElement ( 'tagName ’ )
document.createElement()方法创建由tagName指定的HTML元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。
<script> //创建节点 var li=document.createElement("li") </script> -
添加节点
node .appendchild(child) node .insertBefore (child，指定元素)
node.appendchild()方法将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的after伪元素。
<body> <ul> <li>123</li> </ul> <script> var ul=document.querySelector("ul") //创建节点 var li=document.createElement("li") //添加节点 node .appendchild(child) node：父级 child：子级 后面追加元素 ul.appendChild(li) //添加节点 node .insertBefore (child，指定元素) var lis=document.createElement("li") ul.insertBefore(lis,ul.children[0]) </script> </body> -
删除节点
node. removechild(child)
node.removeChild()方法从DOM中删除一个子节点，返回删除的节点。
<body> <button>删除</button> <ul> <li>熊大</li> <li>熊二</li> <li>翠花</li> <li>老鳄鱼</li> </ul> <script> var ul=document.querySelector("ul") var btn=document.querySelector("button") //点击一次依次删除里面元素 btn.onclick=function(){ if(ul.children.length == 0){ this.disabled=true }else{ ul.removeChild(ul.children[0]) } } </script> </body> -
复制节点
node.cloneNode (）
node.cloneNode()方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点
<body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <script> var ul=document.querySelector("ul") //node.cloneNode(true/false) 空号为空或者里面是false 浅拷贝 只复制标签不复制内容 //node.cloneNode(true/false) 空号为空或者里面是true 深拷贝 复制标签复制内容 var fuzhi=ul.children[0].cloneNode(true) ul.appendChild(fuzhi) </script> </body>
-
-
三种动态创建元素
- document.write()
- element .innerHTML
- Document.createElement()
<body>
<button>点击</button>
<p>aaa</p>
<div>
<a>bbb</a>
</div>
<script>
//三种创建元素方式区别
//1.document.write()是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘编写是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
var btn=document.querySelector("button")
btn.onclick=function(){
document.write("<div>123</div>")
}
//2.element.innerHTML
var p=document.querySelector("p")
p.innerHTML="<li>aa</li>"
//3.Document.createElement()
var cj=document.createElement("li")
var div=document.querySelector("div")
div.appendChild(cj)
</script>
</body>
626
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
