JavaScript 之 DOM [ Node对象 ]

imtianx 发布于2019-08-23 11:35 / 3425人阅读

摘要：对象描述对象是用于解析节点树的入口对象提供了对节点操作的属性和方法判断节点类型节点类型分为元素节点属性节点文本节点文档节点判断方式分为节点名称节点类型节点的值我是谁，我在那，我要干啥获取指定元素节点判断指定节点的名称显示标签名称显示

Node对象 描述

Node对象是用于解析DOM节点树的入口

Node对象提供了对节点操作的属性和方法

判断节点类型

节点类型分为：

元素节点

属性节点

文本节点

文档节点

判断方式分为：

nodeName - 节点名称

nodeType - 节点类型

nodeValue - 节点的值

我是谁，我在那，我要干啥

获取父节点

通过定位子节点，来获取父节点

parentNode属性

表示获取父节点，等到的不一定的元素节点，也可能是Document对象


    手机
    手表
    电脑

parentElement属性

表示获取父元素节点，等到的一定是元素节点


    手机
    手表
    电脑

获取子节点

通过定位父节点来获取子节点

childNodes：表示获取所有子节点

firstChild：表示获取第一个子节点

lastChild：表示获取最后一个子节点

在获取子节点时也会一同获取到“空白节点（可能是空的文本节点）”



    手机
    手表
    电脑

获取相邻兄弟节点

previousSibling：表示获取前面的兄弟节点

nextSibling：表示获取后面的兄弟节点

在获取相邻兄弟节点的时候也存在“空白节点（可能是空的文本节点）”的问题



    手机
    手表
    电脑

空白节点

在浏览器解析DOM节点树结构时，会产生空白节点，使得到的数据结果出现问题

空白节点是通过在编写HTML代码时由于元素换行或空格产生的

空白节点一般会显示为文本节点(可能是空的文本节点)

处理获取子节点时产生的空白节点



    手机
    手表
    电脑

处理相邻兄弟节点中的空白节点



    手机
    手表
    电脑

替换节点

replaceChild

表示对指定的元素节点进行替换



    手机
    手表
    电脑

插入节点

表示在指定位置插入节点

appendChild（）：表示在指定父节点中最后的位置插入节点

insertBefore（）：表示在指定目标节点的前面插入节点



    手机
    手表
    电脑

删除节点

removeChild

表示删除指定的元素节点

被删除的元素节点只是在DOM节点数中被删除，并不是在内存中被删除,还可以在调用



    手机
    手表
    电脑

复制节点

cloneNode（）

括号中添写布尔值“true或false”

true：表示复制后代节点

false：表示不复制后代节点（默认值）

如果被复制的节点具有ID属性，复制后要修改ID属性的属性值



    手机
    手表
    电脑

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

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

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

【JavaScript】DOM之Node对象

摘要：对象对象是什么该对象封装的底层对象，该对象只是提供了操作属性和方法，并不能直接打印操作属性和方法定位月面元素其实就是对象为元素节点继承链关系对象继承与对象判断节点类型以，和用于获取节点名称和节点类型还有节点的值按钮新按钮遍历节点获取父节点 Node对象 Node对象是什么该对象封装DOM的底层对象，该对象只是提供了操作属性和方法，并不能直接打印操作属性和方法 conso...

Jeffrrey 2019-08-23 11:35 评论0 收藏0
浏览器内核之 HTML 解释器和 DOM 模型

摘要：书接上文浏览器内核之资源加载与网络栈本文介绍的模型之后，深入的核心部分，剖析的解释器是如何将从网络或者本地文件获取的字节流转成内部表示的结构树。事件处理最重要就是事件捕获和事件冒泡这两种机制。 showImg(https://segmentfault.com/img/remote/1460000016215814); 微信公众号：爱写bugger的阿拉斯加如有问题或建议，请后台留言，我...

Carbs 2019-08-02 16:04 评论0 收藏0
读 Zepto 源码之操作 DOM

摘要：辅助方法这个方法递归遍历的子节点，将节点交由回调函数处理。对集合进行遍历，调用方法，如果为函数，则将回调函数返回的结果作为参数传给否则，如果为，则将也即包裹元素的副本传给，否则直接将传给。这篇依然是跟 dom 相关的方法，侧重点是操作 dom 的方法。读Zepto源码系列文章已经放到了github上，欢迎star: reading-zepto 源码版本本文阅读的源码为 zepto...

beita 2019-08-20 17:00 评论0 收藏0
【进阶1-5期】JavaScript深入之4类常见内存泄漏及如何避免

摘要：本期推荐文章类内存泄漏及如何避免，由于微信不能访问外链，点击阅读原文就可以啦。四种常见的内存泄漏划重点这是个考点意外的全局变量未定义的变量会在全局对象创建一个新变量，如下。因为老版本的是无法检测节点与代码之间的循环引用，会导致内存泄漏。（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）本周正式开始前端进阶的第一期，本周的主题...

red_bricks 2019-08-23 13:47 评论0 收藏0
《JavaScript 闯关记》之 DOM（上）

摘要：节点之间的关系构成了层次，而所有页面标记则表现为一个以特定节点为根节点的树形结构。此外，包含在列表中的每个节点相互之间都是同胞节点。在浏览器中，对象是继承自类型的一个实例，表示整个页面。 DOM（文档对象模型）是针对 HTML 和 XML 文档的一个 API。DOM 描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。节点层次 DOM 可以将任何 HTML 或 XM...

mzlogin 2019-08-20 12:17 评论0 收藏0