Javascript面试基础6(下)

获取页面所有checkbox

怎样添加、移除、移动、复制、创建和查找节点

在JavaScript中,操作DOM(文档对象模型)是常见的任务,包括添加、移除、移动、复制、创建和查找节点。以下是一些基本的示例,说明如何执行这些操作:

1. 创建节点

要创建一个新的DOM节点,你可以使用document.createElement()方法。

// 创建一个新的div元素  
var newDiv = document.createElement("div");  // 设置其一些属性  
newDiv.id = "newDivId";  
newDiv.className = "newDivClass";  
newDiv.textContent = "这是一个新的div";  // 将新创建的元素添加到body中  
document.body.appendChild(newDiv);

2. 查找节点

查找DOM节点可以使用多种方法,如getElementById(),getElementsByClassName(),

 getElementsByTagName()querySelector()querySelectorAll()

// 通过ID查找  
var elementById = document.getElementById("someElementId");  // 通过类名查找(返回HTMLCollection)  
var elementsByClass = document.getElementsByClassName("someClass");  // 通过标签名查找(返回HTMLCollection)  
var elementsByTagName = document.getElementsByTagName("p");  // 使用querySelector查找第一个匹配的元素  
var firstElement = document.querySelector(".someClass");  // 使用querySelectorAll查找所有匹配的元素(返回NodeList)  
var allElements = document.querySelectorAll(".someClass");

3. 添加节点

将新节点添加到DOM中,可以使用appendChild()insertBefore()

// 将新节点添加到body的末尾  
document.body.appendChild(newDiv);  // 将新节点添加到某个特定元素之前  
var referenceNode = document.getElementById("someElementId");  
document.body.insertBefore(newDiv, referenceNode);

4. 移除节点

使用removeChild()方法可以从DOM中移除一个节点。

var elementToRemove = document.getElementById("someElementIdToRemove");  
if (elementToRemove && elementToRemove.parentNode) {  elementToRemove.parentNode.removeChild(elementToRemove);  
}

5. 移动节点

移动节点实际上是一个先移除再添加的过程。首先,使用removeChild()从当前位置移除节点,然后使用appendChild()insertBefore()将其添加到新位置。

6. 复制节点

使用cloneNode()方法可以复制一个节点。这个方法接受一个布尔值作为参数,指定是否进行深复制(复制节点及其所有子节点)。

// 浅复制(只复制节点本身)  
var clonedNode = elementById.cloneNode(false);  // 深复制(复制节点及其所有子节点)  
var clonedNodeDeep = elementById.cloneNode(true);  // 然后,你可以将复制的节点添加到DOM中的某个位置  
document.body.appendChild(clonedNodeDeep);

正则表达式

 正则表达式-CSDN博客

Javascript中callee与caller的作用 

  • caller是返回一个对函数的引用,该函数调用了当前函数;
  • callee是返回正在被执行的function函数,也就是所指定的function对象的正文

在JavaScript中,calleecaller是两个非标准的、但曾经在早期JavaScript版本中广泛使用的属性,它们分别用于函数内部引用当前执行的函数和调用当前函数的外部函数。然而,值得注意的是,由于它们带来的混淆和潜在的性能问题,现代JavaScript开发中通常不推荐使用这两个属性,并且在严格模式(strict mode)下,这两个属性是不可用的。

callee

callee属性是arguments对象的一个属性,它指向当前正在执行的函数本身。这在编写递归函数时特别有用,因为你可以直接使用arguments.callee来引用函数自身,而不需要在函数体内显式地引用函数名。然而,这种做法可能会导致代码难以理解和维护,因为它隐藏了函数的实际名称。

function factorial(n) {  if (n <= 1) {  return 1;  } else {  return n * arguments.callee(n - 1);  }  
}

现代JavaScript中,更推荐使用函数名来引用自身,或者使用箭头函数来避免thisarguments的混淆。

caller

caller属性是一个函数对象的属性,它指向调用当前函数的函数。这在你需要知道是哪个函数调用了当前函数时非常有用。然而,与callee一样,caller属性也带来了代码可读性和维护性的挑战,并且在严格模式下是不可用的。

