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 相关文章推荐
jquery.messager.js插件导致页面抖动的解决方法
Jul 14 Javascript
JavaScript:Div层拖动效果实例代码
Aug 06 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
May 09 Javascript
ES6的新特性概览
Mar 10 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
Jun 12 Javascript
原生JS+Canvas实现五子棋游戏
May 28 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
Jul 03 Javascript
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
Typescript 中的 interface 和 type 到底有什么区别详解
Jun 18 Javascript
vue输入框使用模糊搜索功能的实现代码
May 26 Javascript
JS常见错误(Error)及处理方案详解
Jul 02 Javascript
jQuery-App输入框实现实时搜索
Nov 19 jQuery
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
ThinkPHP 模板substr的截取字符串函数详解
2017/01/09 PHP
js DOM模型操作
2009/12/28 Javascript
js中的值类型和引用类型小结 文字说明与实例
2010/12/12 Javascript
javascript中检测变量的类型的代码
2010/12/28 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
2015/04/16 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
2015/10/17 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
2016/08/24 Javascript
微信小程序登录态控制深入分析
2017/04/12 Javascript
Vue之Watcher源码解析(1)
2017/07/19 Javascript
JS实现页面打印(整体、局部)
2017/08/18 Javascript
基于 Vue 实现一个酷炫的 menu插件
2017/11/14 Javascript
vue 实现数字滚动增加效果的实例代码
2018/07/06 Javascript
ndm:NPM的桌面GUI应用程序
2018/10/15 Javascript
[02:34]2016完美“圣”典风云人物:BurNIng专访
2016/12/10 DOTA
python执行shell获取硬件参数写入mysql的方法
2014/12/29 Python
举例详解Python中的split()函数的使用方法
2015/04/07 Python
详解Python中的动态属性和特性
2018/04/07 Python
python3+PyQt5实现柱状图
2018/04/24 Python
解决Django migrate No changes detected 不能创建表的问题
2018/05/27 Python
python调用pyaudio使用麦克风录制wav声音文件的教程
2019/06/26 Python
python多线程同步之文件读写控制
2021/02/25 Python
PyQt5中QTableWidget如何弹出菜单的示例代码
2020/02/23 Python
详解px单位html5响应式方案
2018/03/08 HTML / CSS
澳大利亚拥有最好的家具和家居用品在线目的地:Nestz
2019/02/23 全球购物
Furla官网:意大利著名的皮革品牌
2019/08/06 全球购物
string = null 和string = ''的区别
2013/04/28 面试题
编程用JAVA解析XML的方式
2013/07/07 面试题
2014年开学第一课活动方案
2014/03/06 职场文书
财务工作犯错检讨书
2014/10/07 职场文书
党支部先进事迹材料
2014/12/24 职场文书
2015年端午节活动总结
2015/02/11 职场文书
起诉书范文
2015/05/20 职场文书
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS
sql时间段切分实现每隔x分钟出一份高速门架车流量
2022/02/28 SQL Server
基于Redission的分布式锁实战
2022/08/14 Redis
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技