Node对象

Node对象是什么

  • 所谓Node对象就是DOM的标准规范中提供了Node对象,该对象主要提供了用于解析DOM节点树结构的属性和方法

示例代码:

<body>
<button id="btn"> 哒哒哒 </button>
<script>console.log(document);// 1. Node对象并不像Document对象一样 - 提供直接使用对象// console.log(node);// 2. Node类型不允许通过new关键字创建对象的/*var node = new Node();console.log(node);*/var btnElement = document.getElementById('btn');console.log(btnElement instanceof HTMLButtonElement);//调用结果为 true// 定位页面元素其实就是Node对象 - 称为元素节点console.log(btnElement instanceof Node);// 调用结果为 trueconsole.log(Node.prototype);//拓展var btn = document.createElement('button');console.log(btn instanceof Node);// 调用结果为 true
</script>
</body>

继承链关系

  • Node对象是继承于Event Target对象的, EventTarget是一个用于接收事件的对象

示例代码:

<body>
<script>/* 判断Node原型是否在目标事件上 */console.log(Node.prototype instanceof EventTarget);// 调用结果为 trueconsole.log(Document.prototype instanceof Node);// 调用结果为 trueconsole.log(Element.prototype instanceof Node);// 调用结果为 true
</script>
</body>

判断节点类型

<body>
<button id="btn" class="cls">哒哒哒</button>
<script>// 1. 元素节点// 在页面上查找指定ID属性名字的元素var btn1 = document.getElementById('btn');// 元素节点的nodeName属性值为标签名 (大写的)console.log(btn1.nodeName);// 调用结果为 BUTTONconsole.log(btn1.nodeType);// 调用结果为 1console.log(btn1.nodeValue)// 调用结果为 null// 2. 文本节点// 获取第一个子节点var textNode = btn1.firstChild;// 文本节点的nodeName属性值是固定值(#text)console.log(textNode.nodeName);// 调用结果为 #textconsole.log(textNode.nodeType);// 调用结果为 3// 文本节点的nodeValue属性值是文本内容console.log(textNode.nodeValue);// 调用结果为 哒哒哒// 3. 属性节点// 获取属性节点var attrNode = btn1.getAttributeNode('class');// 属性节点的nodeName属性值为当前元素的属性名称console.log(attrNode.nodeName);// 调用结果为 classconsole.log(attrNode.nodeType);// 调用结果为 2// 属性节点的nodeValue属性值为当前元素的属性名称对应的值console.log(attrNode.nodeValue);// 调用结果为 cls
</script>
</body>

遍历节点

获取父节点

  • 通过HTML页面中指定元素查找其父节点,可以使用Node对象的parentNode属性实现

示例代码:

<body>
<ul id="parent"><li>舒克</li><li id="bt">贝特</li><li>小龙人</li>
</ul>
<script>// 作为子节点var bt = document.getElementById('bt');// 通过子节点获取其父节点var parent1 = bt.parentNode;console.log(parent1);// parentElement属性 - 表示获取其父元素节点var parent2 = bt.parentNode;console.log(parent2);var html = document.documentElement;console.log(html.parentNode);// 调用结果为 文档节点console.log(html.parentElement);// 调用结果为 null
</script>
</body>

获取子节点

  • 通过HTML页面中指定元素查找其子节点,可以通过以下Node对象的属性实现

    • childNode - 获取指定节点的所有子节点
    • firstChild - 获取指定节点的第一个子节点
    • lastChild - 获取指定节点的最后一个子节点

示例代码:

<body>
<ul id="parent"><li>舒克</li><li id="bt">贝特</li><li>小龙人</li>
</ul>
<script>var parent = document.getElementById('parent');var children = myTools.childNodes(parent);console.log(children);/*var firstChild = parent.firstChild;firstChild = firstChild.nextSibling;console.log(firstChild);*/var firstChild = myTools.firstChild(parent);console.log(firstChild);var lastChild = parent.lastChild;lastChild = lastChild.previousSibling;console.log(lastChild);
</script>
</body>

获取相邻兄弟节点

  • 通过HTML页面中指定元素查找其相邻兄弟节点,可以通过以下Node对象的属性实现

    • previousSibling - 获取指定节点的前面相邻兄弟节点
    • nextSibling - 获取指定节点的后面相邻兄弟节点

