查找:

  1. document.getElementsByTagName通过标签名获取元素,不论有多少个都返回元素集合。

  2. document.getElementsByClassName通过类名获取元素,同上返回集合。

  3. document.getElementById通过id属性名获取元素,返回元素对象

创建节点:document.createElementc创建元素节点,document.createTextNode创建文本节点

添加或移动节点:appendChild添加节点到指定元素内尾部,insertBefore添加元素通过基于指定元素位置之前加入,如果参数写的不是新创建的元素而是查找页面上已存在的元素则是移动如下图所示:

移除:父级.removeChild(父级内子元素),删除指定元素内的某一个子元素

复制:cloneNode()复制节点,如:元素对象.cloneNode(false)默认参数是false可以不写,false的话只克隆自身不包含元素内的子元素,true则连元素对象内的后代元素都复制下来。

[简洁]JavaScript中添加、移除、移动、复制、创建和查找节点元素的更多相关文章

  1. 手写面试编程题- 数组去重 深拷贝 获取文本节点 设置奇数偶数背景色 JS中检测变量为string类型的方法 第6题闭包 将两个数组合并为一个数组 怎样添加、移除、移动、复制、创建和查找节点? 继承 对一个数组实现随机排序 让元素水平 垂直居中的三种方式 通过jQuery的extend方法实现深拷贝

    第1题==>实现数组去重 通过 new Set(数组名) // var arr = [12, 12, 3, 4, 5, 4, 5, 6, 6]; // var newarr1 = new Set ...

  2. JS中的DOM操作怎样添加、移除、移动、复制、创建和查找节点

    DOM操作怎样添加.移除.移动.复制.创建和查找节点? (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元 ...

  3. DOM操作 ——如何添加、移除、移动、复制、创建和查找节点等。

    DOM操作 --如何添加.移除.移动.复制.创建和查找节点等. (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个 ...

  4. DOM操作——JavaScript怎样添加、移除、移动、复制、创建和查找节点

    (1). 创建新节点 createDocumentFragment() // 创建一个DOM片段 createElement() // 创建一个具体的元素 createTextNode() // 创建 ...

  5. Javascript中的一种深复制实现

    在javascript中,所有的object变量之间的赋值都是传地址的,可能有同学会问哪些是object对象.举例子来说明可能会比较好: typeof(true) //"boolean&qu ...

  6. DOM操作怎样添加、移除、移动、复制。创建和查找节点?

    (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节 ...

  7. MFC中添加了一个dialog,并创建了相应的类,初始化函数没有怎么办?

    1.在头文件中添加  virtual BOOL OnInitDialog();2.在对于的CPP文件中添加  BOOL CXXDlg::OnInitDialog()  {      return TR ...

  8. JavaScript 中的对象深度复制(Object Deep Clone)

    JavaScript中并没有直接提供对象复制(Object Clone)的方法. JavaScript中的赋值,其实并不是复制对象,而是类似`c/c++`中的引用(或指针),因此下面的代码中改变对象b ...

  9. 【转】JavaScript中的对象复制(Object Clone)

    JavaScript中并没有直接提供对象复制(Object Clone)的方法.因此下面的代码中改变对象b的时候,也就改变了对象a. a = {k1:1, k2:2, k3:3}; b = a; b. ...

随机推荐

  1. Loj #2321. 「清华集训 2017」无限之环

    Loj #2321. 「清华集训 2017」无限之环 曾经有一款流行的游戏,叫做 *Infinity Loop***,先来简单的介绍一下这个游戏: 游戏在一个 \(n \times m\) 的网格状棋 ...

  2. js 对数据进行过滤

    //对数据进行过滤 Array.prototype.filter = Array.prototype.filter || function (func) { var arr = this; var r ...

  3. Activiti开发案例之activiti-app更换数据源

    前言 由于Activiti 默认使用的数据库是H2数据库,重启服务后相关数据会丢失.为了永久保存,所以要配置关系型数据库,这里我们选择 SqlServer ,有钱任性. 环境 Activiti6,Sq ...

  4. Ubuntu 系统安装详解 19.04最新版本

    Ubuntu 19.04版本系统安装详解 1 .镜像的下载 推荐 阿里云镜像下载 2.安装 1.1.新建虚拟机 注意硬件的兼容性问题 当前只有5.x可以用,其他兼容各位可以尝试下,我也都试过,但只有5 ...

  5. IdentityServer4【Reference】之Profile Service

    Profile Service 当创建令牌或者请求像Userinfo这种端点时,IdentityServer通常会需要用户的标识信息(identity information),默认情况下,Ident ...

  6. java内存模型详解

    对于本篇文章,将从四个概念来介绍:内存模型基础,重排序,顺序一致性和happens-before 1.内存模型基础 在并发编程中,有两个关键问题:线程之间如何通信和如何同步.由此而引出了两种并发模型: ...

  7. Shell命令-文件及目录操作之ls、cd

    文件及目录操作 - ls.cd 1.ls:列出目录的内容及其内容属性信息 ls命令的功能说明 ls命令用于列出目录的内容及其内容属性信息. ls命令的语法格式 ls [OPTION]... [FILE ...

  8. Nginx集群session管理的两种方式

    1.IP_HASH 修改nginx配置文件 实现非常简单,但是绑定在一个服务器上了,不能跨越多个服务. 2.redis管理 管理session信息的空间,需要修改tomcat配置文件 下载相应的red ...

  9. Magento 2 Error: A technical problem with the server created an error. Try again to continue what you were doing. If the problem persists, try again later.

    有时在Magento上进行调试会很烦人,特别是如果出现了一些问题,而不是在你实际编写代码时. 这是Magento管理面板上发生的事情.截至目前,它可能是三个原因之一,让我们讨论一下: 1.管理员密码 ...

  10. hdu 1848 简单SG函数

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1848 Problem Description 任何一个大学生对菲波那契数列(Fibonacci num ...