JS DOM
通过HTML Dom ,可访问JavaScript HTML 文档所有元素
HTML DOM(文档对象模型)
当网页被加载时，浏览器会创建页面的文档对象模型（document object Model）
HTML DOM 模型被构造成为对象的树，我们能够通过可编程的对象模型，JavaScript获得了足够的能力来创建动态的HTML
1. JavaScript能够 改变页面中所有的HTML 元素
2. JavaScript能够 改变页面中所有的HTML属性
3. JavaScript能够 改变页面中所有的CSS 样式
4. JavaScript能够 改变页面中所有的事件做出反应
查找HTML元素常用的三种方法
document.getElementById(‘xxx’); 该方法返回对拥有指定 id 的第一个对象的引用。
getElementsByClassName(‘xxx’);该方法返回带有指定类名称的对象集合。
getElementsByTagName(‘div’);该方法可返回带有指定标签名的对象的集合。
练习
<div id="firstDiv">我是一个带有id 的div，你可以通过getElementById找到我</div>
<div class="secondDiv">我是一个带有class的div，你可以通过getElementsByClassName找到我</div>
<p>我是一个标签p，你可以通过getElementsByTagName找到我</p>
运用上述方法找到对应的元素，并用innerHTML方法改变其值
解决Cannot set property 'innerHTML' of null的方法
网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行，否则可能导致无法获取对象的情况，为了避免这种情况的发生，可以使用以下两种方式:
一. 将脚本代码放在网页的底端，这样在运行脚本代码的时候，可以确保要操作的对象已经加载完成。
引用内部js将script标签写下元素标签之后
比如<body>
<div class=”zhangsan ”></div>
<script>//要写的js</script>
</body>
二. 通过window.onload来执行外部脚本代码。
第一种方式感觉比较凌乱（其实推荐使用），往往我们需要将脚本代码放在一个更为合适的地方，那么window.onload方式就是一个良好的选择。window.onload是一个事件，当文档加载完成之后就会触发该事件，可以为此事件注册事件处理函数，并将要执行的脚本代码放在事件处理函数中，于是就可以避免获取不到对象的情况
window.οnlοad=function() {
//执行的代码
}
延伸问题
怎样定义函数？
1. 直接定义函数
var x=2;
var y=3;
function f1(x,y){
return x+y;
}
2.使用Function构造函数
var f2=new Function("x","y","returnx+y;");
3.使用函数直接量
var f3=function(x,y){
return x+y;
}
改变HTML 属性
document.getElementById(id).attribute=new value;
attribute指的是属性 比如图片的src属性
练习
将zjk1.jpg 替换为 xtw.png
改变HTML 样式
document.getElementById(id).style.property= new style;
document.getElementById(id).style.width=”800px”;
property指的是样式属性 如color
练习
将firstDiv的字体改为蓝色
将firstDiv的背景图片改为zjk1.png不重复 背景色为红色,并且高宽分别为500px
HTML DOM 事件
1. 点击事件
例如 点击一个button按钮将一个id为title的字体改为红色
<button type=”button” οnclick=”document.getElementById(‘title’).style.color=’red’” ></button>
练习
通过按钮点击事件设置对文本的显示和隐藏
提示可将元素的visibility设置为 hidden即为隐藏 ，设置为visible则为显示
我们在点击事件上执行函数
比如更改firstDiv的文本
<script>
functiondisplayText(){
document.getElementById("firstDiv").innerHTML="zs";
}
</script>
<button type=”button” οnclick=”displayText()” ></button>
2. 通过按钮点击事件设置p标签显示当前时间 方法Date();
3.onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
在body标签上面添加onload属性
2. onchange 事件
onchange 事件常结合对输入字段的验证来使用。
下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数小写转大写。
<input type="text" id="upperText " οnchange="upperCase()">
提示：文本.value=文本.value.toUpperCase();
练习
将 文本框里面的值大写变成小写。（toLowerCase();）
3. onmouseOver()鼠标移上去和onmouseOut（鼠标移下来）事件
例子：
function mOver(){
document.getElementById("first").innerHTML=”thanks ”
}
<div id="first" οnmοuseοver="mOver(this)" οnmοuseοut="mOut(this)">
把鼠标移动上去
</div>
练习
写出当鼠标移下来之后输出 nothanks并且 背景颜色为 红色
4. onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
练习
实现当按住鼠标不放时实现黄色灯泡，松开鼠标之后成灰色
12万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
