Dom及JavaScript图片库
补充上一篇的内容：
JavaScript中的对象可以分为三种类型：
1.用户定义的对象：由程序员自行创建的对象。
2.内建对象：内建在JavaScript中的对象，如Array,Math与Date。
一. DOM
1.DOM
5个常用DOM方法：getElementById,getElementsByTagName,getElementsByClassName,getAttribute,setAttribute
2.getAttribute
getAttribute用于利用getElementById等方法得到所需元素后获取它的属性。
getAttribute不属于document对象，所以它只能通过元素节点对象调用。例如：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<ul id="test">
<li value="1">aa</li><li value="2">aaa</li><li>aaaa</li>
</ul>
<script>
var values=document.getElementsByTagName("li");
for(var i=0;i<values.length;i++){
alert(values[i].getAttribute("value"));
}
</script>
</body>
</html>
3.setAttribute
setAttribute用于更改属性节点的值。例如：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<ul id="test" value="你好">
<li value="1">aa</li><li value="2">aaa</li><li>aaaa</li>
</ul>
<script>
var values=document.getElementById("test");
alert(values.getAttribute("value"));
values.setAttribute("value","你也好");
alert(values.getAttribute("value"));
</script>
</body>
</html>
4.css
在不同class属性同classname的情况下，可以通过class属性.classname{}的方式为元素定义特定的样式。
节点类型：元素节点，属性节点，文本节点。
JavaScript图片库
childNodes属性用于获取任何一个元素的所有子元素。
nodeValue属性用于获取一个节点的值，改变文本节点的值。
注：<p>元素原本的nodeValue属性是一个空值，<p>元素的文本是另一个节点，是<p>的第一个子节点。因此获取<p>的文本内容的写法：id名.childNodes[0].nodeVlue
firstChild相当于childNodes[0]
lastChild：childNodes的最后一个元素，相当于childNodes[node.childNodes.length-1]
元素节点的nodeType属性值是1.
属性节点的nodeType属性值是2.
文本节点的nodeType属性值是3.
图片库案例如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script>
function showPic(whichpic){ /*whichpic代表元素节点a*/
var source=whichpic.getAttribute("href"); /*解析图片路径并存入source中*/
var placeholder=document.getElementById("placeholder");
placeholder.setAttribute("src",source); /*刷新id=placeholder中的src*/
var content=whichpic.getAttribute("title");
var description=document.getElementById("description");
description.firstChild.nodeValue=content; /*刷新p中的文本值*/
}
</script>
</head>
<body>
<ul>
<li><a href="../images/7d0a79d0gw1ezmnxoszxyj20c80c8wg6.jpg" οnclick="showPic(this);return false;" title="one picture">第一张图片</a></li>
<li><a href="../images/930212c3jw1ezmoc09hfuj20c80gawfm.jpg" οnclick="showPic(this);return false;" title="two picture">第二张图片</a></li>
<li><a href="../images/930212c3jw1ezmoc11gqkj20c808raak.jpg" οnclick="showPic(this);return false;" title="three picture">第三张图片</a></li>
<li><a href="../images/930212c3jw1ezmoc27n33j20c80dzwfe.jpg" οnclick="showPic(this);return false;" title="fourth picture">第四张图片</a></li>
</ul>
<img id="placeholder" /> <!--作为图片的"占位符",使图片在当前页面显示-->
<p id="description">显示图片</p>
</body>
</html>
效果图：
Dom及JavaScript图片库相关推荐
- 视频教程-Javascript DOM操作-JavaScript
Javascript DOM操作 江湖花名King... 何山 ¥39.00 立即订阅 扫码下载「CSDN程序员学院APP」,1000+技术好课免费看 APP订阅课程,领取优惠,最少立减5元 ↓↓↓ ...
- 什么是DOM，DOM的作用，以及DOM与JavaScript的关系
一个想学web前端的初学者,如果在知乎中搜索推荐书目的话,得到的答案多数都是:首先,学习htlm+css:第二点就是阅读<JavaScript DOM 编程艺术>这本书. 作为一个初学的小 ...
- JavaScript DOM编程艺术小记（五）---第四章-JavaScript图片库(实例)
^编写一个优秀的标记文件 ^编写一个JavaScript函数以显示用户想要查看的图片 ^由标记触发函数调用 ^使用几个新方法扩展这个JavaScript函数 以下代码结合三四章内容 HTML文件 &l ...
- JavaScript 第四课 案例研究：JavaScript图片库
主要内容: 编写一个优秀的标记文件 编写一个JavaScript函数以显示用户想要查看的内容 由标记出发函数调用 使用几个新方法扩展这个JavaScript函数 学习过DOM,我们用JavaScrip ...
- JavaScript图片库
将图片放到网上的方法有很多,你可以简单地把所有的图片都放到网页上.但是,如果你打算发布的图片过多,这个页面很快会变的过于庞大,而且加上这些图片后用户要下载的的数据量就会变得相当可观.我们必须面对这样一 ...
- php dom手册,DOM 元素 - JavaScript中文参考手册 - php中文网手册
创建新的 HTML 元素 创建新的 HTML 元素如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素. 实例 html> php中文网(ph ...
- 菜鸟网html dom对象,JavaScript学习指南
1.1 JavaScript基础概念: JavaScript (ECMAScript) :JavaScript 是脚本语言.JavaScript和ECMAScript通常被人用来表达相同的含义,但是J ...
- javascript图片库威力增强版
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
- Html 内嵌 选择器属性 Dom操作 JavaScript 事件
HTML标签: 一.通用标签(一般标签) 1.格式控制标签 <font color="#6699aa" face="楷体" size="24&q ...
最新文章
- SQL查询语句总是先执行SELECT？你们都错了。。。
- java中常用的字符串的截取方法
- 微软发布紧急更新：修复Flash高危漏洞
- vs2010添加TSTCON( ActiveX Control Test Container )工具
- 税收java_String 类中的 isEmpty() 是判断字符串是否为空的,如果为空返回 true ,不为空返回 false 。 (1.0分)_学小易找答案...
- pb 动态改变DW的WHERE子句
- JavaScript单线程运行机制与并发模型
- layui admin 当前子页面 刷新 其他页面 layui 关闭 子弹窗
- ASP.NET Core真实管道详解[1]：中间件是个什么东西？
- excel mysql仓库管理_怎样用excel数据库建立仓库管理系统？
- [曲线拟合]使用Tensorflow拟合COS函数
- Matlab之数据归一化函数——mapminmax()
- ‘Staff‘ object has no attribute ‘data‘
- WOE编码和IV信息量
- 反转链表（Java）
- worldpress php7.2,centos7.4下word press环境由php5.6.4升级到php7.2
- oracle 11g 服务启动后 监听程序当前无法识别SID的问题解决
- 黑苹果:主板解锁CFG LOCK教程
- 华录智达科技有限公司入职六个月浅谈
- Alist+PotPlayer实现高清影视在线观看