function outerFunction() {  innerFunction();  
}  function innerFunction() {  console.log(innerFunction.caller); // 指向outerFunction  
}  outerFunction();

替代方案

  1. 递归函数:对于递归函数,直接使用函数名而不是arguments.callee
  2. 调试和日志记录:对于需要知道调用栈的情况,考虑使用现代浏览器的开发者工具,或者利用Error对象的堆栈跟踪(尽管这可能会因浏览器而异且不是跨平台的解决方案)。
  3. 设计模式:考虑使用设计模式(如事件监听器、回调函数等)来管理函数间的依赖和调用关系,而不是依赖caller属性。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/51076.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Python】如何修改元组的值?

一、题目 We have seen that lists are mutable (they can be changed), and tuples are immutable (they cannot be changed). Lets try to understand this with an example. You are given an immutable string, and you want to make chaneges to it. Example >>…

Java语言程序设计——篇九(2)

&#x1f33f;&#x1f33f;&#x1f33f;跟随博主脚步&#xff0c;从这里开始→博主主页&#x1f33f;&#x1f33f;&#x1f33f; 枚举类型 枚举类型的定义枚举类型的方法实战演练 枚举在switch中的应用实战演练 枚举类的构造方法实战演练 枚举类型的定义 [修饰符] enum 枚举…

内部文档:如何创建、提示和示例

每个组织都拥有一定的内部知识储备&#xff0c;可以让组织不断运转、持续发展。这些知识资产对于每个企业来说都是独一无二的&#xff0c;并且高度依赖于为您工作的人员。问题是&#xff0c;这些知识常常储存在员工的头脑中。如果知识被记录下来&#xff0c;它通常隐藏在 Slack…

医院影像平台源码,C/S体系结构的C#语言PACS系统全套商业源代码

医学学影像临床信息系统具有图像采集、显示、存储、传输和管理等功能&#xff0c;支持DICOM影像设备和非DICOM影像设备&#xff0c;可以识别CT、MR、CR/DR、X光、DSA、B超、NM、SC等设备的图像类型&#xff0c;可对数字影像进行无损压缩和有损压缩处理。C/S体系结构的多媒体数据…

湖仓一体架构解析:数仓架构选择(第48天)

系列文章目录 1、Lambda 架构 2、Kappa 架构 3、混合架构 4、架构选择 5、实时数仓现状 6、湖仓一体架构 7、流批一体架构 文章目录 系列文章目录前言1、Lambda 架构2、Kappa 架构3、混合架构4、架构选择5、实时数仓现状6、湖仓一体架构7、流批一体架构 前言 本文解析了Lambd…

Verilog语言和C语言的本质区别是什么?

在开始前刚好我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「C语言的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff01; 用老石的一句话其实很好说…

QtQuick-QML类型系统-对象特性 (方法特性)

概念 对象类型的方法就是一个函数&#xff0c;可以执行&#xff0c;也可以和信号关联&#xff0c;这样发射信号会自动调用。 在C中&#xff0c;可以使用Q_INVOKABLE宏或者Q_SLOT宏进行注册的方式定义方法&#xff1b; 另外&#xff0c;也可以在QML文档的对象声明里使用下面的…

二分类损失 - BCELoss详解

BCELoss (Binary Cross-Entropy Loss) 是用于二分类问题的损失函数。它用于评估预测值和实际标签之间的差异。在 PyTorch 中&#xff0c;BCELoss 是一个常用的损失函数。以下是 BCELoss 的详细计算过程和代码实现。 BCELoss 的计算过程 给定一组预测值 y ^ \hat{y} y^​ 和实…

redis的使用场景-分布式锁

使用redis的setnx命令放入数据并用此数据当锁完成业务&#xff08;但是如果用户操作途中出现异常导致超出指定时间会出现问题&#xff09; Service public class StockService {Autowiredprivate StockDao stockDao; //mapper注入Autowiredprivate StringRedisTemplate redisT…

ssm框架整合,异常处理器和拦截器(纯注解开发)

目录 ssm框架整合 第一步&#xff1a;指定打包方式和导入所需要的依赖 打包方法&#xff1a;war springMVC所需依赖 解析json依赖 mybatis依赖 数据库驱动依赖 druid数据源依赖 junit依赖 第二步&#xff1a;导入tomcat插件 第三步&#xff1a;编写配置类 SpringCon…

