JS DOM 创建与获取
创建节点
1 | // 创建一个元素节点，参数为标签名 |
创建文本节点
1 | // 创建一个文本节点，参数为文本内容 |
在元素内部的末尾添加节点
1 | // 在元素内部的末尾添加节点，参数为要添加的节点 |
在元素内部的末尾添加内容或节点
1 | // args 参数可以是 DOM 节点、DOM 节点数组、HTML 字符串、文本字符串 |
在元素内，将节点添加到指定节点之前，返回添加的子节点
1 | // 如果给定的节点已经存在于文档中， 会将其从当前位置移动到新位置。（也就是说，它会在附加到指定的新父节点之前自动从现有的父节点中移除。）这意味着一个节点不能同时存在于文档的两个位置。 |
删除节点
1 | // 删除 ele 节点，包括其子节点 |
删除子节点
1 | ele.removeChild(childNode); |
替换节点
1 | ele.replaceChild(newNode, oldNode); |
克隆节点
1 | // 参数为 true，则执行深拷贝，复制节点及其子节点；参数为 false，则执行浅拷贝，只复制节点本身，不复制子节点。(默认为false) |
获取父节点
1 | ele.parentNode |
找到最近的指定父节点
1 | ele.closest("selector") |
获取节点
1 | // 获取元素节点，参数为id名 |
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 FlyTeng！
wechat
alipay
相关推荐
2025-02-12
JS 用 Set 实现 交集、并集、差集
1234567891011121314let a = new Set([1, 2, 3]);let b = new Set([4, 3, 2]);// 交集let intersect = new Set([...a].filter(x => b.has(x)));// set {2, 3}// 并集let union = new Set([...a, ...b]);// Set {1, 2, 3, 4}// 差集let difference = new Set([...a].filter(x => !b.has(x)));// Set {1}
2025-02-13
JS 判断数据类型
123456789// typeof 操作符可以返回一个值的类型。对于对象（包括数组和 null），typeof 会返回 "object"，但它不能区分数组和对象，因此需要额外判断。typeof value// 返回 [object Type]，value可以是任意值Object.prototype.toString.call(value)// instanceof 运算符可以判断一个对象是否是某个构造函数的实例。如果需要判断一个对象是否是 Object 类型的实例，可以使用 instanceof Object。// 需要注意，instanceof 对数组和对象都会返回 true，因此需要 value !== null 排除 null。value instanceof Constructor
2025-02-22
Vue 计算属性 computed
当 computed 内部的变量发生了变化，computed 会重新计算，并返回新的值。 函数式写法 12345678910111213<!-- 可以通过模板语法直接使用 --><template> <div>{{ sum }}</div></template><script>export default { computed:{ sum(){ return this.num1 + this.num2 } }}</script> setup 写法 123456789101112131415161718<!-- 可以通过模板语法直接使用 --><template> <div>{{ sum...
2025-02-26
蓝桥杯 Web 练习
拼接url参数 (简单) 对函数参数相关词语进行规则匹配 (中等) 1234567891011121314151617181920212223242526272829303132333435363738394041// 假设生成的绘画数据数组为 artDataArrayconst artDataArray = [ { "imageUrl": "images/img1.jpg", "tags": "知更鸟、湖蓝色、十分可爱、皮克斯渲染" }, { "imageUrl": "images/img2.jpg", "tags": "知更鸟、个性的眉毛、模糊毛皮" }, { "imageUrl": "images/img3.jpg", "tags": "知更鸟、剪纸风格、个性的眉毛"...
2025-03-06
JavaScript Promise 的使用
Promise 的概念 一个 Promise 必然处于以下几种状态之一： 待定（pending）：初始状态，既没有被兑现，也没有被拒绝。 已兑现（fulfilled）：意味着操作成功完成。可以用then方法来处理。 已拒绝（rejected）：意味着操作失败。可以用catch方法来处理 如果一个 Promise 已经被兑现或拒绝，即不再处于待定状态，那么则称之为已敲定（settled）。 Promise 基本使用 Promise 成功回调 123456const promise = new Promise((resolve, reject) => { // 模拟异步操作 setTimeout(() => { resolve('成功'); },1000)}); Promise 失败回调 123456const promise = new Promise((resolve, reject) => { // 模拟异步操作 setTimeout(()...
评论
