dom学习笔记

最新推荐文章于 2024-08-07 17:12:09 发布

橙子2014

最新推荐文章于 2024-08-07 17:12:09 发布

阅读量763

点赞数

分类专栏： html5&javaScript 文章标签： dom

本文链接：https://blog.csdn.net/qxl9102/article/details/21412619

版权

html5&javaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.使用javascript操作dom进行dhtml开发；
2.dom就是html页面的模型，将每个便签都作为一个对象，javascript通过调用dom中的

属性方法就可以对网页中的文本框，层等元素进行编程控制。比如通过操作文本框的

dom对象就可以读取文本框中的值、设置文本框中的值。
dom也像winform一样，通过事件、属性、方法进行编程。
3.css+javascript+dom=dhtml
4.动态设置事件
<!DOCTYPE HTML>
<html>
<head>
<title> New Document </title>
<meta charset="utf-8"/>
<script type="text/javascript">
function f1(){
alert("nima");
}
function f2(){
alert("wowo");
}
</script>
</head>

<body>
<br>

<input type="button" οnclick="document.οndblclick=f1" value="事件

1"/>

<input type="button" οnclick="document.οnclick=f2" value="事件2"/>
</body>
</html>
5.windows对象：
windows对象代表当前浏览器窗口，使用window对象的属性、方法的时候可以省略

window，比如window。alert（‘a’）可以省略成alert('aa');
（1）alert方法弹出消息对话框；
（2）confirm方法，显示“确定”、“取消”对话框，如果按了【确定】按钮，就返回

true，否则据false，通常用在删除操作；
if(confirm("是否继续？")){
alert("确定");
}
else{
alert("取消");
}
（3）重新导航到指定的地址：navigate("http://www.rupent.com");
首先说明的是 window.navigate 与 window.location.href 都是实现页面链接跳转的

，下面将介绍它们的区别。

window.navigate("http://jb51.net/") 这个方法是只针对IE的，不适用于火狐等其他

浏览器，在HTML DOM Window Object中，根本没有列出window.navigate这个方法，所

以这个方法尽量少用，遗忘最好。

location 属性是兼容所有浏览器的。因此在实现页面跳转的时候还是使用这个比较靠

谱，比如：

<a οnclick="javascript:window.location.href='http://jb51.net/'">脚本之家</a>
详细出处参考：http://www.jb51.net/article/41497.htm
（4）setInterval每隔一段时间执行指定代码，第一个参数为代码的字符串，第二个为

