DDR爱好者之家

JavaScript文档加载模式以及元素获取
站长资源 2024/12/26 佚名
2 1538
DDR爱好者之家 Design By 杰米

一、文档加载模式

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://www.jb51.net/article/191885.htm

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米