DOM javascript学习 一

最新推荐文章于 2024-06-24 21:17:51 发布
最新推荐文章于 2024-06-24 21:17:51 发布
阅读量65 收藏
点赞数
文章标签： JavaScript 浏览器 XHTML HTML ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/morefree_/article/details/83924171
版权 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" />
	<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<title>Image Gallery</title>
	<script type="text/javascript" src="c.js"></script>	
		<link  rel="stylesheet" href="styles/layout.css"
	type="text/css" media="screen"	/>
	</head>
	<body>
		<h1>Snapshots</h1>
		<ul id="imagegallery">
			<li><a href="images/a.jpg"  title="a firework display" class="gallerypic">a</a></li>
			<li><a href="images/b.jpg"  title="a cup of coffee" class="gallerypic">b</a></li>
			<li><a href="images/c.jpg" title="a red red rose" class="gallerypic">c</a></li>
			<li><a href="images/d.jpg" title="" class="gallerypic">d</a></li>
		</ul>
		<p id="description">Choose a image.</p>
		<img id="placeholder" src="images/placeholder.gif" />
		<a href="http://www.baidu.com" class="popUp">popUp</a>
	</body>

</html>
</DOCTYPE>


addLoadEvent(prepareLinks);


function prepareLinks(){
	//alert("prepareLinks");
	if(!document.getElementById) {
		return false;
	}
	if(!document.getElementsByName) {
		return false;
	}
	if(!document.getElementById("imagegallery")){
		return false;
	}


	var gallery = document.getElementById("imagegallery");

	var links = gallery.getElementsByTagName("a");
	for (var i=0;i<links.length ;i++ ){
		if (links[i].getAttribute("class")=="gallerypic"){
			//alert("gallerypic"+i);
			links[i].onclick = function(){
				//为了让showPic()函数所返回的布尔值发挥作用，要加上return ,传递给浏览器
				return showPic(this);
				//return false;     //是否反回false应该由showPic决定而不是由prepareLinks决定
			}
			//links[i].onkeypress = links[i].onclick;  //键盘事件  配合TAB键使用 一般无需添加，onclick可以识别TAB+ENTER
		}
	} 

/*
	for (var i=0;i<links.length ;i++ ){
		if (links[i].getAttribute("class")=="popUp"){
			//alert("to popUp");
			links[i].onclick = function(){
				popUp(this.getAttribute("href"));return false
			}
		}	
	}
*/
	//alert("prepareLinks over");
}

function showPic(whichPic){
	//salert("showPic");
	//检查是否有placeholder 这个ID的元素,如果没有则让html的href跳转
	if(!document.getElementById("placeholder")){
		alert("there is no element named placeholder");
		return true;
	}
	var source = whichPic.getAttribute("href");
	var placeholder = document.getElementById("placeholder");
	if(placeholder.nodeName!="IMG"){
		return true;
	}

	placeholder.setAttribute("src",source);

	//检查是否有description这个id的元素
	if(!document.getElementById("description")){
		return false;
	}

	if(whichPic.getAttribute("title")){
		var text = whichPic.getAttribute("title");
	} else {
		var text = "";
	}
	var description =  document.getElementById("description");

	if(description.firstChild.nodeType == 3){
		description.firstChild.nodeValue = text;
	}

	return false;
}

function popUp(winURL){
	alert("popUp");
	return true;
	window.open(winURL,"popup","width=320,height=480");
}


//addLoadEvent!  onload函数添加
function addLoadEvent(func){
	var oldonload = window.onload;
	if(typeof winonload != 'function'){
		window.onload = func;
	}
	else {
		window.onload = function(){
			oldload();
			func();
		}
	}
}



body{
	font-family:"Helvetica","Arial",sans-serif;
	color:#333;
	background-color:#ccc;
	margin:1em 10%;
}

h1{
	color:#333;
	background-color:transparent;
}

a{
	color:#c60;
	background-color:transparent;
	font-weight:bold;
	text-decoration:none;
}

ul{
	padding:0;
}

li{
	float:left;
	padding:1em;
	list-style:none;

}


