JavaScript高级程序设计 学习笔记之DOM基础(二)

最新推荐文章于 2024-03-09 13:07:10 发布
最新推荐文章于 2024-03-09 13:07:10 发布
阅读量85 收藏
点赞数
分类专栏： web 文章标签： JavaScript JSP ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_12996/article/details/81822375
版权
[color=red]3、replaceChild方法[/color]<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript">
function replaceMessage(){
var oNewP=document.createElement("p");//创建新元素
var oNewText=document.createTextNode("Hello Universite");//创建文本
oNewP.appendChild(oNewText);//为节点添加文本
var oOldP=document.body.getElementsByTagName("p")[0];//获取第一个p节点元素
// document.body.replaceChild(oNewP, oOldP);//用新节点元素替换旧节点元素及文本内容
//也可以替换为如下
oOldP.parentNode.replaceChild(oNewP,oOldP);
}
</script>
</head>
<body οnlοad="replaceMessage()">
<p>hello world</p>
</body>
</html>
显示如下:
Hello Universite

[color=red]4、在一个元素之后追加新元素内容[/color]<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript">
function appendMessage(){
var oNewP=document.createElement("p");//创建新元素
var oNewText=document.createTextNode("Hello Universite");//创建文本
oNewP.appendChild(oNewText);//为节点添加文本
// document.body.appendChild(oNewP);//添加新元素p的文本内容在旧的内容后面
//以上可以替换为
document.getElementsByTagName("p")[0].appendChild(oNewP);//在p元素之后追加新元素内容
}
</script>
</head>
<body οnlοad="appendMessage()">
<p>hello world</p>
</body>
</html>
显示效果：
hello world

