js的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元素中添加“666”
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子节点的末尾

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

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

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

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]);//在控制器日志中显示找到的元素节点
}
}

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)//子节点的个数

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

//查找第一个子节点的封装函数
function firstChild(ele) {
if (ele.firstElementChild) {//如果该条件是true则在该浏览器（IE或非IE）中兼容
return ele.firstElementChild;
} else {
return ele.firstChild;
}
}
firstChild(oList).style.background = 'red';//将获得的节点的背景变成红色

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

//查找最后一个子节点的封装函数
function lastChild(ele) {
if (ele.lastElementChild) {//如果该条件是true则在该浏览器（IE或非IE）中兼容
return ele.lastElementChild;
} else {
return ele.lastChild;
}
}
lastChild(oList).style.background = 'red';//将获得的节点的背景变成红色

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

//查找下一个兄弟节点的封装函数
function nextSibling(ele) {
if (ele.nextElementSibling) {
return ele.nextElementSibling;
} else {
return ele.nextSibling;
}
}
nextSibling(oMid).style.background = 'red';

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

//查找上一个兄弟节点的封装函数
function previousSibling(ele) {
if (ele.nextElementSibling) {
return ele.previousElementSibling;
} else {
return ele.previousSibling;
}
}
previousSibling(oMid).style.background = 'red';

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

jQuery 节点操作（创建插入删除复制替换包裹）
一,创建元素节点: 第1个步骤可以使用jQuery的工厂函数$()来完成,格式如下: $(html); $(html)方法会根据传入的HTML标记字符串,创建一个DOM对象,并将这个DOM对象包装成一 ...
单链表创建、删除、查找、插入之C语言实现
本文将详细的介绍C语言单链表的创建.删除.查找.插入以及输出功能一.创建 #include<stdio.h> #include<stdlib.h> typedef int E ...
ORACLE 11gR2 RAC添加删除（正常及强制）节点操作步骤（删除篇）
ORACLE 11gR2 RAC添加删除(正常及强制)节点操作步骤(删除篇) 本文主要转载 [ http://www.cnxdug.org/?p=2511 ] 有部分细节自己实验添加,再此谢谢前辈. ...
js学习-DOM之动态创建元素的三种方式、插入元素、onkeydown与onkeyup两个事件整理
动态创建元素的三种方式: 第一种: Document.write(); <body> <input type="button" id="btn" ...
节点操作-创建并添加&删除节点&替换&克隆节点
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" ...
[ActionScript 3.0] AS3 对XML的操作，创建、删除、增加节点方法
package { import flash.display.Sprite; /** * @author:Frost.Yen * @E-mail:871979853@qq.com * @create: ...
高效率http页面优化法则一【JS对DOM的操作】
高效http页面优化法则一很多人都认为JS的效率太慢了,都不愿意用js来实现相对困难一点的程序逻辑.在这里我要说的是其实js的效率并不慢,慢的是DOM,如果操作好DOM,你的js效率将提高接近千倍(这 ...
JS对DOM的操作优化法则
html页面显示过程解析HTML,并生成一棵DOM tree 解析各种样式并结合DOM tree生成一棵Render tree 对Render tree的各个节点计算布局信息,比如box的位置与尺寸 ...
JS基础DOM篇之二：ＤＯＭ级别与节点层次？
通过上一篇我们大致了解了什么是DOM,今天我们继续深入了解. 1.DOM级别在大家阅读DOM标准的时候,可能会看到DOM(0/1/2/3)级的字眼,这就是DOM级别.但实际上,DOM0级 ...
C#中对 XML节点进行添加，删除，查找和删除操作
从网上整理所得 XMLDocument来操作XML比较简单,虽然有时效率不是很高.代码如下已知有一个XML文件(bookstore.xml)如下: <?xml version="1. ...

随机推荐

Android之selector选择器的使用
1.selector简介 selector中文的意思选择器,在Android中常常用来作组件的背景,实现组件在不同状态下不同的背景颜色或图片的变换.使用十分方便.主要是用来改变ListView和But ...
c++ STL使用
STL标准模板库,提供一些类似java集合类的数据结构容器.比如eque.list.vector.map 等.还提供一些支持这些容器的算法和遍历容器的迭代器. 使用方法 #include <io ...
DEV 皮肤的使用
一.皮肤的使用拖入defaultLookAndFeel 组件到窗体中拖入ribbonControl 控件到窗体中将窗体继承为 DevExpress.XtraBars.Ribbon.RibbonF ...
elasticsearch 中文API 记数(八)
计数API 计数API允许开发者简单的执行一个查询,返回和查询条件相匹配的文档的总数.它可以跨多个索引以及跨多个类型执行. import static org.elasticsearch.index. ...
使用 top instance 命令查看运行中 MaxCompute 作业
我们都知道,在 MaxCompute Console 里,可以使用下面的命令来列出运行完成的 instance 列表. show p|proc|processlist [from <yyyy-M ...
由于没有公钥，无法验证下列签名 ppa
出现以上错误提示时,只要把后八位拷贝一下来,并在[终端]里输入以下命令并加上这八位数字回车即可! sudo apt-key adv --recv-keys --keyserver keyserver. ...
anchor-free : CornerNet 和 CenterNet 简要笔记
CornerNethourglass network -> prediction module = corner pooling -> heatmaps + embedding + off ...
我认为最节省时间的CSS命名规范
CSS命名规范一 js中对变量的命名最好使用camel case驼峰式命名法,但CSS中更适用于red-box命名规范. CSS命名规范二 BEM命名规范 B=>block E=>elem ...
Web交互增强
刚刚google了一下这个概念,在其他的领域已经存在了这个概念,但是web方面还是没有被人提及的,所以我在这里第一次声明web方面的交互增强交互增强 (interaction enhance) 相对 ...
php缓存技术有哪些（总结）
php缓存技术有哪些(总结) 一.总结一句话总结: 静态页面:全页面静态化缓存,页面部分缓存(将页面中不常变动的部分进行静态化缓存), 数据缓存:比如我的每轮的题目数据,商店,寻宝数据等数据库:查 ...

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

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

随机推荐

热门专题

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

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