学会了操作页面上的元素,那么就开始了解一下更多的内容。
深入理解DOM
- DOM就是把html中的所有的标签模拟成一个树形结构图,然后每一个标签就是一个元素,每一个 元素就是一个对象。
- Dom把html中所有的内容都视为对象,所以,无论是标签还是回车换行还是空白都是对象。
事件添加代码的三种写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--第一种写法-->
<input type="button" value="按钮1" id="btn1" onclick="f1();"/>
<!--第二种写法-->
<input type="button" value="按钮2" id="btn2"/>
<!--第三种写法-->
<input type="button" value="按钮3" id="btn3"/>
<script>
//点击按钮显示对话框
//1
window.id="100";
function f1() {
alert("哈哈"+this.id);//undefined,此时的this不是按钮,this是window
alert(this);
}
//2
document.getElementById("btn2").onclick=function () {
alert("嘎嘎"+this.id);
};
//3
document.getElementById("btn3").onclick=f2;
function f2() {
alert("嘿嘿"+this.id);
}
</script>
</body>
</html>
获取元素的其他方式
- 通过id获取元素,只能获取一个
- document.getElementById(id名);
- 通过标签名字获取元素,获取多个
- document.getElementsByTagName(标签名);
- 通过标签中name属性的值来获取元素,获取多个
- document.getElementsByName(name名);
- 如果是单选的按钮,里面的name属性的值每一组都是一样
- 通过类名获取,获取应用了该类名的多个(这个是HTML5中新增的)
- document.getElementsByClassName(类名)
试一试
- 文本框的获取焦点和失去焦点事件
- 点击按钮检测文本框内容的长度
- 点击按钮隐藏多个层
- 模拟点菜(代码查看地址:http://git.oschina.net/yxmBetter/e9n5m428c3rjzoflqgdab49.code.git)
注意点
- 设置图片的超链接,a标签里使用img,设置时只要创建a的单击事件即可。
- 有循环的时候,.οnclick=函数名,再在下面写函数代码,而不是直接将匿名函数赋值给.onclick。
- 如果在html标签中使用style属性设置元素的样式,通过DOM代码可以获取属性中的值;
- 如果在style标签中设置的元素样式,那么通过DOM代码不能获取属性中的值,只能获取到空。
- 如何获取body标签:可以不用id的方式,可以直接使用document.body的方式
- 页面上所有的函数实际上都是window
- 页面中的顶级对象就是document
- 禁用文本框:disabled=true;
- 获得焦点:onfocus;离开焦点:onblur
学习也是这样一个慢慢积累的过程,还要注意,写代码一定要细心,有耐心,毕竟,我们都要做一个nice的人。。。