1 DOM节点操作

1.1 创建节点 createElement()

var createDiv = document.createElement("div");

1.2 插入子节点appendChild()

appendChild() 方法向节点添加最后一个子节点

-insertBefore(插入的节点,参照节点)

-insertBefore() 方法 ,如果不是在末尾插入节点,而是想放在特定的位置上,用 这个方法. 该方法接受2个参数,第一个是要插入的节点,第二个是参照节点。如果 第二个参数 为null(不是不写),则默认插入到后面

可以给某个id 的前面

1.3 删除节点

removeChild() 父节点.removeChild(子节点);

不知道父级的情况下,可以这么写:node.parentNode.removeChild(node);

1.4 复制节点

cloneNode() var newNode = oldNode.cloneNode() ;

用于复制节点, 接受一个布尔值参数, true 表示深复制(复制节点及其所有子节点), false 表示浅复制(复制节点本身,不复制子节点)

1.5 设置节点属性

获取:getAttribute(名称)

设置:setAttribute(名称, 值)

删除:removeAttribute(名称)

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body> <div class="box1">
<div class="box2" id="box2"></div>
<div class="box3"></div>
</div> //节点的操作
//1.创建
var aaa = document.createElement("li");
var bbb = document.createElement("afadsfadsf");
console.log(aaa);
console.log(bbb); ` //2 添加
var box1 = document.getElementsByClassName("box1")[0];
box1.appendChild(aaa);
box1.insertBefore(bbb,aaa); `//3 删除
box1.removeChild(bbb);
aaa.parentNode.removeChild(aaa);//自杀,自己删除自己
//4 克隆
var ccc = box1.cloneNode();
var ddd = box1.cloneNode(true);
console.log(ccc);
console.log(ddd); </script>
</body>
</html>

js教程系列32 :javascript-DOM节点操作的更多相关文章

  1. JavaScript DOM–节点操作

    节点 节点至少拥有nodeType(节点类型).nodeName(节点名称)和nodeValue(节点值)这三个基本属性. 元素节点 nodeType  为1 属性节点 nodeType  为2 文本 ...

  2. JavaScript DOM节点操作总结

    节点类型 节点类型主要有三种:元素节点,属性节点和文本节点. 而对DOM的主要也就是围绕元素节点和属性节点的增删改查.下面就分别从对元素节点的操作和对属性节点的操作来介绍. 元素节点 查 在对DOM进 ...

  3. 前端JavaScript之DOM节点操作

    1.HTML DOM是啥 Document Object Model:定义了访问和操作HTML文档的标准方法,把HTML文档呈现为带有元素,属性和文本的树状结构 2.解析过程 HTML加载完毕,渲染引 ...

  4. 04-老马jQuery教程-DOM节点操作及位置和大小

    1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签.创建标签后,动态的给他添加属性.例如代码: // 动 ...

  5. 深入理解DOM节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...

  6. Node.js教程系列~目录

    Node.js这个东西在近几年火起来了,而且会一直火下去,无论在infoq还是在cnblogs,csdn上,都可以到处看到它的样子,它主推的应该就是异步式I/O 吧,是的,设计的很完美,很吸引人,虽然 ...

  7. (转载)html dom节点操作(获取/修改/添加或删除)

    DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下   HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素 ...

  8. JavaScript DOM 基础操作

    JavaScript DOM 基础操作 一.获取元素的六方式 document.getElementById('id名称') //根据id名称获取 document.getElementsByclas ...

  9. 第一百六十七节,jQuery,DOM 节点操作,DOM 节点模型操作

    jQuery,DOM 节点操作,DOM 节点模型操作 学习要点: 1.创建节点 2.插入节点 3.包裹节点 4.节点操作 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面 ...

随机推荐

  1. limesurvey的问卷类型

  2. 记一次 Docker swarm - overlay network access error

    背景 之前使用Docker swam 在不同的服务器 (docker host) 上面创建了service,他们之间的container通过overlay的网络通信. 昨天由于公司网络维护,其中一台服 ...

  3. 在VritualBox中安装CentOS7

    系统:Windows10 位 详细步骤参考: Windows平台上通过VirtualBox安装centos虚拟机 安装virtual box 出现2503错误解决:c:/windows/temp 添加 ...

  4. linux rz 乱码

    Linux shell rz和sz是终端下常用的文件传输命令,rz和sz通过shell被调用,其中rz用于从启用终端的系统上传文件到目标系统(终端登录的目标系统), 这里不过多介绍这些命令,只是记录一 ...

  5. SVN更新或提交时出现冲突该如何解决

    解决版本冲突的命令.在冲突解决之后,需要使用svnresolved来告诉subversion冲突解决,这样才能提交更新.冲突发生时,subversion会在WorkCopy中保存所有的目标文件版本(上 ...

  6. 「小程序JAVA实战」小程序多媒体组件(27)

    转自:https://idig8.com/2018/08/19/xiaochengxujavashizhanxiaochengxuduomeitizujian27/ 来说下 ,小程序的多媒体组件.源码 ...

  7. VS2013 查看程序各个函数的CPU利用率<转>

    自己写的程序CPU占用率过高,无法锁定原因时,可以用VS2013帮忙检测 1. 打开VS 性能分析 2. 启动项目进行检测 3. 选择CPU采样 完成 4. 分析一段时间 然后停止分析 5. 选择显示 ...

  8. python中heapq堆的讲解

    堆的定义: 堆是一种特殊的数据结构,它的通常的表示是它的根结点的值最大或者是最小. python中heapq的使用 列出一些常见的用法: heap = []#建立一个常见的堆 heappush(hea ...

  9. Python实现阿里云短信推送

    本篇文章是使用Python的Web框架Django提供发送短信接口供前端调用,Python版本2.7 阿里云入驻.申请短信服务.创建应用和模板等步骤请参考:阿里云短信服务入门 1.下载sdk 阿里云短 ...

  10. 将中国标准时间转成yyyy-MM-dd

    public static void main(String[] args) throws ParseException { String s = "Tue Jul 12 00:00:00 ...