W3C( World Wide Web Consortium,万维网联盟)推荐的处理标记语言文档的标准编程接口API
DOM提供了对HTML或XML文档的访问模型,将文档作为一个树形结构,树的每个结点表示一个标签或标签内的文本项
XML(eXtensible Markup Language)
可扩展标记语言:通过用户自定义的标签,对数据进行结构化组织,用于数据交换
DOM基础--什么是DOM
DOM是一种与浏览器、语言无关的编程接口,用于访问或修改XML文件中的内容
将XML(HTML)解析为节点树进行访问://html也是xml的一中,DOM对于html的解析和读取也至关重要。
DOM树的节点类型:
Document--顶层节点
Element
Attr--属性名和属性值,没有子节点
Text--标签与标签之间的文本,没有子节点
Node接口:定义节点对象的属性和方法
nodeName String 节点的名字;根据节点的类型而定义
nodeType Number 节点的类型常量值之一
ownerDocument Document 指向这个节点所属的文档
firstChild Node 指向在childNodes列表中的第一个节点
previousSibling Node 指向前一个兄弟节点;如果这个节点就是第一个兄弟节点,那么该值为null
appendChild(node) 将node添加到childNodes的末尾
removeChild(node) 从childNodes中删除node
BOM document = HTML DOM document
var oHtml = document.documentElement; //<html>元素
访问指定节点方法1:getElementsByTagName()
返回一个包含所有的tagName(标签名)等于指定值的元素的NodeList,如:
var oImgs = document.getElementsByTagName("img");
var oPs = document. getElementsByTagName(“p”);
var oImgs = oPs[0]. getElementsByTagName(“img”);
访问指定节点方法2:getElementsByName()
访问指定节点方法3:getElementById() 返回id等于指定值的元素,效率最高
处理节点的属性:
DOM定义了三个元素方法来帮助快速访问属性:
getAttribute(name)——等于attributes.getNamedItem(name).value; //顾名思义,获得属性值。
setAttribute(name, newvalue)——等于attribute.getNamedItem(name).value = newvalue;
removeAttribute(name)——等于attributes.removeNamedItem(name)。 //删除谁,直接说名字
创建和操作节点:
createElement()、createTextNode()、appendChild()
创建和操作节点:
removeChild()、replaceChild()和insertBefore() //appendChild是在已有节点之后插入节点
创建并加入文档片段:(适用于大量更新)
createDocumentFragment()
var oFragment = document.createDocumentFragment();
for (var i=0; i < arrText.length; i++) {
var oP = document.createElement("p");
var oText = document.createTextNode(arrText[i]);
oP.appendChild(oText);
oFragment.appendChild(oP);
}
document.body.appendChild(oFragment);
//实际上oFragment就不存在了,oFragment的子节点会变成插入的元素的直接子节点。
事件编程
事件是可以被 JavaScript 侦测到的行为,如鼠标单击、页面载入完成,交互式功能通过事件编程来实现
事件--事件处理函数/监听函数
响应某个事件而调用的函数称为事件处理函数
方法一:直接在代码上加载事件
<div onclick = “alert(‘I was clicked’)”></div>
或者:
<div onclick = “createMsg()”></div>
<script type="text/javascript">
function createMsg() {
......}
</script>
方法二:使用DOM的方式获取对象,并加载事件
window.onload = function() {
var element = document.getElementById('choices');
var anchors = element.getElementsByTagName('a');
for (var i=0; i < anchors.length; i++ ) {
anchors[i].onclick = popUpResult;}
//注意,onClick对应的是方法本身,而不是方法的结果,所以不要加()!
}
popUpResult = function(evt){
var src = evt.srcElement; … …
}
方法三:使用标准的addEventListener方式和IE的attachEvent方式
try //标准方式
{ doms[i].addEventListener('mouseover',show_color,false);
doms[i].addEventListener('mouseout',hide_color,false);
}
catch(e) //IE方式
{ doms[i].attachEvent('onmouseover', show_color);
doms[i].attachEvent('onmouseout', hide_color);
}
事件对象在发生事件时创建,只有事件处理函数可以访问 e
IE中: oDiv.onclick = function(){
var oEvent = window.event; }
DOM中: oDiv.onclick = function(){
var oEvent = arguments[0]; }
或oDiv.onclick = function(oEvent)
//注意,在火狐中,不允许function(e){}这种事件样式出现,要写成标准的function(event e){}才能够使其识别。
属性和方法
altKey 是否按下alt键
button 按下鼠标的按钮,1-左键,2-右键…
clientX,clientY 鼠标在客户区中的位置
keyCode 按键代码,Unicode字符
type 事件的名称
srcElement 引起事件的元素
toElement 鼠标事件中,鼠标正在进入的元素
分为:用户操作事件(鼠标、键盘),浏览器HTML事件(网页载入、表单提交等)
鼠标事件
click 左键单击
dbclick 左键双击
mousedown 任一键单击
mouseout 鼠标移出某个元素时
mousemove 在某个元素上时持续发生
键盘事件
keydown 键盘按键产生
keypress 按键并产生字符时产生
keyup 释放按键产生
属性
keyCode //键盘按键码,如a和A都是65
charCode //Unicode字符
target(DOM)或者 srcElement(IE)
shiftKey、ctrlKey、altKey
浏览器HTML事件
load 页面完全载入后,window对象上触发,<img/>完全载入后,在其上触发,<object/>元素完全载入后,在其上触发
error javascript出错时
change 文本框内容发生变化时
submit 提交表单时,在<form/>上触发
focus与blur 控件获得或失去焦点时
scroll 滚动条卷动时触发