JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】


Posted in Javascript onMay 14, 2018

本文实例讲述了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';

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JQuery slideshow的一个小问题(如何发现及解决过程)
Feb 06 Javascript
javaScript 页面自动加载事件详解
Feb 10 Javascript
Javascript高级技巧分享
Feb 25 Javascript
jQuery取得设置清空select选择的文本与值
Jul 08 Javascript
Windows 系统下安装和部署Egret的开发环境
Jul 31 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
Oct 21 Javascript
JS实现弹出下载对话框及常见文件类型的下载
Jul 13 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
Aug 20 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
Nov 21 Javascript
微信小程序实现张图片合成为一张并下载
Jul 16 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
Dec 09 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
Jul 17 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
May 14 #Javascript
jQuery中元素选择器(element)简单用法示例
May 14 #jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 #jQuery
vue引入js数字小键盘的实现代码
May 14 #Javascript
vue移动端路由切换实例分析
May 14 #Javascript
对node.js中render和send的用法详解
May 14 #Javascript
利用vscode调试编译后的js代码详解
May 14 #Javascript
You might like
php $_SERVER当前完整url的写法
2009/11/12 PHP
discuz的php防止sql注入函数
2011/01/17 PHP
PHP文件读取功能的应用实例
2015/05/08 PHP
PHP实现原比例生成缩略图的方法
2016/02/03 PHP
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
10分钟学会写Jquery插件实例教程
2014/09/06 Javascript
使用Jquery实现每日签到功能
2015/04/03 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
2016/12/15 Javascript
JS瀑布流实现方法实例分析
2016/12/19 Javascript
vue-cli axios请求方式及跨域处理问题
2018/03/28 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
2019/02/27 jQuery
微信小程序性能优化之checkSession的使用
2019/03/06 Javascript
vue实现在v-html的html字符串中绑定事件
2019/10/28 Javascript
vue cli4下环境变量和模式示例详解
2020/04/09 Javascript
JS异步宏队列与微队列原理区别详解
2020/07/02 Javascript
[01:01:18]VP vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
在Python中封装GObject模块进行图形化程序编程的教程
2015/04/14 Python
PyQtGraph在pyqt中的应用及安装过程
2019/08/04 Python
python利用itertools生成密码字典并多线程撞库破解rar密码
2019/08/12 Python
Python logging模块进行封装实现原理解析
2020/08/07 Python
使用html5+css3来实现slider切换效果告别javascript+css
2013/01/08 HTML / CSS
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
2014/05/07 HTML / CSS
美国最受欢迎的度假租赁网站:VRBO
2016/08/02 全球购物
Everything But Water官网:美国泳装品牌
2019/03/17 全球购物
Antler英国官网:购买安特丽行李箱、拉杆箱
2019/08/25 全球购物
LACOSTE波兰官网:Polo衫、服装和鞋类
2020/09/29 全球购物
5个HTML5的常用本地存储方式详解与介绍
2021/03/27 HTML / CSS
培训心得体会
2013/12/29 职场文书
心理健康心得体会
2014/01/02 职场文书
入党申请自荐书范文
2014/02/11 职场文书
优秀老员工获奖感言
2014/02/15 职场文书
我的求职择业计划书
2014/04/04 职场文书
企业安全标语
2014/06/07 职场文书
领导班子个人对照检查剖析材料
2014/09/29 职场文书
Python 线程池模块之多线程操作代码
2021/05/20 Python