自学_DOM<五>

类库DOM

DOM(document object medol)文档对象模型。

• DOM就是HTML页面的模型，将每个标签都做为一个对象，JavaScript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。比如通过操作文本框的DOM对象，就可以读取文本框中的值、设置文本框中的值。
• JavaScript→Dom就是C#→.Net Framwork。没有.net，C#只能for、while，连WriteLine、MessageBox都不行。Dom就是一些让JavaScript能操作HTML页面控件的类、函数。
  DOM也像WinForm一样，通过事件、属性、方法进行编程。
  CSS+JavaScript+DOM=DHTML
• 学习阶段只考虑IE。用IE Collection安装IE所有版本，学习使用IE6（要调试必须使用本机安装的版本）。

事件

• 事件：当点击鼠标的时候执行onmousedown中的代码。有时间事件响应的代码太多，就放到单独的函数中：

• bodymousedown后的括号不能丢（ onmousedown="bodymousedown" ），因为表示onmousedown事件发生时调用bodymousedown函数，而不是onmousedown事件的响应函数是bodymousedown。

动态设置事件

可以在代码中动态设置事件响应函数，就像.Net中btn.Click+=一样

function f1() {
alert("1");
}
function f2(){
alert("2");
}

//注意f1不要加括号。如果加上括号就变成了执行f1函数，并且将函数的返回值复制给document.ondblclick

window对象

• window对象代表当前浏览器窗口，使用window对象的属性、方法的时候可以省略window，比如window.alert('a')可以省略成alert('aa')。
  • alert方法，弹出消息对话框
  • confirm方法，显示“确定”、“取消”对话框，如果按了【确定】按钮，就返回true，否则就false

if (confirm("是否继续？")) {
alert("确定");
}
else {
alert("取消");
}

+ 重新导航到指定的地址：navigate("http://www.rupeng.com");
+ setInterval每隔一段时间执行指定的代码，第一个参数为代码的字符串，第二个参数为间隔时间（单位毫秒），返回值为定时器的标识
	`setInterval("alert('hello')", 5000);`
+ clearInterval取消setInterval的定时执行，相当于Timer中的Enabled=False。因为setInterval可以设定多个定时，所以clearInterval要指定清除那个定时器的标识，即setInterval的返回值。

var intervalId = setInterval("alert('hello')", 5000); clearInterval(intervalId);
+ setTimeout也是定时执行，但是不像setInterval那样是重复的定时执行，只执行一次，clearTimeout也是清除定时。很好区分：Interval：间隔；timeout：超时。
var timeoutId = setTimeout("alert('hello')", 2000);

+ showModalDialog弹出模态对话框，注意showModalDialog必须在onClick等用户手动触发的事件中才会执行，否则可能会被最新版本的浏览器当成广告弹窗而拦截。
	+ 第一个参数为弹出模态窗口的页面地址。
	+ 在弹出的页面中调用window.close()（不能省略window.close()中的window.）关闭窗口，只有在对话框中调用window.close()才会自动关闭窗口，否则浏览器会提示用户进行确认。
+ 除了有特有的属性之外，当然还有通用的HTML元素的事件：onclick（单击）、ondblclick（双击）、onkeydown（按键按下）、onkeypress（点击按键）、onkeyup（按键释放）、onmousedown（鼠标按下）、onmousemove（鼠标移动）、onmouseout（鼠标离开元素范围）、onmouseover（鼠标移动到元素范围）、onmouseup（鼠标按键释放）等。

    
    


    注册协议
    

    

window对象属性

