Javascript中Dom常用操作总结

来源：互联网发布：狩猎者安全防护软件编辑：程序博客网时间：2024/05/29 08:17

window对象:

(1)alert方法，弹出消息对话框
(2)confirm方法，显示“确定”、“取消”对话框，如果按了【确定】按钮，就返回true，否则就false
        if (confirm("是否继续？")) {
            alert("确定");
        }
        else {
            alert("取消");
        }
(3) prompt('请输入大名', '')
(4)重新导航到指定的地址：navigate("http://www.rupeng.com");
(5)setInterval每隔一段时间执行指定的代码，第一个参数为代码的字符串，第二个参数为间隔时间（单位毫秒），返回值为定时器的标识
setInterval("alert('hello')", 5000);
(6)clearInterval取消setInterval的定时执行，相当于Timer中的Enabled=False。因为setInterval可以设定多个定时器，所以clearInterval要指定清除那个定时器的标识，即setInterval的返回值。
var intervalId = setInterval("alert('hello')", 5000);
clearInterval(intervalId);
(7)setTimeout也是定时执行，但是不像setInterval那样是重复的定时执行，只执行一次，clearTimeout也是清除定时。很好区分：Interval：间隔；timeout：超时。
var timeoutId = setTimeout("alert('hello')", 2000);

(8)showModalDialog弹出模态对话框，注意showModalDialog必须在onClick等用户手动触发的事件中才会执行，否则可能会被最新版本的浏览器当成广告弹窗而拦截。
•第一个参数为弹出模态窗口的页面地址。
•在弹出的页面中调用window.close()（不能省略window.close()中的window.）关闭窗口，只有在对话框中调用window.close()才会自动关闭窗口，否则浏览器会提示用户进行确认。
(9)showModelessDialog弹出非模态窗口，参数等和showModalDialog一样

body对象的事件

（1）onload：网页加载完毕时触发，浏览器是一边下载文档、一边解析执行，可能会出现JavaScript执行时需要操作某个元素，这个元素还没有加载，如果这样就要把操作的代码放到body的onload事件中，或者可以把JavaScript放到元素之后。元素的onload事件是元素自己加载完毕时触发，body onload才是全部加载完成
（2）onbeforeunload：在网页准备关闭（或者离开）后触发。在事件中为"window.event.returnValue赋值（要显示的警告消息），这样窗口离开（比如前进、后退、关闭）就会弹出确认消息
•<body onbeforeunload="window.event.returnValue='真的要放弃发帖退出吗？'">。显示的文字随浏览器版本而有差异。
除了有特有的属性之外，当然还有通用的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属性，例子 <input type="button" value="点击" onclick="if(event.altKey){alert('Alt点击')}else{alert('普通点击')}" /> ；

•clientX、clientY发生事件时鼠标在客户区的坐标；screenX、screenY 发生事件时鼠标在屏幕上的坐标；offsetX、offsetY 发生事件时鼠标相对于事件源（比如点击按钮时触发onclick）的坐标。
•returnValue属性，如果将returnValue设置为false，就会取消触发触发事件对象的默认事件的处理。在超链接的onclick里面禁止访问href的页面。在表单校验的时候禁止提交表单到服务器，防止错误数据提交给服务器、防止页面刷新。
•srcElement，获得事件源对象。几个事件共享一个事件响应函数用。
•keyCode，发生事件时的按键值。
•button，发生事件时鼠标按键，1为左键，2为右键，3为左右键同时按。<body onmousedown="if(event.button==2){alert('禁止复制');}">

document属性:

document是window对象的一个属性，因为使用window对象成员的时候可以省略window.，所以一般直接写document
document的方法：
•（1）write：向文档中写入内容。writeln，和write差不多，只不过最后添加一个回车
•<input type="button" value="点击" onclick="document.write('<font color=red>你好</font>')" />
•在onclick等事件中写的代码会冲掉页面中的内容，只有在页面加载过程中write才会与原有内容融合在一起
•    <script type="text/javascript">
•        document.write('<font color=red>你好</font>');
•    </script>
•write经常在广告代码、整合资源代码中被使用。见备注
内容联盟、广告代码、cnzz，不需要被主页面的站长去维护内容，只要被嵌入的js内容提供商修改内容，显示的内容就变了。

document方法:

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

几乎所有DOM元素都有innerText、innerHTML属性（注意大小写），分别是元素标签内内容的文本表示形式和HTML源代码，这两个属性是可读可写的。
•<a href="http://www.itcast.cn" id="link1">a<font color="Red">b</font>cd</a>
•<input type="button" value="inner*" onclick="alert(document.getElementById('link1').innerText);alert(document.getElementById('link1').innerHTML);" />
l用innerHTML也可以替代createElement，属于简单、粗放型、后果自负的创建
•function createlink() {
•            var divMain = document.getElementById("divMain");
•            divMain.innerHTML = "<a href='http://www.rupeng.com'>XX网</a>";
•        }

this:

事件中的this。除了可以使用event.srcElement在事件响应函数中，this表示发生事件的控件。只有在事件响应函数才能使用this获得发生事件的控件，在事件响应函数调用的函数中不能使用，如果要使用则要将this传递给函数或者使用event.srcElement。(*)this和event.srcElement的语义是不一样的，this就是表示当前监听事件的这个对象，event.srcElement是引发事件的对象：事件冒泡。
l取消后续内容的执行
•1、window.event.returnValue = false;
•2、让事件响应函数return false;

======================================================================================================

易错：修改元素的样式不是设置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

单独修改控件的样式<input type="button" value="AAA" onclick="this.style.color='red'" />。技巧，没有文档的情况下的值属性名，随便给一个元素设定id，然后在js中就能id.style.出来能用的属性。