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 相关文章推荐
JS 的应用开发初探(mootools)
Dec 19 Javascript
你需要知道的10个最佳javascript开发实践小结
Apr 15 Javascript
jQuery操作 input type=checkbox的实现代码
Jun 14 Javascript
js监听鼠标事件控制textarea输入字符串的个数
Sep 29 Javascript
jquery实现简单实用的弹出层效果代码
Oct 15 Javascript
跟我学习javascript的全局变量
Nov 16 Javascript
jquery实现删除一个元素后面的所有元素功能
Dec 21 Javascript
JS实现1000以内被3或5整除的数字之和
Feb 18 Javascript
Vue.js使用v-show和v-if的注意事项
Dec 13 Javascript
React从react-router路由上做登陆验证控制的方法
May 10 Javascript
详解微信小程序之提高应用速度小技巧
Jan 07 Javascript
vue组件开发之slider组件使用详解
Aug 21 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之Smarty入门
2007/01/04 PHP
php中如何同时使用session和cookie来保存用户登录信息
2013/07/05 PHP
phpmailer绑定邮箱的实现方法
2016/12/01 PHP
niceTitle 基于jquery的超链接提示插件
2010/05/31 Javascript
扩展javascript的Date方法实现代码(prototype)
2010/11/20 Javascript
解析JavaScript中点号“.”的多义性
2013/12/02 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
2016/05/24 Javascript
详解在Vue中如何使用axios跨域访问数据
2017/07/07 Javascript
vue获取DOM元素并设置属性的两种实现方法
2017/09/30 Javascript
jquery实现侧边栏左右伸缩效果的示例
2017/12/19 jQuery
浅谈Vue数据绑定的原理
2018/01/08 Javascript
nodejs 简单实现动态html的方法
2018/05/12 NodeJs
Vue项目添加动态浏览器头部title的方法
2018/07/11 Javascript
JavaScript根据json生成html表格的示例代码
2018/10/24 Javascript
[01:20:38]完美世界DOTA2联赛 GXR vs IO 第一场 11.07
2020/11/09 DOTA
Python3访问并下载网页内容的方法
2015/07/28 Python
Python中set与frozenset方法和区别详解
2016/05/23 Python
详解python进行mp3格式判断
2016/12/23 Python
python itchat实现微信自动回复的示例代码
2017/08/14 Python
详解Python如何生成词云的方法
2018/06/01 Python
JSON文件及Python对JSON文件的读写操作
2018/10/07 Python
Python中拆分字符串的操作方法
2019/07/23 Python
python默认参数调用方法解析
2020/02/09 Python
Pycharm+Python工程,引用子模块的实现
2020/03/09 Python
python矩阵运算,转置,逆运算,共轭矩阵实例
2020/05/11 Python
自学python用什么系统好
2020/06/23 Python
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
英国最大的海报商店:GB Posters
2018/03/20 全球购物
如何填写个人简历自我评价
2013/12/10 职场文书
财务总监岗位职责
2014/03/07 职场文书
如何撰写一封出色的求职信
2014/04/27 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
银行反四风对照检查材料
2014/09/29 职场文书
教你解决往mysql数据库中存入汉字报错的方法
2021/05/06 MySQL
Django使用echarts进行可视化展示的实践
2021/06/10 Python
如何让你的Nginx支持分布式追踪详解
2022/07/07 Servers