
韩顺平JS面向对象与DOM编程详细笔记

知识点一:JavaScript面向对象编程基础
JavaScript是一种基于对象(Object-Based)和原型(Prototype-Based)的语言。面向对象编程是将数据和处理数据的方法封装在一起的一种编程范式,它允许我们创建一个对象,然后定义这个对象的属性和方法。在JavaScript中,我们可以通过创建对象字面量、使用构造函数、原型以及ES6引入的类等几种方式来实现面向对象编程。
1. 对象字面量:在JavaScript中,对象可以直接用花括号{}创建,这种方式称为对象字面量。
```javascript
var person = {
name: "张三",
age: 30,
sayHello: function() {
console.log("Hello!");
}
};
```
2. 构造函数:构造函数是一种特殊函数,用于创建和初始化由new操作符创建的对象。
```javascript
function Person(name, age) {
this.name = name;
this.age = age;
this.sayHello = function() {
console.log("Hello!");
};
}
var p = new Person("张三", 30);
```
3. 原型:每个函数都有一个prototype属性,指向一个原型对象,原型对象的constructor属性指向该函数。当访问一个对象的属性时,如果在该对象上不存在,JavaScript会查找该对象的原型对象上是否有该属性。
```javascript
Person.prototype.sayHi = function() {
console.log("Hi!");
};
```
4. 类(ES6):ES6引入了class关键字,可以让我们以更清晰和简洁的方式创建对象和原型链。
```javascript
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log("Hello!");
}
}
var p = new Person("张三", 30);
```
知识点二:JavaScript面向对象的深入理解
面向对象编程在JavaScript中有更深层次的应用,主要体现在以下几个方面:
1. 封装:JavaScript没有类的私有属性,但是可以使用闭包来实现私有属性和方法。
```javascript
function Person(name, age) {
var privateName = name;
function privateSayHello() {
console.log("Hello!");
}
this.sayHello = function() {
privateSayHello();
};
}
var p = new Person("张三", 30);
```
2. 继承:JavaScript可以通过原型链实现继承,子类的实例对象可以直接访问父类原型对象上的属性和方法。
```javascript
function Student(name, age, grade) {
Person.call(this, name, age); // 继承Person的方法
this.grade = grade;
}
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;
Student.prototype.sayGrade = function() {
console.log("Grade: " + this.grade);
};
```
3. 多态:多态是指允许不同类的对象对同一消息做出响应。在JavaScript中,我们可以通过定义相同方法名称但实现不同的对象来实现多态。
知识点三:DOM编程
文档对象模型(Document Object Model,简称DOM)是一个跨平台和语言独立的接口,允许程序和脚本动态地访问和更新文档内容、结构和样式。在浏览器中,每个页面都会被解析为一个DOM结构,我们可以通过JavaScript来操作DOM,实现动态网页的交互。
1. DOM树:网页的DOM结构可以想象为一棵树,每个HTML标签都是树上的一个节点。DOM节点可以有子节点、兄弟节点、父节点等。
2. 获取DOM元素:可以通过document对象提供的各种方法来获取DOM元素。
```javascript
document.getElementById('elementId'); // 通过ID获取
document.getElementsByTagName('div'); // 通过标签名获取
document.getElementsByClassName('class'); // 通过类名获取
```
3. 修改DOM元素:获取到DOM元素后,我们可以修改其属性、文本内容或者其内部HTML。
```javascript
document.getElementById('elementId').innerHTML = '<span>Hello World!</span>';
```
4. 动态创建DOM元素:可以通过JavaScript动态创建新的DOM元素,并将其添加到DOM树中。
```javascript
var newDiv = document.createElement('div');
newDiv.innerHTML = 'This is a new div!';
document.body.appendChild(newDiv);
```
5. 事件处理:JavaScript允许我们给DOM元素添加事件监听器,从而响应用户的交互操作。
```javascript
document.getElementById('elementId').addEventListener('click', function() {
alert('Clicked!');
});
```
6. DOM遍历和操作:通过遍历DOM树,我们可以根据需要操作DOM节点,例如添加子节点、删除节点、替换节点等。
```javascript
var parent = document.getElementById('parent');
var child = document.createElement('span');
parent.appendChild(child); // 添加子节点
var oldChild = document.getElementById('oldChild');
parent.replaceChild(child, oldChild); // 替换节点
```
以上是韩顺平老师笔记中关于JavaScript面向对象编程和DOM编程的一些基本知识点。通过掌握这些知识点,可以帮助我们更好地理解和应用JavaScript进行Web开发。
相关推荐








说好的初心呢
- 粉丝: 4
最新资源
- 精选VCLSkin皮肤包:117个样式全面展现
- C编程高手必备:高质量编程规范指南
- 任务栏小图标实现闪烁效果与右键支持
- coolbar:打造个性化工具条的开源解决方案
- 三种进度条示例:直观展示加载状态
- 全面掌握HTML、CSS、JavaScript编程手册
- 翁云兵翻译的3DGame源码分享
- 综合布线与网络规划方案设计的系统集成实践
- 解析武汉大学2006年数学分析试题要点
- Eclipse插件自动修改资源文件解决中文乱码问题
- FreeMarker模板引擎设计与应用指南手册
- 深入理解ORACLE:从体会到实践的学习资料
- 软件开发试验与实践的深度探讨
- C#实现的学生学籍管理系统设计与源码分析
- 纯JS打造简易日程管理器,使用方便快捷
- 打造基于JSP和MySQL的个人在线知识仓库
- Netbeans Swing实现的Java MP3播放器程序
- struts2.0入门视频教程
- EVC4.0编程实例深入解析:C++绘图技术与应用
- C#.NET图书管理系统开发实践
- 掌握GCC常见编译选项,提升开发效率
- VC++实现的商品库存管理系统功能介绍
- CY7C68013 EZ-USB FX2特性及应用中文指南
- 小型员工管理系统:C/S架构与ADO.net数据库集成