通过构造函数模拟DOM节点

最新推荐文章于 2023-03-25 15:30:24 发布
最新推荐文章于 2023-03-25 15:30:24 发布
阅读量312 收藏
点赞数
分类专栏： javascript 文章标签： DOM对象 构造函数 节点 对象
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/flatshoe/article/details/102801291
版权
本文探讨如何利用JavaScript的构造函数来模拟DOM（Document Object Model）节点的创建和操作，详细阐述了构造函数在模拟节点属性、方法及事件处理等方面的应用，旨在深化理解DOM编程原理。
摘要由CSDN通过智能技术生成 
					
				function Node(options) {
   
					// 设置默认值 
					
					this.className = options.className || '';  
					this.id = options.id || '';
					
					// 设置节点相关的属性
					// 节点名称,如果是元素节点 则是标签名称
					this.nodeName = options.nodeName || '';
					
					// 节点类型,元素节点 1 属性节点2   文本节点3  数值类型
最低0.47元/天 解锁文章
flatshoe
关注
专栏目录
C++构造函数
Hyacinth_Dy
10-16 604
构造函数定义 构造函数初始化数据成员 构造函数的重载 使用默认参数的构造函数 构造函数的特性 编译器在什么情况下会合成默认构造参数 编译器在什么情况下会合成默认构造参数 构造函数的作用 析构函数定义 析构函数的特性： 调用析构函数的情况： 调用构造函数和析构函数的顺序： 拷贝构造函数（copy constructor）: 运算符的重载： 重载流插入运算符”<<”和流提取运算符”>>” 赋值运算符与拷贝构造函数的比较： 构造函数，析构函数，赋值运算符，拷贝构造函数的调用时机：
JS 进阶(5) DOM操作：dom加载完毕执行js、创建节点、遍历节点、查找节点、删除节点
weixin_39141044的博客
11-02 6475
一、dom加载完毕执行js dom可以看成一个树形结构，dom的加载顺序就是从上到下，我们一再强调将js文件放在尾部，就是因为如果js脚本在dom文档构造之前执行，这样js就无法访问dom文档对象模型。 1.1 jquery 等待页面dom树加载完毕，再执行代码 写法一：标准写法 $(document).ready(function(){ ... }); 写法二：简写 $(function...
javasrcipt - 对象，构造函数，DOM
True_cl的博客
12-28 192
一，概述 对象Object是js的核心概念，最重要的数据类型，对象就是一种无序的数据集合，由若干键值对（key-value）构成。 二，对象的创建 一共四种创建方法，如下： //第一种 var obj = {}; //第二种 var obj = new Object(); //第三种 function arr(){} var obj = new ar...
构造函数知识点
LICG_的博客
11-06 207
1：构造函数 访问修饰符构造方法名(){ //初始化代码 } 2：构造函数的作用：就是给属性进行赋值的：也叫对象的初始化，每一个类都会有一个默认的构造函数 构造函数：就是方法名和类名完全一致的函数他没有返回值类型也没有void,如果我们写了构造函数，那么默认的构造函数将不存在 不能够被调用 3：构造函数的重载： 重载：方法名与类名相同,但是参数不同，参数的类型不同和数量不同:作用：就是同样的方法实现不同的功能 构造函数的重载：方法名与类名相同,但是参数...
构造器（构造方法）知识点，重要！！！
qq_52599870的博客
10-25 212
定义一个构造器： ​//还是刚才那个构造器 class Person{ public Person(){ } } public class void main(String[] args){ Person person = new Person(); } ​ 1.在类里面即使你什么都不写，都会存在一个构造器. 2.当我们在用new关键字创建一个新对象的时候，对象调用的一定是方法，而不是调用类！！这就是为什么即使什么都不写依然会存在一个构造器的原因，因为要定义一个对象就一定需
HTMLDOM教程
Tyloo_wdnmd的博客
02-13 517
HTMLDOM 1.什么是HTMLDOM? HTMLDOM提供处理HTML文档的API。 2.W3CDOM与HTMLDOM的区别 W3CDOM可以处理HTML/XML文档; HTMLDOM仅能处理HTML文档。 3.获取对象 HTMLElement document.getElementById(string id) 4.访问HTML对象的属性 object.属性名称 = 值 [var 变量名称 ...
如何判断出一个js对象是否一个dom对象
11-28
在某些情况下，`typeof HTMLElement`可能会返回`'function'`，这是因为在某些浏览器中，`HTMLElement`被当作构造函数处理。因此，为了增加兼容性，我们需要先检查`typeof HTMLElement`的类型： ```javascript var ...
虚拟DOM
Sunny ic
05-10 344
每天一个前端面试题之 虚拟DOM 一、浏览器渲染引擎的工作流程 在了解虚拟DOM之前，先来讲一讲浏览器渲染引擎的工作流程。 下图是webkit渲染引擎的工作流程。 从上图中分析，浏览器渲染引擎的工作流程分为5步： 1.创建DOM树： 浏览器会将HTML解析成一个DOM树，DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。 2.创建StyleRules： 将CSS解析成 CSS Rule Tree，生成页面的样式表 。 3. 创建Render树： 将D
网页DOM——Element 节点
mengxiangde的博客
10-29 543
Element节点对象对应网页的 HTML 元素。每一个 HTML 元素，在 DOM 树上都会转化成一个Element节点对象（以下简称元素节点）。 元素节点的nodeType属性都是1。 varp = document.querySelector(‘p’); p.nodeName // “P” p.nodeType // 1 Element对象继承了Node接口，因此Node的属性和方法在Ele...
构造器详解
qq_44499722的博客
09-11 117
public class Person { //一个类即使什么都不写 他也会存在一个方法 //显示的定义构造器 String name; //1.使用new关键字 本质是在调用构造器 //2.构造器用来初始化值 public Person(){ //无参构造 } //有参构造:一旦定义了有参构造，无参构造就必须显示定义 否无效 public Person(String name){ //无参构造 this.name=name; } } /* //一个项目应该只有一个main方法 publi
通过JS动态创建一个html DOM元素并显示
12-10
近日，因工作需要，需要通过点击某个元素后， 动态创建一个DOM元素并显示，因此写了一些相关的JS函数，在此记录，以作备忘： /**//* 动态创建DOM元素的相关函数支持 www.jcodecraeer.com */ /**//* 获取以某个元素的DOM对象 @obj 该元素的ID字符串 */ function getElement(obj) { return typeof obj=='string'?document.getElementById(obj):obj; } /**//* 获取某个元素的位置 @obj 该元素的DOM对象，或该元素的ID */ function getObjec
c++定义链表节点及结构体的默认构造函数
最新发布
m0_61738650的博客
03-25 1365
在这个例子中，编译器会自动为 student 结构体生成一个无参的默认构造函数，该函数会将结构体中的所有成员变量都初始化为对应类型的默认值（例如，int 类型的成员变量 id 会被初始化为 0，char 类型的成员变量 gender 会被初始化为空字符 ‘\0’）。,使用了结构体定义了链表节点，其中程序第四行是结构体的构造函数，这个在以前的学习中没看到过，所以又去查询了结构体构造函数的相关知识，结构体的默认构造函数是编译器自动生成的无参构造函数，它的主要作用是初始化结构体的成员变量。
js基础大全 js语法 js运算符 js函数 js对象 jsDom操作 js构造函数 函数的属性和方法
jiakesi的博客
05-21 457
js语法： js的引入方式 - 行内式 ： 直接把js代码嵌套到html开始标签里 - 内嵌式 ： 通过script 标签引入，可以放在页面的任何地方 - 外链式 ： 通过 script 标签的src 属性引入，js代码文件的扩展名为 .js js代码放的位置不同，会影响也页面的展示效果 js语法： - 区分大小写 - 使用字母，下划线_ ，美元符号$ 开头，后边可以是任何字母，数字，下划线 等的组合 - 不能使用关键字或者保留字作为变量名 - 变量名中间不能出现空格等其他字符 - 可以使用匈牙利标记，帕
构造器（构造方法）
浣熊小怜怜
02-09 625
构造器 1. 和类名相同 2. 没有返回值 作用 new 本质在调用构造方法 初始化对象的值 注意点 定义有参构造后，如果想使用无参构造，要显示的（可见的）定义一个无参构造。 一个类即使什么都不写，它也会存在一个方法 无参构造：显示的定义构造器(默认构造） 有参构造:一旦定义了有参构造，无参构造必须显示定义 alt+ insert 生成构造器 按住shift或ctrl 多选 public class Person { //一个类即使什么都不写，它也会存在一个方法 //无参构造，显示的
c语言链表结点构造函数,c语言：IntelliSense: 不存在从 "int" 转换到 "linklist" 的适当构造函数 计算链表节点的程序...
weixin_39995764的博客
05-22 330
匿名用户1级2012-11-06 回答#include #include#includetypedef struct linklist{ int data;struct linklist *next; //少了struct.} Linklist ; /*定义链表*/ //少了分号....
构造方法（构造器）的深入理解
HY845638534的博客
11-20 1807
  要谈及构造方法，就先要谈及方法，那么什么是方法呢？   方法的定义             方法：用来描述该类实物共有的一些行为。 可以分为成员方法和静态方法。             成员方法：没有用static修饰的方法（实例方法，对象方法）。             静态方法：用static修饰的方法（类方法），可以直接通过类名直接调用。             注意：如果...
node-red创建节点
圆形格子
05-13 3726
这里写目录标题1.1JavaScript file1.2HTML File1.2.1 简介1.2.2 定义节点1.2.3 节点定义1.2.4 编辑对话框1.2.5 帮助文本1.3Packaging1.3.1 命名1.3.2 目录结构1.3.3 在本地测试节点模块1.3.4 package.json1.3.5 添加到 flow.nodered.org1.4节点的属性1.5节点的凭据1.6节点的外观1.7配置节点1.8节点编辑对话框1.9节点上下文1.10示例流程 1.1JavaScript file 1.2H
JS复习之DOM与HTMLDOM
zds18205657013的博客
07-15 204
一、DOM编程 1.什么是DOM? DOM[Document Object Model],文档对象模型。 DOM提供处理XML/HTML文档的API。 DOM的主要操作:节点的获取、节点的动态的创建、创建的删除及节点的替换。 节点(Node),在DOM树中所存在的任何一个元素(如HTML元素，文本、属性等)。 节点的类型： Node.ELEMENT_NODE,1(元素类型) Node.ATTRIBUTE_NODE,2(属性类型) Node.TEXT_NODE,3(文本类型) Node.COMMENT_NOD
JavaScript创建对象与构造函数的实现方法
会飞的蜘蛛
03-30 855
 function sayFirstName(){  alert(this.firstName.toUpperCase()); } function newClass(){  this.firstName="frank";  this.sayHello=function(){   alert("hello");  } } newClass.prototype.sayName=function(
深入理解C++拷贝构造函数
拷贝构造函数是一种特殊的构造函数，其主要任务是初始化一个新对象，这个新对象是通过已存在的对象（通常称为源对象）进行复制得到的。拷贝构造函数的原型通常是这样的：`ClassName(const ClassName &obj)`, 其中`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值