javasript 的DOM 节点操作：创建，插入，删除，复制以及查找节点

DOM 含义： DOM 是文档对象模型（Document Object Model）是一种基于浏览器编程的一套API 接口，我W3C 出台推荐的标准。其赋予了JS 操作节点的能力，当网页被加载时，浏览器就会创建页面的文档对象模型。

节点：根据W3C的HTML DOM 标准，HTML 文档中的所有内容都是节点。

1. 整个文档是一个文档节点

2. 每个HTML元素是元素节点

3. HTML元素内的文本是文本节点

4.每个HTML属性都是属性节点

5.每个注释都是注释节点

所以HTML DOM 将HTML 文档视作树结构，这种结构被称为节点数。通过HTML DOM 节点树种的所有节点都可以通过JS进行访问。所有HTML 元素（节点）均可被修改、

一、创建节点、追加节点

1.createElement（标签名）创建一个元素节点（具体的一个元素）。

2.appendChild（节点）追加一个节点

3.createTextNode（节点文本内容）创建一个文本节点

var oDiv = document.createElement('div')  // 常见一个div元素，因为是document 对象的方法

var oDivText = document.createTextNode('666') // 创建一个文本节点内容是666 , 因为是document 对象的方法

oDiv.appendChild(oDivText) // 父级.appendChild(子节点); 在div元素中添加6666

document.body.appendChild(oDiv) // 父级.appendChild(子节点);document.body是指向<body> 元素

document.documentElement.appendChild(createNode) //父级.appendChild(子节点); document.documentElement 是指向html 元素

var oDiv = document.createElement('div')  // 常见一个div元素，因为是document 对象的方法

var oDivText = document.createTextNode('666') // 创建一个文本节点内容是666 , 因为是document 对象的方法

oDiv.appendChild(oDivText) // 父级.appendChild(子节点); 在div元素中添加6666

document.body.appendChild(oDiv) // 父级.appendChild(子节点);document.body是指向<body> 元素

document.documentElement.appendChild(createNode) //父级.appendChild(子节点); document.documentElement 是指向html 元素

二、插入节点

1.appendChild（节点）也是一种插入节点的方式，还可以添加已经存在的元素，会将其元素从原来的位置移动新的位置

2.insertBefore(a,b), 意思是a节点会插入b节点的前面

var oDiv = document.createElement("div");//创建一个div元素，因为是document对象的方法。

var oDiv1 = document.getElementById("div1");

            document.body.insertBefore(oDiv,oDiv1);//在oDiv1节点前插入新创建的元素节点

    ul.appendChild(ul.firstChild); //把ul的第一个元素节点移到ul子节点的末尾

var oDiv = document.createElement("div");//创建一个div元素，因为是document对象的方法。

var oDiv1 = document.getElementById("div1");

            document.body.insertBefore(oDiv,oDiv1);//在oDiv1节点前插入新创建的元素节点

    ul.appendChild(ul.firstChild); //把ul的第一个元素节点移到ul子节点的末尾

注：在练习的时候，

注意以上2种写法的差别，下面一种换行的方式会导致，最后一个lastChild 是空格节点，所以必须保证同一行

详见附件方法

三、删除、移除节点
1、removeChild(节点) 删除一个节点，用于移除删除一个参数（节点）。其返回的被移除的节点，被移除的节点仍在文档中，只是文档中已没有其位置了。

var removeChild = document.body.removeChild(div1);//移除document对象的方法div1

var removeChild = document.body.removeChild(div1);//移除document对象的方法div1

四、替换节点
1、replaceChild(插入的节点，被替换的节点) ，用于替换节点，接受两个参数，第一参数是要插入的节点，第二个是要被替换的节点。返回的是被替换的节点。

var replaceChild= document.body.replaceChild(div1,div2); //将div1替换div2

var replaceChild= document.body.replaceChild(div1,div2); //将div1替换div2

五、查找节点
1、childNodes 包含文本节点和元素节点的子节点。

for (var i = 0; i < oList.childNodes.length; i++) {//oList是做的ul的对象。

//nodeType是节点的类型，利用nodeType来判断节点类型，再去控制子节点

//nodeType==1 是元素节点

//nodeType==3 是文本节点

    if (oList.childNodes[i].nodeType == 1) {//查找到oList内的元素节点

        console.log(oList.childNodes[i]);//在控制器日志中显示找到的元素节点

    }

}

