标签归档：DOM

HTML 4.0 事件属性

      HTML 4 的新特性之一是可以使 HTML 事件触发浏览器中的行为，比方说当用户点击某个 HTML 元素时启动一段 JavaScript。

      在现代浏览器中都内置有大量的事件处理器。这些处理器会监视特定的条件或用户行为，例如鼠标单击或浏览器窗口中完成加载某个图像。通过使用客户端的 JavaScript，可以将某些特定的事件处理器作为属性添加给特定的标签，并可以在事件发生时执行一个或多个 JavaScript 命令或函数。

      事件处理器的值是一个或一系列以分号隔开的 Javascript 表达式、方法和函数调用，并用引号引起来。当事件发生时，浏览器会执行这些代码。例如，当您把鼠标移动到一个超链接时，会启动一个 JavaScript 函数。支持 JavaScript 的浏览器支持 <a> 标签中的一个特殊的 “mouse over”事件处理器 – 被称为 onmouseover 来完成这项工作：

<a href=”#” onmouseover=”alert(‘Welcome’);return false”></a>

移动这里 –弹出属性测试

窗口事件 (Window Events)
仅在 body 和 frameset 元素中有效。

属性                   值                       描述
onload              脚本                    当文档载入时执行脚本
onunload          脚本                    当文档卸载时执行脚本

表单元素事件 (Form Element Events)
仅在表单元素中有效。

属性                   值                            描述
onchange           脚本                       当元素改变时执行脚本
onsubmit             脚本                       当表单被提交时执行脚本
onreset               脚本                       当表单被重置时执行脚本
onselect              脚本                       当元素被选取时执行脚本
onblur                 脚本                       当元素失去焦点时执行脚本
onfocus               脚本                       当元素获得焦点时执行脚本

图像事件 (Image Events)
该属性可用于 img 元素：

属性                   值                          描述
onabort             脚本                         当图像加载中断时执行脚本

键盘事件 (Keyboard Events)
在下列元素中无效：base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, 以及 title 元素。

属性                       值                      描述
onkeydown             脚本                 当键盘被按下时执行脚本
onkeypress             脚本                当键盘被按下后又松开时执行脚本
onkeyup                 脚本                  当键盘被松开时执行脚本

鼠标事件 (Mouse Events)
在下列元素中无效：base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, title 元素。

属性                           值                          描述
onclick                       脚本                       当鼠标被单击时执行脚本
ondblclick                  脚本                        当鼠标被双击时执行脚本
onmousedown           脚本                        当鼠标按钮被按下时执行脚本
onmousemove           脚本                      当鼠标指针移动时执行脚本
onmouseout              脚本                        当鼠标指针移出某元素时执行脚本
onmouseover            脚本                        当鼠标指针悬停于某元素之上时执行脚本
onmouseup               脚本                        当鼠标按钮被松开时执行脚本
 

 

 

 

innerHTML 和 pasteHTML 区别

innerHTML 是一个属性 ，可以取得或者设定该元素内的 HTML 内容，可以是任意能包含 HTML 子节点的元素都使用它

pasteHTML() 是一个方法 ，在指定的文字区域内替换该区域内的文本或者HTML，该方法必须应用于一个 createTextRange() 或者 document.selection.createRange() 创建的区域上
例：

