这一章通过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图片库案例研究的更多相关文章

  1. javascript DOM编程艺术 第10章问题记录

    为什么moveElement函数调用时,必须加字符串的拼接符 var repeat = "moveElement('"+elementID+"',"+final ...

  2. JavaScript DOM 编程艺术(1)---> JavaScript语法

    一.  JavaScript语法目录 语法 操作 条件语句 循环语句 函数 对象 二.  具体内容 2.1 语法 javaScript代码要通过HTML/XHTML文档才能执行.可以有两种方式完成这一 ...

  3. JavaScript DOM编程艺术第一章:JavaScript简史

    本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助, ...

  4. 《JavaScript Dom 编程艺术》读书笔记-第4章

    我的前端入门第一本书是<JavaScript Dom 编程艺术>,网上查找资料发现前端的入门推荐书籍最受好评的就是这本和<JavaScript 高级程序设计>了.之所以先选这本 ...

  5. 《JavaScript DOM 编程艺术》 学习笔记

    目录 <JavaScript DOM 编程艺术> 学习笔记 第一章 js简史 第二章 js语法 准备工作 语法 第三章 DOM DOM中的D DOM中的O DOM中的M 第四章 js图片库 ...

  6. 读书笔记:JavaScript DOM 编程艺术(第二版)

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  7. 《JavaScript dom 编程艺术》 placeholder占位符IE8兼容办法。

    在<JavaScript dom 编程艺术>第11章学来的. 相对于用JavaScript替换文本框的提示语句 <!DOCTYPE html> <html lang=&q ...

  8. 《javascript dom编程艺术》笔记(一)——优雅降级、向后兼容、多个函数绑定onload函数

    刚刚开始自学前端,如果不对请指正:欢迎各位技术大牛指点. 开始学习<javascript dom编程艺术>,整理一下学习到的知识.今天刚刚看到第六章,记下get到的几个知识点. 优雅降级 ...

  9. Javascript DOM 编程艺术(第二版)读书笔记——基本语法

    Javascript DOM 编程艺术(第二版),英Jeremy Keith.加Jeffrey Sambells著,杨涛.王建桥等译,人民邮电出版社. 学到这的时候,我发现一个问题:学习过程中,相当一 ...

随机推荐

  1. Intel汇编语言程序设计学习-第五章 过程-下

    5.3.3  库测试程序 测试程序#1:整数I/O 该测试程序把输出文本的颜色改为蓝底黄字,然后以十六进制数显示七个数组的内容,最后提示用户输入一个有符号整数,再分别以十进制.十六进制和二进制格式重复 ...

  2. Intel汇编语言程序设计学习-第一章 基本概念

    第一章基本概念 1.1  简单介绍 本书着重讲述MS-Windows平台上IA-32(Intel Architecture 32bit,英特尔32位体系架构)兼容微处理器的汇编语言程序设计,可以使用I ...

  3. 【python】Leetcode每日一题-寻找旋转排序数组中的最小元素2

    [python]Leetcode每日一题-寻找旋转排序数组中的最小元素2 [题目描述] 已知一个长度为 n 的数组,预先按照升序排列,经由 1 到 n 次 旋转 后,得到输入数组.例如,原数组nums ...

  4. Object划分

    Object划分 1.PO(persistantobject)持久对象 PO就是对应数据库中某个表中的一条记录,多个记录可以用PO的集合.PO中应该不包 含任何对数据库的操作. 2.DO(Domain ...

  5. MySQL修改账号密码方法大全

    前言: 在日常使用数据库的过程中,难免会遇到需要修改账号密码的情景,比如密码太简单需要修改.密码过期需要修改.忘记密码需要修改等.本篇文章将会介绍需要修改密码的场景及修改密码的几种方式. 1.忘记 r ...

  6. [bug] xshell:退格键乱码

    参考 https://jingyan.baidu.com/article/77b8dc7fd52c576174eab6f6.html

  7. Linux中find命令用法全汇总,看完就没有不会用的!

    Linux中find命令用法全汇总,看完就没有不会用的! 中琦2513 马哥Linux运维 2017-04-10   糖豆贴心提醒,本文阅读时间7分钟 Linux 查找命令是Linux系统中最重要和最 ...

  8. Ansible_处理失败的任务

    一.Ansible处理任务失败 1.管理play中任务错误 1️⃣:Ansible评估任务的返回代码,从而确定任务是成功还是失败 2️⃣:通常而言,当任务失败时,Ansible将立即在该主机上中止pl ...

  9. Linux进阶之环境变量文件/etc/profile、/etc/bashrc、/etc/environment

    一.Centos 环境变量/etc/profile和/etc/profile.d 1.两个文件都是设置环境变量的文件. 2./etc/profile 是永久性的环境变量,是全局变量,/etc/prof ...

  10. PCB布线规范

    模拟电路和数字电路PCB设计的不同点 http://linear.eefocus.com/module/forum/thread-593593-1-1.html 合集   PCB给种设计资料 http ...