JavaScript DOM编程艺术第四章 — JavaScript图片库案例研究
这一章通过JavaScript图片库案例，学习了一些DOM属性。
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片库</title>
<link rel="stylesheet" href="styles/layout.css" media="screen" />
</head>
<script type="text/javascript" src="scripts/showPic.js"></script>
<body>
<h1>Snapshots</h1>
<ul>
<li>
<a href='images/1.jpg' title="黄昏海边" onclick="showPic(this);
return false;">黄昏海边</a>
</li>
<li>
<a href='images/2.jpg' title="大漠孤烟直" onclick="showPic(this);
return false;">沙漠</a>
</li>
<li>
<a href='images/3.jpg' title="湖泊" onclick="showPic(this);
return false;">湖泊</a>
</li>
<li>
<a href='images/4.jpg' title="可爱熊熊" onclick="showPic(this);
return false;">可爱壁纸</a>
</li>
<li>
<a href='images/5.jpg' title="哆啦A梦" onclick="showPic(this);
return false;">哆啦A梦</a>
</li>
</ul>
<img id="placeholder" src="data:images/gallery.png" alt="my image gallery" />
<p id="description">Choose an image.</p>
</body>
</html>
几个DOM属性
1. childNodes属性
- 用来获取任何一个元素的所有子元素
- 使用方式：element.childNodes
- 返回值：这个元素的所有子元素数组。包含所有类型的节点：元素节点、文本节点和属性节点。（实际上，文档里几乎每个东西都是一个节点，甚至连空格和换行符都是节点）
-- 示例：输出body元素的全体子元素
function countBodyChildren() {
let body_element = document.getElementsByTagName('body')[0];
console.log(body_element.childNodes);
}
-- 输出：
如图可见，body元素的子元素有9个，除了h1元素、ul元素、p元素、img元素四个外，还包括5个文本节点。
-- 文本节点示例：
2. nodeType属性
- 获取每个节点的type（元素节点、文本节点还是属性节点）
- 元素节点的nodeType属性值：1
- 属性节点的nodeType属性值：2
- 文本节点的nodeType属性值：3
- 使用方式：node.nodeType
-- 示例：
let body_element = document.getElementsByTagName('body')[0];
alert(body_element.nodeType);
-- 输出：1
3. nodeValue属性
- 获取 or 设置节点的值
- 获取节点的值使用方式：node.nodeValue
- 设置节点的值使用方式：node.nodeValue = xxx
- 注意，元素节点的nodeValue值是null。如果想获取p元素所包含的文本值，则需要获取元素所包含的文本值，则需要获取p元素的第一个子节点。
-- 示例：输出 p元素的nodeValue 和 p的childNodes 以及 第一个子节点的nodeValue
function countBodyChildren() {
let description = document.getElementsById('description');
console.log(description.nodeValue);
console.log(description.childNodes);
console.log(description.childNodes[0].nodeValue);
}
--- 输出：
-- 示例：将p元素nodeValue值设置为'hello world'
function countBodyChildren() {
let description = document.getElementById('description');
description.childNodes[0].nodeValue = 'hello world';
console.log(description.childNodes[0].nodeValue);
}
--- 输出：
4. firstChild和lastChild属性
- 指childNodes的第一个元素和最后一个元素，相当于简写，如下：
node.firstChild——>node.childNodes[0]node.lastChild——>node.childNodes[node.childNodes.length - 1]
完整代码
1. HTML见上
2. JavaScript
function showPic(whichPic) {
let source = whichPic.getAttribute('href');
let placeholder = document.getElementById('placeholder');
placeholder.setAttribute('src', source);
let title = whichPic.getAttribute('title');
let description = document.getElementById('description');
description.firstChild.nodeValue = title;
}
3. CSS
body {
font-family: 'Helvetica', 'Arial', 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;
}
img {
width: 80%;
display: block;
clear: both;
}
效果：
本章其它知识点
改变属性的方法除了setAttribute外，还可以使用非DOM的方法，比如改变某个input的value属性，
- 使用setAttribute：element.setAttribute('value', 'the new value')
- 使用非DOM解决方案：element.value = 'the new value'
非DOM解决方案是在DOM出现之前使用的方式，并非所有的属性都可以用这种方式设置属性，因此建议使用setAttribute，setAttribute可以修改文档中的任何一个元素的任何一个属性。
JavaScript DOM编程艺术第四章 — JavaScript图片库案例研究的更多相关文章
- javascript DOM编程艺术 第10章问题记录
为什么moveElement函数调用时,必须加字符串的拼接符 var repeat = "moveElement('"+elementID+"',"+final ...
- JavaScript DOM 编程艺术（1）---> JavaScript语法
一. JavaScript语法目录 语法 操作 条件语句 循环语句 函数 对象 二. 具体内容 2.1 语法 javaScript代码要通过HTML/XHTML文档才能执行.可以有两种方式完成这一 ...
- JavaScript DOM编程艺术第一章：JavaScript简史
本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助, ...
- 《JavaScript Dom 编程艺术》读书笔记-第4章
我的前端入门第一本书是<JavaScript Dom 编程艺术>,网上查找资料发现前端的入门推荐书籍最受好评的就是这本和<JavaScript 高级程序设计>了.之所以先选这本 ...
- 《JavaScript DOM 编程艺术》 学习笔记
目录 <JavaScript DOM 编程艺术> 学习笔记 第一章 js简史 第二章 js语法 准备工作 语法 第三章 DOM DOM中的D DOM中的O DOM中的M 第四章 js图片库 ...
- 读书笔记：JavaScript DOM 编程艺术（第二版）
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
- 《JavaScript dom 编程艺术》 placeholder占位符IE8兼容办法。
在<JavaScript dom 编程艺术>第11章学来的. 相对于用JavaScript替换文本框的提示语句 <!DOCTYPE html> <html lang=&q ...
- 《javascript dom编程艺术》笔记（一）——优雅降级、向后兼容、多个函数绑定onload函数
刚刚开始自学前端,如果不对请指正:欢迎各位技术大牛指点. 开始学习<javascript dom编程艺术>,整理一下学习到的知识.今天刚刚看到第六章,记下get到的几个知识点. 优雅降级 ...
- Javascript DOM 编程艺术（第二版）读书笔记——基本语法
Javascript DOM 编程艺术(第二版),英Jeremy Keith.加Jeffrey Sambells著,杨涛.王建桥等译,人民邮电出版社. 学到这的时候,我发现一个问题:学习过程中,相当一 ...
随机推荐
- Ravindrababu Ravula老师的数据结构与算法
最关键的问题是,作为印度裔,他的英语口音真的真的很好懂!!!而且语速很慢,适合大家学习. 作为一哥热衷于搬砖的小伙,我将他的视频搬运到了B站,大家可以前往我的B站观看,搜索"爱码士Noe&q ...
- 三、jmeter常用的元件及组件
一.HTTP cookie Manager 用来储浏览器产生的用户信息,Stepping Thread Group 可用于模拟阶梯加压! 二.HTTP Cache Manager 缓存管理器(模拟浏览 ...
- Spring Boot & Cloud 轻量替代框架 Solon 1.3.35 发布
Solon 是一个微型的Java开发框架.强调,克制 + 简洁 + 开放的原则:力求,更小.更快.更自由的体验.支持:RPC.REST API.MVC.Micro service.WebSocket. ...
- 一次 Go 程序 out of memory 排查及反思
前言 最近在搞数据导出模块,在测试大文件下载的过程中,报了 Out of memory (OOM) 错误,因为之前没有遇到过这类问题,导致此次排查问题花费了大半天,也走了不少弯路,特此复盘记录. 现象 ...
- 运行程序显示丢失“MSVCR100D.dll”
前言 写了一个Dll注入工具,结果发现程序在其他机器上会出现丢失"MSVCR100D.dll".这个dll是vs2010自带的动态链接库,如果在没安装vs2010运行库的电脑中使用 ...
- [Java] 类库例题
例1 字符串操作 定义一个StringBuffer类对象,然后通过append()方法向对象中添加26个小写字母,每次只添加一次,共添加26次,然后按逆序方式输出,并且可以删除前5个字符 面向过程实现 ...
- 置的测试文件的大小一定要大过你的内存（最佳为内存的两倍大小），不然linux会给你的读写的内容进行缓存，会使数值非常不准确。
使用iozone测试磁盘性能 IOzone是一个文件系统测试基准工具.可以测试不同的操作系统中文件系统的读写性能.可以通过 write, re-write, read, re-read, rand ...
- Ubuntu 配置本地源
Ubuntu 配置本地源 操作系统 Ubuntu 20.04.2 LTS 一.挂载 iso 到本地 mount -t iso9660 -o loop /dev/sr0 /media/cdrom //- ...
- 【山外笔记-SVN命令】svn命令详解
本文打印版文件下载地址 [山外笔记-SVN命令]svn命令详解-打印版.pdf 一.命令简介 svn命令用于Subversion命令行客户端,执行svn相关的操作. 二.命令语法 1.svn语法: ( ...
- 强哥CSS学习笔记
html嵌套css样式:1.外部(推荐)2.内部3.内联(不推荐) css优先级1.内联2.id选择器3.class选择器4.标签 css长度单位:1.px2.em (14px) css选择器:常用选 ...