Hello Universite
iteye_12996
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 高级程序设计 笔记
梦在前方，路在脚下，自胜者强，自强者胜！
02-06 611
第一章 什么是 JavaScript JavaScript 的组成：ECMAScript、文档对象模型（DOM）、浏览器对象模型（BOM） 文档对象模型（DOM）：一个应用编程接口（API），提供与网页内容交互的方法与接口。DOM 将整个页面抽象为一组分层节点。HTML 或 XML 页面的每个组成部分都是一种节点，包含不同的数据。 <html lang="en"> <head> <title>Sample</title>
JavaScript高级程序设计 学习笔记之DOM基础(五)
05-27
这篇学习笔记主要围绕DOM基础展开，涵盖了JavaScript操作DOM的各种方法和技术。 在JavaScript中，DOM被视为一个树形结构，其中每个节点代表了页面上的一个元素、属性或文本。DOM的基础主要包括以下几个方面： 1. *...
JavaScript高级程序设计（红宝书）学习笔记
m0_63882057的博客
03-09 1258
（：介绍了一些很宏观大概的与JS相关的内容，浮光掠影地过了一遍，对JS的定义和大概版本兼容组成有了一些认识。JavaScript是一种专为网页交互设计的脚本语言，由下列三种不同部分组成：①ECMAScript，提供核心语言功能②文档对象模型（DOM），提供访问和操作网页内容的方法和接口③浏览器对象模型（BOM），提供与浏览器交互的方法和接口。
JavaScript高级程序设计学习总结（笔记）
how2js的博客
11-23 991
第一章 JavaScript简介 JavaScript实现组成： ECMAScript（核心） DOM（文档对象模型） BOM（浏览器对象模型） 第二章 在HTML中使用script 可以添加defer关键字延迟执行，在文档被加载并完全解析后，类似与DOMContentLoaded事件但是在DOMContentLoaded事件之前，多个defer脚本是按顺序调用的. 可以添加async关键字...
《JavaScript高级程序设计》学习笔记 JavaScript基本（1）
volit的博客
07-15 941
ECMAScript的语法很大程度借鉴了C语言和其他类C语言，如Java和Perl。
JavaScript高级程序设计学习笔记【第一章 什么是JavaScript】
luminous-烁的博客
06-22 152
JavaScript是一门用来与网页交互的脚本语言，是前端学习必学的一种语言。从今天开始打卡学习，加油！
JavaScript高级程序设计学习笔记----初识JavaScript
m0_71673753的博客
09-15 1166
概括了一些JS入门基础知识和扩展知识
JavaScript高级程序设计系列一之DOM&BOM
FYSGXFZ的博客
11-21 545
简短介绍 本人是学习后端的，刚毕业来到公司，有幸能够跟着郑大的老师做项目。是他为我打开了语言的另一扇大门，同时使我能够先接触JS，然后还能有机会接触JAVA。由于目前接触JS比较多，加之本人也想深入掌握JS的一些原理，就在csdn上面整理一下思路，同时深入剖析一些JS的核心知识吧。 且行且学习，目前(2020.11.19)在使用Vue，昨天刚结束一个周期二十多天的权限管理系统前端，对Vue也算入了门，但是这哪儿行啊，Vue内部报错了基本上依赖网络(度娘)，哼哼哼，准备以Vue为切入点，深入理解JS核心知
JavaScript高级程序设计学习笔记（一）1.2JavaScript实现
weixin_42583106的博客
09-28 77
1.2.1. 一个完整的JavaScript实现由以下三部分组成：ECMAScript.BOM.DOM 2.ECMAScipt-262定义的ECMAScript只是这门语言的基础 ECMASCript-262规定的内容： 语法 类型 语句 关键字 保留字 操作符 对象 Web浏览器是可能实现ECMASCript的宿主环境之一 ----宿主环境不仅提供语言的基本实现，同时也会提供语言拓展（如DOM）...
JavaScript高级程序设计读书笔记
qq_45968958的博客
12-01 176
学习目标： JavaScript高级程序设计 学习内容： 什么是JavaScript JavaScript是一门用来与网页交互的脚本语言，包含以下三个组成部分。 1.ECMAScript：由ECMA-262定义并提供核心功能。 2.文档对象模型（DOM）：提供与网页内容交互的方法和接口。 3.浏览器对象模型（BOM）：提供与浏览器交互的方法和接口。 HTML中的JavaScrip script元素 1.在网页中嵌入JavaScript代码 <script> function sayHi
JavaScript高级程序设计（第3版）学习笔记 第1章
Kedi的博客
12-10 148
第1章 JavaScript简介 1.一个完整的JavaScript实现也应该由下列三个不同的部分组成： 核心（ECMAScript）：提供核心语言功能 文档对象模型（DOM）：提供访问和操作网页内容的方法和接口 浏览器对象模型（BOM）：提供与浏览器交互的方法和接口 2.ECMA（European Computer Manufacturers Association,欧洲计算机制造商协会...
JavaScript高级程序设计学习笔记（一）
01-08
最近为了补js的基础，开坑javascript高程，这书基础部分写得很详细很好读，搭配着MDN进行学习理解。 闲下来的时间记录一下边读边做的笔记，大多是以前编程的时候没注意过的基础知识点。 第一章 JavaScript的完整实现...
JavaScript高级程序设计 DOM学习笔记
10-28
DOM是针对XML和HTML文档的一个API：即规定了实现文本节点操控的属性、方法，具体实现由各自浏览器实现。
JavaScript高级程序设计（第3版）学习笔记 概述
12-07
《JavaScript高级程序设计（第3版）》这本书是深入理解和掌握JavaScript的一本经典之作，它涵盖了从基础到高级的各种概念和技术。 首先，我们来了解一下JavaScript的背景。ECMA，全称欧洲计算机制造商协会，是制定...
笔记222222222222222222222222222222
最新发布
08-04
笔记222222222222222222222222222222
仿拉钩App小程序.rar
08-04
小程序的设计源码通常包含多个文件和文件夹，组织结构清晰，以便开发者能够快速上手并进行定制化开发。主要文件和文件夹包括： 页面文件夹：存放小程序的各个页面，每个页面通常由.wxml、.wxss、.js和.json文件组成。WXML文件负责页面的结构，类似于HTML；WXSS文件负责样式，类似于CSS；JS文件负责页面的逻辑和交互；JSON文件用于页面的配置，如导航栏标题等。 组件文件夹：存放可复用的UI组件。组件与页面类似，也由.wxml、.wxss、.js和.json文件组成。通过组件化设计，可以提高代码的复用性和维护性，减少重复工作。 静态资源文件夹：存放图片、音频、视频等静态资源，便于在小程序中引用。这些资源通常放在一个名为assets或static的文件夹中。 配置文件：小程序的根目录下通常有一个app.json文件，用于全局配置，如页面路径、导航栏样式、底部Tab栏等。此外，还有app.wxss和app.js文件，分别用于全局样式和全局逻辑。 工具文件夹：存放一些工具函数和库文件，便于在小程序中调用。这些文件通常放在一个名为utils的文件夹中。
华云智慧园区.rar
08-04
小程序的设计源码通常包含多个文件和文件夹，组织结构清晰，以便开发者能够快速上手并进行定制化开发。主要文件和文件夹包括： 页面文件夹：存放小程序的各个页面，每个页面通常由.wxml、.wxss、.js和.json文件组成。WXML文件负责页面的结构，类似于HTML；WXSS文件负责样式，类似于CSS；JS文件负责页面的逻辑和交互；JSON文件用于页面的配置，如导航栏标题等。 组件文件夹：存放可复用的UI组件。组件与页面类似，也由.wxml、.wxss、.js和.json文件组成。通过组件化设计，可以提高代码的复用性和维护性，减少重复工作。 静态资源文件夹：存放图片、音频、视频等静态资源，便于在小程序中引用。这些资源通常放在一个名为assets或static的文件夹中。 配置文件：小程序的根目录下通常有一个app.json文件，用于全局配置，如页面路径、导航栏样式、底部Tab栏等。此外，还有app.wxss和app.js文件，分别用于全局样式和全局逻辑。 工具文件夹：存放一些工具函数和库文件，便于在小程序中调用。这些文件通常放在一个名为utils的文件夹中。
新浪读书.rar
08-04
小程序的设计源码通常包含多个文件和文件夹，组织结构清晰，以便开发者能够快速上手并进行定制化开发。主要文件和文件夹包括： 页面文件夹：存放小程序的各个页面，每个页面通常由.wxml、.wxss、.js和.json文件组成。WXML文件负责页面的结构，类似于HTML；WXSS文件负责样式，类似于CSS；JS文件负责页面的逻辑和交互；JSON文件用于页面的配置，如导航栏标题等。 组件文件夹：存放可复用的UI组件。组件与页面类似，也由.wxml、.wxss、.js和.json文件组成。通过组件化设计，可以提高代码的复用性和维护性，减少重复工作。 静态资源文件夹：存放图片、音频、视频等静态资源，便于在小程序中引用。这些资源通常放在一个名为assets或static的文件夹中。 配置文件：小程序的根目录下通常有一个app.json文件，用于全局配置，如页面路径、导航栏样式、底部Tab栏等。此外，还有app.wxss和app.js文件，分别用于全局样式和全局逻辑。 工具文件夹：存放一些工具函数和库文件，便于在小程序中调用。这些文件通常放在一个名为utils的文件夹中。
基于Springboot和Vue的 网上购物商城系统源码 网上购物商城系统代码（高分优秀毕业设计）
08-04
网上购物商城系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
JavaScript高级程序设计精华笔记
"JavaScript高级程序设计笔记" 这篇笔记主要涵盖了JavaScript的核心概念和高级特性，包括ECMAScript规范、DOM操作、面向对象编程以及在浏览器环境中的应用。以下是对笔记内容的详细解读： 1. ECMAScript: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值