JavaScript基础DOM操作--在线英文发音

一、案例需求
在线英文发音–点击英语单词完成在线英文发音

二、涉及的知识点

DOM事件，本案例主要用的是点击事件
DOM节点操作运用，节点查找操作，节点属性操作
利用document.getElementsByClassName来获取要查找的节点
HTML5的audio元素操作
有道在线语音API的应用
节点元素对象属性textContent，它返回节点的文本内容

三、实现过程
1.编写网页：在线英文发音.html（取少量单词）

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="在线英文发音.css"><script src="在线英文发音.js" charset="UTF-8"></script></head><body><div class="banner"><p class="title">1小时搞定程序员单词</p><p class="content">集结了600个程序员常用的单词和词汇，让你写代码变量命名 so easy!!!标准伦敦腔，在线朗读，助你告别尴尬，放声交流！！</p><button>还等什么！GOGOGO!</button></div><div class="container"><div class="wordItemBox"><p class="word">application </p><img class="pronounce" src="pronounce.png" alt="voice"><hr><p class="translate">应用程式 应用、应用程序</p></div><div class="wordItemBox"><p class="word">application framework </p><img class="pronounce" src="pronounce.png" alt="voice"><hr><p class="translate">应用程式框架、应用框架 应用程序框架</p></div><div class="wordItemBox"><p class="word">architecture </p><img class="pronounce" src="pronounce.png" alt="voice"><hr><p class="translate">架构、系统架构 体系结构</p></div><div class="wordItemBox"><p class="word">argument </p><img class="pronounce" src="pronounce.png" alt="voice"><hr><p class="translate">引数（传给函式的值）。参见 parameter 参数、实质参数、实参、自变量</p></div><audio id="audio" src="http://dict.youdao.com/speech?audio=hello"></audio></body>
</html>

2.层叠样式表：

