记录我的旅程1之JavaScript Dom学习笔记

前言：随着工作了几个月的时间，我感觉到我们在学校学到的东西真的好少哦，由于现在在公司做一个项目，而这个项目中我的角色是后台代码的编写，但是我也在是不是的调试JavaScript代码，虽然老师当年交了我们，但是现在忘的差不多了。所以我抽时间看视频重新学习了一下JS,这里是我的学习笔记，希望对我们想要学习JS初级的同学有用，所以我就产生了这个系列。

Dom入门

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

JavaScript——>Dom就像C#——>.NET FrameWork

(2) Dom也像Winform一样，通过事件，属性，方法进行编程。

(3) CSS+JavaScript+Dom=DHTML。

事件

(1) 事件：<body onmousedown=”alert(‘欢迎您’);alert(‘来访问’);”>当点击鼠标的时候执行onmousedown中的代码，有时候事件响应的代码太多，就放到单独的函数中。

function bodymousedown() {

alert('欢迎您');

alert('韩迎龙');

}

</script>

bodymousedown()后面的括号不能丢，因为表示调用bodymousedown函数，而不是onmousedown事件的响应函数是bodymousedown。

动态设置事件

(1) 可以在代码中动态设置事件响应函数,就像.NET中的btnClick+=一样。

function trends1() {

alert("动态创建事件1");

}

function trends2() {

alert("动态创建事件2");

}

</script>

注意：trends1,trends2不要加括号

window对象1

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

(2) alert方法，弹出消息对话框。

(3) confirm方法，显示”确定”，”取消”对话框，如果按了[确定]按钮，就返回True,否则就返回False。

function ConfirmDemo() {

if (confirm("是否进入")) {

alert("进入");

}

else {

alert("没进入");

}

(4) 重新导航到指定的地址：navigate(“http://www.baidu.com”);

(5) setInterval每隔一段时间执行制定的代码，第一个参数为代码的字符串，第二个参数为间隔时间（单位毫秒），返回值为定时器的标识。

function setInterVal() {

setInterval("alert('Hello')", 1000); //注意被执行的代码必须是字符串形式，也

} 可以写一个匿名函数

(6) clearInterval取消setInterval的定时执行，相当于timer中的Enable=false，因为setInterval可以设定多个定时，所以clearInterval要指定清除那个定时器的标识，即SetInterval的返回值。

var intervalId = setInterVal("alert('Hello')", 5000);

clearInterval(intervalId);

var intervalId;

function startInterVal() {

intervalId = setInterVal("alert('Hello')", 10000);

}

(7) SetTimeout也是定时执行，但是不像setInterval那样是重复的定时执行，只执行一次，clearTimeout也是清楚定时，很好区分。Interval;间隔，Timeout超时。

var TimeoutId = setTimeout("alert('Hi')", 1000);‘

(8) 举例说明

案例1：实现标题栏走马灯效果，也就是浏览器标题栏文字每隔5000MS向右滚动一下。提示：标题为document.title属性。

<title>本网站非常欢迎您</title>

function scroll() {

var title = document.title; //获取标题栏的值

var firstCh = title.charAt(0); //获取标题栏的第一个字符

var lastStr = title.substring(1, title.length); //获取标题栏剩余的字符

document.title = lastStr + firstCh;

}

setInterval("scroll()", 500);

</script>

Dom事件1——body.document对象的事件

(1) onload:网页加载完毕时候触发，浏览器是一边下载文档，一边解析执行，可能会出现JavaScript执行时需要操作某个元素，这个元素还没有加载，如果这样就要把操作的代码放到onload事件中，或者可以把JavaScript放到元素之后。

(2) onunload：网页关闭（或者离开）后触发。

注释：元素的onload事件是元素自己加载完毕时触发，body的onload才是全部加载完成。

例1：获取onload改变某个HTML控件的值

<!--<script type="text/javascript">

btn.value = "OK"; //报错，因为btn元素还没有构建

</script>-->

例2：试验onunload的试验

(3) onbeforeunload：在网页中准备关闭（或者离开）后触发，所以在事件中为：”window.event.returnValue”赋值（要显示的警告信息），这样窗口离开(比如前进，后退，关闭，刷新)就会弹出确认信息。

举例：当我们关闭浏览器的时候会提示信息，问我们是否离开本页面

</body>

(4) 除了有特有的属性之外，当然还有通用的HTML元素的事件，onclick(单击)，ondbclick(双击)，onkeydown（按键按下），onkeyPress（点击按键），onkeyUp（按键释放），onmousedown（鼠标按下），ommousemove（鼠标移动），onmouseout（鼠标离开元素范围），onmouseover（鼠标移动到元素范围），onmouseUp（鼠标按键释放）。