<Script Language=”JavaScript”>
       function addLink(){
          var oRange = document.selection.createRange();
          if(oRange.text!=”){
             var oUrl = window.prompt(‘链接网址…’,’https://www.nopost.cn/’);
             var oHtml = ‘<a href=’+oUrl+’ target=_blank>’+oRange.text+'</a>’;
             oRange.pasteHTML(oHtml);
          }else{
             window.alert(‘您没有选择加链接的文字！’);
          }

DOM常用操作

1、获取对象
document.getElementById(ID)
//获得指定ID值的对象
document.getElementsByName(Name)
//获得指定Name值的对象数组，常用获取radio,checkbox

2、坐标
var oRect=obj.getBoundingClientRect();
x=oRect.left
y=oRect.top

3、获取窗口大小,分辨率
Java代码
document.body.clientWidth    
document.body.clientHeight    
  获得窗口大小（包含Border、Scroll等元素）    
  document.body.offsetWidth    
  document.body.offsetHeight  
 
分辨率  
creen.width,creen.height.  
具体解释如下：  
 
scrollWidth是对象的实际内容的宽，不包边线宽度，会随对象中内容的多少改变（内容多了可能会改变对象的实际宽度）   
clientWidth是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。  
offsetWidth是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。  
scrollHeight: 获取对象的滚动高度。  
offsetHeight:获取对象相对于版面或由父坐标    
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离  
offsetLeft:获取对象相对于版面或由  
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离  
offsetTop 属性指定的父坐标的计算顶端位置  
offsetParent 属性指定的父坐标的高度  
offsetParent 属性指定的父坐标的计算左侧位置  
event.clientX 相对文档的水平座标  
event.clientY 相对文档的垂直座标  
event.offsetX 相对容器的水平坐标  
event.offsetY 相对容器的垂直坐标  
document.documentElement.scrollTop 垂直方向滚动的值 event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量 　　  
以上主要指IE之中，FireFox差异如下：  
IE6.0、FF1.06+：  
clientWidth = width + padding clientHeight = height + padding  
offsetWidth = width + padding + border  
offsetHeight = height + padding + border  
IE5.0/5.5：  
clientWidth = width – border  
clientHeight = height – border  
offsetWidth = width  
offsetHeight = height   
 
例：如页面过长，想让id=”view1″的节点显示出来。  
var currentDom=document.getElementById(“view1”).getBoundingClientRect();  
            if(currentDom.top>window.document.body.clientHeight){  
                window.document.body.scrollTop=currentDom.top;  
            } 

document.body.clientWidth 
document.body.clientHeight 
  获得窗口大小（包含Border、Scroll等元素） 
  document.body.offsetWidth 
  document.body.offsetHeight

分辨率
creen.width,creen.height.
具体解释如下：

scrollWidth是对象的实际内容的宽，不包边线宽度，会随对象中内容的多少改变（内容多了可能会改变对象的实际宽度）
clientWidth是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。
offsetWidth是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。
scrollHeight: 获取对象的滚动高度。
offsetHeight:获取对象相对于版面或由父坐标 
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
offsetLeft:获取对象相对于版面或由
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
offsetTop 属性指定的父坐标的计算顶端位置
offsetParent 属性指定的父坐标的高度
offsetParent 属性指定的父坐标的计算左侧位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值 event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量 　　
以上主要指IE之中，FireFox差异如下：
IE6.0、FF1.06+：
clientWidth = width + padding clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width – border
clientHeight = height – border
offsetWidth = width
offsetHeight = height

例：如页面过长，想让id=”view1″的节点显示出来。
var currentDom=document.getElementById(“view1”).getBoundingClientRect();
    if(currentDom.top>window.document.body.clientHeight){
     window.document.body.scrollTop=currentDom.top;
    }
4、dom加载顺序

1.HTML解析完毕
2.外部脚本和样式表加载完毕
3.脚本在文档内解析并执行
4.HTML DOM完全构造起来
5.图片和外部内容加载
6.网页完成加载
监听DOM加载状态

 

这项技术在不堵塞浏览器加载的情况下尽可能快地检查HTML DOM文档是否已经加载了执行所必须的属性。

document

document.getElementById

document.getElementsByTagName

document.body

检查这几个对象可以获知DOM的加载状态

 

以下代码监听DOM何时加载完毕（来自《精通JavaScript》）

Java代码

Java代码
function domReady(func) {  
    // 假如DOM已经加载，马上执行函数  
    if (domReady.done) return func();  
      
    // 假如我们已经增加了一个函数  
    if (domReady.timer) {  
        // 把它加入到待执行函数清单中  
        domReady.ready.push(func);  
    }  
    else {  
        // 为页面加载完毕绑定一个事件以防止它最先完成。使用addEvent函数  
        // addEvent函数为由Dean Edwards编写的著名函数  
        addEvent(window, “load”, isDOMReady );  
          
        // 初始化待执行函数的数组  
        domReady.ready[ func ];  
          
        // 尽可能快地检查DOM是否已可用  
        domReady.timer = setInterval(isDOMReady, 13);  
    }  
};  
 
//检查DOM是否已可操作  
function isDOMReady() {  
    // 如果我们能判断出DOM已可用，忽略  
    if (domReady.done) return false;  
      
    // 检查若干函数和元素是否可用  
    if (document && document.getElementsByTagName && document.getElementById && document.body) {  
        // 如果可用，我们可以停止检查  
        clearInterval(douReady.timer);  
        domReady.timer = null;  
          
        // 执行所有正等待的函数  
        for (var i = 0; i < domReady.ready.length; i++)  
            domReady.ready[i]();  
              
        // 记录我们在此已经完成  
        domReady.ready = null;  
        domReady.done = true;  
    }  
} 

function domReady(func) {
    // 假如DOM已经加载，马上执行函数
    if (domReady.done) return func();
   
    // 假如我们已经增加了一个函数
    if (domReady.timer) {
        // 把它加入到待执行函数清单中
        domReady.ready.push(func);
    }
    else {
        // 为页面加载完毕绑定一个事件以防止它最先完成。使用addEvent函数
        // addEvent函数为由Dean Edwards编写的著名函数
        addEvent(window, “load”, isDOMReady );
       
        // 初始化待执行函数的数组
        domReady.ready[ func ];
       
        // 尽可能快地检查DOM是否已可用
        domReady.timer = setInterval(isDOMReady, 13);
    }
};

//检查DOM是否已可操作
function isDOMReady() {
    // 如果我们能判断出DOM已可用，忽略
    if (domReady.done) return false;
   
    // 检查若干函数和元素是否可用
    if (document && document.getElementsByTagName && document.getElementById && document.body) {
        // 如果可用，我们可以停止检查
        clearInterval(douReady.timer);
        domReady.timer = null;
       
        // 执行所有正等待的函数
        for (var i = 0; i < domReady.ready.length; i++)
            domReady.ready[i]();
           
        // 记录我们在此已经完成
        domReady.ready = null;
        domReady.done = true;
    }
}
5、增加对象
Java代码
/*创建新层*/ 
var div_view=document.createElement(“div”);  
也可这样创建 document.createElement(“<div></div>”);  
设置样式:div_view.className=””;  
设置ID：div_view.id=”div1″;  
设置div显示内容：div_view.innerHTML=”test”;  
innerHTML即div里的内容。例<div id=”div1″>test1</div>,div1.innerHTML则是”test1″ 
outerHTML则是整个div。例div1.outerHTMl是”<div id=div1>test1</div>”.  
注意，innerHTML和outerHTML均会把”,’去掉。  
/*创建table,插入行，列*/ 
var table=document.createElement(“table”);  
var trow=table.insertRow();插入行到最后。  
var trow=table.insertRow(1);插入到第2行。  
var rowLength=table.rows.length;获取table的总行数  
var tcell=row.insertCell();插入一列  
tcell.innerHTML=”insert row”;设置列内容  
其他的创建方式类似。  
document.body.appendChild(div_view);把层添加到body中，这样才会在页面中显示增加的层。 

/*创建新层*/
var div_view=document.createElement(“div”);
也可这样创建 document.createElement(“<div></div>”);
设置样式:div_view.className=””;
设置ID：div_view.id=”div1″;
设置div显示内容：div_view.innerHTML=”test”;
innerHTML即div里的内容。例<div id=”div1″>test1</div>,div1.innerHTML则是”test1″
outerHTML则是整个div。例div1.outerHTMl是”<div id=div1>test1</div>”.
注意，innerHTML和outerHTML均会把”,’去掉。
/*创建table,插入行，列*/
var table=document.createElement(“table”);
var trow=table.insertRow();插入行到最后。
var trow=table.insertRow(1);插入到第2行。
var rowLength=table.rows.length;获取table的总行数
var tcell=row.insertCell();插入一列
tcell.innerHTML=”insert row”;设置列内容
其他的创建方式类似。
document.body.appendChild(div_view);把层添加到body中，这样才会在页面中显示增加的层。

6、frame
window.frames[“frameName”]获取frame的window对象
7、select
Java代码
当前选中的option:select.options[select.selectedIndex]  
所有options:select.options.返回的是option[]数组  
增加option  
方法1：option1=new Option(text,value);  
      select.add(option1);  
方法2：option2=document.createElement(“option”);  
       option2.value=value;  
       option2.text=text;  
      select.add(option2);  
删除option  
      select.remove(option1);  
删除所有option  
      select.options.length=0;