webAPI第一弹---JS

WEBAPI

WEb API是浏览器提供的一套操作浏览器功能，和页面元素的API，现阶段我们主要针对于浏览器讲解常用的API，主要针对浏览器做交互效果

DOM

文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。
可以通过这些接口来改变网页的neritic，结构和样式

1.API是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部做如何实现
2.WbAP1主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果。
3.Veb API一般都有输入和输出（函数的传参和返回值），Web API很多都是方法（函数）

获取元素

1.通过id获取
2.通过标签获取
3.通过类名
4.通过选择器选择

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div class="box">盒子</div><div class="box">盒子</div><div id="time">2020.06.07<ul><li>1234</li></ul></div><ul id="three"><li>ggzx</li><li>ggzx</li><li>ggzx</li><li>ggzx</li></ul><script type="text/javascript">console.log('1.通过id获取元素对象')const time =  document.getElementById('time')console.log(time)console.log(typeof time)console.log('..打印我们返回的元素对象，更好的查看里面的属性和方法')console.dir(time)console.log('2.通过标签名，返回带有该标签的集合,以为数组的形式存储')const list = document.getElementsByTagName('li')console.log(list)console.log(list[0])console.log('..得到的元素是动态的，下面通过元素修改内容，在重新输出，证明元素是动态的')for (let i = 0; i < list.length; i++) {console.log("遍历li第"+i+"个元素",list[i])}console.log('3.结合使用1，2种方法，获取某个id标签内的ul的li属性')const ul = document.getElementById('time')const li1 = ul.getElementsByTagName('li')console.log(li1)console.log('4.HTML5新增方法获取')const boxes =  document.getElementsByClassName('box')console.log(boxes)console.log('5.选择器返回指定选择器的第一个元素对象,切记里面的选择器需要加符号')const firstBox = document.querySelector('.box')const id = document.querySelector('#time')const firstLi = document.querySelector('li')console.log('querySelectAll,返回指定选择器的所有对象')console.log('6.获取body和html,注意html')const body = document.bodyconst html = document.documentElementconsole.log(body,html)</script></body>
</html>

事件概述JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。简单理解：触发–响应机制。

网页中的每个元素都可以产生某些可以触发JavaScript的事件，例如，我们可以在用户点击某按钮时产生一个
事件，然后去执行某些操作。

事件：
事件源：事件被触发的回想，例如按钮
获取事件源：document.getElementById(‘btn’)
事件类型：如何触发，什么事件,比如鼠标点击onclick，鼠标经过,或者是键盘按下
btn.onclick = function (){
alert(‘点击按钮’)
}
事件处理程序：通过一个函
数赋值的方式

执行事件的步骤
1.获取事件源
2.注册事件（绑定事件)
3.添加事件处理程序（采取函数赋值形式）

操作元素

修改网页内容、结构和样式

案例：点击按钮，修改div的内容为日期

<html>
<!--32-->
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><button>显示当前系统事件</button><div>11 </div><script>const btn = document.querySelector('button')const div = document.querySelector('div')//获取元素，注册事件btn.onclick = function (){div.innerText = getDate()}function getDate() {const date = new Date();const year = date.getFullYear()const month = date.getMonth()+1const dates = date.getDate()const arr = ['星期一','星期二','星期三','星期四','星期五','星期六','星期七']const day = date.getDay()return year+'-'+month+''+dates+' '+arr[day]}</script>
</body>
</html>

#### 获取节点内容
注意:
innerTEXT显示的标签内容，该内容不包括换行和空格
innerHTML包括着该节点内部的内容以及标签内容

<html>
<!--32-->
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><div>11</div><strong>加粗字体</strong><p>ggzx</p><script>
//        使用innerText和innerHtml获取文字const div = document.querySelector('div')div.innerText = '<strong>加粗字体</strong>'//现在就会识别html了,w3c标准div.innerHtml = '<strong>加粗字体</strong>'//使用innerText和innerHtml获取文字,htmlconst p = document.querySelector('p')console.log(p.innerText)console.log(p.innerHTML)</script>
</body>
</html>

修改元素属性

1.innerText innerHTML
2.src,href
3.id alt title
案例：点击按钮切换img中的src：图片源

<html>
<!--32-->
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><button id="ldh">刘德华</button><button id="zxy">张学友</button><br><img src="imges/ldh.jpg"/><script>const ldh = document.getElementById('ldh')const zxy = document.getElementById('zxy')const img = document.querySelector('img')//    注册事件zxy.onclick = function (){img.src = 'imges/ldh.jpg'}ldh.onclick = function (){img.src = 'imges/zxy.jpg'}</script>
</body>
</html>

操控表单标签的属性

type value checked selected disabled
案例：登录页面的密码框，可以显示密码，可以隐藏密码

<html>
<!--32-->
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box{width: 400px;margin:100px auto;}.box input{height:45px;line-height:45px;width:500px;margin:0 auto;font-size:18px;padding:0;vertical-align:top;border:0;outline:none;}.box button{width:130px;height:47px;margin:0;padding:0;outline:none;border: 0 none;}</style>
</head>
<body><div class="box"><input type="password" placeholder="在此处输入密码" name="" id=""><button>显示</button></div>
<script>const btn = document.querySelector('button')const input = document.querySelector('input')btn.onclick = function () {if (btn.innerText === '显示'){input.type = 'text'btn.innerText = '关闭'}else {input.type = 'password'btn.innerText = '显示'}}
</script>
</body>
</html>

修改元素样式大小颜色位置等

1.element.style 行内样式操作
2.element.className 类名样式操作
注意：
1.样式是驼峰命名法，即style标签内font-size,在使用时候需要用.fontSize
2.JS修改style产生的是行内样式，css权重较高，能覆盖内嵌样式

<html>
<!--32-->
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div{height: 100px;width: 100px;background-color: black;}</style>
</head>
<body><div></div><button>修改颜色</button>
<script>const box = document.querySelector('div')const btn = document.querySelector('button')console.log(btn)console.log(box)btn.onclick = function () {console.log('点击了btn')box.style.backgroundColor = 'purple'}
</script>
</body>
</html>

注意：这里直接修改sytle,style名字需要是驼峰名字