JS的组成,ECMAScript 和DOM(页面文档对象模型) 和BOM(浏览器对象模型)
Wep APIs 主要是学习浏览器页面交互功能
API:应用程序编程接口,是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。
简单理解就是给程序员提供的一种工具,以便能更轻松的实现想要完成的功能。
Wep API:是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
DOM:文档对象类型,处理HTML或XML的标准编程接口。W3C已经定义了一系列的DOM接口可以改变网页的内容、结构和样式。
文档;一个页面就是一个文档 document表示
元素:页面中所有标签都是元素,用element表示。
节点:网页中所有内容都是节点(标签、属性、文本、注释等),用node表示。
DOM把以上内容看作是对象。
1、如何获取页面元素?
DOM在实际开发中主要用来操作元素
(1)可以根据ID获取: getElementByld() document.getElementById - Web API 接口参考 | MDN (mozilla.org)
注意:因为我们文档页面从上到下加载,所以得先有标签,所以我们script写到标签的下面。
根据标签名获取、通过HTML5新增的方法获取,特殊元素获取。
<body>
<div id='time'>2019-9-9</div>
<script>
var timer= document.getElementById('time')
console.log(timer)
</script>
</body>
其中console.dir(timer)可以打印我们返回的元素对象,更好的查看里面的属性和方法。
(2)根据标签名获取 getElementsByTagName()返回指定标签名的对象的集合。
还可以获取某个元素(父元素)内部所有所有指定标签的子元素,父元素必须是单个对象(必须指明哪一个元素对象),获取的时候不包括父元素自己。
(3)通过HTML5新增的方法获取
<body>
<div class='box'>盒子</div>
<div class='box'>盒子</div>
<div id='nav'>
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
var boxs = document.getElementsByClassName('box')
console.log(boxs)
</script>
</body>
返回的是伪数组
(4)querySelector()返回指定选择器的第一个元素对象。切记里面的选择器需要加符号,类加. ,id加#号
querySelectorAll(‘选择器')返回指定选择器的所有对象
(5)获取body元素
document.body
2、事件
js使我们有能力创建动态页面,而事件是可以被js侦测到的行为。从触发到响应
网页中的每个元素都可以产生某些可以触发js的事件,例如:我们可以在用户点击某按钮时产生一个事件,然后去执行某些操作。
事件由三部分组成:事件源、事件类型、事件处理程序
事件源:事件出发的对象,例如按钮
事件类型:如何触发?比如鼠标点击触发(onclick)经过触发等
事件处理程序:通过一个函数赋值的方式来完成。
<body>
<button id='btn'>人</button>
<script>
var btn=document.getElementById('btn') //获取事件源
btn.οnclick=function(){ //事件类型
alert('选妃')
}
</script>
</body>
执行事件的步骤
(1)、获取事件
(2)、注册事件(绑定事件)
(3)、添加事件处理程序(采取函数赋值形式)
改变元素内容
innerText:不识别html标签,显示全部内容。
innerHTML:识别html标签,推荐使用。
这两个属性是可以读写的,可以获取元素里面的内容
案例:显示登录界面密码
核心思路:点击眼睛按钮,把密码框类型改为文本框,就可以看见里面的密码。其中一个按钮有两个状态,点击一次,切换为文本框,继续点击一次切换为密码框。算法:利用一个flag变量,来判断flag的值,如果是1就切换为文本框,flag设为0,如果是0就切换为密码框,flag设置为1。
<body>
<div class='box'>
<label for="">
<img src="images/jia.jpg" alt="" id="eye">
</label>
<input type="password" name="" id='pwd'>
<script>
var eye=document.getElementById('eye')
var pwd=document.getElementById('pwd')
var flag=0
eye.οnclick=function(){
if (flag==0){
pwd.type='text'
eye.src='images/python.jpg'
flag==1
}else{
pwd.type='password'
eye.src='images/jia.jpg'
flag==0
}
}
</script>
</div>
</body>