说说JavaScript中DOM的Node对象

Batkid 发布于2019-08-23 11:39 / 871人阅读

摘要：对象对象的概念首先了解一下对象怎么用。对象是解析节点树结构的主要入口。继承链关系对象是继承于对象的，是一个用于接收事件的对象。代码示例的标准规范中的对象和对象都是继承于对象的。属性对象的属性用于获取指定的节点名称。参数表示要删除的节点。

Node对象 Node对象的概念

首先了解一下Node对象怎么用。DOM的标准规范中提供了Node对象，该对象主要提供了用于解析DOM节点树结构的属性和方法。
DOM树结构主要是依靠节点进行解析，成为DOM节点树结构。Node对象是解析DOM节点树结构的主要入口。
Node对象提供的属性和方法，可以实现遍历节点、插入节点和替换节点的操作。

继承链关系

Node对象是继承于EvebtTarget对象的，EvebtTarget是一个用于接收事件的对象。
代码示例

console.log(Node.prototype inseabceof EventTarget);

DOM的标准规范中的Document对象和Element对象都是继承于Node对象的。
代码示例

console.log(Document.prototype instanceof Node);
console.log(Element.prototype instanceof Node);

测试Node对象

由于Node对象是DOM底层封装的对象，所以我们并不能通过直接打印Node对象来查看其属性或方法。
代码示例

console.log(Node.prototype);

运行HTML页面后，打开开发者工具就可以看到隐藏的属性或方法。

判断节点类型 判断节点类型

Node对象提供了nodeName、nodeType和nodeValue分别可以用于获取指定节点的节点名称、节点类型和节点的值。
DOM节点树结构中，我们开发常用的节点有：
1.元素节点：表示HTML页面中的标签或结构。
2.属性节点：表示HTML页面中的开始标签包含的属性
3.文本节点：表示HTML页面中的标签所包含的文本内容。

nodeName属性

Node对象的nodeName属性用于获取指定的节点名称。

var str = node.nodeName;

针对不同的节点，nodeName返回的节点名称是不同的
1.Document文档节点：#document
2.Element元素节点：元素节点的元素名
3.Attr属性节点：属性节点的属性名
4.Text文本节点：#text

nodeType属性

Node对象的nodeType属性用于获取指定节点的节点类型

var type = node.nodeType;

type是一个整数，其代表的是节点类型，对不同的节点类型，nodeType返回的节点类型不同。

nodeValue属性

Node对象的nodeValue属性用于获取节点的节点值

var value = node.nodeValue;

value是一个包含当前节点的值的字符串
针对不同的节点类型，nodeValue返回的节点类型是不同的
1.Document文本节点返回null属性值
2.Element元素节点返回null属性值
3.Attr属性节点返回属性节点的属性值
4.Text文本节点返回文本节点的内容

遍历节点 获取父节点

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

var pNode = node.parentNode;

在一个元素节点的父节点，可能是一个元素节点，也可能是一个文档节点。

获取父元素节点

Node对象出了提供了parentNode属性可以获取指定节点的父节点之外，还提供了parentElement属性获取指定节点的父元素节点
在如果一个节点没有父节点，或者父节点不是一个元素节点的话，parentElement属性返回null。

父节点与父元素节点的区别

所谓的父节点，并没有指定某个接待的父节点一定是哪个类型的节点。而父元素节点，指定了某个节点的父节点一定是元素节点
1.parentNode：获取指定节点的父节点，其父节点不一定是元素节点。
2.parentElement：获取指定节点的元素节点，其父几点不许是元素节点
如果我们获取元素的父节点的话，就是document文档节点。而document文档节点并不是一个元素节点。

获取子节点

通过HTML页面中指定元素查找其子节点，我们可以通过以下Node对象的属性实现：
1.chiNode：获取指定节点的所有子节点。
2.firstChild：获取指定节点的第一个子节点。
3.lasrChild：获取指定节点的最后一个子节点
Node对象提供chidNode属性用于获取HTML页面中指定节点的所有子节点。

var ndList = Node.childNode;

chidNode属性返回值ndList是一个NodeList对象，并且为只读。该属性获取一个包含指定节点的所有子节点的集合。
获取第一个子节点。

var first_child = node.firstChild;

firstChild属性返回的first_child博爱是当前节点的第一个子节点的引用。
获取最后一个子节点

var last_child = node.lastChild;

lastChild属性返回的last_Child表示当前节点的最后一个子节点的引用

空白节点的解决方案

