JavaScript中DOM：document（网页）

最新推荐文章于 2025-05-15 14:26:55 发布

原创

最新推荐文章于 2025-05-15 14:26:55 发布 · 1.7k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #microsoft #开发语言 #前端 #html5 #ecmascript

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('哈哈哈哈');

};

};