• window.location.href='http://www.itcast.cn'，重新导向新的地址，和navigate方法效果一样。window.location.reload() 刷新页面
• window.event是非常重要的属性，用来获得发生事件时的信息，事件不局限于window对象的事件，所有元素的事件都可以通过event属性取到相关信息。类似于winForm中的e(EventArg).
  • altKey属性，bool类型，表示发生事件时alt键是否被按下，类似的还有ctrlKey、shiftKey属性，例子 ；
  • clientX、clientY 发生事件时鼠标在客户区的坐标；screenX、screenY 发生事件时鼠标在屏幕上的坐标；offsetX、offsetY 发生事件时鼠标相对于事件源（比如点击按钮时触发onclick）的坐标。
  • returnValue属性，如果将returnValue设置为false，就会取消默认事件的处理。在超链接的onclick里面禁止访问href的页面。在表单校验的时候禁止提交表单到服务器，防止错误数据提交给服务器、防止页面刷新。
  • srcElement，获得事件源对象。几个事件共享一个事件响应函数用。
  • keyCode，发生事件时的按键值。
  • button，发生事件时鼠标按键，1为左键，2为右键，3为左右键同时按。

（*）screen对象，屏幕的信息

alert("分辨率：" + screen.width + "*" + screen.height);

if (screen.width < 1024 || screen.height < 768){
alert("分辨率太低！");
}

clipboardData对象

• 对粘贴板的操作。clearData("Text")清空粘贴板；getData("Text")读取粘贴板的值，返回值为粘贴板中的内容；setData("Text",val)，设置粘贴板中的值。
  • 案例：复制地址给友好。见备注。
  • 当复制的时候body的oncopy方法被触发，直接return false就是禁止复制。
  • 很多元素也有oncopy、onpaste事件：
  • 案例：禁止粘贴帐号。见备注。
• 在网站中复制文章的时候，为了防止那些拷贝党不添加文章来源，自动在复制的内容后添加版权声明。

function modifyClipboard() {
clipboardData.setData('Text', clipboardData.getData('Text') + '本文来自传智播客技术专区，转载请注明来源。' + location.href);
}

+ `oncopy="setTimeout('modifyClipboard()',100)"`。用户复制动作发生0.1秒以后再去改粘贴板中的内容。100ms只是一个经常取值，写1000、10、50、200……都行。不能直接在oncopy里修改粘贴板。
+ 不能直接在oncopy中执行对粘贴板的操作，因此设定定时器，0.1秒以后执行，这样就不再oncopy的执行调用栈上了。

• history操作历史记录
  • window.history.back()后退；window.history.forward()前进。也可以用window.history.go(-1)、window.history.go(1)前进

    
    


    
    
    
    
    

    超链接
    
    

        
    

    
    
    

    

    手机号：

    
    重复手机号：
    

    

    

    
    



          asdfasdfasdf
        asdfasdfasdf
    
    
    链接

document属性。

是最复杂的属性之一。后面讲解详细使用。

• document是window对象的一个属性，因为使用window对象成员的时候可以省略window.，所以一般直接写document

• document的方法：

  • write：向文档中写入内容。writeln，和write差不多，只不过最后添加一个回车

+ 在onclick等事件中写的代码会冲掉页面中的内容，只有在页面加载过程中write才会与原有内容融合在一起

+ write经常在广告代码、整合资源代码中被使用。见备注

内容联盟、广告代码、cnzz，不需要被主页面的站长去维护内容，只要被嵌入的js内容提供商修改内容，显示的内容就变了。

• getElementById方法（非常常用），根据元素的Id获得对象，网页中id不能重复。也可以直接通过元素的id来引用元素，但是有有效范围、form1.textbox1之类的问题，因此不建议直接通过id操作元素，而是通过getElementById
• （*）getElementsByName，根据元素的name获得对象，由于页面中元素的name可以重复，比如多个RadioButton的name一样，因此getElementsByName返回值是对象数组。
• （*）getElementsByTagName，获得指定标签名称的元素数组，比如getElementsByTagName("p")可以获得所有的

  标签。

  • 案例：实现checkbox的全选，反选
  • 案例：点击一个按钮，被点击的按钮显示“呜呜”，其他按钮显示“哈哈”。
  • 案例：十秒钟后协议文本框下的注册按钮才能点击，时钟倒数。(btn.disabled = true )

    
    


    
abc
    abc
    
    

    sdfsd
    
    

    
    


    吃饭

    睡觉

    打豆豆

    


    全选
    
    
    
    
   
    

    春天里

    夏天里

dom动态创建

