如鹏网 静态Web开发 第四章：JSDom
本章主干知识点：
1、<a onclick="f1()"/> document.getElementById("btn1").onclick=function(){}
2、setInterval、setTimeout
3、事件冒泡以及如何阻止事件冒泡；
4、如何动态创建元素和动态添加元素；
5、innerText和innerHTML区别
6、案例：动态加载数据到table中；
-------------------------------------------------------------------------------
操作DOM的意义
DOM（文档对象模型）Document-Object-Model。
所谓文档对象模型，就是操作页面的元素。
JavaScript最终是要操作Html页面，而操作Html页面就要用到DOM。DOM就是把Html页面模拟成一个对象，如果JavaScript只是执行一些计算、循环等操作，而不能操作Html也就失去了它存在的意义。
-------------------------------------------------------------------------------
获取页面元素
整个页面或者说窗口就是一个window对象---------------window是顶级对象
页面中定义的变量和方法都是window的
使用window对象的属性、方法的时候可以省略window。
比如：
window.alert(‘hello');
window.f1();
window.document...
能不写window就不要写，这样可以减少js文件的字节数。
-------------------------------------------------------------------------------
注册事件的方式
直接在html中写js代码
<input type=“button”onclick=“alert(‘aaa’);” />
定义一个函数赋值给html中元素的on_xxx__属性
<input type=“button”onclick="f1();"/>
Document.getElementById(‘btn’).onclick=f1;注册
Document.getElementById(‘btn’).onclick=f1();直接调用。
function(){alert('bb');
return function(){alert('a');}}
-------------------------------------------------------------------------------
注意this的问题
使用element.on__xxx_的方式(匿名函数)
docement.getElementById(‘btn’).onclick=function(){};
//this就是 触发事件的对象,这个方法 是事件调用的
通过onclick=f1;与onclick=“f1();”
只有在事件响应函数才能使用this获得发生事件的控件，在事件响应函数调用的函数中不能使用（这里的this表示window对象），
f1.apply(document.getElementById('btn2'))
-------------------------------------------------------------------------------
精彩的案例
案例:坑爹游戏(心算)
点击就送(屠龙宝刀)
-------------------------------------------------------------------------------
window对象的方法
window.confirm
(‘无缘无故的恨’);
确定、取消对话框,返回true或false;
案例：开盖有惊喜
window.setInterval
(code,delay)//每隔一段时间执行指定的代码
第一个参数：指定的代码字符串第二个参数：时间间隔（毫秒数）
window.clearInterval
(intervalId);//停止计时器
clearInterval()取消setInterval的定时执行。
案例：实现标题栏走马灯的效果
案例:摇起来(一起嗨)
setTimeout也是定时执行，但是不像setInterval那样是重复的定时执行只执行
一次，clearTimeout也是清除定时。
document.getElementById("btnShake").onclick = function () {
var divBody = document.getElementById("divBody"); divBody.style.position = "absolute"; setInterval(function () { divBody.style.left = (Math.random() * 100) + "px"; divBody.style.top = (Math.random() * 200) + "px";}, 20);};
-------------------------------------------------------------------------------
window对象的属性
建议使用window.location.href=‘url’;//支持大多数浏览器
重新导航到新页面,可以取值，也可以赋值。
window.location.reload();//刷新当前页
window.event
是非常重要的属性，用来获得发生事件时的信息，
事件不局限于window对象的事件，所有元素的事件都可以通过event属性取到相关信息
兼容不兼容FF。
clientX、clientY 发生事件时鼠标在客户区的坐标；邪恶案例:点我啊
var btnClickMe = document.getElementById("btnClickMe");btnClickMe.onclick = function () {alert("老公，你好厉害！");};btnClickMe.onmouseenter = function () {
var left = window.event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; var top = window.event.clientY + document.body.scrollTop + document.documentElement.scrollTop; this.style.left = (left + 30)+"px";this.style.top = (top - 30) + "px";}; screen对象，获取屏幕的信息： alert("分辨率：" + screen.width + "*" + screen.height); if (screen.width < 1024 || screen.height < 768) { alert("分辨率太低！"); }
-------------------------------------------------------------------------------
window对象的属性---document
自己写一个Js文件里面写write代码(超链接)
write()
;//向文档中写入内容。writeln()，和write差不多，只不过后添加一个回车。在onclick等事件中写的代码会冲掉页面中的内容，只有在页面加载过程中write才会与原有内容融合在一起。writeln()是在源代码里面换行。与<br/>不一样。
http://news.baidu.com/newscode.html
-------------------------------------------------------------------------------
常用获取元素的三种方式
getElementById(),
（非常常用），根据元素的Id获得对象，网页中id不能重复。也可以直接通过元素的id来引用元素，但是有有效范围、
getElementsByName()
，根据元素的name获得对象，由于页面中元素的name可以重复，比如多个RadioButton的name一样，因此getElementsByName返回值是对象数组。
getElementsByTagName()
，获得指定标签名称的元素数组，比如getElementsByTagName(“input”)可以获得所有的<input>标签。*表示所有标签
-------------------------------------------------------------------------------
案例练习
案例：你是我的小苹果.(被点的按钮显示小苹果,其他显示大苹果)
案例：网站中的注册按钮倒计时后才能使用
练习：养眼的时钟
超链接显示时间：
结论:取消事件的默认动作：直接写return false;浏览器都支持
-------------------------------------------------------------------------------
事件冒泡
事件冒泡：如果元素A嵌套在元素B中，那么A被点击不仅A的onclick事件会被触发，B的onclick也会被触发。触发的顺序是“由内而外” 。
取消事件冒泡：
window.event.cancelBubble = true谷歌,IE
e.stopPropagation();火狐
再次强调this表示的是当前监听的事件
event.srcElement是引发事件的对象(冒泡)。
-------------------------------------------------------------------------------
动态创建DOM
调用document的createElement方法来创建具有指定标签的DOM对象
然后通过调用某个元素的appendChild();方法将新创建元素添加到相应的元素
下。
createElement(‘element’);创建一个节点
appendChild(node); 追加一个节点
removeChild(node);移除一个节点
replaceChild(new,old);替换一个节点
insertBefore(new,参照);把节点加到前面（插到某个节点前面）
firstChild
lastChild
document.createElement("<input type="button"value="hello"/>")
快速创建元素，并且赋值，但是注意设置的inner部分不会被设置
document.createElement(<a href="www.baidu.com">百度</a>)（"百度"二字写不进去）
-------------------------------------------------------------------------------
innerText和innerHTML
几乎所有DOM元素都有
innerText、innerHTML属性（注意大小写），分别是元素标签内内容的文本表示形式和HTML源代码。
//FF不支持innerText,在FF下用textContent属性。也可以用innerHTML设置普通文本。
用innerHTML也可以替代createElement，属于简单、粗放型、后果自负的创建。
使用innerText与textContent的代码。
innertHTML所有浏览器都支持
-------------------------------------------------------------------------------
练习
练习：点击按钮动态增加网站列表。
var dic = { "百度": "http://www.baidu.com", "如鹏": "http://www.rupeng.cn", "谷歌": "http://www.google.com" };
动态产生的元素，查看源代码是看不到的。通过浏览器F12的功能可以看到。
<table border="1" id="tb">
<tr><td> 乐乐：</td><td>我又胖了！</td></tr>
</table>
昵称：<input type="text" id="txt" /><br />
<textarea id="textContent" rows="10" cols="15"></textarea><br />
<input type="button" value="评论" id="btn1" />
</table>
------------------------------------------------------------------------------
Js操作样式
案例：老公开灯,老婆关灯;网页开关灯.
修改元素的样式是className属性。
(class是JavaScript的一个保留字，属性不能用关键字、保留字所以就变成className了)
修改元素的样式:this.style.backgroundColor="Red"。
注意在css中属性名在JavaScript中操作的时候属性名可能不一样，主要集中在那些属性名中含有-的属性，因为JavaScript中-是不能做属性、类名的。
案例:把层飘起来
obj.style.cssFloat=‘right’;
紧急通告:
不要写成div1.style.width=80px
而是div1.style.width='80px'
案例:鼠标移动到表格行，被点击的行高亮显示（背景红色）
案例：网站新闻消息中显示图片
------------------------------------------------------------------------------
设置特殊属性
setAttribute(
"score",10
); //
设定一些
Dom
元素属性名特殊的属性
,
getAttribute("score");获取设置属性的值
1.鼠标移动到表格的单元格上显示对应单元格的分数.
练习:
------------------------------------------------------------------------------
案例练习
点击【登录】按钮，弹出一个显示用户名、密码等的层。将用户名、密码等写到一个层中，层默认是隐藏的，点击【登录】超链接以后将层显示出来。
一幅图片。点击小图，弹出一个层在点击的位置显示小图对应的大图，并且显示姓名、身高等信息，点击层中的关闭按钮关闭层。
点击“高级”CheckBox，则显示高级选项，否则隐藏
界面上有几个球队名字的列表，将鼠标放到球队名字上就变为红色背景，其他球队背景颜色为白色，点击一个球队的时候就将点击的球队变为fontSize=30字体
有一个搜索文本框，焦点不在文本框中的时候，如果文本框没有值，则文本框中显示灰色文本（Gray）的“输入搜索关键词”，否则显示用户输入的值；焦点在文本框中时如果之前显示“输入搜索关键词”则清空文本框的值，并且将文本修改为黑色。
------------------------------------------------------------------------------
form对象
document.getElementById(‘btn1’).click()。搜索引擎的，智能提示，点击后相当于点击了“搜索”按钮。
form对象是表单的Dom对象。
方法：submit()提交表单，但是不会触发onsubmit事件。
在点击submit后form的onsubmit事件被触发，在onsubmit中可以进行数据校验，如果数据有问题，返回false即可取消提交
------------------------------------------------------------------------------
JS中正则表达式案例
var regex = new RegExp(“\\d{5}”)
var regex = / \d{5} /（推荐）
/表达式/是JavaScript中专门为简化正则表达式编写而提供的语法
RegExp对象的方法：
test(str)判断字符串str是否匹配正则表达式
exec(str)进行搜索匹配，返回值为匹配结果(*)
如果 exec() 找到了匹配的文本，则返回一个结果数组。否则，返回 null。
要提取多个需要反复调用exec()
//注意全局模式/…../g
var msg = '中国移动:10086,中国联通:10010,中国电信:10000';
------------------------------------------------------------------------------
string的正则表达式方法
案例：光标离开Email地址框的时候用正则表达式校验是否是合法的Email地址，如果不是的话Email地址框变红，并且注册按钮禁用，否则Email地址框颜色为白色，启用注册按钮。
Js中的Trim方法
^[0-9a-zA-Z_.\-]+@[a-zA-Z\-0-9]+(\.[a-zA-Z]+){1,2}$
------------------------------------------------------------------------------
案例：评估密码强度
密码的安全级别：
弱密码：只由数字、字母或其他符号中的一种组成。
中度密码：由数字、字母或其他字符中的两种组成。
强密码：由数字、字母或其他字符3种以上组成。
密码少于6位安全级别降1级
案例--------------百度搜索时的自动完成功能。
------------------------------------------------------------------------------
代码一定在onload中吗
如果js代码需要操作页面上的元素，则将该代码放到onload里面。
因为当页面加载完毕之后页面上才会有相关的元素
如果js代码中没有操作页面元素的语句，则可以将该代码直接写在<script>标签中，
例如：声明变量，相加求和等操作。
<body>
<!-- html标签-->
<script type="text/javascript">
写在这里的代码，由于已经是页面的底部，在执行该代码时，页面的元素已经都加载完毕，所以可以不放到onload里面也可以操作页面上的元素。
建议将操作页面元素的代码都放到onload里面。
</script>
</body>
------------------------------------------------------------------------------
不同浏览器的差异
企业问：说说开发项目的时候不同浏览器的不同点，你是怎么解决的？
不同浏览器中对DOM支持的方法不一样
获取网页中那个元素触发了事件：在IE里使用srcElement ；在FireFox里使用target
使用Dom获取和更改网页标签元素内文本：在IE里使用innerText ；在FireFox里使用textContent
window.event 在火狐中不支持 用参数 e
innerText 在火狐中不支持 用 textContent
------------------------------------------------------------------------------
课后练习
图片高亮显示
文本框边框高亮显示
点击按钮 表格隔行变色
点击表格中的行高亮显示
被点击的按钮背景颜色改变
文本框失去焦点后没有内容背景色为红色.不为空则恢复默认颜色
点击登录按钮显示 登录界面
制作一个新闻列表
如鹏网：http://www.rupeng.com