获取页面所有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中,callee
和caller
是两个非标准的、但曾经在早期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中,更推荐使用函数名来引用自身,或者使用箭头函数来避免this
和arguments
的混淆。
caller
caller
属性是一个函数对象的属性,它指向调用当前函数的函数。这在你需要知道是哪个函数调用了当前函数时非常有用。然而,与callee
一样,caller
属性也带来了代码可读性和维护性的挑战,并且在严格模式下是不可用的。
function outerFunction() { innerFunction();
} function innerFunction() { console.log(innerFunction.caller); // 指向outerFunction
} outerFunction();
替代方案
- 递归函数:对于递归函数,直接使用函数名而不是
arguments.callee
。 - 调试和日志记录:对于需要知道调用栈的情况,考虑使用现代浏览器的开发者工具,或者利用
Error
对象的堆栈跟踪(尽管这可能会因浏览器而异且不是跨平台的解决方案)。 - 设计模式:考虑使用设计模式(如事件监听器、回调函数等)来管理函数间的依赖和调用关系,而不是依赖
caller
属性。