1.1 DOM: document=网页
在JS中,浏览器已经为我们提供了document对象
document对象代表整个网页,该对象由浏览器提供,可以直接使用
<body>
<button id="btn">我是一个按钮</button>
<script>
// 在JS中,浏览器已经为我们提供了document对象
// document对象代表整个网页,该对象由浏览器提供,可以直接使用
// getElementById()是document的方法,通过方法可以根据元素的id属性获取一个元素
var btn = document.getElementById('btn');
// 修改btn的innerHTML属性
btn.innerHTML = "I'm Button";
// alert(btn.innerHTML);
// alert(btn);
// 通过JS来修改button中的文字
</script>
</body>
对象的分类:
JS中,可以将对象分为“内部对象”、“宿主对象”和“自定义对象”三种。
1,内部对象
js中的内部对象包括Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、String以及各种错误类对象,包括Error、EvalError、RangeError、ReferenceError、SyntaxError和TypeError。
其中Global和Math这两个对象又被称为“内置对象”,这两个对象在脚本程序初始化时被创建,不必实例化这两个对象。
2.宿主对象
宿主对象就是执行JS脚本的环境提供的对象。对于嵌入到网页中的JS来说,其宿主对象就是浏览器提供的对象,所以又称为浏览器对象,如IE、Firefox等浏览器提供的对象。不同的浏览器提供的宿主对象可能不同,即使提供的对象相同,其实现方式也大相径庭!这会带来浏览器兼容问题,增加开发难度。
浏览器对象有很多,如Window和Document,Element,form,image,等等。
3.自定义对象
顾名思义,就是开发人员自己定义的对象。JS允许使用自定义对象,使JS应用及功能得到扩充
1.2 事件(event)
事件(event)
- 事件指用户和浏览器的交互瞬间
- 在网页中,像点击鼠标、缩放窗口、点击键盘、移动鼠标...
- 可以在事件时来对事件做一些处理,对其进行响应
<body>
<!-- 设置事件响应的方式一:
- 可以通过在元素的事件属性中设置js代码的形式来响应事件
https://developer.mozilla.org/zh-CN/docs/Web/Events -->
<!--<button id="btn" onmouseenter="alert('你点我干嘛!');">点我一下</button>-->
<button id="btn">点我一下</button>
<script>
/*设置事件响应的方式二:
- 可以在script标签来设置事件的响应*/
// 获取要设置事件的对象
var btn = document.getElementById('btn');
// 可以为元素对应的事件属性设置响应函数形式来处理事件
btn.onclick = function () {
alert('哈哈哈');
};
</script>
</body>
1.3网页加载window.onload:
网页的加载是按照自上向下的顺序一行一行加载的
Window.onload 函数只能绑定一个!
如果将script标签写在网页的上方,它会优先于body加载
编写DOM相关的代码时,有两个编写位置:
1.编写在body标签的最后
2.编写在window.onload = function(){}的响应函数中
// 希望还是将代码写在网页上边
// 希望这些代码,可以在网页加载完毕之后在执行
// load事件表示资源加载,当资源加载完毕后事件会触发
window.onload = function () {
// window的load事件,会在网页加载完毕后触发
// 可以将希望在网页加载完才执行的代码,统一设置在load事件的响应函数中
// 这样即可确保代码在网页加载完成后才执行
//获取id为btn的元素
var btn = document.getElementById('btn');
//为btn绑定单击响应函数
btn.onclick = function () {
alert('哈哈哈哈');
};
};