JavaScript中DOM:document(网页)

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

};

};

1.4 DOM 查询:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值