file-type

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

5星 · 超过95%的资源 | 下载需积分: 50 | 4.37MB | 更新于2025-03-14 | 166 浏览量 | 64 下载量 举报 收藏
download 立即下载
知识点一: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
上传资源 快速赚钱