黑马程序员—DOM

来源：互联网发布：淘宝定制西服编辑：程序博客网时间：2024/05/16 19:15

---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流！ ----------------------

今天开始DOM 2012年1月14日星期六

内容：使用Javascript操作Dom进行Dhtml开发。

目标：能够了使用Javascript操作Dom实现常见的DHTML效果。

参考书：张孝祥《Javascript网页面——体验式学习教程》

Dom就是Html页面的模型，将每个标签都做为一个对象，Javascript通过调用Dom中的属性，方法就可以对网页中的文本框、层等元素进行编程控制，比如通过操作文本框的Dom对象，就可以读取文本框中的值，设置文本框中的值。

Javascript——Dom就是C# .NetFramwork

Dom也像WinForm一样，通过事件、属性、方法进行编程。

CSS+Javascript+Dom=DHTML。

动态设置事件

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

<head>

function liting() {

alert('我¨°是o?李¤?婷?');

}

function huangjiangmiao(){

alert('我¨°是o?黄?江-苗?小?皇¨o帝ì?');

}

</script>

</head>

<body>

</body>

Window对象1

Window对象代表当前浏览窗口，使用Window对象的属性，方法的时候可以省略window,比如Window.alert(‘a’)可以省略成alert(‘a’)。

Alert方法，弹出消息对话框。

Confirm方法，显就“确定”“取消”对话杠，如果按了“确定”就返回Ture，否则就False

if (confirm("您¨2确¨?¤定?§要°a进?入¨?吗e？ê?")) {

alert("进?入¨?");

}

else {

alert("取¨?消?");

}

Window对象2

重新导航到指定的地址：<input type = "button" value = "navigatetest"onclick ="navigate('HTMLPageDom1.htm')" />

SetInterval每隔一段时间执行指定的代码，第一个参数为代码的字符串，第二个参数为间隔时间（毫秒），返回值为定时器的标识。

function startinterval() {

setInterval("alert('相¨¤信?心?里¤?有?D花?§就¨a能¨1够?怒-放¤?')",5000);

}

ClearInterval取消SetInterval的定时执行，相当于Timer中的Enabled=False。因为SetInterval可以设定多个定时，所以ClearInterval要指定清除好个定时器的标识，即SetInterval的返回值。

var pauseinterval;

function startinterval() {

pauseinterval =setInterval("alert('相¨¤信?心?里¤?有?D花?§就¨a能¨1够?怒-放¤?')",3000); //注á?é意°a被à?执??行D的ì?代?¨2码?是o?字á?符¤?串??格?式o?，ê?也°2可¨|以°?写??一°?个?匿?名?函?￥数oy。?ê

}

SetTimeout也是定时执行，但是不像Setinterval那样是得复的定时执行，只执行一次，ClearTimeout也是清除定时。很好区分：Interval间隔；Timeout:超时；

Body、Document对象的事件

Onload:网页加载完毕时触发，浏览器是一边下载文档一边解析执行，可能会现Javascript执行时需要操作的某个元素，这个元素还没有加载，如果这样，就要把操作的代码放到Body的Onload事件中，或者可以把Javascript放到元素之后，元素的Onload事件是元素自己加载完毕时触发，Body Onload才是全部加载完成.

Onunload:网页关闭（或者离开）后触发。

Onbeforeunload：在网页准备关闭后触发。在事件中为window.event.return value赋值（要显示的警告消息），宋窗口离开（比如前进、后退、关闭）就会弹出确认消息<body onbeforeunload =”window.event.returnValue=”真的要放弃发贴退出吗？”>

除了有特有的属性之外，当然还有通用的HTML元素事件：

Onclick单击ondblclick双击onkeydown按键按下onkeypress点击按键onkeyup按键释放onmouseout鼠标离开元素范围onmouseover鼠标移动到元素范围onmouseup鼠标按键释放

Window.location.href=http://www.itcast.cn重新导向新的地址，和Navigate方效果一样，Window.location.reload()刷新页面。

Window.event是非常重要的属性，用来获得发生事件的信息，事件不局限于Window对象的事件，所有元素的事件都可以通过Event属性取到相关信息，类似于WinForm中的e(EventArg)。

Altkey属性，Bool类型，表示发生事件睅Alt键是否被按下，类似的还有CtrlKey,ShiftKey属性，例子<inputtype = "button" value = "点击" onclick="if(window.event.ctrlKey){alert('按下了CTRL');}else{alert('普通点击')}"/>

ClipboardData对象，对粘贴板的操作。ClearData（“Text”）清空粘贴板GetData（“Text”）读取粘贴板的值。返回值为粘贴板中的内容; setData(“Text”,val),设置粘贴板的值。

当复制的时候Body的Oncopy方法被触发，直接Return false就是禁止复制。<body oncopy =”alert(‘禁止复制！’);return false;”

很多元素也有oncopy onpaste事件；

Window对象的属性3

function modifyClipboard() {

var txt = clipboardData.getData('Text');

txt = txt + "..本à?文?章?来¤??自á?舒o?适o¨o城?埼?夺¨￠.文?章?来¤??源??：êo" + location.href;

clipboardData.setData('Text', txt);

}