间隔时间（单位毫秒），返回值为定时器的标识：setInterval("alert

('hello')",5000);
(5)clearInterval取消setInterval的定时执行，相当于Timer中的Enabled=false。因

为setInterval可以设定多个定时，所以clearInterval要指定清除那个定时器的标识，

即setInterval的返回值。
var interval=setInterval("alert('hello')",5000);
clearInterval(interval);
(6)setTimeout也是定时执行，但是不像setInterval那样是重复的定时执行，只执行一

次，clearTimerout也是清除定时，区分：interval(间隔)，timeout：（超时）。
var timeout=setTimerout("alert('hello')",2000);


function scroll(){
var title=document.title;
var firstch=title.charAt(0);
var leftstr=title.substring(1,title.length);
document.title=leftstr+firstch;
}
//setInterval("scroll()",500);
<button οnclick="setInterval('scroll()',500)">滚动</button>
注意：点击会越来越快，因为启动了多个定时器；
<button οnclick="timerId=setInterval('scroll()',500)">滚动</button>
<button οnclick="clearInterval(timerId)">清除定时器</button>
6.body,document对象的事件：
（1）onload:网页加载完毕触发，浏览器是一边下载文档、一边解析执行，可能会出现

javascript执行时需要操作某个元素，这个元素还没有加载，如果这样就要把操作的代

码放到onload事件中，或者可以把javascript放到元素之后；元素的onload事件是元素

自己的加载完毕时触发，body onload才是全部加载完成。
（2）onunload：网页关闭或者离开后触发；
（3）onbeforeunload:在网页准备关闭（或者离开）后触发。在事件中为

window.event.returnValue赋值（要显示的警告消息），这样窗口离开（比如前进、后

退、关闭）就会弹出确认消息<body οnbefοreunlοad="window.event.returnValue='退

出吗？'">
（4）通用的html事件
onclick\ondblclick\onkeydown\onkeypress\onkeyup\onmousedown\onmousemove

\onmouseout\onmouseover\onmouseup等；
7.window对象的属性：
（1）window.location.href='http://www.baidu.com',重新导向新的地址，和

navigation方法效果一样，window.location.reload()刷新页面；
<script type="text/javascript">
function ff(){
location.href="http://www.baidu.com";
}
</script>
（2）window.event是非常重要的属性，用来获得发生事件时的信息，事件不局限于

window对象的事件，所有元素的事件都可以通过event属性取得到相关信息。
altKey属性，bool类型，表示发生事件时的alt键是否被按下，类似的还有

ctrlKey\shiftKey属性，例子:
function myClick1(){
if(event.altKey)
{
alert("alt点击");
}
else
{
alert("普通点击");
}
}
clientX,clientY发生事件时鼠标在客户区的坐标；screenX,screenY发生事件

时鼠标在屏幕上的坐标；offsetX、offsetY发生事件时鼠标相对于事件源（比如点击按

钮是触发onclick）的坐标；
returnValue属性，如果将returnValue设置为false，就会取消默认事件的处

理。在超链接的onclick里面禁止fangwenhref的页面。在表单校验的时候禁止提交表单

到服务器。
srcElement,获得事件源对象；
keyCode发生时间时的按键值；
button发生时间时鼠标按键，1为左键，2为右键，3为左右键同时按
<body οnmοusedοwn="if(event.button==2){alert('禁止复制');}">

（3）screen对象，屏幕信息
alert("分辨率："+screen.width+"*"+screen.height);
if(screen.width<1024||screen.heigth<768){
alert("分辨率太低");
}
（4）clipboardData对象，对粘贴板的操作。
clearData("Text")清空粘贴板；
getData("Text")读取粘贴板的值，返回值为粘贴板中的内容；
setData("Text",val),设置粘贴板中的值。

function copy(){
var text=location.href;
window.clipboardData.setData('Text', "网页地址为："+text);
alert("已经复制");
}//貌似只有ie有效果；
<body οncοpy="alert('禁止复制');return false;">很多元素也有oncopy、onpaste事

件，return false就是禁止复制；
在网站中复制文章的时候，为了防止那些拷贝党不添加文章来源，自动在复制的内容后

添加版权声明。
function modifyClipboard(){
clipboardData.setData('Text',clipboardData.getData('Text')+'本文来自

传智播客'+location.href);
}
οncοpy="setTimeout('modifyClipboard()',100)";
不能直接在oncopy中执行对粘贴板的操作，因此设定定时器，0.1秒后执行，这样就不

在oncopy的执行调用栈上了。用户复制动作发生0.1秒以后再去改粘贴板中的内容。

100ms只是一个经常取值，写其它都行。不能直接在oncopy里修改粘贴板。
（5）history操作历史记录
window.history.back()后退；window.history.forward()前进。也可以用

window.history.go(-1),window.history.go(1)前进。
（6）document属性。
document方法：
write向文档中动态写入内容；writteIn最后多一个回车；
<input type="button" value="点击" οnclick="document.write('<font

color=red>nihao</font>')"/>;
在onclick等事件中写的代码会冲掉页面中的内容，只有在页面加载过程中write才会与

原有内容融合在一起。
<script type="text/javascript">
document.write('<font color=red>你好</font>');
</script>
wirte经常在广告代码、整合资源源代码中被使用。
广告联盟；
百度新闻代码（内容联盟）；
内容联盟、广告代码，不需要被主页面的站长去维护内容，只要被嵌入的js内容提供商

修改内容，显示的内容就变了；
在自己的网站上用上cnzz的javascript代码就可以统计网站的访问量；
getElementById：根据元素id获得对象，网页中id不能重复，也可以直接通过元素的id

来引用元素，但是有有效范围之类的问题。因此不建议直接通过id操作元素，而是通过

getElementById；
取得textbox的值两种方法：
方法一：直接根据id点value操作控件，如果input放在了form里面则formid点输入框的

id点value；

<script type="text/javascript">
var str;
function btnClick(){
str=txt1.value;
txt2.value=str;
}
</script>
方法二：getElementById获得对象；
function btnClick2(){
var txtstr1=document.getElementById("txt1");
var txtstr2=document.getElementById("txt2");
txtstr2.value=txtstr1.value;
}
getElementByName，根据元素name获得对象，由于name可以重复，比如多个

RadioButton的name，因此getElementByName返回值是对象数组；
function btnClick3(){
var genders=document.getElementsByName

("gender");
//js中for(var gender in genders)不像c#的

foreach，js遍历的是key；
/*for(var gender in genders){
alert(gender.value);
}*/
for(var i=0;i<genders.length;i++){
var gender=genders[i];
alert(gender.value);
}
}
getElementsByTagName，获得指定标签名称的元素数组，比如getElementsByTagName

("p")可以获得所有的<p>标签。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function haha(){
var buttons=document.getElementsByTagName

("input");
for(var i=0;i<buttons.length;i++){
var b=buttons[i];
b.οnclick=btnClick;
}

}
function btnClick(){
var buttons=document.getElementsByTagName

("input");
for(var i=0;i<buttons.length;i++){
var b=buttons[i];
//window.event.srcElement取到引发事

件的控件；
if(b==window.event.srcElement){
b.value="nimei";
}else{
b.value="haha";
}
}
}

</script>
</head>

<body οnlοad="haha()">
<input type="button" value="haha"/>
<input type="button" value="haha"/>
<input type="button" value="haha"/>
<input type="button" value="haha"/>
</body>
8.Dom案例：
注册表单倒数：（btn.disabled=true）
(1)注册按钮初始化状态为不可用，disabled；
(2)启动定时器，setInterval，1秒钟运行一次CountDown方法，设定一个初始值为10的

全局变量，在CountDown方法中对全局变量倒数，然后将倒数的值写到注册按钮上。
(3)直到全局变量值《=0就让注册按钮可用；将按钮文本设置为“同意”；
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var leftSeconds=10;
var intervalId;
function CounDown(){
var login=document.getElementById("btnLogin");
if(login){
if(leftSeconds<=0){
login.value="同意";
login.disabled="";
clearInterval(intervalId);
}
else{
login.value="还

剩"+leftSeconds+"秒";
leftSeconds--;
}
}
}
intervalId=setInterval("CounDown()",1000);
</script>
</head>

<body>
<textarea rows="10" cols="60"></textarea><br /><br />
<input id="btnLogin" type="button" value="同意" disabled="disabled"/>

</body>

9.Demo2加法计算器txt1=parseInt(txt1,10);字符串转换为十进制数；
<script type="text/javascript">
function myClick(){

var txt1=document.getElementById("txt1").value;
var txt2=document.getElementById("txt2").value;
txt1=parseInt(txt1,10);
txt2=parseInt(txt2,10);
var result=document.getElementById("result");
result.value=txt1+txt2;
}
</script>
10. <script type="text/javascript">
function refresh(){
var image=document.getElementById("imgMM");
if(!image){return;}
var now=new Date();
var fileName=now.getSeconds()+".jpg";
//alert(fileName);
image.src="images/"+fileName;
}
setInterval("refresh()",1000);
</script>

橙子2014

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
dom学习笔记

1.使用javascript操作dom进行dhtml开发；2.dom就是html页面的模型，将每个便签都作为一个对象，javascript通过调用dom中的属性方法就可以对网页中的文本框，层等元素进行编程控制。比如通过操作文本框的dom对象就可以读取文本框中的值、设置文本框中的值。dom也像winform一样，通过事件、属性、方法进行编程。3.css+javas
复制链接

扫一扫

专栏目录