千锋教育-做有情怀、有良心、有品质的职业教育机构

400-811-9990
手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

上海
  • 北京
  • 郑州
  • 武汉
  • 成都
  • 西安
  • 沈阳
  • 广州
  • 南京
  • 深圳
  • 大连
  • 青岛
  • 杭州
  • 重庆
当前位置:武汉千锋IT培训  >  技术干货  >  为什么使用原生JS删除、替换DOM节点总是要用到父节点?

为什么使用原生JS删除、替换DOM节点总是要用到父节点?

来源:千锋教育
发布人:xqq
时间: 2023-10-20 08:10:03

一、使用原生JS删除、替换DOM节点总是要用到父节点的原因

在使用原生JS删除、替换DOM节点时,需要用到父节点是因为DOM节点是以树形结构的形式存在的。每个DOM节点都有一个父节点和零个或多个子节点,因此内部节点之间存在父子关系,通过操作父节点可以方便地对子节点进行增删改操作。

在实际编程中,删除或替换节点需要先找到该节点的父节点,然后再通过父节点对其进行操作。如果不使用父节点,则无法准确定位要删除或替换的节点,也就无法完成相应的操作。因此,在使用原生JS删除、替换DOM节点时,通常需要先通过DOM API获取要操作节点的父节点,然后再对其进行相应的操作。

二、JS概述

1、JS简介

JavaScript(缩写:JS)是一门完备的动态编程语言。当应用于 HTML 文档时,可为网站提供动态交互特性。由布兰登·艾克(Brendan Eich,Mozilla 项目、Mozilla 基金会和 Mozilla 公司的联合创始人)发明。JavaScript 的应用场合极其广泛,简单到幻灯片、照片库、浮动布局和响应按钮点击,复杂到游戏、2D/3D 动画、大型数据库驱动程序等等。

JavaScript 相当简洁,却非常灵活。开发者们基于 JavaScript 核心编写了大量实用工具,可以使开发工作事半功倍。其中包括:

浏览器应用程序接口(API)—— 浏览器内置的 API 提供了丰富的功能,比如:动态创建 HTML 和设置 CSS 样式、从用户的摄像头采集处理视频流、生成 3D 图像与音频样本等等。第三方 API —— 让开发者可以在自己的站点中整合其他内容提供者(Twitter、Facebook 等)提供的功能。第三方框架和库 —— 用来快速构建网站和应用。

2、为什么学习JS

JavaScript 是 web 开发人员必须学习的 3 门语言中的一门:

HTML 定义了网页的内容CSS 描述了网页的布局JavaScript 控制了网页的行为

3、JS产生背景

JavaScript最初由Netscape的Brendan Eich设计,最初将其脚本语言命名为LiveScript,后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的,目的之一就是“看上去像Java”,因此语法上有类似之处,一些名称和命名规范也借自Java,但JavaScript的主要设计原则源自Self和Scheme。JavaScript与Java名称上的近似,是当时Netscape为了营销考虑与Sun微系统达成协议的结果。微软同时期也推出了JScript来迎战JavaScript的脚本语言。

发展初期,JavaScript的标准并未确定,同期有Netscape的JavaScript,微软的JScript和CEnvi的ScriptEase三足鼎立。为了互用性,Ecma国际(前身为欧洲计算机制造商协会)创建了ECMA-262标准(ECMAScript),两者都属于ECMAScript的实现,尽管JavaScript作为给非程序人员的脚本语言,而非作为给程序人员的脚本语言来推广和宣传,但是JavaScript具有非常丰富的特性。1997年,在ECMA(欧洲计算机制造商协会)的协调下,由Netscape、Sun、微软、Borland组成的工作组确定统一标准:ECMA-262。完整的JavaScript实现包含三个部分:ECMAScript,文档对象模型,浏览器对象模型。

JavaScript是甲骨文公司的注册商标。Ecma国际以JavaScript为基础制定了ECMAScript标准。JavaScript也可以用于其他场合,如服务器端编程(Node.js)。

4、JS的主要功能

嵌入动态文本于HTML页面。对浏览器事件做出响应。读写HTML元素。在数据被提交到服务器之前验证数据。检测访客的浏览器信息。控制cookies,包括创建和修改等。基于Node.js技术进行服务器端编程。

三、DOM简介

文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理,处理的结果可以加入到当前的页面。DOM是一种基于树的API文档,它要求在处理过程中整个文档都表示在存储器中。另外一种简单的API是基于事件的SAX,它可以用于处理很大的XML文档,由于大,所以不适合全部放在存储器中处理。

Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战” (browser wars),双方为了在JavaScript与JScript一决生死,于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物,计有VBScript、ActiveX、以及微软自家的DHTML格式等,使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。

DOM分为HTML DOM和XML DOM两种。它们分别定义了访问和操作HTML/XML文档的标准方法,并将对应的文档呈现为带有元素、属性和文本的树结构(节点树)。DOM树的特点:

DOM树定义了HTML/XML文档的逻辑结构,给出了一种应用程序访问和处理XML文档的方法。在DOM树中,有一个根节点,所有其他的节点都是根节点的后代。在应用过程中,基于DOM的HTML/XML分析器将一个HTML/XML文档转换成一棵DOM树,应用程序通过对DOM树的操作,来实现对HTML/XML文档数据的操作。

延伸阅读1:JS的语言组成

ECMAScript:描述了该语言的语法和基本对象。文档对象模型(DOM):描述处理网页内容的方法和接口。浏览器对象模型(BOM):描述与浏览器进行交互的方法和接口。
声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。

猜你喜欢LIKE

常见的软件设计模式有哪些?

2023-10-20

LayoutInflater.inflate()方法两个参数和三个参数的区别?

2023-10-20

为什么GIL让多线程变得如此鸡肋?

2023-10-20

最新文章NEW

Mysql为什么只能支持2000w左右的数据量?

2023-10-20

Python中time和datetime的区别?

2023-10-20

必备linux命令有哪些?

2023-10-20

相关推荐HOT

更多>>

快速通道 更多>>

最新开班信息 更多>>

网友热搜 更多>>