java document创建节点_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是指向
元素
document.documentElement.appendChild(createNode) //父级.appendChild(子节点); document.documentElement 是指向html 元素
x
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是指向
元素
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-8B、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兼容。
//查找第一个子节点的封装函数
function firstChild(ele) {
if (ele.firstElementChild) {//如果该条件是true则在该浏览器(IE或非IE)中兼容
return ele.firstElementChild;
} else {
return ele.firstChild;
}
}
firstChild(oList).style.background = 'red';//将获得的节点的背景变成红色
//查找第一个子节点的封装函数
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';//将获得的节点的背景变成红色
//查找最后一个子节点的封装函数
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';
//查找下一个兄弟节点的封装函数
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';
//查找上一个兄弟节点的封装函数
function previousSibling(ele) {
if (ele.nextElementSibling) {
return ele.previousElementSibling;
} else {
return ele.previousSibling;
}
}
previousSibling(oMid).style.background = 'red';
转载至:http://blog.csdn.net/torrex/article/details/54376633
附件列表
java document创建节点_javasript 的DOM 节点操作:创建,插入,删除,复制以及查找节点...相关推荐
- js的DOM节点操作:创建 ,插入,删除,复制,查找节点
DOM含义:DOM是文档对象模型(Document Object Model,是基于浏览器编程的一套API接口,是W3C出台的推荐标准.其赋予了JS操作节点的能力.当网页被加载时,浏览器就会创建页面的 ...
- JS----DOM节点操作:创建 ,插入,删除,复制,查找节点
摘自:https://blog.csdn.net/torrex/article/details/54376633 一.创建节点.追加节点 1.createElement(标签名)创建一个元素节点(具体 ...
- xdocument查找节点值_二叉查找树(java)
一棵二叉查找树(BST)是一颗二叉树,其中每个节点都含有一个Comparable的键且每个节点的键(以及相关的值)都大于其左子树中的任意节点的键而小于右子树的任意结点的键. 数据表示 和链表一样,我们 ...
- php 赋值给 dom对象,详解PHP原生DOM对象操作XML的方法
详解PHP原生DOM对象操作XML的方法 发布于 2017-08-08 20:15:29 | 80 次阅读 | 评论: 0 | 来源: 网友投递 PHP开源脚本语言PHP(外文名: Hypertext ...
- JS-DOM ~ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性...
带有Element和不带的区别 a) 带Element的获取的是元素节点 b) 不带可能获取文本节点和属性节点 获取所以子节点 a) . childNodes b) . children ...
- java dom添加节点_java用dom更新xml的有关问题,如何在子节点上添加节点
java用dom更新xml的问题,怎么在子节点下添加节点? 有原始xml如下: 我想要得到修改后的结果为: 我的代码为: public static void main(String[] args) ...
- JavaScript文档DOM对象处理HTML→document属性方法、write、getElementBy**、getsetAttribute、节点操作方法、innerHTML、操作CSS样式属性
document文档对象 document.write getElementById()ID获取元素 getElementsByName()名字获取元素 getElementsByTagName()标 ...
- DOM操作——怎样添加、移除、移动、复制、创建和查找节点?
(1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() // ...
- jquery的DOM节点操作(创建和插入元素节点)
1.创建元素节点 2.插入节点 动态创建新元素节点后,需要执行插入或追加操作,否则不会在页面显示出来. 按照元素的层次关系来分,可以分为内部和外部两种方法 元素内部插入子节点 元素内部插入子节点有两种 ...
最新文章
- 大厂的 404 页面都长啥样?最后一个绝了...
- PHP 调用web service接口(.net开发的接口)
- Hive数据类型及文本文件数据编码
- 代码能不能不要写得这么烂?!
- docker rabbitmq_Docker部署RabbitMQ集群
- 幻想英雄2-战神再起折扣号新手入门攻略
- XP下如何引导Vista
- 张同学会是男版李子柒吗?
- udev文件系统的使用和基本工作原理分析
- ns-3 教程 —— 入门
- st语言和c语言一样,什么是ST语言,一文带你了解ST语言
- 访问 URL 报错 500 Internal Privoxy Error
- 帮助睡眠最好的办法是什么?对睡眠好的东西分享
- 几款常见接口管理平台对比
- c语言多变量传函,控制系统仿真-中国大学mooc-题库零氪
- ADB——连接手机的三种方式
- Extjs GridPanel 常用属性总结
- 使用Spring Task实现定时任务
- Ubuntu的基本用法:常用指令,控制流程和重定向
- 坚不可摧!腾讯安全设三道防线,一站式护航云上安全
热门文章
- 一分钟就能让你了解NLP!
- Execution failed for task ':app:compileDebugKotlin'
- 青岛理工大学微型计算机系统,青岛理工大学2012-2013年微型计算机技术试题a.docx...
- HTML班级网页设计 基于HTML+CSS+JS制作我们的班级网页(web前端学生网页设计作品)...
- CSP_20140301相反数
- 籍贯怎样填写_籍贯怎么填写才正确规范?个人简历籍贯户籍怎么填【图片】
- Dissolve Effect in Unity3D
- JavaWeb——创建文件
- 金三银四,磨砺锋芒;剑指大厂,扬帆起航(2020年最全大厂WEB前端面试题精选)下
- NX二次开发-UFUN重命名工程图UF_DRAW_rename_drawing