前端js-----DOM之节点操作(增删改)

news/2024/7/19 15:03:10 标签: javascript, js, 前端

1.创建节点:document.createElement(‘tagName’);

2.添加节点:node.appendChild(child);将一个节点添加到指定父节点的子节点列表末尾,其中node为父元素。 node.insertBefore(child,指定元素);将一个节点添加到父节点的指定子节点前面。

3.删除节点:node.removeChild(child);返回的是删除的节点。

4.复制(克隆)节点:node.cloneNode();返回调用该方法的节点的一个副本(拷贝节点),如果参数为空或为false,则是浅拷贝,即只克隆节点本身,不可隆里面的节点内容;如果参数为true是深拷贝,即拷贝标签和内容。


http://www.niftyadmin.cn/n/1143463.html

相关文章

前端js-----DOM事件高级

事件高级: 注册事件有两种方式,第一个是传统方式;第二个是方法监听注册的方式。 addEventListener(); 特点为:同一个元素同一个事件可以注册多个监听器。其参数有三个,第一个参数为type:事件类型字符串&am…

前端js-----DOM事件高级(阻止默认行为事件冒泡)

有时候我们不需要一些默认行为,这时我们需要阻止默认行为:代码如下 a.onclick function(e){ //e.preventDefault();//适用普通浏览器 //e.returnValue;//ie 6 , 7, 8 return false;//无兼容,(仅限于传统注册方式,但r…

前端js-----动态生成表格(节点操作)

针对DOM节点操作&#xff0c;该案例效果图如下&#xff08;代码量不多&#xff0c;就没有结构与行为相分离&#xff09;&#xff1a; 原生js实现&#xff08;注释里面解释了做法&#xff09;&#xff1a; <!DOCTYPE html> <html><head><meta charset&quo…

前端js-----购物车加减事件(全选和全不选)

原生js&#xff08;效果图如下&#xff09;&#xff1a; 代码&#xff08;html、css、js没有分离&#xff09;&#xff1a; <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><style type"text/css&q…

前端js-----手风琴(jQuery)

运用jQuery效果&#xff08;功能如下&#xff09;&#xff1a; 代码&#xff08;链式编程&#xff09;&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content&quo…

前端js-----购物车全功能(jQuery)

效果图&#xff1a; HTML&&CSS&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title&g…

快速幂与64位整数乘法(位运算)

矩阵快速幂和64位整数乘法 矩阵快速幂64位整数乘法 矩阵快速幂 问题链接&#xff1a; AcWing 90. 64位整数乘法 问题描述&#xff1a; 分析 快速幂需要用到位运算的思想&#xff0c;求 a b a^b ab&#xff0c;我们将 b b b转换成二进制的形式&#xff0c;假设 b 7 b7 b7&…

前端js-----选项卡/tab栏(面向对象)

功能效果如下&#xff1a; 实现代码&#xff1a; HTML&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"…