【AI绘画】Midjourney V6初学者完全指南 参数篇

本文我们将详细介绍对图像生成结果产生重大影响的"参数"。 1. 什么是参数? 参数是一种添加到提示末尾以调整图像生成输出设置的方法。 它们用两个连字符"–“和特定字符串表示,如”–ar"、“–chaos”、"–r"等。 您也可以同时使用多个参数…

分布式控制算法——第一部分:基础概念与原理

分布式控制算法 文章目录 分布式控制算法第一部分&#xff1a;基础概念与原理1. 引言分布式控制的定义分布式控制系统的特点与优势分布式控制的应用场景 2. 分布式系统基础分布式系统的定义和特性分布式计算模型常见的分布式系统架构 3. 分布式控制基础分布式控制的基本原理中央…

面试题003:面向对象的特征 之 封装性

Java规定了4种权限修饰&#xff0c;分别是:private、缺省、protected、public。我们可以使用4种权限修饰来修饰类及类的内部成员。当这些成员被调用时&#xff0c;体现可见性的大小。 封装性在程序中的体现&#xff1a; 场景1:私有化(private)类的属性&#xff0c;提供公共(pub…

java项目中添加SDK项目作为依赖使用(无需上传Maven)

需求&#xff1a; 当需要多次调用某个函数或算法时&#xff0c;不想每次调用接口都自己编写&#xff0c;可以将该项目打包&#xff0c;以添加依赖的方式实现调用 适用于&#xff1a; 无需上线的项目&#xff0c;仅公司或团队内部使用的项目 操作步骤&#xff1a; 以下面这…

菜鸟从0学微服务——MyBatis-Plus

关于“菜鸟从0学微服务” 针对有编程基础&#xff0c;开始学习微服务的同学&#xff0c;我们陆续推出从0学微服务的笔记分享。力求从各个中间件的使用来反思这些中间件的作用和优势。 会分享的比较快&#xff0c;会记录demo演算和中间件的使用过程&#xff0c;至于细节的理论…

OPENMV脱机调阈值

用到了7个按钮&#xff0c;第一个用来选择是否进入调阈值模式。 后6个用来调整OPENMV阈值编辑器的6个滑动条 OPENMV代码 import sensor, image, time, pyb,math, display from pyb import UARTsensor.reset() sensor.set_framesize(sensor.QQVGA) sensor.set_pixformat(sens…

【数学建模】——【python】实现【最短路径】【最小生成树】【复杂网络分析】

目录 1. 最短路径问题 - 绘制城市间旅行最短路径图 题目描述&#xff1a; 要求&#xff1a; 示例数据&#xff1a; python 代码实现 实现思想&#xff1a; 要点&#xff1a; 2. 最小生成树问题 - Kruskal算法绘制MST 题目描述&#xff1a; 要求&#xff1a; 示例数据…

【Linux】模拟实现简易shell命令行:基于进程创建、进程等待、进程替换等知识的练习

程序功能&#xff1a;模拟实现一个自己的shell执行命令行。 涉及知识&#xff1a;字符串输入及操作函数、子进程创建、进程等待、进程替换、环境变量及获取、添加环境变量的函数 额外需要了解的功能函数&#xff1a;chdir&#xff08;char* path&#xff09;函数——改变当前…

PostgreSQL入门与进阶学习,体系化的SQL知识,完成终极目标高可用与容灾,性能优化与架构设计,以及安全策略

​专栏内容&#xff1a; postgresql使用入门基础手写数据库toadb并发编程 个人主页&#xff1a;我的主页 管理社区&#xff1a;开源数据库 座右铭&#xff1a;天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物. 文章目录 概述基础篇初级篇进阶篇…

安装 GCC 编译器和开发工具

安装 GCC 编译器和开发工具 更新软件包管理器 在 CentOS 终端中&#xff0c;首先更新软件包管理器&#xff1a; sudo yum update -y安装 GCC 编译器和其他开发工具 运行以下命令安装 GCC 编译器和其他必要的开发工具&#xff1a; sudo yum groupinstall -y "Development T…