javascript DOM的学习

最新推荐文章于 2024-10-16 16:26:58 发布

hi_allen_liu

最新推荐文章于 2024-10-16 16:26:58 发布

阅读量354

点赞数

分类专栏： javascript 文章标签： javascript function div

本文链接：https://blog.csdn.net/hi_allen_liu/article/details/6782811

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

DOM的五种方法：

getElementById

getElementsByTagName

getElementByClassName

getAttribute

setAttribute

一个简单的例子：点击链接，在同一页面的指定位置显示出图片

<html>
<head>
<script type="text/javascript">
function showPic(whichPic){
	var source = whichPic.getAttribute("href");		//获取当前元素的href所拥有的属性
	var placeholder = document.getElementById("d1");		//通过ID找到指定的div
	placeholder.setAttribute("src",source);			//把当前div的"src"属性设置为指定的内容
}
</script>
</head>
<body>
<h1>show picture</h1>
<ul>
<li><a href="images/Home_offers.png" title="the first pic" οnclick="showPic(this);return false">picture 1</a></li>
<li><a href="images/product01.jpg" title="the second pic">picture 2</a></li>
</ul>
<img id="d1" src="images/11_03.jpg"></img>
</body>
</html>

nodeValue属性，获取对象的节点值，点击按钮，显示文本内容：

