本文实例讲述了 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 操作 DOM 技巧总结,JavaScript 错误与调试技巧总结,JavaScript 数据结构与算法技巧总结,JavaScript 遍历算法与技巧总结及JavaScript 数学运算用法总结
来源: http://www.jb51.net/article/140066.htm