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. supervisor 管理

    Supervisor是用Python开发的一套通用的进程管理程序,能将一个普通的命令行进程变为后台daemon,并监控进程状态,异常退出时能自动重启.它是通过fork/exec的方式把这些被管理的进程 ...

  2. Go - 指针简介 与 ++/--运算符以及控制语句

    指针 Go 语言中,对于指针有一些特殊约束: 1. 不在支持 “->” 符号,所有的指针使用“.” 来操作指针对象的成员变量 2. 指针的默认值为 “nil” ++ 与 -- 作为语句而非表达式 ...

  3. cocos2d中的坐标系统

    cocos2d中Layer的默认锚点是left.buttom sprite的锚点设置 setAnchorPoint(cc.p(0.5,0.5)); 默认锚点:中心 setAnchorPoint(cc. ...

  4. Linux 之 利用Google Authenticator实现用户双因素认证

    一.介绍:什么是双因素认证 双因素身份认证就是通过你所知道再加上你所能拥有的这二个要素组合到一起才能发挥作用的身份认证系统.双因素认证是一种采用时间同步技术的系统,采用了基于时间.事件和密钥三变量而产 ...

  5. ethereum

    几个网址 https://github.com/ethereum/go-ethereum/wikihttp://ethfans.org windows下安装以太币钱包 从下面网址下载钱包,不用安装是绿 ...

  6. Memcache线上常见问题（缓存雪崩、缓存无底洞、永久数据被踢）

    缓存雪崩现象 一般是由于某个节点失效,导致其它节点的缓存命中率下降,缓存中缺失的数据直接去数据库查询,短时间内造成数据库服务器崩溃. 或者是由于缓存周期性失效,比如设置每隔6个小时失效一次,那么每6个 ...

  7. memcached内存分配机制

    memcached的内存分配没有用到c语言中自带的malloc函数,因为这个函数分配内存的时候效率很低,对于这种要求快速响应,对效率要求非常高的缓存软件来说非常不合适. memcached用的是自己的 ...

  8. Vue使用echarts

    Vue使用echarts 该示例使用 vue-cli 脚手架搭建 安装echarts依赖 npm install echarts -S 创建图表 全局引入 main.js // 引入echarts i ...

  9. Nodejs&Express

    http://www.expressjs.comhttp://github.com/lelandtseng/form-datahttp://github.com/lelandtseng/mongo-m ...

  10. WebSocket实践——Java实现WebSocket的两种方式

    什么是 WebSocket? 随着互联网的发展,传统的HTTP协议已经很难满足Web应用日益复杂的需求了.近年来,随着HTML5的诞生,WebSocket协议被提出,它实现了浏览器与服务器的全双工通信 ...