javasript 的DOM 节点操作:创建,插入,删除,复制以及查找节点
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 元素
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子节点的末尾
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]);//在控制器日志中显示找到的元素节点
}
}
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)//子节点的个数
<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';//将获得的节点的背景变成红色
<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';//将获得的节点的背景变成红色
<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';
<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';
附件列表
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 ...
随机推荐
- rabbitmq的简单介绍一
该博客的主要讲解了以下几种rabbitmq的用法1.实现简单的生产者发送消息给消费者2.实现序列持久化3.实现消息持久化4.实现消息公平分发5.实现广播6.实现组播7.实现细分组播 先来看下rabbi ...
- 784. Letter Case Permutation 字符串中字母的大小写组合
[抄题]: Given a string S, we can transform every letter individually to be lowercase or uppercase to c ...
- Java线程死锁查看分析方法
如何查看是否有Java线程死锁?下面介绍两种方法. 一.Jconsole Jconsole是JDK自带的图形化界面工具,使用JDK给我们的的工具JConsole,可以通过打开cmd然后输 ...
- WAMP不能启动, 一直处于红色图标或者橙色图标的解决办法
WAMP不能启动, 一直处于红色图标(正常启动为绿色吧) 考虑是端口的问题,我找到wamp文件夹中的wamp\bin\apache\apache2.2.22\conf路径下的httpd.conf文件, ...
- Linux gcc支持的语法 __attribute__ 属性设置
__attribute__实际上是gcc专有的一种语法,是用来设置函数属性.变量属性.类属性的 语法:之前在C中的结构体对齐中提到过,当时是用来告诉编译器这个结构体的对齐方式 ,其实他还有很多种用法, ...
- CSS—— em的详解
字体大小在浏览器的默认样式表中有规定.一般采用em为单位,也就是相对单位,1em=16像素. 同时,像P h1等等标签都采用浏览器默认的em单位,P为1em,h1为2em等等. 两条重要的规则: 1. ...
- WCF Service 配置文件注释(转)
<?xml version="1.0" encoding="utf-8" ?> <configuration> <system.S ...
- 命令行传递参数并排序 AS实现加法
题目:从命令行输入参数并进行排序 1.实验准备 Integer提供了能在 int 类型和 String 类型之间互相转换的方法,还提供了处理 int 类型时非常有用的其他一些常量和方法. static ...
- metasploitable实践
使用Fimap和metasploitable2文件包含漏洞测试 fimap 首先查看msf已经存在的漏洞: root@kali:~# fimap -u 'http://192.168.136.130/ ...
- Linux 基础教程 36-查看系统性能
uptime uptime命令功能比较简单,主要功能如下所示: 查看服务器的开机时长 查看CPU负载 基本用法 uptime 用法示例 [root@localhost ~]# uptime 1 ...