相思资源网 Design By www.200059.com
今天学习了DOM，做了以下一些基础练习……
DOM是Document Object Model文档对象模型的缩写；使用JavaScript操作DOM进行DHTML开发。
学习目标：能够使用JavaScript操作Dom实现常见的DHTML效果。
参考书：张孝祥《JavaScript网页开发——体验式学习教程》
一、DOM的入门：
1、DOM就是HTML页面的模型，将每个标签都做为一个对象，JavaScript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行编
程控制。比如通过操作文本框的DOM对象，就可以读取文本框中的值、设置文本框中的值。
2、DOM也像WinForm一样，通过事件、属性、方法进行编程。
3、CSS+JavaScript+DOM=DHTML（即动态 HTML，是HTML语言的扩展。它可以增加文档与对象的演示文稿效果。）
二、事件：
1、事件：<body onmousedown="alert('哈哈')">当点击鼠标的时候执行onmousedown中的代码。有时间事件响应的代码太多，就放到单独的函
数中：
复制代码 代码如下:
<script type="text/javascript">
function bodymousedown()
{
alert("网页被点坏了，赔吧！");
alert("逗你玩的！");
}
</script>
<body onmousedown="bodymousedown()">
请注意：bodymousedown后的括号不能丢，因为表示调用bodymousedown函数，而不是onmousedown事件的响应函数是bodymousedown。
2、动态设置事件：
可以在代码中动态设置事件响应函数，就像.Net中"btn.Click+="一样。
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function bodymousedown() {
alert("网页被点坏了,赔吧!");
alert("逗你玩的!");
}
function f1() {
alert("我是f1");
}
function f2() {
alert("我是f2");
}
</script>
</head>
<body>
<input type="button" onclick="document.ondblclick=f1" value="关联事件1" />
<input type="button" onclick="document.ondblclick=f2" value="关联事件2" />
</body>
</html>
3、window对象代表当前浏览器窗口，使用window对象的属性、方法的时候可以省略window，比如window.alert('a')可以省略成alert('a')
1）alert方法，弹出消息对话框
2）confirm方法，显示“确定”、“取消”对话框，如果按了【确定】按钮，就返回true，否则就false。
if(confirm("是否继续？"))
｛
alert("确定");
｝
else
{ alert("取消");}
3）重新导航到指定的地址：navigate("http://www.microsoft.com/");
4) setInterval每隔一段时间执行指定的代码，第一个参数为代码的字符串，第二个参数为间隔时间（单位毫秒），返回值为定时器的标识。如：setInterval("alert('hello')",5000);
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>欢迎光临我的主页</title>
<script type="text/javascript">
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);
</script>
</head>
<body>
</body>
</html>
5) clearInterval取消setInterval的定时执行，相当于Timer中的Enabled=False。因为setInterval可以设定多个定时，所以clearInterval要指定清除那个定时器的标识，即setInterval的返回值。var intervalld= setInterval("alert('hello')",5000);
clearInterval(intervalld);
6) setTimeout也是定时执行，但是不像setInterval那样是定时执行，而是设定时间后只执行一次，clearTimeout也是清除定时。
很好区分：Interval是定时；Timeout是超时之意。如：var timeoutld=setTimeout("alert('hello')",2000);
案例：实现标题栏走马灯的效果，也就是浏览器的标题文字每隔500ms向右滚动一下。提示：标题为document.title属性。
4、1）onload:网页加载完毕时触发，浏览器是一边下载文档、一边解析执行，可能会出现JavaScript执行时需要操作某个元素，这个元素还没有加载，如果这样就要把操作的代码放到body的onload事件中，或者可以把JavaScript放到元素之后。元素的onload事件是元素自己加载完毕时触发，而body 里的onload才是全部加载完成。
2）onunload：网页关闭（或者离开）后触发。在事件中为 "Window.event.returnValue"赋值（要显示的警告消息），这样窗口离开（比如前进、后退、关闭）就会弹出确认消息。如：<body onbeforeunload="Window.event.returnValue='真的要放弃发贴退出吗？'">
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
//showModelDialog('HTMLPageWindow.htm');//被拦截
//btn.value = "OK";//报错，因为btn元素还没有被构建
</script>
</head>
<body onload="btn.value='OK';" onbeforeunload="window.event.returnValue='真的要放弃发贴退出吗？文章会被丢失!';">
<input type="button" id="btn" value="模态对话框" onclick="showModelessDialog('HTMLPageWindow.htm')" />
<input type="text" />
<textarea cols="20" rows="20"></textarea>
</body>
</html>
5、其它事件：
除了有特有的属性之外，当然还有通用的HTML元素的事件：onclick(单击)、ondblclick(双击)、onkeydown(按键按下)、onkeyup(按键释放)、onkeypress(点击按键)、onmousedown(鼠标按下)、onmousemove(鼠标移动)、onmouseout(鼠标离开元素范围)、
onmouseover(鼠标移动到元素范围)、onmouseup(鼠标按键释放)等。
三、window对象的属性
1、window.location.href="http://www.sina.com.cn",重新导向新的地址，和navigate方法效果一样。window.location.reload()刷新页面。
2、window.event是非常重要的属性，用来获得发生事件时的信息，事件不局限于window对象的事件，所有元素的事件都可以通过event属性取到相关信息。
1) altKey属性，boot类型，表示发生事件时alt键是否被按下，类似的还有ctrlKey、shiftKey属性，例子<input type="button" value="点击" onclick="if(event.altKey)
{alert('Alt点击')}else{alert('普通点击')}"/>;
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<input type="button" value="href" onclick="alert(location.href)" />
<input type="button" value="重定向" onclick="location.href='HTMLPage1.htm'" />
<input type="button" value="点击" onclick="if(window.event.ctrlKey){alert('按下了Ctrl')}else{alert('普通点击')}" />
<a href="http://www.baidu.com" onclick="alert('禁止访问！');window.event.returnValue=false;">百毒</a>
<form action="jing.aspx">
<input type="submit" value="提交" onclick="alert('数据有问题!');window.event.returnValue=false;" />
</form>
</body>
</html>
2) clientX、clientY 发生事件时鼠标在客户区的坐标；screenX、screenY发生事件时鼠标在屏幕上的坐标；offsetX、offsetY发生事件时鼠标相对于事件源（比如点击按钮时触发onclick）的坐标。
3）returnValue属性，如果将returnValue设置为false，就会取消默认事件的处理。
4）srcElement:获得事件源对象
5）KeyCode：发生时间时的按键值
6）button：发生时间时鼠标的按键，1为左键，2为右键，3为左右键同时按。<body onmousedown="if(event.button==2){alert('禁止复制')}">
DOM是Document Object Model文档对象模型的缩写；使用JavaScript操作DOM进行DHTML开发。
学习目标：能够使用JavaScript操作Dom实现常见的DHTML效果。
参考书：张孝祥《JavaScript网页开发——体验式学习教程》
一、DOM的入门：
1、DOM就是HTML页面的模型，将每个标签都做为一个对象，JavaScript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行编
程控制。比如通过操作文本框的DOM对象，就可以读取文本框中的值、设置文本框中的值。
2、DOM也像WinForm一样，通过事件、属性、方法进行编程。
3、CSS+JavaScript+DOM=DHTML（即动态 HTML，是HTML语言的扩展。它可以增加文档与对象的演示文稿效果。）
二、事件：
1、事件：<body onmousedown="alert('哈哈')">当点击鼠标的时候执行onmousedown中的代码。有时间事件响应的代码太多，就放到单独的函
数中：
复制代码 代码如下:
<script type="text/javascript">
function bodymousedown()
{
alert("网页被点坏了，赔吧！");
alert("逗你玩的！");
}
</script>
<body onmousedown="bodymousedown()">
请注意：bodymousedown后的括号不能丢，因为表示调用bodymousedown函数，而不是onmousedown事件的响应函数是bodymousedown。
2、动态设置事件：
可以在代码中动态设置事件响应函数，就像.Net中"btn.Click+="一样。
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function bodymousedown() {
alert("网页被点坏了,赔吧!");
alert("逗你玩的!");
}
function f1() {
alert("我是f1");
}
function f2() {
alert("我是f2");
}
</script>
</head>
<body>
<input type="button" onclick="document.ondblclick=f1" value="关联事件1" />
<input type="button" onclick="document.ondblclick=f2" value="关联事件2" />
</body>
</html>
3、window对象代表当前浏览器窗口，使用window对象的属性、方法的时候可以省略window，比如window.alert('a')可以省略成alert('a')
1）alert方法，弹出消息对话框
2）confirm方法，显示“确定”、“取消”对话框，如果按了【确定】按钮，就返回true，否则就false。
if(confirm("是否继续？"))
｛
alert("确定");
｝
else
{ alert("取消");}
3）重新导航到指定的地址：navigate("http://www.microsoft.com/");
4) setInterval每隔一段时间执行指定的代码，第一个参数为代码的字符串，第二个参数为间隔时间（单位毫秒），返回值为定时器的标识。如：setInterval("alert('hello')",5000);
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>欢迎光临我的主页</title>
<script type="text/javascript">
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);
</script>
</head>
<body>
</body>
</html>
5) clearInterval取消setInterval的定时执行，相当于Timer中的Enabled=False。因为setInterval可以设定多个定时，所以clearInterval要指定清除那个定时器的标识，即setInterval的返回值。var intervalld= setInterval("alert('hello')",5000);
clearInterval(intervalld);
6) setTimeout也是定时执行，但是不像setInterval那样是定时执行，而是设定时间后只执行一次，clearTimeout也是清除定时。
很好区分：Interval是定时；Timeout是超时之意。如：var timeoutld=setTimeout("alert('hello')",2000);
案例：实现标题栏走马灯的效果，也就是浏览器的标题文字每隔500ms向右滚动一下。提示：标题为document.title属性。
4、1）onload:网页加载完毕时触发，浏览器是一边下载文档、一边解析执行，可能会出现JavaScript执行时需要操作某个元素，这个元素还没有加载，如果这样就要把操作的代码放到body的onload事件中，或者可以把JavaScript放到元素之后。元素的onload事件是元素自己加载完毕时触发，而body 里的onload才是全部加载完成。
2）onunload：网页关闭（或者离开）后触发。在事件中为 "Window.event.returnValue"赋值（要显示的警告消息），这样窗口离开（比如前进、后退、关闭）就会弹出确认消息。如：<body onbeforeunload="Window.event.returnValue='真的要放弃发贴退出吗？'">
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
//showModelDialog('HTMLPageWindow.htm');//被拦截
//btn.value = "OK";//报错，因为btn元素还没有被构建
</script>
</head>
<body onload="btn.value='OK';" onbeforeunload="window.event.returnValue='真的要放弃发贴退出吗？文章会被丢失!';">
<input type="button" id="btn" value="模态对话框" onclick="showModelessDialog('HTMLPageWindow.htm')" />
<input type="text" />
<textarea cols="20" rows="20"></textarea>
</body>
</html>
5、其它事件：
除了有特有的属性之外，当然还有通用的HTML元素的事件：onclick(单击)、ondblclick(双击)、onkeydown(按键按下)、onkeyup(按键释放)、onkeypress(点击按键)、onmousedown(鼠标按下)、onmousemove(鼠标移动)、onmouseout(鼠标离开元素范围)、
onmouseover(鼠标移动到元素范围)、onmouseup(鼠标按键释放)等。
三、window对象的属性
1、window.location.href="http://www.sina.com.cn",重新导向新的地址，和navigate方法效果一样。window.location.reload()刷新页面。
2、window.event是非常重要的属性，用来获得发生事件时的信息，事件不局限于window对象的事件，所有元素的事件都可以通过event属性取到相关信息。
1) altKey属性，boot类型，表示发生事件时alt键是否被按下，类似的还有ctrlKey、shiftKey属性，例子<input type="button" value="点击" onclick="if(event.altKey)
{alert('Alt点击')}else{alert('普通点击')}"/>;
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<input type="button" value="href" onclick="alert(location.href)" />
<input type="button" value="重定向" onclick="location.href='HTMLPage1.htm'" />
<input type="button" value="点击" onclick="if(window.event.ctrlKey){alert('按下了Ctrl')}else{alert('普通点击')}" />
<a href="http://www.baidu.com" onclick="alert('禁止访问！');window.event.returnValue=false;">百毒</a>
<form action="jing.aspx">
<input type="submit" value="提交" onclick="alert('数据有问题!');window.event.returnValue=false;" />
</form>
</body>
</html>
2) clientX、clientY 发生事件时鼠标在客户区的坐标；screenX、screenY发生事件时鼠标在屏幕上的坐标；offsetX、offsetY发生事件时鼠标相对于事件源（比如点击按钮时触发onclick）的坐标。
3）returnValue属性，如果将returnValue设置为false，就会取消默认事件的处理。
4）srcElement:获得事件源对象
5）KeyCode：发生时间时的按键值
6）button：发生时间时鼠标的按键，1为左键，2为右键，3为左右键同时按。<body onmousedown="if(event.button==2){alert('禁止复制')}">
标签：
DOM,学习笔记
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无js DOM的学习笔记的评论...
一口气升级7个大模型SaaS应用，百度智能云：突出一个“开箱即用” - 2024/11/19
这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。
一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。
另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。
这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。
一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。
另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。
稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！
昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？