for (var i = 0; i < oList.childNodes.length; i++) {//oList是做的ul的对象。

//nodeType是节点的类型，利用nodeType来判断节点类型，再去控制子节点

//nodeType==1 是元素节点

//nodeType==3 是文本节点

    if (oList.childNodes[i].nodeType == 1) {//查找到oList内的元素节点

        console.log(oList.childNodes[i]);//在控制器日志中显示找到的元素节点

2、A、children也可以获取子节点，而且兼容各种浏览器。包括IE6-8
B、parentNode：获取父节点

var oList = document.getElementById('list');//oList是做的ul的对象

var oChild=document.getElementById('child');//oChild是做的ul中的一个li的对象

//通过子节点查找父节点//parentNode：获取父节点

console.log(oChild.parentNode);//在控制器日志中显示父节点

console.log(oList.children);//在控制器日志中显示oList子节点

console.log(children.length)//子节点的个数

var oList = document.getElementById('list');//oList是做的ul的对象

var oChild=document.getElementById('child');//oChild是做的ul中的一个li的对象

//通过子节点查找父节点//parentNode：获取父节点

console.log(oChild.parentNode);//在控制器日志中显示父节点

console.log(oList.children);//在控制器日志中显示oList子节点

console.log(children.length)//子节点的个数

3、A、firstChild ; firstElementChild查找第一个子节点。此存在浏览器兼容问题：firstChild是IE兼容，firstElementChild是非IE兼容。

<span style="white-space:pre">      </span>//查找第一个子节点的封装函数

<span style="white-space:pre">      </span>function firstChild(ele) {

    <span style="white-space:pre">      </span>if (ele.firstElementChild) {<span style="font-family: Arial, Helvetica, sans-serif;">//如果该条件是true则在该浏览器（IE或非IE）中兼容</span>

    <span style="white-space:pre">      </span> return ele.firstElementChild;

    <span style="white-space:pre">      </span>} else {

    <span style="white-space:pre">      </span> return ele.firstChild;

    <span style="white-space:pre">      </span>}

<span style="white-space:pre">      </span>}

<span style="white-space:pre">      </span>firstChild(oList).style.background = 'red';//将获得的节点的背景变成红色

<span style="white-space:pre">      </span>//查找第一个子节点的封装函数

<span style="white-space:pre">      </span>function firstChild(ele) {

    <span style="white-space:pre">      </span>if (ele.firstElementChild) {<span style="font-family: Arial, Helvetica, sans-serif;">//如果该条件是true则在该浏览器（IE或非IE）中兼容</span>

    <span style="white-space:pre">      </span> return ele.firstElementChild;

    <span style="white-space:pre">      </span>} else {

    <span style="white-space:pre">      </span> return ele.firstChild;

    <span style="white-space:pre">      </span>}

<span style="white-space:pre">      </span>}

<span style="white-space:pre">      </span>firstChild(oList).style.background = 'red';//将获得的节点的背景变成红色

B、lastChild ; lastElementChild查找最后一个子节点。此存在浏览器兼容问题：lastChild 是IE兼容，lastElementChild是非IE兼容。

<span style="white-space:pre">      </span>//查找最后一个子节点的封装函数

<span style="white-space:pre">      </span>function lastChild(ele) {

    <span style="white-space:pre">      </span>if (ele.lastElementChild) {<span style="font-family: Arial, Helvetica, sans-serif;">//如果该条件是true则在该浏览器（IE或非IE）中兼容</span>

    <span style="white-space:pre">      </span> return ele.lastElementChild;

    <span style="white-space:pre">      </span>} else {

    <span style="white-space:pre">      </span> return ele.lastChild;

    <span style="white-space:pre">      </span>}

<span style="white-space:pre">      </span>}

<span style="white-space:pre">      </span>lastChild(oList).style.background = 'red';//将获得的节点的背景变成红色

<span style="white-space:pre">      </span>//查找最后一个子节点的封装函数

<span style="white-space:pre">      </span>function lastChild(ele) {

    <span style="white-space:pre">      </span>if (ele.lastElementChild) {<span style="font-family: Arial, Helvetica, sans-serif;">//如果该条件是true则在该浏览器（IE或非IE）中兼容</span>

    <span style="white-space:pre">      </span> return ele.lastElementChild;

    <span style="white-space:pre">      </span>} else {

    <span style="white-space:pre">      </span> return ele.lastChild;

    <span style="white-space:pre">      </span>}

<span style="white-space:pre">      </span>}

<span style="white-space:pre">      </span>lastChild(oList).style.background = 'red';//将获得的节点的背景变成红色

C、nextSibling ; nextElementSibling查找下一个兄弟节点。也是存在兼容性问题。

<span style="white-space:pre">      </span>//查找下一个兄弟节点的封装函数

<span style="white-space:pre">      </span>function nextSibling(ele) {

    <span style="white-space:pre">      </span>if (ele.nextElementSibling) {

    <span style="white-space:pre">      </span> return ele.nextElementSibling;

    <span style="white-space:pre">      </span>} else {

    <span style="white-space:pre">      </span> return ele.nextSibling;

        <span style="white-space:pre">      </span>}

    <span style="white-space:pre">      </span>}

<span style="white-space:pre">      </span>nextSibling(oMid).style.background = 'red';

<span style="white-space:pre">      </span>//查找下一个兄弟节点的封装函数

<span style="white-space:pre">      </span>function nextSibling(ele) {

    <span style="white-space:pre">      </span>if (ele.nextElementSibling) {

    <span style="white-space:pre">      </span> return ele.nextElementSibling;

    <span style="white-space:pre">      </span>} else {

    <span style="white-space:pre">      </span> return ele.nextSibling;

        <span style="white-space:pre">      </span>}

    <span style="white-space:pre">      </span>}

<span style="white-space:pre">      </span>nextSibling(oMid).style.background = 'red';

D、previousSibling ; previousElementSibling查找上一个兄弟节点。也是存在兼容性问题。

<span style="white-space:pre">      </span>//查找上一个兄弟节点的封装函数

<span style="white-space:pre">      </span>function previousSibling(ele) {

    <span style="white-space:pre">      </span>if (ele.nextElementSibling) {

    <span style="white-space:pre">      </span> return ele.previousElementSibling;

    <span style="white-space:pre">      </span>} else {

    <span style="white-space:pre">      </span> return ele.previousSibling;

    <span style="white-space:pre">      </span>     }

    <span style="white-space:pre">      </span>}

<span style="white-space:pre">      </span>previousSibling(oMid).style.background = 'red';

<span style="white-space:pre">      </span>//查找上一个兄弟节点的封装函数

<span style="white-space:pre">      </span>function previousSibling(ele) {

    <span style="white-space:pre">      </span>if (ele.nextElementSibling) {

    <span style="white-space:pre">      </span> return ele.previousElementSibling;

    <span style="white-space:pre">      </span>} else {

    <span style="white-space:pre">      </span> return ele.previousSibling;

    <span style="white-space:pre">      </span>     }

    <span style="white-space:pre">      </span>}

<span style="white-space:pre">      </span>previousSibling(oMid).style.background = 'red';

转载至：http://blog.csdn.net/torrex/article/details/54376633

来自为知笔记(Wiz)

附件列表

javasript 的DOM 节点操作：创建，插入，删除，复制以及查找节点的更多相关文章

jQuery 节点操作（创建插入删除复制替换包裹）
一,创建元素节点: 第1个步骤可以使用jQuery的工厂函数$()来完成,格式如下: $(html); $(html)方法会根据传入的HTML标记字符串,创建一个DOM对象,并将这个DOM对象包装成一 ...
ORACLE 11gR2 RAC添加删除（正常及强制）节点操作步骤（删除篇）
ORACLE 11gR2 RAC添加删除(正常及强制)节点操作步骤(删除篇) 本文主要转载 [ http://www.cnxdug.org/?p=2511 ] 有部分细节自己实验添加,再此谢谢前辈. ...
js的DOM节点操作：创建，插入，删除，复制，查找节点
DOM含义:DOM是文档对象模型(Document Object Model,是基于浏览器编程的一套API接口,是W3C出台的推荐标准.其赋予了JS操作节点的能力.当网页被加载时,浏览器就会创建页面的 ...
节点操作-创建并添加&删除节点&替换&克隆节点
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" ...
MySQL进阶11--DDL数据库定义语言--库创建/修改/删除--表的创建/修改/删除/复制
/*进阶 11 DDL 数据库定义语言库和表的管理一:库的管理:创建/修改/删除二:表的管理:创建/修改/删除创建: CREATE DATABASE [IF NOT EXISTS] 库名; 修 ...
[剑指Offer]18-题目一：删除链表的节点题目二：删除链表中重复节点
题目一题目 O(1)时间复杂度删除给定链表节点. 题解用待删除节点后一个节点的值覆盖待删除节点值,更新链接关系. 注意链表只有一个节点:删除尾结点:删除头节点的处理. 代码 class ListN ...
js节点的创建添加删除
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
链表的C++实现——创建-插入-删除-输出-清空
注:学习了数据结构与算法分析后,对链表进行了C++实现,参考博文:http://www.cnblogs.com/tao560532/articles/2199280.html 环境:VS2013 // ...
[PHP] 数据结构-链表创建-插入-删除-查找的PHP实现
链表获取元素1.声明结点p指向链表第一个结点,j初始化1开始2.j<i,p指向下一结点,因为此时p是指向的p的next,因此不需要等于3.如果到末尾了,p还为null,就是没有查找到插入元素1 ...

随机推荐

swagger框架
1.1 介绍 Swagger是一个简单又强大的能为你的Restful风格的Api生成文档工具.在项目中集成这个工具,根据我们自己的配置信息能够自动为我们生成一个api文档展示页,可以在浏览器中直接 ...
用Diff和Patch工具维护源码
在Unix系统下,维护源码版本可以使用很多方法,其中最常用的当然是大名鼎鼎的CVS,但实际上,简单的版本维护工作并没有必要使用复杂的CVS等专门的版本维护工具,Unix标配中的diff和patch工具 ...
6-Ubuntu与Windows不能相互复制
在安装Ubuntu系统后发现与Windows系统的文件不能相互复制,网上查了很多教程,发现都是不能用的,能实现的方法如下所示: 第一步: sudo apt-get autoremove open-vm ...
复利计算--web版--总结--软件工程
复利计算项目估计用时实际用时时间(小时) 5.5小时 6.5小时总共代码行 500 550 功能包含单利/复利计算,本金计算,求投资年限,求投资项目利率估计 (计算利息和,计算时间,计算 ...
Java Thread系列（三）线程安全
Java Thread系列(三)线程安全一.什么是线程安全线程安全概念:当多个线程访问某一个类(对象或方法)时,这个类始终都能表现出正确的行为,那么这个类(对象或方法)就是线程安全的. 线程安全来 ...
BUILDING ANGULAR APPS USING FLUX ARCHITECTURE
Flux is an architectural pattern based on unidirectional data flow. Although it is originated in the ...
UVa 1395 Slim Span （最小生成树）
题意:给定n个结点的图,求最大边的权值减去最小边的权值最小的生成树. 析:这个和最小生成树差不多,从小到大枚举左端点,对于每一个左端点,再枚举右端点,不断更新最小值.挺简单的一个题. #include ...
Web挖掘
Web挖掘 Web挖掘的目标是从Web的超链接.网页内容和使用日志中探寻有用的信息.依据Web挖掘任务,可以划分为三种主要类型:Web结构挖掘.Web内容挖掘和Web使用挖掘.Web结构挖掘简单的说就 ...
RocketMQ 运维指令
1.1. 控制台使用 RocketMQ 提供有控制台及一系列控制台命令,用于管理员对主题,集群,broker 等信息的管理登录控制台首先进入RocketMQ 工程,进入/RocketMQ/bin ...
20169205实验三敏捷开发与XP实践
20169205实验三敏捷开发与XP实践实验内容及步骤 (一)敏捷开发与XP基本知识敏捷开发(Agile Development)是一种以人为核心.迭代.循序渐进的开发方法. 一项实践在XP环境 ...

javasript 的DOM 节点操作：创建，插入，删除，复制以及查找节点

附件列表

javasript 的DOM 节点操作：创建，插入，删除，复制以及查找节点的更多相关文章

随机推荐

热门专题