用户复制动作发生100Ms以后再去改粘贴板中的内容。不能直接在ONcopy里修改粘贴板。

不能直接在Oncopy中托运地执行粘贴板的操作，因此设定定时器，100毫秒后执行，这样就不再Oncopy的执行调用栈上了。

Window对象的属性四

History操作历史记录

Window.history.back() 后退;window.history.forward()前进.

也可以用Window.history.go(-1)后退;window.history.go(1)前进。

Document属性是Window对象最复杂的的属性之一。

Document属性一：

Document是Window对象的一个属性，因为使用Window对象成员的时候可以省略Window，所以一般直接写Document。

Document的方法：

Write:向文档中写入内容。WriteIn，和Write差不多，只不过最后添加一个回车。在ONclick等事件占写的代码会冲掉页面中的内容，只有在页面加载过程中Write才会与原有内容融合在一起。

document.write("<font color =blue>hello isblue</font>");

</script>

Write经常在广告代码、整合资源代码中被使用。

广告代码的例子：Http://heima8.com注册一个账户（itcast0710密码123456），申请一个广告代码，然后放到页面中。

整合资源的例子：百度新闻http://news.baidu.com/newscode.html

百度新闻代码相当于页面中嵌入另外一个网站的JS文件，文件就是一个大的write语句，这样的好处就是主页面不用写死内容，被嵌入的JS内容变了嵌入的内容就变了。

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

GetElementById方法（非常常用），根据元素Id获得对象，网页中Id不能重复，也可以直接通过元素的Id来引用元素，但是有有效范围之类的问题，因此不建议直接通过Id操作元素，而是通过GetElementById .

GetElementById方法在VisualStudio2010中不能在Form中编写，否则有错误。

<head>

function btnClick() {

alert(textbox.value);

var txt =document.getElementById(textbox);

alert(textbox.value);

}

function btnClickboss() {

alert(textboss.value);//错?¨a误¨?

alert(form1.textboss.value);//正y确¨?¤

var txt = document.getElementById(textboss);

alert(textboss.value);

}

</script>

</head>

<body>

<!--<form action="HTMLPage 1.htm"id="form1">

</form>-->

</body>

</html>

GetElementName,根据元素的Name获得对象，由于页面中元素的Name可以重复，比如多个RadioButton的Name一样，因此GetElementByName返回值是对象的数组。

<head>

var radios = document.getElementsByName("gender");

function btnClick() {

for (var radio in radios) {

alert(radio.value);

}

for (i = 0; i < radios.length; i++) {

var radio = radios[i];

alert(radio.value);

}

</script>

</head>

<body>

<input type="radio"name="gender"value ="boy" />boy

<input type="radio"name="gender"value="girl" />girl

<input type ="radio"name ="gender"value="protect" />mimi

</body>

</html>

getElementsByTagName,获得指定标签名称的元素数组，比如getElementsByTagName(“p”)可以获得所有的<p>标签。

<br />

<br />

function btnClickss() {

var inputs = document.getElementsByTagName("input");

for ( i = 0; i < inputs.length; i++) {

var input = inputs[i];

input.value ="hello";

}

浏览器兼容性问题

浏览器兼容性的例子：IE6，IE7对Table.appendChild("tr")的支持和IE8不一样，用insertRow、insertCell来代替或者为表格添加tdody,然后向tbody中添加tr。FF不支持InnerText。

<head>

function loadData() {

var data ={"新闻代码":"HTMLPage新闻代码1.htm","加法计算器":"HTMLPage加法计算器.htm","动态产生超链接":"HTMLPage动态产生超链接.htm"};

var tablelinks = document.getElementById("tablelinks");

for (var key in data) {

var value = data[key];

var tr =document.createElement("tr");

var td1 =document.createElement("td");

td1.innerText = key;

tr.appendChild(td1);

var td2 =document.createElement("td");

td2.innerHTML ="<a href = '"+ value +"'>" + value +"</a>";

tr.appendChild(td2);

tablelinks.tBodies[0].appendChild(tr);

}

</script>

</head>

<body>

<p>动态产生的元素，查看源代码是看不到的，通过DebugBar--Dom--文档---HTML可以看到</p>

</body>

</html>

事件冒泡：如果元素A嵌套在元素B中，那么A被点击不仅A的Onclick事件会被触发，B的Onclick也会被触发。触发的顺序是“由内而外”。

如：

</table>

创建三个输入文本框，当光标离开文本框时如果文本框为空，则刚文本框背景设置为红色，如果不为空则为白色。提示：焦点进入控件的事件是onfocus,焦点离开控件的事件是onblur。

易错：不要写成div1.style.width = 60px,而是div1.style.width="60px"

修改元素的样式不能this.style ="background-color:Red",哪怕可以的话也是把以前所有的样式都冲掉了。单独修改控件的样式this.style.background='red',只修改要修改的样式。技巧，没有文档的情况下的值属性名，随便给一个元素设定ID，然后在JS中就能id.style.出来能用的属性。

createElement的两种用法，注意innerText的问题。

--------------------------- Windows Phone 7手机开发、.Net培训、期待与您交流！ ---------------------- 详细请查看：http://net.itheima.com/