document.write只能在页面加载过程中才能动态创建。
可以调用document的createElement方法来创建具有指定标签的DOM对象，然后通过调用某个元素的appendChild方法将新创建元素添加到相应的元素下

function showit() {
var divMain = document.getElementById("divMain");
var btn = document.createElement("input");
btn.type = "button";
btn.value = "我是动态的！";
divMain.appendChild(btn);
}

    
    


    
    
    
abc

• Value 获取表单元素
• 几乎所有DOM元素都有innerText、innerHTML属性（注意大小写），分别是元素标签内内容的文本表示形式和HTML源代码，这两个属性是可读可写的。

传智播客

• 用innerHTML也可以替代createElement，属于简单、粗放型、后果自负的创建

function createlink() {
var divMain = document.getElementById("divMain");
divMain.innerHTML = "如鹏网";
}

    
    


    传智播客
    
    
    
    
abcd
    
    
    
        

浏览器兼容性的例子

ie6，ie7对table.appendChild("tr")的支持和IE8不一样，用insertRow、insertCell来代替或者为表格添加tbody，然后向tbody中添加tr。FF不支持InnerText。

所以动态加载网站列表的程序修改为：

var tr = tableLinks.insertRow(-1);//FF必须加-1这个参数
var td1 = tr.insertCell(-1);
td1.innerText = key;
var td2 = tr.insertCell(-1);
td2.innerHTML = "" + value + "";

或者：

，然后tableLinks. tBodies[0].appendChild(tr);

    
    
    


    

        最新新闻
    
    
    
    

    
    评论：
        

        
        
        

        
        

    
    


    

        最新新闻
    
    
    
    

    
    评论：
        

        
        
        

        
        

事件冒泡

事件冒泡：如果元素A嵌套在元素B中，那么A被点击不仅A的onclick事件会被触发，B的onclick也会被触发。触发的顺序是“由内而外” 。验证：在页面上添加一个table、table里有tr、tr里有td，td里放一个p，在p、td、tr、table中添加onclick事件响应，见备注。

aaaa
bbb

    
    


   

    

        
 
asd
        
2
    
   
   
   

   
   
   
   
   
   
   
   
   

this

事件中的this。

除了可以使用event.srcElement在事件响应函数中

this表示发生事件的控件。

只有在事件响应函数才能使用this获得发生事件的控件，在事件响应函数调用的函数中不能使用，如果要使用则要将this传递给函数或者使用event.srcElement。

(*)this和event.srcElement的语义是不一样的，this就是表示当前监听事件的这个对象，event.srcElement是引发事件的对象：事件冒泡。

修改样式

易错：修改元素的样式不是设置class属性，而是className属性。案例：网页开关灯的效果。
修改元素的样式不能this.style="background-color:Red"。
易错：单独修改样式的属性使用“style.属性名”。注意在css中属性名在JavaScript中操作的时候属性名可能不一样，主要集中在那些属性名中含有-的属性，因为JavaScript中-是不能做属性、类名的。所以CSS中背景颜色是background-color，而JavaScript则是style.backgroundColor；元素样式名是class，在JavaScript中是className属性；font-size→style.fontSize；margin-top→style.marginTop
单独修改控件的样式。技巧，没有文档的情况下的值属性名，随便给一个元素设定id，然后在js中就能id.style.出来能用的属性。

    
    


    

        

            
☆
☆
☆
☆
☆
        
    

    
    


    

        百度
        糗百
        cnbeta
    
    

        百度
        糗百
        cnbeta
    

    
    


    

        

            
刘备
            
男
            
19
        
        

            
关羽
            
男
            
18
        
        

            
张飞
            
男
            
17
        
        

            
曹操
            
男
            
20
        
        

            
吕布
            
男
            
19
        
    

    
    
   


    

        
C#
        
java
        
JavaScript
        
html
    

    
   
    


    

        怎么会迷上你，我在问自己。。。
    
    

        春天里百花香
    
    
    
    

    
    显示详细信息
    

        详细信息
    
    
    

    
    百度
    google
    sougou
    
    

        
        
我拍的照片
        
赵苑