- Web APIs与ECMAScript关联
- API和Web API
- 获取元素
- 事件
- 元素修改
目录
1. 获取元素getElementByld获取带有ID的元素对象
2. getElementByTagName()获取某类标签元素
1. 事件由三部分（事件三要素）组成：事件源、事件类型、事件处理程序
一、js基础阶段和Web APIs阶段
ECMAScript基础语法为后面做铺垫，Web APIs是js的应用，大量使用JS基础语法做交互效果。
Web APIs阶段学习DOM和BOM。
①BOM：Brower Object Model（浏览器对象模型），改变网页内容结构和样式
②DOM：Document Object Model（文档对象模型）
API（Application Programming Interface，应用程序接口）
Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM，DOM）
MDN详细API：https://developer.mozilla.org/zh-CN/docs/Web/API
二、DOM基础——获取元素
1. 获取元素getElementByld获取带有ID的元素对象
返回一个匹配特定ID的元素对象，由于元素的 ID 在大部分情况下要求是独一无二的(ID大小写敏感)，这个方法自然而然地成为了一个高效查找特定元素的方法。
<div id = 'time'>2022-4-7</div>
<script>
//get获取element元素，通过by，ID方法
timer = document.getElementById('time');
console.log(timer);
console.dir(timer);//console.dir返回的是元素对象，更好查看里面的属性和方法
</script>
2. getElementByTagName()获取某类标签元素
document.getElementByTagName()得到的列表是伪数组，返回的是获取元素对象的集合
例一：获取标签li
<ul>
<li>哈哈，标签1</li>
<li>哈哈，标签2</li>
<li>哈哈，标签3</li>
<li>哈哈，标签4</li>
</ul>
<script>
var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
</script>
例二：获取指定副标签下的子标签
var ol = document.getElementsByTagName('ol');
console.log(ol[0].getElementsByTagName('li')) <ul>
<li>哈哈，标签1</li>
<li>哈哈，标签2</li>
<li>哈哈，标签3</li>
<li>哈哈，标签4</li>
</ul>
<ol id="ol">
<li>另外标签</li>
<li>另外标签</li>
<li>另外标签</li>
</ol>
<script>
var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
// var ol = document.getElementsByTagName('ol');
// console.log(ol[0].getElementsByTagName('li'))
var ol = document.getElementById('ol');
console.log(ol.getElementsByTagName('li'));
</script>3. 通过HTML5新增方法获取元素
getElementsByClassName('类名')，根据类名获取某些元素集合
querySelector('选择器') 根据指定选择器返回第一个元素对象，里面选择器需要加符号 .class，#id
querySelectorAll('选择器')返回指定选择器的所有对象集合
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
<ul>
<li>产品1</li>
<li>产品2</li>
</ul>
</div>
<script>
var boxes = document.getElementsByClassName('box');
var firstBox = document.querySelector('.box');
var nav = document.querySelector('#nav');
var li = document.querySelector('li');
var allBox = document.querySelectorAll('All.box');//这里和getElementsByClassName('box')相似
var lis = document.querySelectorAll('li');
console.log(boxes);
console.log(firstBox);
console.log(nav);
console.log(li);
console.log(allBox);
console.log(lis);
</script>4. 获取特殊元素（body、html）
①获取body元素
document.body //返回body元素对象
②获取html元素
document.documentElement //返回html元素对象
三、事件基础
1. 事件由三部分（事件三要素）组成：事件源、事件类型、事件处理程序
（1）事件源：事件被触发的对象
（2）事件类型：如何触发、什么事件，如鼠标点击（onclick）或者鼠标经过
（3）事件处理程序：通过一个函数赋值触发
<body>
<button id="btn">事件源：小明</button>
<script>
var btn = document.getElementById('btn');//
btn.onclick = function(){
alert('去学习');
}
</script>
</body>2. 执行事件
（1）获取事件源
（2）绑定事件、注册事件
（3）添加事件处理程序
<div>123</div>
<script>
var div = document.querySelector('div');
div.onclick = function(){
console.log('123被选中了');
}
</script>
3. 常见的鼠标事件
| 鼠标事件 | 触发条件 |
|---|---|
| onclick | 鼠标点击左键触发 |
| onmouseover | 鼠标经过出发 |
| onmouseout | 鼠标离开出发 |
| onfocus | 获得鼠标焦点触发 |
| onblur | 失去鼠标焦点出发 |
| onmousemove | 鼠标移动出发 |
| mouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
四、操作元素
1. 改变元素内容
element.innerText：从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉
element.innerHTML：起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行
区别：
<div id="div3"></div>
<div id="div4"></div>
<p id="p2">
p标签里面
<span>123</span>
</p>
<script>
//innerText不识别html标签
var div3 = document.querySelector('#div3');
var div4 = document.querySelector('#div4');
div3.innerText = '<strong> 今年</strong>2022';
div4.innerHTML = '<strong> 今年</strong>2022';
var p2 = document.querySelector('#p2');
console.log(p2.innerHTML);
console.log(p2.innerText);
</script>
2. 操作元素——点击按钮，改变文本显示时间
<button id="btn2">显示当前时间</button>
<div id="div2">某个时间</div>
<script>
//获取元素
var btn2 = document.querySelector('#btn2');
var div2 = document.querySelector('#div2');
//注册事件
btn2.onclick = function(){
// div2.innerText = '2022-4-7';
div2.innerText = getDate();
}
function getDate(){
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1;
var dates = date.getDate();
return '今天'+year+'年'+month+'月'+dates+'日';
// return date;
}
</script>
3. 操作元素——点击按钮改变图片（地址）
<button id="img1">图片一</button>
<button id="img2">图片二</button>
<img src="D:\image\img1.jpg" alt="" id="img">
<script>
var img1=document.getElementById('img1');
var img2=document.querySelector('#img2');
var img=document.querySelector('#img');
img1.onclick = function(){
img.src='D:/image/img1.jpg';
img.title='图片一-粉色云'
}
img2.onclick = function(){
img.src='D:/image/img2.jpg';
img.title='图片二-动漫图'
}
</script>
4. 操作元素——表单属性操作
利用DOM可以操作如下表单的属性：
type、value、checked、selected、disabled
表单里面的值（文字内容）是通过value来修改的
<!-- 表单属性操作 -->
<br>
<button id="btn3">点击按钮</button>
<input type="text" value="输入内容">
<script>
var btn3=document.querySelector('#btn3');
var input=document.querySelector('input');
btn3.onclick=function(){
// input.innerHTML='点击了';//不生效，因为表单里面值是用value来修改的
input.value = '被点击了';
// btn3.disabled = true;
this.disabled = true;//作用相同，this只想的调用的btn3
}
</script>
305
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
