javascript基础(4)
来源:互联网 发布:51单片机最小系统电路 编辑:程序博客网 时间:2024/06/05 18:39
DOM 文档对象模型
是针对HTML和XML文档的一个API(应用程序编程接口),DOM可以将任何HTML,XML文档描绘成一个由多层节点构成的结构,每个节点都拥有各自的特点,数据和方法,另外与其他节点存在某种关系。
1. Node类型
javascript中所有的节点类型都继承自Node类型,所有节点类型都共享着相同的基本属性和方法。
1) 节点关系
childNodes :属性,保存一个NodeList对象,NodeList是一种类数组对象用来保存一组有序的节点,NodeList是基于DOM结构动态执行查询的结果,DOM结构变化可以自动反应到NodeList对象中。访问时可以通过中括号访问,也可以通过item()方法访问。
可以使用slice方法将NodeList转换为数组 var arr = Array.prototype.slice.call(nodes,0);
parentNode :属性,指向文档树中的父节点。包含在childNodes列表中所有的节点都具有相同的父节点,每个节点之间都是同胞节点。
previousSibling :属性,兄弟节点中的前一个节点
nextSibling :属性,兄弟节点中的下一个节点
firstChild :属性,childNodes列表中的第一个节点
lastChild :属性,childNodes列表中的最后一个节点
ownerDocument :属性,指向表示整个文档的文档节点。
hasChildNodes() :方法,在包含一个或多个子节点的情况下返回true
2) 操作节点
以下四个方法都需要父节点对象进行调用!
appendChild() :向childNodes列表末尾添加一个节点。返回新增的节点。关系更新如果参数节点已经为文档的一部分,位置更新而不插入,dom树可以看做是由一系列的指针连接起来的,任何DOM节点不能同时出现在文档中的多个位置。
insertBefore() :第一个参数:要插入的节点;第二个参数:作为参照的节点。被插入的节点会变成参照节点的前一个同胞节点,同时被方法返回。如果第二个参数为null将会将该节点追加在NodeList后面
replaceChild() :第一个参数:要插入的节点;第二个参数:要替换的节点。要替换的节点将由这个方法返回并从文档树中被移除,同时由要插入的节点占据其位置。
removeChild() 接受一个参数,即要移除的节点。移除的节点将作为方法的返回值。其他方法,任何节点对象都可以调用。
cloneNode() 用于创建调用这个方法的节点的一个完全相同的副本。有一个参数为布尔类型参数为true时,表示深复制,即复制节点以及整个子节点树。参数为false的时候,表示浅复制,只复制节点本身。
normalize() 处理文档树中的文本节点,由于解析器的实现或DOM操作等原因,可能会出现文本节点不包含文本,或者接连出现两个文本节点,当在某个节点上调用了该方法,会删除空白节点,会找到相邻的两个文本节点,并将他们合并为一个文本节点。
2. Document类型
nodeType : 9 节点类型 nodeName : "#document" 节点名 nodeValue: null 节点值
javascript通过使用Document类型表示文档。在浏览器中,document对象是HTMLDocument的一个实例,表示整个HTML页面。document对象是window对象的一个属性,因此可以直接调用。
HTMLDocument继承自Document
1) 文档子节点
可以继承Node中所有的属性和方法
documentElement 属性始终指向HTML页面中的html元素。
body 属性,直接指向body元素
doctype 属性,访问DOCTYPE, 浏览器支持不一致,很少使用
title 属性,获取文档的标题
URL 属性,取得完整的URL
domain 属性,取得域名
referrer 属性,取得来源页面的URL
images 获取所有的img对象,返回HTMLCollection类数组对象
forms 获取所有的form对象,返回HTMLCollection类数组对象
2) 查找元素
getElementById()
参数为要取得元素的ID,如果找到返回该元素,否则返回null如果页面中多个元素的ID值相同,只返回文档中第一次出现的元素。如果某个表单元素的name值等于指定的ID,该元素也会被匹配。
getElementsByTagName()
参数为要取得元素的标签名,返回包含另个或者多个元素的NodeList,在HTML文档中该方法返回的是
HTMLCollection对象,与NodeList非常类似。可以通过[index/name],item(),namedItem(name)访问
getElementsByName()
参数为元素的name,返回符合条件的HTMLCollection
IE8及以下版本不支持
getElementsByClassName()
参数为一个字符串,可以由多个空格隔开的标识符组成。当元素的class属性值包含所有指定的标识符时才匹配。HTML元素的class属性值是一个以空格隔开的列表,可以为空或包含多个标识符。
IE8及以下版本不支持
3. Element类型
nodeType : 1 nodeName : 元素的标签名 nodeValue : null
1) HTML元素
所有的HTML元素都由HTMLElement类型表示,或者其子类型表示。每个HTML元素都
应具有如下一些属性以及html元素特有的属性。
id 元素在文档中的唯一标识符
title 有关元素的附加说明信息
className 与元素class特性对应
src img元素具有的属性
alt img元素具有的属性
lang 元素内容的语言代码,很少使用!
dir 语言方向,ltr,rtl 左到右,右到左、
可以通过属性访问到该属性对应的值
a. 取得属性 getAttribute() 参数为实际元素的属性名,calss,name,id,title,lang,dir一般只有在取得自定义特性值的情况下,才会用该方法,大多数直接使用属性进行访问,比如style,onclickb. 设置属性 setAttribute() 两个参数,第一个参数为要设置的特性名,第二个参数为对应的值。如果该值存在,替换。c. 移除属性 removeAttribute() 移除指定的特性d. attributes属性,其中包含了一个NamedNodeMap与NodeList类似。 getNamedItem(name) 通过属性名获取属性对象 removeNamedItem(name) 从列表中删除nodeName属性等于name的值 setNamedItem(node) 向列表中添加一个节点 item(pos) 返回位于数字pos位置处的节点e. 创建元素 createElement() 一个参数,要创建元素的标签名。f. 元素的子节点 <ul> <li>item1</li> <li>item2</li> <li>item3</li> </ul> ie8及以下版本浏览器 : 3个子节点 其他浏览器 : 7个子节点 getElementByTagName() 当通过元素调用这个方法的时候,搜索起点为当前元素。
2)作为文档树的文档
将文档看做是Element对象树,忽略文档Text,Comment节点
Element中的属性
children :类似于childNodes,返回NodeList对象,但是该对象中仅包含Element对象
firstElementChild :第一个孩子元素节点
lastElementChild :最后一个孩子元素节点
nextElementSibling :下一个兄弟元素节点
previousElementSibling :上一个兄弟元素节点
childElementCount :子元素的数量,返回值和children.length值相等
4) 元素内容
<div id="one"> <span>hello</span> </div> one.innerHTML // <span>hello</span> one.textContent //hello
innerHTML 返回元素内容 textContent 非ie浏览器中获取文本内容 innerText ie浏览器获取文本内容
4. Text类型: 文本类型
nodeType : 3 nodeName : "#text" nodeValue : 文本内容 ,也可以通过data获取
文本节点。包含的是可以按照字面解释的存文本内容。
<span>这个是文本节点</span>
length 属性,文本长度
appendData(text) 追加文本内容
deleteData(beginIndex,count) 删除文本内容
insertData(beginIndex,text) 插入文本内容
replaceData(beginIndex,count,text) 替换文本内容
splitText(beiginIndex) 从beginIndex位置将当前文本节点分成两个文本节点
substringData(beiginIndex,count)从beginIndex开始提取count个子字符串
document.createTextNode() 创建文本节点,参数为要插入节点中的文本
5. Comment类型: 注释类型
nodeType : 8 nodeName : "#comment" nodeValue: 注释的内容 <div id = "myDiv"><!--a comment--></div> <!--a comment--> Comment类型------------------------------------------------------------------------------------
事件
javascript与HTML之间的交互是通过事件实现的。事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。事件三要素:
事件目标(event target) :发生的事件与之相关联或与之相关的对象 事件处理程序(event handler):处理或相应事件的函数 事件对象(event object) :与特定事件相关且包含有关该事件详细信息的对象。
1.事件流
描述的是从页面中接受事件的顺序
1) 事件冒泡
事件开始由最具体的元素接收,然后逐级向上传播到不具体的节点。
<html> <head></head> <body> <div>click me</div> </body> </html>
当点击了div元素,这个click事件会按照如下顺序传播
div->body->html->document IE8以及更早版本只支持事件冒泡。
2) 事件捕获
不太具体的节点更早接收事件,具体的节点到最后接收事件。
当点击了div元素,按照如下方式触发click事件
document->html->body->div
3) dom事件流
“DOM2级事件”规定了事件流包括三个阶段:事件捕获阶段,处理目标阶段和事件
冒泡阶段。
事件捕获: document->html->body
处理目标: 事件处理
事件冒泡: div->body->html->document
2.事件处理程序
事件就是用户或浏览器自身执行的某种动作,响应某个事件的函数为事件处理程序,事件处理程序以”on”开头(onclick,onload)
1) HTML事件处理程序
<input type="button" value="clickMe" onclick = "alert('is clicked')"> 不能在事件中使用未经转义的HTML语法字符 <input type="button" value="clickMe" onclick = "showMsg()"> <script type="text/javascript"> function showMsg(){ alert("is clicked"); } </script>
点击按钮会调用showMsg()函数,事件处理程序的代码在执行时,有权访问全局作用域的任何代码。
2) DOM0级事件处理程序
通过javascript制定事件处理程序的传统方式,将一个函数赋值给一个事件处理程序属性,简单,跨浏览器。
var btn = document.getElementById("btn"); btn.onclick = function(){ alert('cliked'); }
dom0级方法制定的事件处理程序被认为是元素的方法,因此这个时候事件处理程序是在元素的作用域中运行,this指向当前元素。
btn.onclick = null; //删除事件处理程序
3) DOM2级事件处理程序
1.非IE事件处理程序
addEventListener() //指定事件removeEventListener() //删除事件
所有的dom节点都有这两个方法,并且它们接受3个参数:
要处理的事件名 作为事件处理的函数 布尔值:true在捕获阶段调用事件处理程序;false在冒泡阶段调用事件处理程序
var btn = document.getElementById("btn"); btn.addEventListener("click",function(){ alert(this.id); //该函数在其依附的元素的作用域中运行。 },false); btn.addEventListener("click",function(){ alert(this.id); },false);
可以添加多个事件处理程序,并且按照添加她们的顺序触发。移除事件传入的参数与添加处理程序时使用的参数相同,添加事件时如果使用匿名函数将无法删除
var btn = document.getElementById("btn"); var handler = function(){ alert(this.id); } btn.addEventListener("click",handler,false); btn.removeEventListener("click",handler,false);//移除
2.IE事件处理程序
attachEvent() 事件处理程序会在全局作用域中运行,因此this指向window对象。为一个对象添加两个相同的事件,事件处理程序的顺序是按照添加相反顺序进行处理 detachEvent() 这两个方法接受相同的两个参数:(事件处理程序名称,事件处理函数) 事件处理程序都被添加到冒泡阶段
4) 跨浏览器的事件处理程序
见代码 lib.js
3.事件对象
1) dom中的事件对象
在触发DOM上的某个事件时,会产生一个事件对象event,这个对象包含着所有与事件相关的信息,默认会将event对象传入到事件处理函数中
dom.onclick = function(event){ console.log(event); } dom.addEventListener("click",function(event){ console.log(event); },false);
属性 类型 说明bubbles Boolean 事件是否冒泡cancelable Boolean 是否可以取消事件默认行为currentTarget Element 当前正在处理事件的那个元素eventPhase Integer 调用事件处理程序的阶段 1,捕获 2,处于目标 3,冒泡target Element 事件目标type String 事件类型trusted Boolean 事件是否是浏览器生成的preventDefault()Function 取消事件的默认行为stopPropagation()Function 取消事件的进一步捕获或者冒泡
在事件处理程序内部,对象this始终等于currentTarget值,而target则只包含事件的实际目标。如果直接将事件处理程序指定给了目标元素,this,currentTarget,target包含相同的值。
2) IE中的事件对象
event可以作为window对象的一个属性存在
dom.onclick = function(){ console.log(window.event); window.event.returnValue = false;//阻止默认行为 window.event.cancalBubble = true;//取消冒泡 }
attachEvent添加事件处理程序的时候,event对象会作为参数传入事件处理函数中
dom.attachEvent("onclick",function(event){ console.log(window.event); });
属性 类型 说明cancelBubble Boolean 是否取消时间冒泡,值为true取消冒泡 stopPropagation()returnValue Boolean 取消时间默认行为,值为false阻止 preventDefault()srcEvent Element 事件的目标 targettype String 被触发的时间 的类型
4.事件类型
1) UI事件
load: 当页面完全加载后再window上触发,当所有框架加载完毕时在框架集上触发
当图像加载完毕时在img元素上触发,当嵌入的内容加载完时在object触发
unload: 当页面完全卸载后再window上触发,当所有框架都卸载后在框架集上触发
当嵌入的内容卸载完毕后再object上触发,(firefox不支持)
select: 当用户选择文本框(input,textarea)中的一个或多个字符时
resize: 当浏览器窗口被调整到一个新的高度或者宽度时,会触发
scroll: 当用户滚动带滚动条的元素中的内容时,在该元素上触发
resize,scroll会在变化期间重复被激发,尽量保持代码简单
2) 焦点事件
blur : 元素失去焦点的时候触发focus : 元素获得焦点的时候触发,不支持冒泡//IE支持focusin : 与focus等价,支持冒泡focusout: 与blur等价,支持冒泡
3) 鼠标与滚轮事件
click : 点击主鼠标按钮或者按下回车按键的时候触发。只有在一个元素上相继发生mousedown,mouseup事件,才会触发click事件
dblclick: 双击主鼠标按钮时触发。只有在一个元素上相继触发两次click时间才会触发dbclick事件
mousedown:任意鼠标按钮按下时触发
mouseup : 释放鼠标按钮触发p;
mousemove :鼠标在元素内部移动的时候重发触发
mousewheel:滚轮事件
mouseover :鼠标位于元素外部,将其首次移入另一个元素边界之内时触发
支持子元素
mouseenter:鼠标光标从元素外部首次移动到元素范围内激发,不冒泡
不支持子元素
mouseout :在位于元素上方的鼠标光标移入到另外一个元素中
支持子元素,在被选元素上与mouseleave效果相同
mouseleave:在位于元素上方的鼠标光标移动到元素范围之外时触发,不冒泡
不支持子元素
4) 相关元素,event特殊属性
1.客户区坐标位置
clientX,clientY 事件发生时,鼠标指针在视口中的水平和垂直坐标
2.页面坐标位置
pageX,pageY 事件发生时,鼠标指针在页面本身而非视口的坐标,页面没有滚动的时候,pageX和pageY的值与clientX和clientY值相等
3.屏幕位置
screenX,screenY
4.修改键
值为boolean类型,用来判断对应的按键是否被按下
shiftKey ctrlKey altKey metaKey
5.鼠标按钮
mousedown,mouseup,该事件的event对象中包含了button属性,表示按下或释放的按钮。0表示主鼠标按钮,1表示中间的滚动按钮,2表示次鼠标按钮
5) 键盘与文本事件
keydown :按下键盘任意键时触发,如果按住不放会重复触发此事件keypress:按下键盘字符键时触发,如果按住不放会重复触发此事件keyup :释放键盘上键时触发
当键盘事件发生时,event对象的keyCode属性中会包含一个代码与键盘上的特定键对应,对数字字母键,keyCode属性的值与ASCII码中对应的小写字母和数字编码相同
详情请查看keycode
表单脚本
一、基础知识
在html中,表单是由form元素表示的。在javascript中,表单对应的是HTMLFormElement类型,是HTMLElement子类型。其特有的属性和方法如下:
acceptCharset :服务器能处理的字符集。等价于accept-charset。
action :接受请求的URL;等价于HTML中的action特性
elements :表单中所有控件的集合。
enctype :请求的编码类型
application/x-www-form-urlencoded 默认值,在发送到服务器之前,所有字符都会进行编码
text/plain 空格转换为 “+” 加号,但不对特殊字符编码。
multipart/form-data 不对字符编码。在使用包含文件上传控件的表单时,必须使用该值。
length :表单中控件的数量
method :要发送的HTTP请求类型。
name :表单的名称
target :用于发送请求和接受相应的窗口名称。
submit() :提交表单
reset() :将所有表单域重置为默认值
1) 提交表单
1.通用方式 <input type="submit" value="提交"> 2.自定义方式 <button type="submit">提交</button> 3.图像按钮 <input type="image" src="a.gif"> 提交表单时,浏览器会在将请求发送给服务器之前触发submit事件,可以进行表单验证。但是当调用表单对象的submit()方法的时候不会触发submit事件。
2) 重置表单
1.通用方式 <input type="reset" value="重置"> 2.自定义方式 <button type="reset"></button>在重置表单时,所有表单字段都会恢复到页面刚加载完毕时的初始值。
3) 表单字段
elements属性,该属性是表单中所有表单元素的集合,这个elements集合是一个有序列表,其中包含着表单的所有字段 input,textarea,button…。如果有多个表单控件都在使用一个name(单选),则返回以该name命名的一个NodeList
1.共有的表单字段属性
disabled :布尔值,表示当前字段是否被禁用 form :指向当前字段所属表单的指针,只读 name :当前字段的名称 readOnly :Boolean,表示当前字段是否只读 type :表示当前字段类型, checkbox,radio
<select name="" id=""></select> type="select-one" <select multiple></select> type="select-multiple" ...
value :当前字段将被提交给服务器的值。
表单重复提交的解决方案
EventUtil.addHandler(form,"submit",function(event){ event= EventUtil.getEvent(event); var target = EventUtil.getTarget(event); var btn = target.elements["submit-btn"]; btn.disabled = true; });
详情请查看EventUtil
2.共有的表单字段方法
focus() :用于将浏览器的焦点设置到表单字段,使其可以相应键盘事件。 blur() :用于将浏览器的焦点从元素中移走。
3.共有的表单字段事件
blur :当前字段失去焦点时触发 change:对于input,textarea元素,失去焦点切value值改变时触发;对于select元素在其选项改变时触发 focus :当前字段获得焦点时触发。
二、文本框脚本
<input type="text" value="初始值"> <textarea name="" cols="30" rows="10">初始值</textarea>
都将用户输入的内容保存到value属性中。1) 选择文本方法select() :用于选择文本框中所有的文本2) 选择文本事件select :选择了文本框中的文本时,就会触发该事件
三、选择框脚本
通过select,option元素创建,属于HTMLSelectElement类型,提供了以下属性和方法
1) HTMLSelectElement类型
add(newOption,relOption); :向控件中插入新的option元素,在relOption之前remove(index); :移除给定位置的选项multiple :boolean值,表示是否允许多项选择。options :控件中所有<option>元素的HTMLCollectionselectedIndex :基于0的选中项的索引size :选择框中可见的行数value :值 如果没有选中的项,则选择框的value属性为 空字符串 如果有一个选择的项,且该项的value属性在html中指定,则选择框的值为选中项的value值。 如果有一个选择的项,但该项的value属性在html中未指定,则选择框的值等于该项的文本。 如果有多个选中项,则选择框的value属性将依据前两条规则取得第一个选择得项的值
2) HTMLOptionElement类型 option
index :当前项在options集合中的索引lable :当前项的标签selected:布尔值,表示当前项是否被选中。text :选项的文本value :选项的值。
var selectedOption = selectbox.options[selectbox.selectedIndex];
- JavaScript语言基础4
- JavaScript-基础语法(4)
- JavaScript 基础 Part 4
- JavaScript基础(4)
- javascript基础(4)
- javascript基础知识点(对象)4
- JavaScript基础系列4--函数
- javascript基础4-对象2
- JavaScript(4)__Js基础<字符串>
- javaScript基础
- JAVASCRIPT 基础
- JavaScript基础
- JAVASCRIPT基础
- JavaScript 基础
- javascript基础
- javascript基础
- JavaScript 基础
- JavaScript基础
- 实习遇到的坑....
- hdu 3549 isap
- jQuery中foreach的continue和break : Uncaught SyntaxError: Illegal continue statement
- MySQL数据库二(数据表创建以及插入数据)
- 据说题目很水 FZU
- javascript基础(4)
- Android 音视频采集与软编码总结
- React Native之npm ERR! 无法安装依赖包的解决办法
- 常用linux命令 centeOS版
- Balanced Lineup
- 计算机网络的七个分层
- 【KMP求字符串匹配次数】 hdu 1686
- Java中main方法解析
- lung-segmentation-2d所需依赖项