/*È«¾Öreset*/
*{margin:0px;padding: 0px;
}
body{background: #333;color:#ddd;margin-bottom: 100px;
}
input,button{border:none;outline: none;
}
/*È«¾Öreset½áÊø*//*bannerÌõ¿ªÊ¼*/
.banner{width: 70%;margin: 0 auto;margin-top: 30px;border-radius: 10px;background: #444;height: 330px;padding: 50px 90px;box-sizing: border-box;
}
.banner .title{font-size: 60px;font-family: ËÎÌå;margin-top: 20px;margin-bottom: 10px;color:white;transition:color 0.35s;
}
.banner .title:hover{color:#Fc0;
}
.banner .content{font-size: 21px;font-weight: 200;font-family: ËÎÌå;margin-bottom: 15px;
}
.banner button{padding: 8px 15px;font-size: 18px;border-radius: 6px;background: #Fc0;color: #444;font-weight: 400;transition:background 0.35s;}
.banner button:hover{background: #f90;
}
/*bannerÌõ½áÊø*//*µ¥´Ê´óÈÝÆ÷*/
.container{width: 70%;margin:0 auto;margin-top: 50px;line-height: 25px;display: flex;justify-content: space-between;flex-wrap: wrap;}a{display: block;text-align: center;margin-top: 20px;font-size: 20px;color:#fc0;text-decoration: none;}
.wordItemBox{display: inline-block;width: 370px;border-radius: 10px;background: #444;padding-left: 15px;padding-right: 15px;margin-top: 15px;padding-bottom: 10px;}
hr{height:10px;border:none;border-top:1px groove #666;border-top:1px groove #ddd;
}
.wordItemBox .word{color:#fc0;font-size: 24px;line-height: 45px;display: inline-block;padding-right: 10px;transition:color 0.35s;cursor: pointer;
}
.wordItemBox .word:hover{color:#f90;
}
.wordItemBox .translate{}
.wordItemBox .pronounce{display: inline-block;
}

3.JavaScript脚本文件

window.function () {var word=document.getElementsByClassName('word');var audio=document.getElementById("audio");var url=audio.src;//找到有道在线发音的api地址//遍历节点，绑定事件//目的是给网页中的p标签绑定点击事件for(var index in word){word[index].onclick=function(){console.log(index);console.log(this);var textContent=this.textContent;//获取p标签的文本内容，即英文单词var newurl=url.replace("hello",textContent);//替换有道在线语音中的英文单词audio.src=newurl;audio.play();}}//遍历节点，绑定事件//给网页中的img标签绑定点击事件var pronounce=document.getElementsByClassName("pronounce");for(var index in pronounce){pronounce[index].onclick=function(){console.log(this.previousSibling);//通过previousSibling获取p标签对象，因为p标签内才有英文单词var textContent=this.previousSibling.textContent;var newurl=url.replace("hello",textContent);audio.src=newurl;audio.play();}}
}

四、案例效果

五、总结与体会
1.这次的案例不是很难，但接触到了一些以前不知道的东西，比如调用接口等。

2.本次查找节点用了getElementsByClassName方法，因为网页中的单词以及音量图标都是重复使用的，因此需要通过类名去获取，返回的是文档中所有指定类名的元素集合，作为 NodeList 对象，NodeList对象可以通过item方法来访问节点

3.for-in循环与传统的for循环的区别：（下面总结一下几种for循环的区别）
3.1 传统的for循环主要用于循环数组类型，循环变量里面的i是Number类型，对应就是数组的下标
3.2 for-in循环主要用于循环遍历对象，循环变量里面的i是String类型，对应的是对象中的键名，因此需要使用obj[keys]来取到每一个值！在本案例中也是通过word[index]来绑定每一个标签的事件
3.3 for-of提供了遍历所有数据结构的统一操作接口，包括数组、Set 和 Map 结构、某些类似数组的对象（比如arguments对象、DOM NodeList 对象），以及字符串

4.函数体内的this指针的应用，函数体内的this指针引用的是函数据以执行的环境对象，因此这里指向的是input这个节点对象

5.有道在线发音的API是"http://dict.youdao.com/speech?audio=hello"，因此通过textContent属性获取p标签的文本值后再用replace方法替换API接口中的单词即可

6.给所有音量图标绑定点击事件时，可以通过this.previousSibling来找到它的上一个标签即p标签来获取文本值

JavaScript基础DOM操作--在线英文发音相关推荐

JQuery-学习笔记03【基础——DOM操作】
Java后端学习路线笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
JavaScript中DOM操作
Web前端基础修炼 HTML基本标签详解与运行截图 CSS基本操作详解及截图演示 JavaScript基础(ECMAScript) JavaScript中DOM操作 JavaScript中BOM操作 ...
第一百一十六节，JavaScript，DOM操作样式
JavaScript,DOM操作样式一．操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检 ...
JavaScript基础 -- DOM
JavaScript基础 -- DOM DOM 1.什么是DOM? 2.事件 3.文档的加载 3.DOM查询 4.DOM查询的其他方法 5.DOM增删改 6.使用DOM操作CSS 7.读取元素的样式 ...
Javascript核心DOM操作学习笔记
DOM .BOM Day01 DOM 1.web APIs和JS基础关联性 1.1 JS的组成 1.2 JS基础阶段以及Web APIs阶段 2.API和Web APIs 2.1 API 2.2 We ...
【JavaScript】DOM 操作元素样式和元素类名
文章目录 [JavaScript]DOM 操作元素样式和元素类名一. 操作元素样式 (1)操作行内元素 1. 获取元素的样式 2. 设置元素的样式 (2) 操作非行内元素和行内元素 1. 获取元素的 ...
JavaScript基础: DOM中操作属性以及自定义属性
上一篇聊了一些常用的事件以及演示其如何使用,演示的时候发现一件事情,那就是DOM操作不单是得到元素,还可以修改元素的属性.现在开始如何操作其属性. 普通自带的属性这些属性是某些标签自带的属性比如sr ...
加速Javascript：DOM操作优化
原文:<Speeding up JavaScript: Working with the DOM> 作者: KeeKim Heng, Google Web Developer 在我们开发互 ...
03.JavaScript对DOM操作
JavaScript引入方式外部引入在head或者body中,添加以下代码 <script type="text/javascript" src="js/dem ...

JavaScript基础DOM操作--在线英文发音

JavaScript基础DOM操作--在线英文发音相关推荐

最新文章

热门文章