DOM节点的创建、插入、删除、查找、替换
在前端开发中，js与html联系最紧密的莫过于对DOM的操作了，本文为大家分享一些DOM节点的基本操作。
一、创建DOM节点
使用的命令是
var oDiv = document.createElement('div');
这样就创建了一个div标签。
二、插入DOM节点
移动DOM节点也就是把这个节点插入到html文档中的某个地方，这里js给了我们两个方法：
1.appendChild()：把节点插入到父节点的末尾。
document.body.appendChild(oDiv); //把div插入到body中，并且位于末尾
2.insertBefore()：把节点插入到父节点的某个兄弟节点的前面。
var oP = createElement('p'); //创建一个p节点
document.body.insertBefore(oP,oDiv); //把p节点插入到div的前面
三.删除DOM节点
删除DOM节点的方法是removeChild()。
document.body.removeChild(oP); //删除p节点
四.查找DOM节点
查找DOM节点的方法很多，常用的有：
getElementById() //通过元素Id，唯一性
如html文档如下：
<body>
<div id='box'></div>
</body>
这是可以使用getElementById()获取到id为box的div。
var oDiv = document.getElementById('box');
2.getElementsByTagName() //通过元素的标签名来选择元素
var aDiv = getElementsByTagName('div');
要注意的是，getElementsByTagName()获取的是一组元素，所以如果想取得上面那个id为box的div要在后面加上[0];
var oDiv = getElementsByTagName('div')[0];
五、替换DOM节点
替换DOM节点的方法是replaceChild()。
var oSpan = document.createElement('span'); //创建一个span标签
document.body.replaceChild(oSpan,oBox); //用span标签替换div标签
最常用的DOM操作就是这些了，其他还有很多的方法，就目前而言，各浏览器兼容性不太好，所以还是推荐大家暂时只使用上述这些方法。
DOM节点的创建、插入、删除、查找、替换的更多相关文章
- jQuery 节点操作（创建 插入 删除 复制 替换 包裹）
一,创建元素节点: 第1个步骤可以使用jQuery的工厂函数$()来完成,格式如下: $(html); $(html)方法会根据传入的HTML标记字符串,创建一个DOM对象,并将这个DOM对象包装成一 ...
- [PHP] 数据结构-链表创建-插入-删除-查找的PHP实现
链表获取元素1.声明结点p指向链表第一个结点,j初始化1开始2.j<i,p指向下一结点,因为此时p是指向的p的next,因此不需要等于3.如果到末尾了,p还为null,就是没有查找到 插入元素1 ...
- DOM节点的创建、插入、删除
值得注意的是:节点的创建.插入以及删除都是操作父级容器.(1)创建var newDiv = documnet.createElement('div'); ——创建的元素只能操作一次 (2)插入/追加a ...
- DOM 节点的克隆与删除
无奈的开头 关于DOM节点操作,如果仅仅是根据标准API来操作,那是最简单不过的了.但是现实中却哪有这么容易的问题让我们解决,其实不仅仅是节点的克隆与删除,节点的添加也是如此,而且添加节点需要考虑的情 ...
- HTML DOM的创建，删除及替换
创建HTML元素 document.appendChild() 将新元素作为父元素的最后一个子元素进行添加 如需向HTML DOM添加新元素,首先必须创建该元素,然后把它追加到已有的元素上 var n ...
- DOM节点的创建
1.createAttribute() 创建一个属性节点 => 接收参数为string类型的属性名称 var a=document.getElementsByClassName('name1') ...
- 二叉搜索树-php实现 插入删除查找等操作
二叉查找树(Binary Search Tree),(又:二叉搜索树,二叉排序树)它或者是一棵空树,或者是具有下列性质的二叉树: 若它的左子树不空,则左子树上所有结点的值均小于它的根结点的值: 若它的 ...
- js节点的创建添加删除
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 链表的C++实现——创建-插入-删除-输出-清空
注:学习了数据结构与算法分析后,对链表进行了C++实现,参考博文:http://www.cnblogs.com/tao560532/articles/2199280.html 环境:VS2013 // ...
随机推荐
- 使用regasm注册.net com组件出现不是有效的.net程序集的解决办法
作者:朱金灿 来源:http://blog.csdn.net/clever101 在电脑上装有VS 2008和VS 2010.使用VS 2010编写了一个C# com组件:MyCom(基于.net f ...
- 【AngularJS学习笔记】AngularJS表单验证
AngularJS表单验证 AngularJS提供了一些自带的验证属性 1.novalidate:添加到HTML的表单属性中,用于禁用浏览器默认的验证. 2.$dirty 表单有填写记录 3.$v ...
- jqueryEasyui重新渲染
转载: jQuery EasyUI parser 的使用场景 | WebUI框架使用参考+http://www.easyui.info/archives/216.html parser,故名意思,就是 ...
- Android chromium 2
Overview JNI (Java Native Interface) is the mechanism that enables Java code to call native function ...
- tensorflow 问题库
1.module 'tensorflow.python.ops.nn' has no attribute 'rnn_cell' 将tf.nn.rnn_cell ->tf.contrib.rnn
- How Javascript works (Javascript工作原理) (十四) 解析，语法抽象树及最小化解析时间的 5 条小技巧
个人总结:读完这篇文章需要15分钟,文章介绍了抽象语法树与js引擎解析这些语法树的过程,提到了懒解析——即转换为AST的过程中不直接进入函数体解析,当这个函数体需要执行的时候才进行相应转换.(因为有的 ...
- 监控web服务（http，本地 / 远程监控nginx）
监控 httpd 服务一: #!/bin/bash #描述: 秒级别监控 http 服务 while [ 1 -lt 2 ] do sleep 10 ai=`netstat -ntl | grep & ...
- CMSIS-RTOS 中断处理Interrupt Handling
RTOS中断处理Interrupt Handling 在RTOS中使用信号来触发线程间的行为是比较简单和高效的,而对于Cortex-M微控制器来讲,从中断源获取信号来触发线程同样是一种重要的方式.虽然 ...
- 05-数据类型转换（bool转换）
05-数据类型转换(bool转换)
- 实现一个函数clone，可以对JS中的5种数据类型（Number、String、Object、Array、Boolean）进行值复制
实现一个函数clone,可以对JS中的5种数据类型(Number.String.Object.Array.Boolean)进行值复制