关于JavaScript的继承、DOM及事件

最新推荐文章于 2024-05-24 23:45:01 发布
最新推荐文章于 2024-05-24 23:45:01 发布
阅读量135 收藏
点赞数
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/thwr1881/article/details/125206036
版权

一、继承

1、抽象基类(抽象基类）

1.1、有些类不能实例化，专门用于其他类的继承，这样的类被称为抽象基类（抽象类）
例如：

class Person{
    constructor(){
    }
    show(){}
  }
  
  new Person() //--- 实例化
  
  class Animal{
     constructor(){}
     eat(){ console.log('在吃饭')}
     sleep(){}
  }
  
  let a1 = new Animal() //--- 实例化
  a1.eat()

在这段例子中Person、Animal都是抽象基类,实例化没有实际意义,专门用于派生子类在抽象基类中定义的方法,在其子类中会被覆盖(重写),通常抽象基类中的方法没有具体的实现。

1.2、在JavaScript中实现抽象基类： 需要注意的是，JavaScript中并没有专门支持抽象类的语法，但可以通过new.target来实现。

例如：

class Animla{
    constructor(){
        if(new.target == Animla){//new.target代表的是新创建的对象类型
           throw new Error('抽象类不能实例化')
        }
    }
    eat(){}
    sleep(){}
}

let a1 = new Animla() //创建抽象基类的实例(抽象类的实例化)，会报错

class Dog extends Animla{
    constructor(coco){
       
     super() //在子类的构造方法中使用
     this.coco = coco
    }
    eat(){
        console.log('狗在啃骨头')
    }
    sleep(){
        console.log('狗趴在地上睡觉')
    }
}

let d1 = new Dog()
d1.eat()
d1.sleep()

（1）、创建抽象基类的实例后
在这里插入图片描述
（2）、删除抽象基类的实例化后
在这里插入图片描述

2、super使用时注意的问题

（1）、super在类继承中代表基类
（2）、使用super时应该注意的问题：
A、super可以在派生类的构造方法中使用(调用基类的构造方法)
B、在派生类中可以通过super调用基类的成员方法
C、在类的构造方法中，不能在调用super()之间使用this，否则会报错。
例如上面的那个例子：

class Animla{
    constructor(){
        if(new.target == Animla){//new.target代表的是新创建的对象类型
           throw new Error('抽象类不能实例化')
        }
    }
    eat(){}
    sleep(){}
}

let a1 = new Animla() //创建抽象基类的实例(抽象类的实例化)，会报错

class Dog extends Animla{
    constructor(coco){
       this.coco = coco
     super() //在子类的构造方法中使用
     
    }
    eat(){
        console.log('狗在啃骨头')
    }
    sleep(){
        console.log('狗趴在地上睡觉')
    }
}

let d1 = new Dog()
d1.eat()
d1.sleep()

在这里插入图片描述
D、如果在派生类中显式的定义了构造方法，则要么必须在其中调用super（），要么必须在其中返回一个对象。

例如：

class Venicle{}

class Car extends Venicle{
    constructor(){  //显式定义构造方法
      //super() //调用super方法
     //return  {}
    }
}

let C = new Car()

console.log(C)

（1）、不调用super(),不返回对象时：
在这里插入图片描述
（2）、调用super():
在这里插入图片描述
(3)、返回一个对象：
在这里插入图片描述

二、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文件看作一颗树的结构的话，文档中的标签、标签中的属性、属性中的内容，都是数的节点。

3.1、文档(document)：一个页面(html文件)就是一个文档
3.2、元素(element)：页面中的标签
3.3、节点(node)：页面中的所有元素(包括元素节点、属性节点、内容节点、注释节点等)节点都是对象,都有属性和方法

4、DOM的应用

4.1、通过doncument获取页面的元素：

(1)、通过id获取：document.getElementById(‘id属性值’)

<!DOCTYPE html>  
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="p1">西安邮电大学</p>
</body>
<script>
    let st = document.getElementById('p1')
    console.log(st)
</script>
</html>

在这里插入图片描述

因为元素的id属性值是不能重复的因此该方法返回一个对象

(2)、根据标签名获取元素：document.getElementsByTagName(‘标签名’)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="p1">西安市</p>
    <p class="p2">陕西省</p>
    <p class="p2">北京市</p>
    <p class="p2">拉萨市</p>
    </body>
<script>
   let st = document.getElementsByTagName('p')
    console.log(st[1])
    </script>
</html>

在这里插入图片描述

返回值是对象的集合,是一个类数组，不能使用push()方法,但是可以用数组名带索引的方式访问

(3)、根据标签的name属性名获取元素：document.getElementsByName(‘name属性名’)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <label for=""><input type="checkbox" name="fuilt" value="苹果">苹果</label>
    <label for=""><input type="checkbox" name="fuilt" value="菠萝">菠萝</label>
    <label for=""><input type="checkbox" name="fuilt" value="凤梨">凤梨</label>
    </body>
<script>
    let st = document.getElementsByName('fuilt')//返回对象集合
    st[1].checked = true//表示'菠萝'默认选中
    </script>
</html>

标签的name属性值可以重复,所以该方法的返回值是集合

4.2、HTML5中新增的获取元素的方法

(1)、querySelector(‘#id’)：根据id选择

(2)、querySelectorAll(‘标签名或.class属性值’)：根据标签名或class属性值选择

(3)、getElementsByClassName(‘class属性值’)：根据class属性值选择

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <span class="one">英语</span>
    <span class="one">语文</span>

    <span class="two">数学</span>
    <span class="two">物理</span>  
</body>
<script>
     let pt = document.querySelector('#p1')
    let p1 = document.querySelectorAll('.p2')
    document.getElementsByClassName
    console.log(p1)  

    let one = document.querySelectorAll('.one') //这个是类选择器，特别注意前面的点不能省略
    let two = document.getElementsByClassName('two') 
    //让'英语'字体加粗
    one[0].style.fontWeight = 'bold'

    //让数学背景颜色变成红色
    two[1].style.backgroundcolor = 'red' 
    </script>
</html>

在这里插入图片描述

4.3、document对象的属性

(1)、title：页面的标题

(2)、body：页面的body元素

(3)、forms：页面的表单元素

(4)、images：页面的图像元素

(5)、documentElement：返回页面的html元素

三、事件

可以被JavaScript侦听到的行为，是一种’触发-响应’机制。在网页交互中起着非常重要的作用

1、事件的三要素：

1.1、事件源：触发事件的元素(谁触发了事件)

1.2、事件的类型：触发了什么样的事件(单击、双击、鼠标移动…)

1.3、事件处理程序：又称为事件响应函数,当事件被触发后所执行的代码

例如：为按钮绑定单击(click)事件,当单击按钮时弹出信息

写法1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">确定</button>

    <script>
        //首先需要获取按钮元素
        let btn = document.querySelector('#btn')

        //给按钮绑定事件
        btn.onclick = function(){
            alert('确定成功')
        }
        /* 
        事件源就是按钮
        事件类型：click(单击事件)
        事件处理的程序：函数
        */
    </script>
</body>
</html>

在这里插入图片描述

写法2：

<body>
    <button id="btn" onclick="show()">确定</button>
    <script>
 
        function show(){
            alert('确定成功')
        }
        /*
        事件源：按钮（btn)
        事件类型：click(单击事件)
        事件处理程序：函数
        */
    </script>
</body>

在这里插入图片描述

2、操作页面元素的内容：

(1)、innerHTML：起始标签和结束标签之间的内容,保留了空格和换行,以及html标签

(2)innerText: 起始标签和结束标签之间的文本内容,去掉空格和换行,对特殊字符进行转义

(3)textContent: 起始标签和结束标签之间的文本内容,保留空格和换行,对特殊字符进行转义

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
    科技公司
    <p>
        苹果公司
        <a href="https://www.apple.com">Apple&nbsp;&nbsp;&nbsp;iPhone</a>
    </p>
    </div>
    <script>
        let box = document.querySelector('#box')
        console.log('box的innerHTML:',box.innerHTML)
        console.log('box的innerText:',box.innerText)
        console.log('box的textContent',box.textContent)
    </script>
</body>
</html>

在这里插入图片描述

3、操作元素的属性：在JavaScript中操作元素的HTML属性

练习：页面中有一个button和一个单行文本框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    输入名：<input type="text" id="text">
    <button id="btn" disabled="disabled">确定</button>

    <script>
    let btn  = document.querySelector('#btn')
    let input = document.querySelector('#text')//通过标签名选取img标签
    let button = document.querySelector('button')//通过标签名
    
     text.onfocus = function(){ //当文本框获取焦点（触发了focus事件），按钮可用
         btn.disabled = false
     }
     text.onblur = function(){//当文本框失去焦点（触发了onblur事件），按钮就不可用
        btn.disabled = true
     }
    </script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

4、操作元素的样式

4.1、操作元素的style属性

基本语法：元素对象.style.样式属性名

注意事项：JavaScript中使用样式属性名与CSS中的样式名是不同的；去掉原CSS样式属性名中’-',其后的单词首字母大写。

示例：通过JavaScript设置div的style属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box"></div>

    <script>
        let box = document.querySelector('#box')
        box.style.width = '300px'
        box.style.height = '300px'
        box.style.backgroundColor = 'red'
        box.style.transform = 'rotate(45deg)'
    </script>
</body>
</html>

在这里插入图片描述
4.2、操作元素的className属性、

基本语法：元素对象.className

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .first{
        width: 150px;
        height: 150px;
        background-color: pink;
    }
    .change{
        width: 150px;
        height: 150px;
        background-color: red;
        color: white;
    }
</style>
<body>
    <div class="first">
       西安市
    </div>

    <script>
        //1、获取元素
        let box  = document.querySelector('.first')
        
        //2、给元素绑定click事件,改变box的样式
        box.onclick = function(){
        this.className = 'change'
        }
    </script>
</body>
</html>

（1）、点击前：
在这里插入图片描述
（2）、点击后：

在这里插入图片描述

THER1881
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
[JavaScript.DOM高级程序设计]（加）桑贝斯.扫描版+源码
11-02
使用for(i in item)方法操作类似数组而又不是数组的对象时一定要格外小心,如果对象的属性和方法是非继承的，那么hasOwnProperty()方法返回true，即这里的检查不涉及从其他对象继承的属性和方法，只会检查在特定对象...
JonasJavascript2021:完整JavaScript课程2021
05-11
异步JavaScript：事件循环，承诺，异步/等待，AJAX调用和API 2020年及以后的现代工具：NPM，Parcel，Babel和ES6模块 如何像开发人员一样思考和工作：问题解决，研究，工作流程 从一开始的现代ES6 +：箭头功能，...
js DOM
weixin_30438813的博客
06-18 133
DOM 是 Document Object Model（文档对象模型）的缩写。（BOM 浏览器对象模型）； 任意的文档都可以绘制成树状结构 docunment就是一个对象，这个对象指代的是这个文档 document对象底下有一些方法，这些方法可以获取到某个或者某一组元素节点 　　　　1.document.getElementById('id')　　通过元素的id属性，获取到这个元素（...
JavaScript(二十三) DOM继承树，DOM基本操作
Bella.的博客
02-23 622
上节讲到的节点类型也被用为查找的基本操作 IE不支持全说的是IE9及以下，IE10以上全部遵循W3C标准 1. DOM继承树 代表的就是一系列的继承关系 1. 大写的Document，你可以理解成构造函数（函数里只有构造函数需要首字母大写），但是你不能new它，它是留给系统留给自己new的 作用：大的Document可以作为小的document的原型，在大的上填一个属性，从小的里可以访问 但是大的Document，不是直接构造小的document的，正经说小的document的原型
js学习之dom继承树与dom操作
domino~~的博客
01-26 434
                                                                  js学习之dom继承树与dom操作 在接触了dom选择器后，学习的就是关于dom继承树与其操作了。 上面的这个就是关于dom结构树的结构图，首先是根节点Node其就好比树根，它有四个分支，第一个就是Document,Document又有分支，而HtmlDocu...
dom继承树、dom节点操作
雷雨天的雷胖子
04-18 572
目录 一、dom继承树 dom节点类 dom元素类 二、dom节点操作 查询节点 创建节点 插入节点 删除节点 替换节点 克隆节点 三、实例代码 一、dom继承树 dom继承树又叫dom结构树，表示的是一系列继承关系。dom继承树中每一个树节点都是一个Javascript内置类又称dom节点类，这些节点类是一种特殊的构造函数，特殊之处在于它们只能被系统使用，不能被开发者用...
Js如何实现继承（js实现继承的五种方式）
It_sharp的博客
02-15 9788
js继承有5种实现方式： 1、继承第一种方式：对象冒充 function Parent(username){ this.username = username; this.hello = function(){ alert(this.username); } } function Child(username,password){ //通过以...
JavaScript-dom继承树
wust_cyl的博客
04-17 1089
DOM document object mobleDOM 定义了表示和修改文档所定义的方法。DOM对象即宿主对象，由浏览器厂家商定义，用来操作HTML和XML功能的集合。也有人称dom为html和xml的接口。友情提示：因为所学知识有限，部分内容没有说明（比如XML)，以后会补充说明。1 document  HTMLDocument  Document的关系看如下操作:情况很明显了。documen...
JavaScript的DOM
rbx508780的博客
10-13 703
JavaScript的DOM ---DOM是Document Object Model的缩写，意思是『文档对象模型』——将HTML文档抽象成模型，再封装成对象方便用程序操作。
JavaScript DOM详解
Chiclaim
10-03 7352
DOM的获取Element的方法和属性： getElementById(id) getElementsByTagName(tag) getElementsByClassName(class) parentNode childNodes firstChild lastChild nextSibling
ngTeleport:移动一部分 DOM 并继承目标节点的作用域
06-27
总而言之， ngTeleport具有类似的功能ngTransclude ，但ngTeleport可以让你铲除一块DOM的和其他地方放置。 但是， ngTeleport完全可以识别 Angular.js，因此会为您设置范围和插值。 注意：使用ngTeleport走动的DOM...
smart-dom-selector
05-30
在挑战过程中发现 HTMLCollection（一个类似数组的对象）没有继承 Array 对象的通用方法。 为了获得一致且可预测的行为（并能够使用Array.prototype.filter() ），我决定在从findElements函数返回之前将 ...
bankAccountJS:此应用程序可让用户开设银行账户、进行初始存款并从其银行账户中取款。 该程序是使用 JavaScript 对象和原型继承编写的。 DOM 元素在 jQuery 中呈现
06-10
该程序是使用 JavaScript 对象和原型继承编写的。 DOM 元素在 jQuery 中呈现。 ###设置说明 从 GitHub 上的远程存储库克隆 git 存储库 将浏览器指向根路径。 ＃＃＃技术 JavaScript jQuery HTML5 ###麻省理工...
openlayers绘制经纬网格，有添加或者移除功能
qq_52959651的博客
05-21 269
我的项目是vue写的，当点击多选框显示隐藏经纬网格，下面直接写代码。项目需要在地图中添加经纬网格，然后看了一下官网有相关的介绍。这是删除图层相关的网站。这是绘制经纬网格方法。
React Suspense与Concurrent Mode：异步渲染的未来
天涯学馆
05-20 1186
React的Suspense和Concurrent Mode是React 16.8及更高版本引入的概念，旨在提升用户体验和性能，特别是在处理异步数据加载和动画时。它们是React的下一代渲染策略的一部分，目的是实现更流畅的交互和更高效的资源调度。
【详细介绍WebKit的结构】
cz88888888666的博客
05-23 568
WebKit是一个开源的浏览器引擎，主要用于渲染网页内容，它最初由苹果公司为其Safari浏览器开发，目前被多种浏览器和应用程序使用，包括所有基于iOS和macOS的浏览器，WebKit的设计目标是提供快速、精准且流畅的网页浏览体验。
vue 使用 export default
global_coding的博客
05-24 346
vue 使用 export default
超详细的前后端实战项目（Spring系列加上vue3）前端篇（二）（一步步实现+源码）
最新发布
2301_79969279的博客
05-24 1093
好了，兄弟们，继昨天的项目之后，开始继续敲前端代码，完成前端部分昨天完成了全局页面的代码，和登录页面的代码，不过昨天的代码还有一些需要补充的，这里添加一下。
大一期末希望可以提供一些关于javascript的复习建议
06-09
以下是一些关于 JavaScript 复习的建议： 1. 了解 JavaScript 的基本语法和数据类型，包括变量、函数、数组、对象、字符串、数值等等。 2. 学会使用条件语句和循环语句，例如 if/else 语句、switch 语句、for 循环...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值