HtmlDOM 文档读取研究
2013-11-27 16:10
453 查看
今天用js做事件绑定的时候遇到了一个奇怪的问题,绑定之后点击无效,
这里是绑定时间的代码 也可以用document.querySelector 或者 document.querySelectorAll 这个部分浏览器不支持 这个不在本文的研究范围之类。
js代码:
这里我采用了三种dom元素,input li div其他的元也能绑定的。
html代码:
css代码:
首先我把js代码放在<head></head> 中间,这个也是我们常用方式,
现象1:点击之后没有任反应:如图:
js代码放在input之后:
现象2:点击input能有反应 而 li div 点击没有反应
js代码反正li之后:
现象3 input li 点击有反应, div点击没有效果。
js放在html尾标签后:
现象3:所有的都能点击
最后一次测试,我吧js打包放入js文件中然后引用,发现的效果和以上一样
这个文件引用的位置 和以上一样;只要八个这句话放在Html尾部即可。
总结:
1.页面上写的代码尽量放在html尾部
2.如果页面过多可以打包到js 然后把文件引用放在页面尾部
原理: 浏览器读取的时候和程序的读取一样都是从头部开始读取,然后加入内存生成效果然后显示在页面上
在这里,没有兼职html元素我们就加载了js 所以js会失去效果。
比较好的加载方式是: html元素》》CSS >>js代码
附:(js常用事件)
onabort 图像的加载被中断。
onblur 元素失去焦点。
onchange 域的内容被改变。
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onerror 在加载文档或图像时发生错误。
onfocus 元素获得焦点。
onkeydown 某个键盘按键被按下。
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseup 鼠标按键被松开。
onreset 重置按钮被点击。
onresize 窗口或框架被重新调整大小。
onselect 文本被选中。
onsubmit 确认按钮被点击。
onunload 用户退出页面。
这里是绑定时间的代码 也可以用document.querySelector 或者 document.querySelectorAll 这个部分浏览器不支持 这个不在本文的研究范围之类。
js代码:
<script type="text/javascript"> var value = 'Happy New Year!'; function myFunc(){ alert(this.value); // output "Happy New Year!" //more of the script statements } document.getElementsByTagName('input')[0].onclick = function () { /*alert(this.value); // output "Happy everyday!" myFunc(); */// output "Happy New Year!" alert('click frist input'); } document.getElementsByTagName('li')[0].onclick = function () { /*alert(this.value); // output "Happy everyday!" myFunc(); */// output "Happy New Year!" alert('click frist li '); } document.getElementsByTagName('div')[0].onclick = function () { /*alert(this.value); // output "Happy everyday!" myFunc(); */// output "Happy New Year!" alert('click frist div'); } document.getElementsByTagName('div')[0].onmouseover = function () { /*alert(this.value); // output "Happy everyday!" myFunc(); */// output "Happy New Year!" alert('onmouseover fist div'); } </script>
这里我采用了三种dom元素,input li div其他的元也能绑定的。
html代码:
<input type="text" value="inut1" /><br /> <input type="text" value="input2" /><br /> <input type="text" value="input3" /><br /> <input type="text" value="inpput4" /><br /> <li>222</li> <li>222222222222</li><li>222</li><li>222</li><li>222</li> <div> div </div>
css代码:
<style type="text/css" > div{ width:300px; height:40px; background-color:#003366;} body{ margin:100px 160px;} </style>
首先我把js代码放在<head></head> 中间,这个也是我们常用方式,
现象1:点击之后没有任反应:如图:
js代码放在input之后:
现象2:点击input能有反应 而 li div 点击没有反应
js代码反正li之后:
现象3 input li 点击有反应, div点击没有效果。
js放在html尾标签后:
现象3:所有的都能点击
最后一次测试,我吧js打包放入js文件中然后引用,发现的效果和以上一样
这个文件引用的位置 和以上一样;只要八个这句话放在Html尾部即可。
总结:
1.页面上写的代码尽量放在html尾部
2.如果页面过多可以打包到js 然后把文件引用放在页面尾部
原理: 浏览器读取的时候和程序的读取一样都是从头部开始读取,然后加入内存生成效果然后显示在页面上
在这里,没有兼职html元素我们就加载了js 所以js会失去效果。
比较好的加载方式是: html元素》》CSS >>js代码
附:(js常用事件)
onabort 图像的加载被中断。
onblur 元素失去焦点。
onchange 域的内容被改变。
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onerror 在加载文档或图像时发生错误。
onfocus 元素获得焦点。
onkeydown 某个键盘按键被按下。
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseup 鼠标按键被松开。
onreset 重置按钮被点击。
onresize 窗口或框架被重新调整大小。
onselect 文本被选中。
onsubmit 确认按钮被点击。
onunload 用户退出页面。
相关文章推荐
- HtmlDOM 文档读取研究
- DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。
- 轻松学习JavaScript十九:DOM编程学习之在HTML文档什么位置编写JS代码
- 使用jQuery匹配文档中所有的li元素,返回一个jQuery对象,然后通过数组下标的方式读取jQuery集合中第1个DOM元素,此时返回的是DOM对象,然后调用DOM属性innerHTML,读取该元素 包含的文本信息
- 将HTML字符转换为DOM节点并动态添加到文档中
- DOM操作HTML文档
- 第一步:使用mshtml获取html文档dom树,解析html结构,进行高亮标记
- IOS开发基础之──读取本地HTML文档
- 轻松学习JavaScript十九:DOM编程之在HTML文档什么位置编写JS代码
- DOM操作HTML文档
- 在VSCode中编辑HTML文档时,在Dom标签上写style属性时智能提示的问题
- simplehtmldom Doc api帮助文档
- Java 利用DOM读取XML文档的例子
- 用Java的DOM读取XML文档时遇到空指针异常...
- Java读取、创建xml(通过dom方式)文档版
- HTML文档对象(DOM)
- 平生不认DOM,便称英雄也枉然 未完待研究...(转自:http://www.cnblogs.com/xdesigner/archive/2008/06/04/1213504.html)
- Dom元素基本操作方法API,先记录下,方便以后使用。 W3C DOM和JavaScript很容易混淆不清。DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本
- php dompdf包如何将HTML页面导出中文无乱码的PDF文档
- 使用DOM操作HTML文档