示例代码:

<body>
<ul id="parent"><li>舒克</li><li id="bt">贝特</li><li>小龙人</li>
</ul>
<script>var bt = document.getElementById('bt');var prev = bt.previousSibling;prev = prev.previousSibling;console.log(prev);console.log(prev.previousSibling);console.log(prev.previousSibling.previousSibling);var next = bt.nextSiblingnext = next.nextSibling;console.log(next);
</script>
</body>

空白节点

  • childNodes属性 - 获取指定节点的所有子节点,同时也会获取到所有的空白节点

示例代码:

<body>
<ul id="parent"><li>舒克</li><li id="bt">贝特</li><li>小龙人</li>
</ul>
<script>var parent = document.getElementById('parent');// childNodes属性 - 获取指定节点的所有子节点,同时也会获取到所有的空白节点var children = parent.childNodes;console.log(children);
</script>
</body>

代码分析图:

处理空白节点方法

示例代码:

<body>
<ul id="parent"><li>舒克</li><li id="bt">贝特</li><li>小龙人</li>
</ul>
<script>// 1. 利用循环 + 判断筛选var arr = [];// 定义一个空数组/* 利用循环遍历出所有子节点 */for (var i=0; i<children.length; i++){var child = children[i];/* 判断语句 */if (child.nodeType === 1) {/* 将得到的结果放回去 */arr.push(child);}}console.log(arr);// 2. 利用getElementsByTagName()方法var lis = parent.getElementsByTagName('li');console.log(lis);
</script>
</body>

插入节点

appendChild()方法

  • parentNode.appendChild(childNode)

    • parentNode - 表示指定节点(作为父节点)
    • childNode - 表示被添加的节点(作为子节点)
  • 特点 - 被添加在指定节点所有子节点列表的最后

示例代码:

<body>
<ul id="parent"><li>舒克</li><li id="bt">贝特</li><li>小龙人</li>
</ul>
<script>var parent = document.getElementById('parent');// 给指定父级元素添加子级元素var newLi = document.createElement('li');// 给子级元素添加文本var textNode = document.createTextNode('蓝精灵');newLi.appendChild(textNode);/*parentNode.appendChild(childNode)* 说明* parentNode - 表示指定节点(作为父节点)* childNode - 表示被添加的节点(作为子节点)* 特点 - 被添加在指定节点所有子节点列表的最后*/parent.appendChild(newLi);
</script>
</body>

insertBefore()方法

  • insertBefore()方法 - 优点是可以在指定元素之前添加新的元素节点
  • 注意 - DOM中的Node对象并没有提供 insertAfter() 方法

示例代码:

<body>
<ul id="parent"><li>舒克</li><li id="bt">贝特</li><li>小龙人</li>
</ul>
<script>/*insertBefore()方法 - 优点是可以在指定元素之前添加新的元素节点注意 - DOM中的Node对象并没有提供 insertAfter() 方法*/// 通过ID属性获取指定父节点var parent = document.getElementById('parent');// 给父级节点创建新的子元素节点var newLi = document.createElement('li');// 给新创建的子元素节点创建文本节点var textNode = document.createTextNode('亚古兽');// 把新建的文本节点添加到指定的元素节点上newLi.appendChild(textNode);// 获取目标节点var bt = document.getElementById('bt');// 将新创建的子元素节点插入到指定的元素节点之前parent.insertBefore(newLi,bt);
</script>
</body>

insertAfter()方法

分析图:

删除节点

  • 调用removeChild()方法的node表示child参数的父节点
  • child参数则表示要删除的那个节点
  • 注意 - 如果child参数不是node的子节点的话,调用该方法时会报错

示例代码:

<body>
<ul id="parent"><li>舒克</li><li id="bt">贝特</li><li>小龙人</li>
</ul>
<li id="xlr">小龙人</li>
<script>// 通过ID属性获取指定元素var parent = document.getElementById('parent');// 通过ID属性获取指定元素节点var bt = document.getElementById('bt');// 删除获取的指定节点元素parent.removeChild(bt);var xlr = document.getElementById('xlr');parent.removeChild(xlr)
</script>
</body>