function showThis(){
	var source = document.getElementsByTagName("a")[0];
	alert(source.childNodes[0].nodeValue);		//获取第一个子节点的文本节点的值
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

hi_allen_liu

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

JavaScript之DOM

qq_43751200的博客

06-05

1787

DOM

JavaScript：DOM对象

盒马的博客

12-23

1347

讲解JavaScript中的DOM对象，并介绍其获取，修改方式

参与评论您还未登录，请先登录后发表或查看评论

javascript学习——DOM 概述

白话机器学习

10-07

1160

DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如增删内容）。浏览器会根据 DOM 模型，将结构化文档（比如 HTML 和 XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。DOM 只是一个接口规范，可以用各种语言实现。

JavaScript-DOM 学习（含案例源码）

weixin_45515107的博客

05-05

1963

1、DOM概念文档对象模型（Document Object Model,简称DOM）,是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。 W3C已经定义了一系列的DPM接口，通过这些DOM接口可以改变网页的内容、结构和样式 1.1、DOM树文档：一个页面就是一个文档，DOM中使用document表示元素：页面中的所有标签都是元素，DOM中使用element表示节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示注意：DOM把

JavaScript基础学习 DOM

柠檬味小发糕的博客

12-14

535

JavaScript基础学习 DOMDOM获取元素获取特殊元素 html与body事件三要素innerText与innerHTML的区别分时间问候案例 DOM获取元素 <!DOCTYPE html> <html> <head> <title>DOM开始学习</title> </head> <body> <div id="time">2021-12-13</div>

JavaScript学习之DOM模型概念

林林一928的博客

04-21

789

DOM是浏览器提供一套专门用来操作网页内容的功能。JavaScript分为: 1. ECMAScripts(javaScripts语言基础)2.Web APIs: 2.1 DOM(页面文档对象类型)2.2 BOM(浏览器对象模型)。节点（node）：DOM 的最小组成单位。一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是 DOM 树。Node.nodeType属性

JavaScript之DOM操作

fsLees的博客

03-27

1301

JavaScript中的一些简单的DOM操作

JavaScript DOM详解

Chiclaim

10-03

7460

DOM的获取Element的方法和属性： getElementById(id) getElementsByTagName(tag) getElementsByClassName(class) parentNode childNodes firstChild lastChild nextSibling

javascript-DOM学习

技术何

10-29

626

javascript-DOM学习　　DOM document(html) object modle 　　document对象(DOM核心对象) 　　dom能用来干什么? 　　对html元素的样式(颜色、大小、位置等等)、内容、属　　性来进行动态的改变和操作。　　document对象　　• 一、属性　　• title 返回

JavaScript 操作 DOM 元素

疯狂假前端的博客

09-15

1275

DOM 基础：了解 DOM 的概念和如何通过 JavaScript 操作 DOM。选择元素：使用不同方法选择 DOM 元素。操作元素：修改元素的内容、属性和样式，操作子元素。事件处理：添加事件监听器，处理事件对象和事件委托。动态创建元素：创建和插入新元素，使用模板字符串动态生成 HTML 内容。掌握 DOM 操作的这些概念将帮助你动态地创建和更新网页内容。接下来，你可以学习异步编程，了解如何处理异步操作，如 AJAX 请求和 Promise。

JavaScript DOM学习第一章 W3C DOM简介

01-19

在这一章我主要介绍已经被新一代的浏览器所支持的W3C 第一级的DOM。对他的运作做一个大概的了解并且让你知道你可以对他们做什么。首先是对于DOM的一些建议和...不管是Perl、VBScript还是JavaScript你都可以读取任何你

JavaScript DOM 学习第五章表单简介

12-01

因为每一个表单的检测项都不同，所以我也不能给你一...Forms & JavaScript Living Together in Harmony局限性首先，你需要了解当用户提交了表单之后JavaScript的检测代码会做什么： 1、JavaScript检测表单时可能会像下

JavaScript DOM 学习第七章表单的扩展

12-13

只有使用W3C DOM才能让用户决定生成多少个字段。这个效果和之前的大不相同。例子当你点击发送的时候，表单就会把得到的所有参数以数组的形式发送。这用来检查是否真正的发送到了服务器端。不幸的是，mac版的IE和...

npm 和 npx 的区别和使用场景

Dou_Hua6的博客

10-09

668

自动下载和缓存：如果本地未安装所需包，npx会自动下载并执行，执行完毕后可以选择保留或删除。脚本运行：通过package.json中的scripts字段定义和运行自定义脚本。依赖管理：管理项目的dependencies和devDependencies。简化命令行工具的使用：临时执行命令，避免全局安装带来的版本冲突或污染。npm 全称：Node Package Manager。发布包：将自己的包发布到npm注册表供他人使用。：无需全局安装即可运行npm包中的可执行文件。

【JavaScript】移动色块案例实现一个可以拖动并且在拖动过程中会自动改变颜色的色块（JS 事件监听器）

m0_66584716的博客

10-11

1338

- **移动色块**：用户可以通过鼠标按住并拖动页面上的红色方块（`#blocks`）。当用户按下鼠标左键时，色块开始跟随鼠标的移动而移动；当用户释放鼠标左键时，色块停止移动。 - **显示当前位置**：随着色块的移动，其当前的屏幕坐标（相对于浏览器窗口）会被实时更新，并显示在页面底部左侧的位置显示区域（`#positionDisplay`）中。 - **自动变色**：一旦用户开始拖动色块，系统就会每隔300毫秒随机改变一次色块的颜色。颜色的变化是通过调用 `getRandomColor()` 函数生成一个

ECMAScript标准解析及其发展历史与技术演进

qq_20245171的博客

10-15

503

ECMAScript（简称ES）是由ECMA国际（欧洲计算机制造商协会）制定的一种脚本语言规范。它是JavaScript、JScript等语言的基础，并为现代Web开发提供了强大的支持。ECMAScript标准不仅定义了语言的语法和语义，还涵盖了数据类型、对象模型和执行环境等内容，极大推动了JavaScript语言的发展。本文将全面介绍ECMAScript标准的起源、各个版本的演变、关键特性以及未来趋势，深入探讨其对Web开发及编程语言设计的影响。

Element-plus el-form、el-dialog 数据回显同时用时，重置失效问题

Mr. Zhang Xiaojian's Blog

10-12

500

当第一次打开网页并点击“编辑”按钮时，虽然对话框变量变为 true 使对话框可见，但同步代码会将 formData 对象的属性设置为默认值。由于 Vue 的异步更新机制，DOM 实际上还未更新，因此表单组件内绑定了这些有值的初始数据。这样，在后续调用 resetFields 方法时，表单将会重置为这些默认值而不是空值。编辑时表单的初始值被设置成了回显的数据，而不是空字符串。时，表单会回到上次设置的初始值，即回显的数据。

基于Java微信小程序的水果销售系统详细设计和实现(源码+lw+部署文档+讲解等)