API知识
API接口（application programming interface）是预先定义的函数，目的就是提供应用程序与开发人员基于 某个软件或者硬件得以访问一组例程的能力。而无需访问源码，无需理解内部的实现机制，只需调用即可！！！
因为在进行操作DOM元素的时候，使用的是Javascript提供的API接口！！！
就是供的方法或者属性来供开发者进行使用！！！
如：str.substring arr.push pop...
2.DOM
DOM（document Object Model）文档对象模型。
提供的对html/xhtml操作的标准编程接口。可以改变网页的内容结构样式！！
DOM树是把文档映射成了一个树形的结构，通过节点对象的处理，处理的结果可以加入到当前的页面
文档: document
节点: 网页中的所有内容，（标签、属性、文本、注释等）
标签节点: element，节点中标签
01-获取dom元素 ID
使用文本文档对象中的方法
“ get获取 Element元素 id ”
<div id="app"></div>
<script>
var div = document.getElementById("app")
console.log(typeof div)
</script>
02-获取dom元素 ID 伪数组 class
<div class="app"></div>
<div class="app"></div>
<script>
// getElementsByClassName get elements
var div = document.getElementsByClassName("app")
console.log(div[0])
console.log(div[1])
</script>
03-获取dom元素 tag 标签
<ul class="myul">
<li>锦衣之下 -- </li>
<li>锦衣之下 -- </li>
<li>锦衣之下 -- </li>
<li>锦衣之下 -- </li>
<li>锦衣之下 -- </li>
</ul>
<script>
1. // var lis = document.getElementsByTagName("li");
// for(var i = 0; i < lis.length; i++) {
// console.log(lis[i])
// }
2. var ul = document.getElementsByClassName("myul")[0];
var lis = ul.getElementsByTagName("li")
console.log(lis)
</script>
04-H5新增方法
<div class="box1"></div>
<div class="box1"></div>
<script>
var box1 = document.getElementsByClassName("box1")[0]
querySelctor 只返回查询到第一个元素就进行返回了！！！
var box1 = document.querySelector(".box1")
console.log(box1)
var lis = document.querySelectorAll(".box1")
console.log(lis)
</script>
05-获取特殊标签
<script>
注意：ID元素的获取不要使用下面的方法！！！
// console.log(box)
console.log(document.body) // 获取 body节点
console.log(document.documentElement) // 获取 html节点！！！
</script>
事件
01
<button id="btn">弹出</button>
<script>
// 1 事件三要素。
// 事件源 事件类型 事件处理函数
// 事件源 -- 按钮
// 事件类型 -- 单击 双击。。。
// 事件处理函数 -- 搜索的处理程序
var btn = document.querySelector("#btn");
// 添加事件类型 click单击事件
btn.onclick = function() {
// 这是事件处理函数
alert("你好！！！")
}
</script>
02
<div class="box"></div>
<div class="box2"></div>
<button id="btn">改变box中的内容</button>
<script>
var box = document.getElementsByClassName("box")[0]
var box2 = document.getElementsByClassName("box2")[0]
var btn = document.getElementById("btn")
btn.onclick = function() {
// innerHTML就是元素标签中的内容！！！
console.log(box.innerHTML)
// 换成innerText innerHTML
box.innerText = "你好，世界！！！"
}
整体效果是点击按钮给box中添加 "你好，世界！！！"
当然也可以直接添加，如下：
box2.innerText = "这是一个box2的盒子"
</script>
innerhtml和innerText的区别
// innerhtml能够失败元素标签
// innerText识别不了元素标签
例：
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
<script>
var box = document.querySelector(".box")
console.log(box.innerHTML)
console.log(box.innerText)
</script>
例1：
<div>
<button id="btn">修改图片的地址</button>
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1579748745,4221614532&fm=11&gp=0.jpg" alt="">
</div>
<script>
var btn = document.querySelector("#btn")
var img = document.querySelectorAll("img")[0]
btn.onclick = function() {
// innerHTML innerText都是修改dom元素中的内容
// 修改DOM元素的属性
img.src = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584597759082&di=403951c82566ce49c5ca8bf3d4b6340e&imgtype=0&src=http%3A%2F%2Fwww.17qq.com%2Fimg_biaoqing%2F85859047.jpeg"
}
</script>
例2：
<div>
<img src="" alt="">
</div>
<script>
1.获取到img元素
var img = document.querySelector("img")
2. 判断当前的时间点，并设置相应的图片
var date = new Date();
console.log(date.getHours())
var hours = date.getHours()
if(hours > 0 && hours <= 12) {
img.src = "./images/z.gif"
}else if(hours > 12 && hours <= 18) {
img.src = "./images/x.gif"
}else {
img.src = "./images/w.gif"
}
</script>
表单属性的设置
<div>
<input type="text">
<button id="btn">清除数据</button>
</div>
<script>
var input = document.querySelector("input");
var btn = document.querySelector("#btn")
// 1.可以设置input的默认值！！！
// input.value
input.value = "helloworld！！！"
btn.onclick = function() {
// input.value = ""
// this指向的就是事件函数的调用者
this.disabled = true; == // btn.disabled = true;
// input.readOnly = true;
// input.disabled = true;
}
</script>
例1：
明码和密码转换
<div>
<input type="password">
<img src="./images/close.png" alt="">
</div>
<script>
// 1.拿到图片，进行点击，让input变成type="text",同时让img变成另外一个图片
var img = document.querySelector("img")
var input = document.querySelector("input")
注意： 需要用到这么一个全局变量，做为哨兵变量
var flag = false
img.onclick = function() {
if(!flag) {
input.type = "text"
img.src = "images/open.png"
flag = true
}else {
input.type = "password"
img.src = "images/close.png"
flag = false
}
}
</script>
操作元素的样式
<style>
div {
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var box = document.querySelector(".box")
// 这里使用background-color:
// 使用的是驼峰命名法
box.style.backgroundColor = "pink"
// 不加单位是不行的，一定要带单位！！！
box.style.width = '300px'
</script>
聚焦和失焦
onfocus // 聚焦
onblur // 失焦
例：
<input type="text">
<script>
var input = document.querySelector("input")
input.value = "helloworld!!!"
input.onfocus = function() {
if(input.value != "helloworld!!!") { // 聚焦时显示
}else { // 失焦时消失
input.value = ""
}
}
input.onblur = function() { // 当失焦时且input为空时再重新显示
if(!input.value) {
input.value = "helloworld!!!"
}
}
</script>
操作class方式改变样式
<style>
.divstyle {
width: 100px;
height: 100px;
background: red;
}
</style>
