本文详细介绍了JavaScript中的继承概念，包括抽象基类的实现和super关键字的使用注意事项。接着，深入探讨了DOM，包括DOM的结构、获取元素的方法以及HTML5的新特性。此外，还讲解了事件的三要素，以及如何操作页面元素的内容、属性和样式。最后，通过实例展示了如何在JavaScript中绑定事件并实现动态效果，如按钮可用性的切换和密码显示隐藏功能。
目录
例如：为按钮绑定单击（click）事件。当单击按钮时弹出信息
3.操作元素的属性：在JavaScript中操作元素的HTML属性
一、继承
1.抽象基类（抽象类）
（1）有些类不能实例化，专门用于其他类的继承，这样的类称为
Person、Animal都是抽象基类，实例化没有实际意义，专门用于派生子类，在抽象基类中定义的方法，在其子类中会被覆盖（重写），通常抽象基类中的方法没有具体的实现
（2）JavaScript中实现抽象基类：在js中没有专门支持抽象类的语法，但是可以通过new.target来实现
class Animal{
constructor(){
if(new.target === Animal){//new.target代表的是新创建的对象的类型
throw new Error('抽象类不能实例化')
}
}
eat(){}
sleep(){}
}2.super使用时注意的问题
（1）super在类继承过程中代表基类
（2）使用super时影注意的问题：
A.super可以在派生类的构造方法中使用（调用基类的构造方法）
B.在派生类中可以通过super调用基类的成员方法
C.在类的构造方法中，不能在调用super()之前使用this
D.如果在派生类中显示的定义了构造方法，则要么必须调用super()，要么必须在其中返回一个对象
二、DOM
1.webAPI
是浏览器提供的一套操作浏览器功能的页面元素的接口（包括DOM、BOM）
2.JavaScript的组成
(1)核心语法：ECMAScript5 -- ECMAScript2015(ES6) -- ECMAScript2016
(2)DOM：文档对象模型
(3)BOM：浏览器对象模型
3.DOM（Document Object Model）
文档对象模型，W3C推荐标准的标记语言是HTML，在DOM中把HTML文档看做成一棵树的结构，文档中的标签、标签的属性、标签的内容都是树的节点
(1)文档（document）：一个页面（html文件）就是一个文档
(2)元素（element）：页面中的标签
(3)节点（node）：页面中的所有元素（包括元素节点、属性节点、内容节点、注释节点等），节点都是对象，都有属性和方法
4.DOM的应用
（1）通过document获取页面元素
A.通过id获取
document.getElementById(‘id属性值’)因为元素的id属性值是不能重复的，因此该方法返回一个对象
B.根据标签名获取元素
document.getElementsByTagName(‘标签名’)返回值是对象的集合，是一个类数组，不能使用push()方法，但是可以用数组名带索引的方式访问
C.根据标签的name属性名获取元素
document.getElementsByName(‘name属性名’)标签的name属性值可以重复，所以该方法的返回值是一个集合
<body>
<label><input type="checkbox" name="fruit" value="苹果">苹果</label>
<label><input type="checkbox" name="fruit" value="西瓜">西瓜</label>
<label><input type="checkbox" name="fruit" value="香蕉">香蕉</label>
</body>
<script>
let arr = document.getElementsByName('fruit')
arr[1].checked = true
</script>（2）HTML5中新增获取元素的方法
A.querySelector(‘#id’)：根据id选择
B.querySelectorAll(‘标签名或.class属性值’)：根据标签名或class属性值选择
C.getElementsByClassName(‘class属性值’)：根据class属性值选择
<body>
<span class="one">英语</span>
<span class="one">语文</span>
<span class="two">数学</span>
<span class="two">物理</span>
</body>
<script>
let one = document.querySelectorAll('.one')
let two = document.getElementsByClassName('two')
//让‘英语’字体加粗
one[0].style.fontWeight = 'bold'
//让；‘数学’背景色为红色
two[0].style.backgroundColor = 'red'
</script>（3）document对象的属性
A.title：页面标题
B.body：页面的body元素
C.forms：页面的表单元素
D.images：页面的图像元素
E.documentElement：返回页面的html元素
三、事件
可以被JavaScript侦听到的行为，是一种‘触发-响应’机制，在网页交互中起着非常重要的作用
1.事件的三要素
（1）事件源：触发事件的元素（谁触发了事件）
（2）事件的类型：触发了什么样的事件（单击、双击、鼠标移动等）
（3）事件处理程序（事件处理函数）：当事件被触发后所执行的代码
例如：为按钮绑定单击（click）事件。当单击按钮时弹出信息
<body>
<button id="btn" onclick="show()">我是按钮</button>
<script>
function show(){
alert('你单击了按钮')
}
</script>
</body>2.操作页面元素的内容
（1）innerHTML：起始标签和结束标签之间的内容，保留了空格和换行，以及html标签
（2）innerText：起始标签和结束标签之间的文本内容，去掉了空格和换行，对特殊字符进行转义
（3）textContent：起始标签和结束标签之间的文本内容，保留了空格和换行，对特殊字符进行转义
3.操作元素的属性：在JavaScript中操作元素的HTML属性
练习：页面中包含一个button和一个单行文本框
1.初始时button是不可用的
2.当文本框获取焦点可以输入内容时，按钮可用
<body>
<input type="text" id="text">
<button id="btn">确定</button>
<script>
let btn = document.querySelector('#btn')
btn.disabled = true //按钮不可用
let text = document.querySelector('#text')
text.onfocus = function(){ //当文本框获得焦点（触发focus事件），按钮可用
btn.disabled = false
}
text.onblur = function(){ //当文本框失去焦点（触发blur事件），按钮不可用
btn.disabled = true
}
</script>
</body>4.操作元素的样式
（1）操作元素的style属性
元素对象.style.样式属性名注意：JavaScript中使用样式属性名与css中的样式名是不同的：去掉原css样式属性名中‘-’，其后的单词首字母大写
示例：通过JavaScript设置div的style属性
</style>
<body>
<div class="first">西安邮电大学</div>
</body>
<script>
//获取元素
let box = document.querySelector('.first')
//给元素绑定click事件,改变box样式
box.onclick = function(){
this.className = 'change'
}
</script>（2）操作元素的className样式
元素对象.className练习：做注册页面
<style>
#form {
position: relative;
width: 400px;
border: 1px none #ccc;
padding: 2px;
}
#mm {
position: relative;
width: 250px;
border: 1px none #ccc;
padding: 2px;
}
#mm img {
position: absolute;
top: 4px;
right: 6px;
width: 24px;
cursor: pointer;
}
.box input {
width: 370px;
height: 30px;
border: 0;
outline: none;
}
.ok {
color: green;
}
.no {
color: red;
}
</style>
<body>
<div id="form">
用户名：<input type="text" id="text">
<span class="span"></span>
</div>
<br><br>
<div id="mm">
<label>
<img src="./26127698e1681dbe1e5cd0e6f1464a0.png" id="eye" alt="">
密 码:
<input type="password" id="pwd">
</label>
</div>
</body>
<script>
//获取元素
let eye = document.querySelector('#eye')
let pwd = document.querySelector('#pwd')
//设置图片和input的type属性
let flag = 0 //标记变量，0显示明文，1显示密码
let text = document.querySelector('#text')
let span = document.querySelector('.span')
let form = document.querySelector('#form')
text.onblur = function () {
if (this.value === 'abc') {
span.textContent = '用户名可用'
span.className = 'ok'
} else {
span.textContent = '用户名不可用'
span.className = 'no'
}
}
eye.onclick = function () {
if (flag === 0) {
pwd.type = 'text'
this.src = './8f05c8292c4d2efc110ac233e3e3c94.png'//this代表当前元素
flag = 1
} else {
pwd.type = 'password'
this.src = './26127698e1681dbe1e5cd0e6f1464a0.png'
flag = 0
}
}
</script>
扫一扫
233
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
