js学习之dom编程应用图片库

2024-06-16 14:32

本文主要是介绍js学习之dom编程应用图片库,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

        最近在看《JavaScript Dom编程艺术》这本书,入门经典书,首先推荐之~

        进入正题,首先。何为DOM?

        D——document,O——object,M——Model or Map.(具体阐述可参考上书第三章)。

        DOM编程就是把整个表示为一棵树,所以我们一般使用的方法有:

        document.getElementById(返回一个对象)

        document.getElementsByTagName(返回一个对象数组)

        document.getElementsByClassName(返回一个对象数组,html5中的dom才添加,所以使用的时候最好是加一个函数判断一下浏览器是否能够支持,再做出反应)

       element.getAttribute获得属性

       element.setAttribute("属性名",属性值)设置属性,但是不会改变文档静态内容,加载之后会刷新。

       element.childNodes子节点

       element.nodeType元素节点为1,属性节点为2,文本节点为3

       element.nodeValue可以用于获取,也可以直接设置(element.nodeValue=text;)

       element.firstChild(lastChild)第一个孩子节点和最后一个孩子节点

 

       OK,了解完这些之后,就像开始买好了食材了一样,可以小试一把了~

       首先,写好html文档,把整个网页内容和架构搭好

       然后,加入css调整一下,最后就是js文档啦。

       

function showPic(pic){	//获得placeholder,然后将被点击的图片的链接给placeholdervar source=pic.getAttribute("href");var placeholder=document.getElementById("placeholder");placeholder.setAttribute("src",source);//同样的方法将图片下方的文字改变。因为文字只是其中的文本节点,不是属性,所以不能完全用相同方法。var text=pic.getAttribute("title");var description=document.getElementById("description");description.firstChild.nodeValue=text;
}

 

 

这是最后的效果,点击上面的小图,下面会对应显示,文字也会随之变化。

       当然如果你考虑地更多,可能用户会不用禁止了js或者是浏览器有什么问题。这就是平稳退化的问题。为了安全起见,不老是报错,我们最好还是进行对象检测。改进之后的js代码是这样的

// JavaScript Document
window.οnlοad=prepare;
function prepare(){if(!document.getElementsByTagName)return false;if(!document.getElementById)return false;if(!document.getElementById("imagegallery"))return false;var gallery=document.getElementById("imagegallery");var myLink=gallery.getElementsByTagName("a");for(var i=0;i<myLink.length;i++){myLink[i].οnclick=function(){return showPic(this)?false:true;}}
}
function showPic(pic){	if(!document.getElementById("placeholder"))return false;var source=pic.getAttribute("href");var placeholder=document.getElementById("placeholder");placeholder.setAttribute("src",source);if(document.getElementById("description")){var text=pic.getAttribute("title");var description=document.getElementById("description");description.firstChild.nodeValue=text;}return true;}

       附件是做这个的所有文件~~

       补充一些以上文件没有用到的常见的动态改变标签的方法:

       createElement创建对象

       createTextNode创建文本节点

       appendChild添加子节点,让创建节点加入文本的树里

       insertBefore将节点添加到某个节点之后

       需要注意的是没有insertAfter的方法,可以自己写一个

funciton(newElement,targetElement){//先获取父节点var parent=targetElement.parentNode;if(parent.lastChild==targetElement){parent.appendChild(newElement)}else{parent.insertBefore(newElement,targetElement.nextSibling);}
}

 

 

这篇关于js学习之dom编程应用图片库的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1066698

相关文章

如何确定哪些软件是Mac系统自带的? Mac系统内置应用查看技巧

《如何确定哪些软件是Mac系统自带的?Mac系统内置应用查看技巧》如何确定哪些软件是Mac系统自带的?mac系统中有很多自带的应用,想要看看哪些是系统自带,该怎么查看呢?下面我们就来看看Mac系统内... 在MAC电脑上,可以使用以下方法来确定哪些软件是系统自带的:1.应用程序文件夹打开应用程序文件夹

使用Python获取JS加载的数据的多种实现方法

《使用Python获取JS加载的数据的多种实现方法》在当今的互联网时代,网页数据的动态加载已经成为一种常见的技术手段,许多现代网站通过JavaScript(JS)动态加载内容,这使得传统的静态网页爬取... 目录引言一、动态 网页与js加载数据的原理二、python爬取JS加载数据的方法(一)分析网络请求1

Python Flask 库及应用场景

《PythonFlask库及应用场景》Flask是Python生态中​轻量级且高度灵活的Web开发框架,基于WerkzeugWSGI工具库和Jinja2模板引擎构建,下面给大家介绍PythonFl... 目录一、Flask 库简介二、核心组件与架构三、常用函数与核心操作 ​1. 基础应用搭建​2. 路由与参

Spring Boot中的YML配置列表及应用小结

《SpringBoot中的YML配置列表及应用小结》在SpringBoot中使用YAML进行列表的配置不仅简洁明了,还能提高代码的可读性和可维护性,:本文主要介绍SpringBoot中的YML配... 目录YAML列表的基础语法在Spring Boot中的应用从YAML读取列表列表中的复杂对象其他注意事项总

电脑系统Hosts文件原理和应用分享

《电脑系统Hosts文件原理和应用分享》Hosts是一个没有扩展名的系统文件,当用户在浏览器中输入一个需要登录的网址时,系统会首先自动从Hosts文件中寻找对应的IP地址,一旦找到,系统会立即打开对应... Hosts是一个没有扩展名的系统文件,可以用记事本等工具打开,其作用就是将一些常用的网址域名与其对应

CSS 样式表的四种应用方式及css注释的应用小结

《CSS样式表的四种应用方式及css注释的应用小结》:本文主要介绍了CSS样式表的四种应用方式及css注释的应用小结,本文通过实例代码给大家介绍的非常详细,详细内容请阅读本文,希望能对你有所帮助... 一、外部 css(推荐方式)定义:将 CSS 代码保存为独立的 .css 文件,通过 <link> 标签

Python使用Reflex构建现代Web应用的完全指南

《Python使用Reflex构建现代Web应用的完全指南》这篇文章为大家深入介绍了Reflex框架的设计理念,技术特性,项目结构,核心API,实际开发流程以及与其他框架的对比和部署建议,感兴趣的小伙... 目录什么是 ReFlex?为什么选择 Reflex?安装与环境配置构建你的第一个应用核心概念解析组件

C#通过进程调用外部应用的实现示例

《C#通过进程调用外部应用的实现示例》本文主要介绍了C#通过进程调用外部应用的实现示例,以WINFORM应用程序为例,在C#应用程序中调用PYTHON程序,具有一定的参考价值,感兴趣的可以了解一下... 目录窗口程序类进程信息类 系统设置类 以WINFORM应用程序为例,在C#应用程序中调用python程序

Java应用如何防止恶意文件上传

《Java应用如何防止恶意文件上传》恶意文件上传可能导致服务器被入侵,数据泄露甚至服务瘫痪,因此我们必须采取全面且有效的防范措施来保护Java应用的安全,下面我们就来看看具体的实现方法吧... 目录恶意文件上传的潜在风险常见的恶意文件上传手段防范恶意文件上传的关键策略严格验证文件类型检查文件内容控制文件存储

CSS3 布局样式及其应用举例

《CSS3布局样式及其应用举例》CSS3的布局特性为前端开发者提供了无限可能,无论是Flexbox的一维布局还是Grid的二维布局,它们都能够帮助开发者以更清晰、简洁的方式实现复杂的网页布局,本文给... 目录深入探讨 css3 布局样式及其应用引言一、CSS布局的历史与发展1.1 早期布局的局限性1.2