替换节点

  • parentNode.replaceChild(newChild,currentChild)

    • 参数

      • parentNode - 表示目标(被替换)节点的父节点
      • newChild - 表示替换(新)节点
      • currentChild - 表示目标节点

    • 情况:

      • 是新创建的节点 -> 替换
      • 是页面已存在的节点 -> 移动+替换

示例代码:

<body>
<ul id="parent"><li>舒克</li><li id="bt">贝特</li><li>小龙人</li>
</ul>
<ul id="parent1"><li>大头儿子</li><li id="xtbb">小头爸爸</li><li>围裙妈妈</li>
</ul>
<script>// 1. 获取目标节点的父节点var parent = document.getElementById('parent');// 2. 获取目标节点var bt = document.getElementById('bt');// 3. 创建新节点var newLi = document.createElement('li');// 给新创建的子元素节点添加文本节点内容var textNode = document.createTextNode('大灰狼');// 将新创建的文本节点内容放到新创建的元素节点上newLi.appendChild(textNode);// 通过ID属性获取到要替换的子元素节点var xtbb = document.getElementById('xtbb');/*parentNode.replaceChild(newChild,currentChild)* 参数* parentNode - 表示目标(被替换)节点的父节点* newChild - 表示替换(新)节点* currentChild - 表示目标节点* 情况* 是新创建的节点 -> 替换* 是页面已存在的节点 -> 移动+替换*/// 将要替换的子元素节点放到指定的位置parent.replaceChild(xtbb,bt);</script>
</body>

复制节点

  • node.cloneNode(deep)

    • deep参数 - 表示是否复制当前节点的后代节点

      • true - 表示复制后代节点
      • false - 默认值, 表示不复制后代节点
  • 注意 - 复制操作时, 注意ID属性的值

示例代码:

<body>
<button id="btn">哒哒哒</button>
<script>var btn = document.getElementById('btn');/*node.cloneNode(deep)* deep参数 - 表示是否复制当前节点的后代节点* true - 表示复制后代节点* false - 默认值, 表示不复制后代节点* 注意 - 复制操作时, 注意ID属性的值*/var newBtn = btn.cloneNode(true);var body = document.body;body.appendChild(newBtn);</script>
</body>

textContent属性

  • textContent属性

    • 作用 - 设置获取指定节点的文本内容
    • 注意 - 具有浏览器兼容问题(IE 6/7/8不支持)

示例代码:

