Javascript操作元素
HTML主要作用是通过标签创建一个个元素，完成网站的内容建设，CSS主要作用是对网站的视觉效果进行定义，浏览器最初引入Javascript语言的目的就是为了增强网页的交互性，Javascript作为一门编程语言虽然入门简单，但是 它使用的基本思维和HTML、CSS还是有很大区别的，HTML和CSS只能说是介于艺术和技术之间的一个沟通桥梁，没有经过编程训练的人也能操作HTML和CSS设计网页，Javascript作为一门技术语言，可以操作HTML元素完成一些交互操作，比如网页导航栏 的下拉菜单，鼠标控制音频视频在线播放暂停等操作，利用canvas API绘制普通CSS不易完成的图标、动画，Javascript操作WebGL API创建3D场景。在HTML5的教程里面不在专门学习Javascript语言，可以关注 《Javascript教程》，对于没有编程经验转行互联网的，学习Javascript要根据自己的应用领域，控制学习深度，比如如果仅仅是利用Javascript做小网站一些简单网页特效， 没有必要深入学习Javascript，简单学习Javascript，然后学习JQuery等框架即可，如果你想自己封装一些框架或者研究图形学的内容，肯定有必要深入学习Javascript，更进一层来说，你学习的不仅仅是一门语言的问题，而是编程思维和算法的问题。
案例
源码下载下面代码的基本功能是：用鼠标单机背景颜色为红色的div元素，div元素的背景颜色由红色变为蓝色。
14 <body> 15 <!--属性onclick引入鼠标单击事件，单机元素div区域执行fun()函数--> 16 <div class="div" id="div" onclick="fun()"></div> 17 <!--Javascript程序写在script标签中--> 18 <script> 19 // 声明一个函数fun 20 function fun() { 21 // 通过方法getElementById选择ID是"div"的元素，并赋值给变量obj 22 var obj = document.getElementById("div"); 23 // div元素的背景颜色更改为蓝色 24 obj.style.backgroundColor="blue"; 25 } 26 </script> 27 </body>
代码解析
1.首先要创建一个div元素，标记class和id，class是为了添加样式，Javascript要想操作div，必须要选中它，添加id属性就是为了这一点。
2.script标签里面的Javascript代码比较简单，只有一个包含两条语句的函数。 如果你的语言基础比较薄弱，那就体验一下，知道一个大概形式，随着你学习的案例增多，会形成一个自己的体系， 即使你的理解不符合计算的专业知识体系，也没有关系，没有绝对的真理，只要能完成工作就可以。不过为了能融入现在的计算机体系， 就要去记忆计算机领域现有的先贤们制定的概念。 你掌握的知识越接近于底层，越容易学习从底层抽象过来的东西。 即使从未接触过计算机也无所谓，前提是你的学习能力足够强，学科之间都是相通的。 机械领域有组件、标准件概念，互联网也一样，机械多自由度控制要用到线性代数，前端WebGL和CSS3的Transform属性也会用到线性代数， 机械领域一个产品会有一个总工带者设计工程师、工艺工程师、维修工程师、技术员...干活，只不过互联网领域换了一称呼架构师，要协调 算法工程师、后端工程师、前端工程师、美工...完成产品开发。
3.你稍微有一些任何语言的编程基础都可以看出第20代码通过关键字function声明了一个函数fun， 第22行代码整体来看，它的作用就是选中div元素，一般一个网页会有很多元素，元素的id属性值是不重复的，因此可以通过id属性选择一个元素， 编程语言中都会强调对象和方法的概念，document就是一个对象，它是浏览器本身支持的不用程序员创建，它的方法有很多,getElementByIddocument()就是其中之一，在编程语言中调用对象方法的格式就是 使用点(.)符号，方法getElementById("div")的参数就是你要选择的元素的id属性值。如果你不太清楚属性和方法的概念，document.getElementById是什么暂时不用管， 你就记住我想选择某个元素的时候，就用它，注意下格式就行。var声明了一个变量obj，选择后的对象通过运算符(=)赋值给了obj变量，此时obj可以代表上面的div元素。
（ 参考教程《JavaScript对象、属性、方法》，学习对象的概念。）
4.第24行代码作用就是改变div元素的颜色，前面学习过HTML元素具有style属性，stlye有具有背景颜色等属性，此时obj对象就表示HTML元素div，因此可以通过点符号重新对div元素背景颜色的属性值重新赋值。 这里要注意下背景的写法在Javascript里面是backgroundColor和CSS里写法backgroundcolor稍微有些不同。
5.都知道在编程规则里面，函数声明后需要调用才会起作用，也就是说函数调用后里面更改div颜色的代码才会执行。调用函数的方式有很多，为了鼠标与网页的交互，浏览器为元素 引入了onclick属性值，只要把script标签里面的Javascript函数名字和小括号作为一个元素onclick属性的属性值，当你用鼠标单击带元素在浏览器上所在区域的时候，就会触发你给元素绑定的函数。
总结
1.Document对象(简称DOM)
通过document对象的相关方法可以选择HTML元素，这些方法都是浏览器支持的，这些接口可以让语言很方便的操作HTML元素，更改它的样式。 关于这些接口方法你不需要知道浏览器怎么实现，会用就可以。如果你有时间可以一层一层推理，从互联网到计算机到数字电路到晶体管材料和物理学。
DOM对象方法
| 方法 | 作用 | 返回结果 |
| getElementById() | 通过id选择HTML元素 | 返回一个对象 |
| getElementsByClassName() | 选择具有某个类名.class的所有HTML元素 | 返回一个HTML元素对象组成的数组 |
| getElementsByTagName() | 通过元素名字选择某一类HTML元素 | 返回一个HTML元素对象组成的数组 |
| write() | 向HTML文档中写HTML或Javascript表达式 | 可以简单类比C语言中的printf，可以把一个结果显示在网页上 |
DOM对象属性
| 属性 | 作用 |
| body | 表示body元素，可以直接访问body元素，不需要通过id属性 |
| cookie | 与当前文档相关的cookie |
| title | 当前文档的标题，也就是title标签中的文字 |
| URL | 当前文档的URL，也就是网址 |
1.鼠标事件onclick
浏览器支持很多种鼠标事件，onclick表示的左键单击只是其中一种，其它的比如鼠标中间滚动、右键选择、左键双击。为了支持鼠标事件，就为HTML元素 引入代表各类鼠标事件的各种属性，可以通过把函数作为onclick等鼠标事件属性的属性值来调用函数。至于鼠标事件怎么实现，可以去学习操作系统和CPU中 中断事件、时间轮询、串口通信等概念以及显示器显示原理、鼠标光电传感器原理， 忙着赚钱没时间的话，就不用管了，凡事总有黑箱，或许从前端研究到物理学可能又回到老本行了。不过浏览器现在已经不仅仅是内容网页的载体了，越来越多的传统领域嫁接到浏览器平台， 它开始可以调用计算机的麦克风、摄像头、显卡等硬件资源，通过网页可以控制外部的3D打印机、家用电器等设备，它开始实现应用软件、计算机图形学的功能，而传统的前端可能并不胜任 这些传统工作，对于其它行业转互联网，如果选对了方向，也可以理解为不是转行而是+互联网，两个主流学科结合就是边缘学科，两个主流行业结合就是一个新的边缘行业。
| 鼠标事件 | 触发方式 |
| onclick | 单击元素 |
| onmousemove | 双击元素 |
| onmouseover | 鼠标光标移动到元素 |
| ondblclick | 当前文档的标题，也就是title标签中的文字 |
扩展
源码下载上面的代码能做到的只是从一个颜色变为另一个颜色，不能交替变化。下面对代码进行更改，其实对于编程熟练的人而言很简单，这个案例就作为 哪些能看懂别人代码自己又不会写的人的练习作业
16 <script> 17 // 声明一个全局变量，作为标志 18 var i = 0; 19 function fun() { 20 var obj = document.getElementById("div"); 21 if(i == 0){ 22 obj.style.backgroundColor="blue"; 23 // 全局变量i变为1 24 i = 1; 25 } 26 else{ 27 obj.style.backgroundColor="red"; 28 // 全局变量i变为0 29 i = 0; 30 } 31 } 32 </script>
上面代码的技巧在于声明一个全局变量作为参照，每次执行程序的时候，如果是红色，把i重新赋值1，如果是蓝色，重新赋值0，这样利用全局变量i被局部程序交替更改， 来实现颜色的交替变化，这些都与DOM无关，都是语言层面的问题。关于编程思维的问题，都去Javascript教程中培养训练，在HTML5教程中主要介绍与浏览器有关的知识。