查找:

  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. PSQLException: FATAL: no pg_hba.conf entry for host "127.0.0.1", user "ambari", database "ambari", SSL off

    On your Postgres server, you will need to update your pg_hba.conf file to allow access for the ambar ...

  2. 数据库的设计:深入理解 Realm 的多线程处理机制

    你已经阅读过 Realm 关于线程的基础知识.你已经知道了在处理多线程的时候你不需要关心太多东西了,因为强大的 Realm 会帮你处理好这些,但是你还是很想知道更多细节…… 你想知道在 Realm 的 ...

  3. B. Creating the Contest(水题)

    直接水过 #include<iostream> #include<algorithm> using namespace std; ; int a[maxn]; int n, u ...

  4. C# 对文本文件的几种读写方法总结

    计算机在最初只支持ASCII编码,但是后来为了支持其他语言中的字符(比如汉字)以及一些特殊字符(比如€),就引入了Unicode字符集.基于Unicode字符集的编码方式有很多,比如UTF-7.UTF ...

  5. 哈希长度扩展攻击(Hash Length Extension Attack)利用工具hexpand安装使用方法

    去年我写了一篇哈希长度扩展攻击的简介以及HashPump安装使用方法,本来已经足够了,但HashPump还不是很完善的哈希长度扩展攻击,HashPump在使用的时候必须提供original_data, ...

  6. python线程join方法

    转载:http://www.cnblogs.com/cnkai/p/7504980.html Python多线程与多进程中join()方法的效果是相同的. 下面仅以多线程为例: 首先需要明确几个概念: ...

  7. openstack搭建之-keystone配置(8)

    一. Base Node配置 mysql -uroot -proot CREATE DATABASE keystone GRANT ALL PRIVILEGES ON keystone.* to 'k ...

  8. hMailServer配置图文详细教程

    https://www.hmailserver.org/viewtopic.php?f=4&t=6

  9. css 通配符选择器

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  10. h5-音视频标签

    ###1. <video>:Html5提供的播放视频的标签          src:资源地址          controls:该属性定义是显示还是隐藏用户控制界面 调用默认控件    ...