Web APIs阶段与JS语法阶段的关联性
什么是API
Application Interface
API（应用程序编程接口）：一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或者硬件得以访问一组例程的能力，而又无需访问源码或者理解内部工作机制的细节
WebAPI
Web API是浏览器提供的一套操作浏览器功能（BOM）和页面元素（DOM）的API
Web API很多都是方法（函数）
JS的组成
DOM：文档对象模型，是处理HTML的标准编程接口
通过这些DOM接口可以改变网页的内容，结构和样式
DOM树：
文档：一个页面就是一个文档，DOM中使用document表示
元素：页面中的所有标签都是元素，DOM中使用element表示
节点：网页中的所有内容都是节点（标签，属性，文本，注释等），DOM中使用node表示
DOM把以上内容都看做是对象
获取页面元素
①根据ID获取
getElementById (‘xxx’)
例1：<div id="time">2019-9-9 </div>
<script>
//1，因为我们文档页面从上往下加载，所以script标签写在下面
//2，get获得element元素 by 驼峰命名法
//3,参数id是大小写敏感的字符串
//4,返回的是一个元素对象，必须加引号
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer);
//console.dir打印返回的元素对象，更好的查看里面的元素和方法
console.dir(timer);
</script>
例2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script>
window.onload=function()
{
var oDiv=document.getElementById('div1");
oDiv.style.color="red";
}
</script>
</head>
<body>
<div id="div1">JavaScript</div>
</body>
</html>
②根据标签名获取
getElementsByTagName()方法可以返回带有指定标签名
<body>
<ul>
<li>知否知否，应是绿肥红瘦1</li>
<li>知否知否，应是绿肥红瘦2</li>
<li>知否知否，应是绿肥红瘦3</li>
<li>知否知否，应是绿肥红瘦4</li>
<li>知否知否，应是绿肥红瘦5</li>
</ul>
<ol id="ol">
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
</ol>
<script>
//1，返回的是获取过来元素对象的集合，以伪数组的形式存储
var lis=document.getElementsByTagName("li");
console.log(lis);//输出五个li例子
console.log(lis[0]);//输出第一个li句子
//2，因为得到的是一个对象的集合，所以想操作里面的元素需要采取遍历的方式
for (var i=0;i<lis.length;i++){
console.log(lis[i]);
}
//3,如果页面中只有一个li，返回的还是伪数组的形式
//4,如果页面中没有这个元素，返回空的伪数组
//5,element.getElementsByTagName('标签名');获取父元素内部所有指定标签的子元素。父元素必须指明是哪一个元素对象，获取的时候不包括父元素自己。
var ol=document.getElementsByTagName('ol');//返回[ol]
console.log(ol[0].getElementsByTagName('li'));
//5,或者直接在<ol>中添加：<ol id='ol'>
var ol=document.getElementById('ol');
console.log(ol.getElementsByTagName('li'));
</script>
</body>
③通过HTML5新增的方法获取
document.getElementsByClassName(‘类名’);
根据类名获得某些元素集合
<body>
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
//1,getElementsByClassName()根据类名获得某些元素集合
var boxs=document.getElementsByClassName('box');
console.log(boxs);
//2,querySelector返回指定选择器的第一个元素对象（里面的选择器需要加符号 .box #nav）
//在不考虑兼容性的情况下，使用此方法更便利
var firstBox = document.querySelector('.box');
console.log(firstBox);
var nav=document.querySelector('#nav');
console.log(nav);
var li=document.querySelector('li');
console.log(li);
//3,querySelectorAll()返回指定选择器的所有元素对象集合
var allBox=document.querySelectorAll('.box');
console.log(allBox);
var lis=document.querySelectorAll('li');
console.log(lis);
</script>
</body>
④特殊元素获取(body/html)
//获取body元素
var bodyEle=document.body;
console.log(bodyEle);//返回元素对象
console.dir(bodyEle);
//获取html元素
var htmlEle=document.documentElement;
console.log(htmlEle);
/
事件基础
JS使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为
简单理解为：触发—响应机制
网页中的每个元素都可以产生某些
<button id="btn" >唐伯虎</button>
<script>
点击一个按钮，弹出对话框
事件由三部分组成：事件源，事件类型，事件处理程序，也称为事件三要素
（1）事件源：事件被触发的对象 谁 按钮
var btn=document.getElementById('btn');
（2）事件类型：如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下 还是鼠标滚轮
(3)事件处理程序:要弹出对话框 通过一个函数赋值的方式 完成
btn.onclick = function(){
alert('点秋香');
}
</script>
/
执行事件的步骤
<div>123</div>
<script>
//执行事件步骤
//点击div 控制台输出，我被选中了
//1，获取事件源
var div = document.querySelector("div");
//2，绑定事件 注册事件
//div.onclick
// 3，添加事件处理程序（采取函数赋值形式）
div.onclick = function(){
console.log('我被选中了');
}
</script>
/
操作元素
JS中的DOM操作可以改变网页内容，结构和样式
我们可以利用DOM操作元素来改变元素里面的内容，属性等
DOM全称：Document Object Model，表示文档对象模型
DOM操作，可以简单理解为元素操作
对于一个HTML文档，DOM会将其解析为DOM树结构，每一个元素就是一个节点，每一个节点就是一个对象。
也就是说，在操作元素时，把这个元素看成一个对象，然后利用这个对象的属性和方法来进行操作。
常见DOM节点类型：
1，元素节点
2，属性节点
3，文本节点
可用nodetype来判断一个节点的类型
例：<ul id='wrapper'>绿叶学习网</ul>
这一句完整的代码属于一个元素节点 nodetype=1
id="wrapper"属于属性节点 nodetype=2
绿叶学习网属于文本节点 nodetype=3
在这里插入代码片
2086
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
