概述
2019独角兽企业重金招聘Python工程师标准>>> 
学会了操作页面上的元素，那么就开始了解一下更多的内容。
深入理解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的人。。。
转载于:https://my.oschina.net/yxmBetter/blog/829586
最后
以上就是坚定万宝路为你收集整理的DOM获取元素及添加事件的全部内容，希望文章能够帮你解决DOM获取元素及添加事件所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复