JS：DOM获取页⾯元素js修改样式属性焦点
API与WebAPI
API：应⽤程序编程接⼝，⼀种⼯具。
Web API：针对浏览器的API，操作浏览器功能和页⾯元素。
DOM：⽂档对象标准模型
——通过DOM接⼝改变⽹页的内容、结构和样式
获取页⾯元素
1.通过ID获取：
getElementById(id)： 返回DOM的元素对象或NULL。
console.dir()：打印返回的元素对象，查看属性和⽅法。
2.根据标签名获取：
getElementsByTagName()：返回带有标签名的对象的集合，以伪数组的形式存放。
还可以指定某个⽗元素中的元素：
3.通过HTML5新增⽅法获取（可能不兼容）
（1）通过类名获取：
（2)直接通过选择器：（要加对应符号）
doucument.querySelector（‘选择器’）：选择器可以是ID（#id），class(.class)，标签(‘标签’)，返回选择器的第⼀个对象。doucument.querySelorAll（‘选择器’）：返回选择器的所有对象
获取特殊标签
1.获取body：doucument.body;
2.获取HTML：doucument.doucumentElement;
事件三要素
事件：可以被js侦测到的⾏为
1.三要素：
（1）事件源：事件被触发的对象
（2）事件类型：如何触发事件（点击（onclick）、经过、键盘按下、滚轮滑动）（3）事件处理程序：通过函数赋值完成
<button id='btn'>xiaomu</button>
<script>
//获取事件源：
var b = ElementById('btn');
//事件类型、处理程序
alert('热卖');
}
</script>
点击按钮弹出对话框：
操作元素
利⽤DOM操作来改变元素的内容、属性等。
<div id='lastTime'>2021/10/13 00:00</div>
<button id='btn'>点这个！</button>
<script>
var bt = document.querySelector('button');
var d = document.querySelector('#lastTime');
d.innerText = new Date();
}
</script>
区别innerText和innerHtml
innerText不能识别html标签（会去掉空格和换⾏），innerHtml可以识别html标签（标准）（只能⽤于普通盒⼦，表单不能⽤这个）表单元素通过value修改内容。
设置表单只能点击⼀次（禁⽤按钮）：button.disabled=true./this.disabled=true.
blur事件
(this指向调⽤的对象)
操作元素属性
1.修改元素属性后的样式为⾏内属性，⽐CSS属性权重⾼。
2.JS样式采取驼峰命名法。
获取焦点、失去焦点
1.获得焦点事件：onfocus
2.失去焦点事件：onblur
样式修改属性
1.通过element.style
2.通过element.className：为元素添加类名，适合样式多的情况，在css中写⼊样式类。修改类名会直接覆盖原来的类名。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。