<body>
<p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad dolores error expedita facere illum nulla, obcaecati quod voluptate. A accusamus dolore eius est iure molestias optio placeat recusandae similique vel.</p>
<script>var p1 = document.getElementById('p1');/*var textNode = p1.firstChild;var content = textNode.nodeValue;*//*textContent属性* 作用 - 设置获取指定节点的文本内容* 注意 - 具有浏览器兼容问题(IE 6/7/8不支持)*/var content;if (p1.textContent === undefined) {// IE 6/7/8/不支持content = p1.innerText} else {// 其他浏览器支持content = p1.textContent}console.log(content);
</script>
</body>

DOM编程系列之Node对象个人分享相关推荐

  1. 【JavaScript】DOM编程-DHTML与Windows对象

    A.什么是DHTML? javascript是在浏览器中运行的,如果它仅限于加减乘除运算,而不能将运算结果 显示在浏览器当中,或者不能与用户进行交互操作,那么他就失去了存在的意义. 在程序中,创建的对 ...

  2. java lock 对象_Java并发编程锁系列之ReentrantLock对象总结

    Java并发编程锁系列之ReentrantLock对象总结 在Java并发编程中,根据不同维度来区分锁的话,锁可以分为十五种.ReentranckLock就是其中的多个分类. 本文主要内容:重入锁理解 ...

  3. html dom firstchild,DOM Node对象属性firstChild

    DOM Node对象属性firstChild指定节点的第一个子节点. 语法 以下是firstChild属性的使用语法. nodeObject.firstChild 示例 文件:node.xml 的内容 ...

  4. JavaScript与DOM编程

    文章目录 JavaScript JS简介 常量与变量 数组 创建数组 访问数组:通过指定数组名以及索引号,可以访问某个特定的元素 对象 1.系统所提供对象 2.自定义对象 访问对象 函数 第一种 第二 ...

  5. JavaScript函数和BOM及DOM编程（详细总结-无尿点）

    JavaScript函数和BOM及DOM编程(详细总结-无尿点) javascript 函数 一.javascript函数 1.1 概述 1.2 常见的系统函数 1.2.1 eval 1.2.2 pa ...

  6. html用dom显示xml,dom 编程(html和xml)

    html dom与xml dom关系: 什么是 DOM? DOM 是 W3C(万维网联盟)的标准. DOM 定义了訪问 HTML 和 XML 文档的标准: "W3C 文档对象模型 (DOM) ...

  7. reentrantlock非公平锁不会随机挂起线程?_【原创】Java并发编程系列16 | 公平锁与非公平锁...

    本文为何适原创并发编程系列第 16 篇,文末有本系列文章汇总. 上一篇提到重入锁 ReentrantLock 支持两种锁,公平锁与非公平锁.那么这篇文章就来介绍一下公平锁与非公平锁. 为什么需要公平锁 ...

  8. JavaScript Dom编程艺术

    当我对JavaScript还停留在只认识这几个字母的时候,有一天我突然心血来潮,在网上下了DOM Scripting的样章,照着里面的例子写了我平生第一个能让我知所以然JavaScript,在浏览器运 ...

  9. Python编程系列教程第13讲——隐藏数据和封装

    视频地址:http://www.56.com/u88/v_OTM5NjU0MjE.html#fromoutpvid=OTM5NjU0MjE 普及网络安全知识,推动信息技术发展. 为祖国的网络安全撑起一 ...

  10. C#多线程编程系列（五）- 使用任务并行库

    目录 1.1 简介 1.2 创建任务 1.3 使用任务执行基本的操作 1.4 组合任务 1.5 将APM模式转换为任务 1.6 将EAP模式转换为任务 1.7 实现取消选项 1.8 处理任务中的异常 ...

最新文章

  1. The HipHop Virtual Machine
  2. ASP.NET2.0 ReportingServices使用详解
  3. 在 Node.js 中用子进程操作标准输入/输出
  4. CodeChef--SEPT14小结
  5. 通过一个函数对比 mgrid以及meshgrid函数
  6. 封闭已久的智能驾驶系统，在云栖大会上，被敲开一个裂缝
  7. 基于WINCE6.0的nandflash驱动(基于K9F1G08U0B)
  8. 学习 LLVM(14) SmallPtrSet
  9. java 6 损坏,Java 异常处理六
  10. 【剑指offer】Java版代码（完整版）
  11. 如何使用macOS自带网络测速功能？
  12. 市场上硬杠，技术上死磕，华为如何跨越操作系统黑洞
  13. GitHub Top 100的Android开源库
  14. JS 页面繁简字转换
  15. 求最大公约数的4种常用算法
  16. python英语单词 扇贝英语安卓下载_扇贝单词英语版app下载_靠谱的外语软件扇贝单词英语版下载安装 安卓版 V3.4.302 - 罐头安卓网...
  17. 微信接龙，查人，查谁没有接龙，工具
  18. ubuntu系统安装时的分区方案
  19. JS控制字体大小中、设为首页、收藏本站功能、超链接去掉颜色
  20. Mali GPU linux下驱动编译

热门文章

  1. 浏览器Quirksmode(怪异模式)与CSScompat
  2. 关于循环经济的三维展示
  3. Python爬取豆瓣电影
  4. 从零基础入门Tensorflow2.0 ----四、15.tf.data读取csv文件并与tf.keras结合使用
  5. 从零基础入门Tensorflow2.0 ----二、4.4 wide deep 模型（多输出）
  6. android textview设置大小,android – 如何缩放/调整文本大小以适应TextView？
  7. 计算机网络（HTTP、TCP）的连接管理
  8. Android-Universal-Image-Loader学习笔记（4）--download
  9. 树莓派4烧录系统后黑屏_原创试用 | 树莓派3B+测评（二）ubuntu系统烧录+彩虹屏问题解决...
  10. 美团 Flink 大作业部署与状态稳定性优化实践