JavaScript文档加载模式以及元素获取


Posted in Javascript onJuly 28, 2020

一、文档加载模式

1.事件三要素:事件源(触发时间的元素);事件名称(click点击事件);事件处理程序(事件出发后要执行的代码函数形式)存在问题:浏览器加载一个页面的时候,是按照自上而下的顺序加载的,若将script标签写到head内部,在代码执行时候,页面还没有加载,页面中的DOM对象也没有加载。就会导致js中无法获取页面中的DOM对象。解决方法:onload事件,会在整个页面加载完之后才触发,为window绑定一个onload事件,该事件对应的响应函数将会在页面加载完成之后执行,这样可以确保我们的代码执行时所有的DOM对象已经加载完了

<style>
 button{
 width:100px;
 height:100px;
 background-color:green;
 margin:0 auto;
 font-size:30px;
 }
 </style>

</head>
<body>
<div></div>
<button id="button">点击</button>
<script>
 window.onload = function (ev) {
 var btn = document.getElementById("button");
 btn.onclick = function (ev) {
 alert("成功了");
 }
 }
</script>
</body>

运行显示:

JavaScript文档加载模式以及元素获取

点击按钮

 JavaScript文档加载模式以及元素获取

二、文档页面元素获取

根据id、标签名、name、类名、选择器获取元素

<script>
 window.onload = function (ev) {
 var btn = document.getElementById("button");
 btn.onclick = function (ev) {
 alert("成功了");
 }
 }
 window.onload = function (ea) {
 var btn1 = document.getElementById("button")
 console.log(btn1);
 var btn2 = document.getElementsByClassName("button2");
 console.log(btn2[0]);
 var btn3 = document.getElementsByTagName("button");
 console.log(btn3[0]);
 var btn4 = document.getElementsByName("button3");
 console.log(btn4[0]);
 var btn5 = document.querySelector("#button2");
 console.log(btn5);
 var btn6 = document.querySelectorAll("#button1");
 console.log(btn6[0]);
 }
</script>

运行显示:

JavaScript文档加载模式以及元素获取

三、源码:

地址:https://github.com/ruigege66/JavaScript/blob/master/D27_1_Document.html  

博客园:https://www.cnblogs.com/ruigege0000/

CSDN:https://blog.csdn.net/weixin_44630050?t=1

三水点靠木:https://3water.com/article/191885.htm

到此这篇关于JavaScript文档加载模式以及元素获取的文章就介绍到这了,更多相关JavaScript 文档加载 元素获取内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js最简单的拖拽效果实现代码
Sep 24 Javascript
简短几句 通俗解释javascript的闭包
Jan 17 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
Dec 11 Javascript
javascript搜索框点击文字消失失焦时文本出现
Sep 18 Javascript
Node.js的特点和应用场景介绍
Nov 04 Javascript
通过伪协议解决父页面与iframe页面通信的问题
Apr 05 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
Sep 06 Javascript
详解javascript中对数据格式化的思考
Jan 23 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
Apr 11 Javascript
微信小程序实现分享到朋友圈功能
Jul 19 Javascript
微信小程序 冒泡事件原理解析
Sep 27 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
Aug 09 Javascript
javascript实现贪吃蛇小游戏
Jul 28 #Javascript
Element DateTimePicker日期时间选择器的使用示例
Jul 27 #Javascript
Js图片点击切换轮播实现代码
Jul 27 #Javascript
在vue中实现echarts随窗体变化
Jul 27 #Javascript
Vue组件跨层级获取组件操作
Jul 27 #Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
Jul 27 #Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
Jul 27 #Javascript
You might like
PHP的ASP防火墙
2006/10/09 PHP
php访问查询mysql数据的三种方法
2006/10/09 PHP
PHP操作MySQL事务实例
2014/11/05 PHP
PHP缓冲区用法总结
2016/02/14 PHP
php reset() 函数指针指向数组中的第一个元素并输出实例代码
2016/11/21 PHP
php PDO实现的事务回滚示例
2017/03/23 PHP
csdn 博客中实现运行代码功能实现
2009/08/29 Javascript
了解了这些才能开始发挥jQuery的威力
2013/10/10 Javascript
js中小数转换整数的方法
2014/01/26 Javascript
jquery使用$(element).is()来判断获取的tagName
2014/08/24 Javascript
自定义百度分享的分享按钮
2015/03/18 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
2016/02/16 Javascript
JavaScript跨域调用基于JSON的RESTful API
2016/07/09 Javascript
jquery实现百叶窗效果
2017/01/12 Javascript
详解Angular系列之变化检测(Change Detection)
2018/02/26 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
2018/05/09 Javascript
搭建vue开发环境
2018/07/19 Javascript
vue.js input框之间赋值方法
2018/08/24 Javascript
layui实现数据分页功能
2019/07/27 Javascript
Python中使用装饰器和元编程实现结构体类实例
2015/01/28 Python
深入理解Python中装饰器的用法
2016/06/28 Python
python 3.6 tkinter+urllib+json实现火车车次信息查询功能
2017/12/20 Python
Python常用爬虫代码总结方便查询
2019/02/25 Python
python实现坦克大战
2020/04/24 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
Python xmltodict模块安装及代码实例
2020/10/05 Python
python读取excel数据绘制简单曲线图的完整步骤记录
2020/10/30 Python
C语言变量的命名规则都有哪些
2013/12/27 面试题
中专毕业自我鉴定
2013/10/16 职场文书
大学生求职推荐信
2013/11/27 职场文书
网站美工岗位职责
2014/04/02 职场文书
推荐信格式要求
2014/05/09 职场文书
党员对十八届四中全会的期盼思想汇报范文
2014/10/17 职场文书
关于学习的决心书
2015/02/05 职场文书
铁人纪念馆观后感
2015/06/16 职场文书
用python画城市轮播地图
2021/05/28 Python