文档对象模型DOM

时间 2019-11-12

标签文档对象模型 dom 栏目 HTML 繁體版

原文原文链接

W3C（ World Wide Web Consortium，万维网联盟）推荐的处理标记语言文档的标准编程接口APIjavascript

DOM提供了对HTML或XML文档的访问模型，将文档做为一个树形结构，树的每一个结点表示一个标签或标签内的文本项html

XML（eXtensible Markup Language）java

可扩展标记语言：经过用户自定义的标签，对数据进行结构化组织，用于数据交换node

DOM基础－－什么是DOM编程

DOM是一种与浏览器、语言无关的编程接口，用于访问或修改XML文件中的内容浏览器

将XML（HTML）解析为节点树进行访问：//html也是xml的一中，DOM对于html的解析和读取也相当重要。app

DOM树的节点类型：

Document－－顶层节点dom

Elementide

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 侦测到的行为，如鼠标单击、页面载入完成，交互式功能经过事件编程来实现

事件－－事件处理函数/监听函数

响应某个事件而调用的函数称为事件处理函数

方法一：直接在代码上加载事件

或者：

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 滚动条卷动时触发