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

一、文档加载模式

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>

运行显示：

点击按钮

二、文档页面元素获取

根据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>

运行显示：

三、源码：

地址: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

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

赞 (0)

相关推荐

  • 关于JS与jQuery中的文档加载问题

    jquery中的$(document).ready()类似于javascript中的window.onload(),但是其中还是有很大区别的 1.jquery中的可以简化为$().ready(),$(function),   而js却不行必须全部写完. 2.同时js的window.onload()只能有一个,而jquery的$(document).ready()却可以有多个. 3.最重要的一点是window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.   $(documen

  • JavaScript 关于元素获取焦点(隐藏元素与div)

    1,隐藏元素无法获取焦点 2,对于div等特殊元素获取焦点 关于元素获取焦点 body { margin: 32px; font-family: Verdana, sans-serif; font-size: 14px; } .title { font-size: 18px; font-weight: bolder;margin:40px 0; } 关于元素获取焦点: 1,隐藏元素无法获取焦点 下面有个隐藏的Input: 解决方法:先把元素显示,在获取焦点. 2,对于div等特殊元素获取焦点 我

  • JS实现文档加载完成后执行代码

    在执行某些操作的时候,需要当文档完全加载完成之后再去执行,否则可能出现意向不到的情况,先看一段代码实例: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>我们</title> <style type="text/css"> div{ width:200px; height:200px; } </style

  • Javascript Dom元素获取和添加详解

    1.Dom元素的获取 document.getElementById():通过id获取一个Dom元素 document.getElementsByClassName():通过class名字获取一个或多个Dom元素(伪数组) document.getElementsByTagName():通过标签名字获取一个或多个Dom元素(伪数组) document.querySelector():获取指定 CSS 选择器的一个元素 document.querySelectorAll():获取指定 CSS 选择

  • javascript下一种表单元素获取方法存在的问题

    一. 测试环境 浏览器: IE6+, FF 3.5.5, Opera 10, Chrome 4.0.249, Safari 4.0.3 二. 例子 复制代码 代码如下: <form name="test-form" action="" method=""> <input type="checkbox" name="kk"> <form> <script type=&

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

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

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

  • jQuery实现在HTML文档加载完毕后自动执行某个事件的方法

    本文实例讲述了jQuery实现在HTML文档加载完毕后自动执行某个事件的方法.分享给大家供大家参考,具体如下: 原来onchange="fucntionname(parms)": <select name="country" id="selCountries_{$sn}" onchange="region.changed(this, 1, 'selProvinces_{$sn}')" style="border

  • Jquery的基本对象转换和文档加载用法实例

    本文实例讲述了Jquery的基本对象转换和文档加载用法.分享给大家供大家参考.具体如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">      <

  • 基于jQuery的$.getScript方法去加载javaScript文档解析

    1.两个文件的代码如下: <script> function Ajax(){ //将9-4.html中的Ajax()函数进行修改 $.getScript('9-8.js',function(data){ var html ="<table border='1' cellpadding='2'>"; $.each(comments, function(Index, comment) { html += '<tr><td>' + commen

  • 使用JavaScript在html文档内添加新的元素节点

    使用JavaScript在html文档内添加新的元素节点

    目录 一.基本语法与解释 1.在某元素附近创建一个新的元素节点 2.删除标签 3.修改标签 4.使用选择器选出某一类标签 二.实际应用 1.完整代码 2.运行效果 三.注意事项 前言: 动态的改变原有html文档结构 一.基本语法与解释 1.在某元素附近创建一个新的元素节点  // 将节点插入指定标签之后  // 创建一个p标签对象  var para = document.createElement("p");  // 创建文本对象  var node = document.crea

  • JavaScript无阻塞加载和defer、async详解

    JavaScript无阻塞加载和defer、async详解

    无阻塞加载 把js放在head里,浏览器是怎么去执行它的呢,是按顺序加载还是并行加载呢?在旧的浏览器下,都是按照先后顺序来加载的,这就保证了加载的js依赖不会发生问题.但是少部分新的浏览器已经开始允许并行加载js了,也就是说可以同时下载js文件,但是还是按先后顺序执行文件的. 下载是异步的没问题,但是每个javascript执行的时候还是同步的,就是先出现的script标签一定是先执行,即使是并行下载它是最后一个下载完成的,除非标有defer的script标签.任何javascript在执行的时

  • 理解Javascript图片预加载

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享三个不同的预加载技术,来增强网站的性能与可用性. 方法一:用CSS和JavaScript实现预加载 实现预加载图片有很多方法,包括使用CSS.JavaScript及两者的各种组合.这些技术可根据不同设计场景设计出相应的解决方案,十分高效.

  • JavaScript文档对象模型DOM

    JavaScript文档对象模型DOM

    目录 一.JavaScript 能够改变页面中的所有 HTML 元素 1.通过 id 找到 HTML 元素 2.通过标签名查找 HTML 元素 3.通过类名找到 HTML 元素 4.JavaScript 能够改变页面中的所有 HTML 属性 5.JavaScript 能够改变页面中的所有 CSS 样式 6.JavaScript 能够对页面中的所有事件做出反应 前言: 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model).通过可编程的对象模型,JavaScr

随机推荐