在开发中，空白节点的问题将DOM节点树结构的解析及操作增加了不少的难度和麻烦，这里提供了一种比较简单有效的解决方式：
1.弃用DOM中Node对象用于获取指定节点的子节点和兄弟节点的属性。
2.通过使用getElementsByTagName（）方法实现相应功能

删除节点

Node对象提供了removeChild()方法实现从HTML页面中删除之低昂节点。

var oldChild = node.removeChild(child);
element.removeChild(child);

调用removeChild（）方法的node表示child参数的父节点。
child参数表示要删除的节点。

注意事项

被删除的节点是否从内存中被销毁，Mozilla社区有这样一段描述；
被溢出的这个子节点仍然存在内存中，只是内有添加到当前文档的DOM树中。因此，你还可以把这个节点重新添加会文档中。

替换节点

Node对象提供了replaceChild（）方法实现HTMLL页面中节点的替换功能


    
    替换节点



    苹果
    小米
    锤子


    星际争霸
    魔兽世界
    王者荣耀

复制节点

Node对象提供了cloneNode（）方法实现HTML页面中节点的复制功能。


    
    复制节点

注意事项

克隆一个元素街二店会拷贝它所有的属性以及属性值，当然也包括属性上绑定的事件，但不会拷贝那些使用addEventListener（）方法或者node.onclick = fn这种JavaScript动态绑定的事件。
在使用Node.appendChild（）或其他类型的方法将拷贝的节点添加到文档中之前，那个拷贝点并不属于当前文档树的一部分。也就是说，他没有父节点。
如果deep参数设置为false，则不会克隆它的任何子节点。该子节点所包含的所有文本也不会被克隆，因为文本本身也是一个或多个的Text节点

云服务器 GPU云服务器 javascript的dom对象 javascript的dom编程删除dom对象 dom对象操作

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97275.html

说说VNode节点(Vue.js实现)

摘要：可能会有理解存在偏差的地方，欢迎提指出，共同学习，共同进步。这样做减少了很多不需要的操作，大大提高了性能。当上已经绑定的时候，代表该对象已经被过了，所以创建一个空节点。写在前面因为对Vue.js很感兴趣，而且平时工作的技术栈也是Vue.js，这几个月花了些时间研究学习了一下Vue.js源码，并做了总结与输出。文章的原地址：https://github.com/answershuto...

cncoder 2019-08-21 16:24 评论0 收藏0
说说对JSX的认识

摘要：认识引子最近几个月做的一个项目，使用了技术体系，自然而然的用到了。下面就总结一下自己对的认识。而这无疑增加了框架的门槛和复杂度。在被渲染之前，所有的数据都被转义成为了字符串处理。以避免跨站脚本攻击。表示对象将编译成调用。 JSX认识引子最近几个月做的一个项目，使用了react技术体系，自然而然的用到了JSX。下面就总结一下自己对JSX的认识。什么是JSX 即JavaScript...

clasnake 2019-08-20 16:20 评论0 收藏0
JavaScript基础知识总结

摘要：字面量方式这是最简单最基本的一种方法。简单的构造函数方式通过这样的形式创建对象。结合上面的简单构造函数和原型，一个完整的构造函数应该是这样的还有一种方法就是提供的简单实现下中的，，创建一个对象谈谈对象的理解。避免使用表达式又称动态属性。要点：数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、异步装载回调、模板引擎、Nodejs等。 JS基本类型有什么？引...

lakeside 2019-08-19 17:40 评论0 收藏0
2019前端面试那些事儿

摘要：虽然今年没有换工作的打算但为了跟上时代的脚步还是忍不住整理了一份最新前端知识点知识点汇总新特性，语义化浏览器的标准模式和怪异模式和的区别使用的好处标签废弃的标签，和一些定位写法放置位置和原因什么是渐进式渲染模板语言原理盒模型，新特性，伪虽然今年没有换工作的打算但为了跟上时代的脚步还是忍不住整理了一份最新前端知识点知识点汇总1.HTMLHTML5新特性，语义化浏览器的标准模式和怪...

JeOam 2019-08-02 14:28 评论0 收藏0
2019前端面试那些事儿

摘要：虽然今年没有换工作的打算但为了跟上时代的脚步还是忍不住整理了一份最新前端知识点知识点汇总新特性，语义化浏览器的标准模式和怪异模式和的区别使用的好处标签废弃的标签，和一些定位写法放置位置和原因什么是渐进式渲染模板语言原理盒模型，新特性，伪虽然今年没有换工作的打算但为了跟上时代的脚步还是忍不住整理了一份最新前端知识点知识点汇总1.HTMLHTML5新特性，语义化浏览器的标准模式和怪...

QLQ 2019-08-26 13:33 评论0 收藏0