morefree_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript学习 — 初识DOM
weixin_67614925的博客
05-20 148
文章目录定义文档对象模型DOMDOM树扩展 定义        文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(HTMl和XML文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在
JavaScript DOM 学习总结(五)
10-23
当页面加载时，浏览器会创建页面的文档对象模型（Document Object Model）。文档对象模型定义访问和处理HTML文档的标准方法，本篇文章给大家介绍javascript dom 学习总结(五)，感兴趣的朋友一起学习吧
JavaScript—DOM学习
weixin_50735831的博客
08-08 423
dom基础学习
JavaScript学习之DOM模型概念
林林一928的博客
04-21 755
DOM是浏览器提供一套专门用来操作网页内容的功能。JavaScript分为: 1. ECMAScripts(javaScripts语言基础)2.Web APIs: 2.1 DOM(页面文档对象类型)2.2 BOM(浏览器对象模型)。节点（node）：DOM 的最小组成单位。 一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是 DOM 树。Node.nodeType属性
JavaScript之DOM
qq_43751200的博客
06-05 1752
DOM
Javascript学习之DOM学习
m0_53450739的博客
04-01 73
DOM的核心对象是document对象，document对象是浏览器内置的一个对象，里面存储着专门用来操作元素的各种方法。页面中的标签，我们通过JS获取到之后，就把这个标签叫做DOM对象。
22 JavaScript学习：表单验证
百锦再的博客
04-30 7万+
JavaScript 表单验证是一种常用的前端技术，可以通过编写 JavaScript 脚本来对用户在表单中输入的数据进行验证，确保其格式和内容符合要求。但需要注意，前端验证只能作为一种辅助手段，真正的数据验证应该在后端进行，以确保数据的安全性和可靠性。其原理是在用户提交表单时，触发 JavaScript 函数进行对用户输入数据的验证，以确保其格式和内容符合预期。HTML5引入了一些新的表单输入类型和属性，可以在不编写JavaScript的情况下自动验证用户输入。最好根据具体需求和业务场景进行调整和优化。
JavaScript的学习之DOM简介
人生苦短
06-24 573
DOM全称Document Object Model文档对象模型文档：表示整个HTML网页文档对象：表示网页中的每一个部分转换为一个对象模型：表示对象之间的关系，为了方便我们获取对象。
一起学习javascript-DOM
m0_74762754的博客
06-11 347
修改属性和内容：可以直接修改节点的属性值，如element.setAttribute('attributeName', 'value')，或者修改文本内容，如textContent或innerText属性。// document.getElementById('div1').innerHTML = '这是div1块，更新了内容';// 删除：将该节点从HTML中删除，相当于删掉了该DOM节点的内容以及它包含的所有子节点。// 更新：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容；
23 JavaScript学习：验证API
热门推荐
百锦再的博客
04-30 8万+
结合上述的属性和相关的事件，如 input 事件、submit 事件，您可以实现强大的前端验证逻辑。JavaScript中的保留关键字是一些被语言规范保留用于特定目的的单词，不能被用作标识符（比如变量名、函数名等）。这些是一些基本的约束验证方法，可以帮助您在前端验证用户输入。在 JavaScript 中，约束验证的 DOM 属性是指那些用于描述和控制表单元素验证行为的属性。所有的现代浏览器完全支持 ECMAScript 3（ES3，JavaScript 的第三版，从 1999 年开始）。
04 JavaScript学习：输出
百锦再的博客
04-19 6万+
JavaScript 没有任何打印或者输出的函数。
JavaScript学习笔记之DOM操作实例分析
10-17
2. "O"：代表Object，意味着DOM将整个文档转换为一系列的对象，这些对象可以被JavaScript或其他支持DOM的编程语言操纵。 3. "M"：代表Model，表示文档的结构模型，通过DOM，我们可以对文档进行增删改查。 二、节点 ...
JavaScript DOM学习第一章 W3C DOM简介
01-19
在这一章我主要介绍已经被新一代的浏览器所支持的W3C 第一级的DOM。对他的运作做一个大概的了解并且让你知道你可以对他们做什么。 首先是对于DOM的一些建议和DOM设计的目的，然后我会告诉你什么是节点（nodes）并且...
javascript DOM对象的学习实例代码
10-29
在JavaScript中，DOM被表示为一个树形结构，其中每个节点代表文档的一部分，如元素、文本、注释等。在这个实例中，我们将探讨如何使用DOM对象来查找和操作网页中的特定元素。 1. **获取元素**： - `...
JavaScript 学习笔记（十二） dom
10-29
新的一章的学习----Dom，重点啊
Deep Coral源码（深度相关性学习）
07-25
Deep Coral（深度相关性学习）迁移学习网络资源 Deep Coral是一种先进的迁移学习技术，专注于通过学习源域和目标域之间的相关性来提高模型的泛化能力。这种方法在处理不同数据分布的问题时表现出色，尤其是在无监督领域自适应的场景中。 Deep Coral网络核心特点： 相关性学习 - Deep Coral通过学习源域和目标域特征之间的相关性，减少领域差异，提高模型的泛化能力。 无监督学习 - 该方法无需目标域的标签信息，即可实现有效的领域自适应，适合标签稀缺的场景。 灵活性 - 该网络结构灵活，可以适用于多种不同的迁移学习场景，包括但不限于图像分类、语义分割等。
codeforces round 961 (div. 2)
07-25
A题 思路：对角线上的个数为：n，n-1(2个)，n-2(2个)，n-3(2个),......，1(2个) AC代码： #pragma GCC optimize("O2") #pragma GCC optimize("O3") #include <bits/stdc++.h> using namespace std; #define int long long #define double long double typedef long long ll; typedef unsigned long long ull; typedef pair<int, int> pii; const int N = 1e5 + 5, M = 1e7 + 5, S = 1e6 + 5, inf = 0x3f3f3f3f3f3f3f3f, mod = 1e9 + 7; int n, k; void solve() { cin >> n >> k; vector<int> v; for (int i = n; i >= 1; i--) { if (i
毕业设计：基于Springboot的多媒体信息共享平台
最新发布
07-25
随着信息时代的到来，传统武理多媒体信息共享管理方式的弊端日益显现。针对这些问题，本文分析了传统方式的不足，并采用计算机技术构建武理多媒体信息共享系统。通过查阅相关文献和研究国内外相关技术，本文提出了一种集作品信息管理与信息共享于一体的系统构建方案。 本系统采用B/S架构，结合Spring Boot框架和MySQL数据库技术，针对国内武理多媒体信息共享系统的现状进行开发。系统包含个人中心、用户管理、作品分类管理、作品信息管理、私聊信息管理、系统管理等多个功能模块。经过测试，本系统达到了设计目标，相较于人工管理方式，显著降低了武理多媒体信息共享管理的经济成本，并大幅提升了管理效率。
2022年河南省特岗教师招聘考试题（考生回忆版）.pdf
07-25
2022年河南省特岗教师招聘考试题（考生回忆版）.pdf2022年河南省特岗教师招聘考试题（考生回忆版）.pdf2022年河南省特岗教师招聘考试题（考生回忆版）.pdf2022年河南省特岗教师招聘考试题（考生回忆版）.pdf2022年河南省特岗教师招聘考试题（考生回忆版）.pdf2022年河南省特岗教师招聘考试题（考生回忆版）.pdf2022年河南省特岗教师招聘考试题（考生回忆版）.pdf2022年河南省特岗教师招聘考试题（考生回忆版）.pdf2022年河南省特岗教师招聘考试题（考生回忆版）.pdf2022年河南省特岗教师招聘考试题（考生回忆版）.pdf2022年河南省特岗教师招聘考试题（考生回忆版）.pdf2022年河南省特岗教师招聘考试题（考生回忆版）.pdf2022年河南省特岗教师招聘考试题（考生回忆版）.pdf2022年河南省特岗教师招聘考试题（考生回忆版）.pdf2022年河南省特岗教师招聘考试题（考生回忆版）.pdf2022年河南省特岗教师招聘考试题（考生回忆版）.pdf2022年河南省特岗教师招聘考试题（考生回忆版）.pdf2022年河南省特岗教师招聘考试题（考生回忆版）
javascriptdom学习
07-20
1. 先了解什么是DOM：DOM 是一种对 HTML 和 XML 文档的编程接口，它将文档解析成由节点和对象（如元素、属性和文本）组成的结构，开发者可以使用 DOM 提供的方法和属性来操作和修改这些节点和对象。 2. 学习基本的 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值