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 元素

x

1

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

2

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

3

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

4

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

5

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

1

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

2

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

3

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

4

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

5



注： 在练习的时候，




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


详见附件方法


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


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


1



1


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


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


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


1



1


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


1



1


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


2


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


3


//nodeType==1 是元素节点  


4


//nodeType==3 是文本节点  


5


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


6


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


7


    }  


8


}  


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


1



1


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


2


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


3


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


4


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


5


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


6


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‘;//将获得的节点的背景变成红色  


1



1


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


2


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


3


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


4


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


5


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


6


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


7


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


8


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


9


<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‘;//将获得的节点的背景变成红色  


1



1


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


2


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


3


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


4


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


5


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


6


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


7


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


8


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


9


<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‘;  


1



1


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


2


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


3


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


4


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


5


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


6


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


7


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


8


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


9


<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‘;  


1



1


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


2


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


3


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


4


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


5


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


6


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


7


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


8


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


9


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


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


来自为知笔记(Wiz)


附件列表



原文地址：https://www.cnblogs.com/zjx2011/p/8447709.html
				


				
时间： 2024-07-30 15:18:46 

		


		


	

	
	

		


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


						

		

			

                JavaScript之jQuery-3 jQuery操作DOM(查询、样式操作、遍历节点、创建插入删除、替换、复制)
			

		

		

									

				一.jQuery操作DOM - 查询 html操作 - html(): 读取或修改节点的HTML内容,类似于JavaScript中的innerHTML属性 文本操作 - text(): 读取或修改节点的文本内容,类似于JavaScript中的textContent属性 值操作 - val(): 读取或修改节点的value属性值,类似于 JavaScript 中的value值 属性操作 - attr(): 读取或者修改节点的属性 - removeAttr(): 删除节点的属性 二.jQuery操作			

		

	

						

		

			

                08.16号 dom  节点的创建 和删除DOM表单与非表单取值的方法 和操作属性与操作样式
			

		

		

									

				<html> <head> <meta charset="utf-8"> <title>Dom操作</title> <script type="text/javascript" src="08.16/08.16.js"></script> </head> <body> <!--dom节点添加 删除 ; createElemen 创建一			

		

	

				

		

			

                DOM元素选择 属性操作 事件操作 节点操作 创建元素的区别
			

		

		

									

				DOM 获取页面元素 document.getElementById('id'); // id 选择器 document.getElementsByTagName('div'); // 标签选择器 返回伪数组 // html新增 document.getElementsByClassName('box'); // 类名学则器 document.querySelector('#id'): // 返回指定选择器的第一个元素对象,里面写css选择器 document.querySelectorAll(			

		

	

				

		

			

                节点操作-创建并添加&amp;删除节点&amp;替换&amp;克隆节点
			

		

		

									

				<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>DOM增删改查</title> <style type="text/css"> div{ border:#306 1px solid; width:200px; height:30px; margin:10px; } #div			

		

	

				

		

			

                节点的创建,追加,删除,替换
			

		

		

									

				# 节点的创建 # 获取父对象            var div = document.getElementById("div");            var p = document.getElementById("p"); 增加节点的标签名            var a = document.createElement("a"); 增加节点的属性            a.href="http://www.baidu.c			

		

	

				

		

			

                DDL 数据库定义语言--库创建/修改/删除--表的创建/修改/删除/复制
			

		

		

									

				/*进阶 11 DDL 数据库定义语言 库和表的管理 一:库的管理:创建/修改/删除 二:表的管理:创建/修改/删除 创建: CREATE DATABASE [IF NOT EXISTS] 库名; 修改: alter 删除: DROP DATABASE [IF EXISTS] 库名; */ #一 : 库的管理 #1 库的创建 CREATE DATABASE books; CREATE DATABASE IF NOT EXISTS books; #2/库的修改 #库名的修改,需要停止服务器,然后修			

		

	

				

		

			

                链表 创建 插入 删除 查找 合并
			

		

		

									

				最近学习了一下单链表的操作,将代码保存如下,供以后查看. 链表创建: 1.先建立一个不含数据的头指针*head,头指针的链接域为NULL. 2.声明一个用于暂存新申请空间的指针*pc,一个用于保存创建的链表的指针*r,令*r指向*head. 3.在循环中,为指针*pc申请空间,并给数据域赋值,head->next = pc, pc->next = NULL, head = pc. #define _CRT_SECURE_NO_DEPRECATE /*取消scanf,printf不安全之类的错误			

		

	

				

		

			

                大数据技术之_20_Elasticsearch学习_01_概述 + 快速入门 + Java API 操作 + 创建、删除索引 + 新建、搜索、更新删除文档 + 条件查询 + 映射操作
			

		

		

									

				一 概述1.1 什么是搜索?1.2 如果用数据库做搜索会怎么样?1.3 什么是全文检索和 Lucene?1.4 什么是 Elasticsearch?1.5 Elasticsearch 的适用场景1.6 Elasticsearch 的特点1.7 Elasticsearch 的核心概念1.7.1 近实时1.7.2 Cluster(集群)1.7.3 Node(节点)1.7.4 Index(索引 --> 数据库)1.7.5 Type(类型 --> 表)1.7.6 Document(文档 -->			

		

	

				

		

			

                [PHP] 数据结构-链表创建-插入-删除-查找的PHP实现
			

		

		

									

				链表获取元素1.声明结点p指向链表第一个结点,j初始化1开始2.j<i,p指向下一结点,因为此时p是指向的p的next,因此不需要等于3.如果到末尾了,p还为null,就是没有查找到 插入元素1.插入元素和查找类似,找到位置后2.生成新的结点s, s->next=p->next p->next=s; 删除元素1.删除元素,找到位置后2.绕过一下,q=p->next p->next=q->next; <?php class Node{ public $data