成都工业学院Web技术基础（WEB）实验八：BOM、DOM基本操作

写在前面

1、基于2022级计算机大类实验指导书

2、代码仅提供参考，前端变化比较大，按照要求，只能做到像，不能做到一模一样

3、图片和文字仅为示例，需要自行替换

4、如果代码不满足你的要求，请寻求其他的途径

运行环境

window11家庭版

WebStorm 2023.2.2

实验要求、源代码和运行结果

1、采用HBuilder 编写代码，实现图8-1所示的效果，要求：

① 自动弹出图片。

② 定时5秒钟之后,关闭广告。

图8-1  实验内容1效果示意图

（1）新建html文档，命名为exp-14-1.html。

（2）确定事件: 页面加载完成的事件 onload。

（3）事件要触发函数:  init()。

（4）init函数功能: 启动一个定时器 : setTimeout() ；显示一个广告；再去开启一个定时5秒钟之后,关闭广告。

注：img.style.display = "none"; //img为获取的图片元素，"block"显示图片， "none"不显示。

第五秒前

第五秒及以后

2、采用HBuilder 编写代码，实现图8-2所示的页面效果，要求：

① 按图8-2左侧图进行页面布局。 

② 点击创建节点按钮后，新增H2标签，并将其添加到DIV中，变化后的效果如图8-2

右侧图所示。

图8-2添加节点效果示意图

（1）新建html文档，在标签之间书写JavaScript代码实现功能。

（2）采用

标签构建页面，并设置div的样式，使其达到图8-2左侧的效果。

（3）通过var text = document.createTextNode()创建文本节点。

（4）通过var h2Obj = document.createElement()创建节点元素。

（5）通过h2Obj.appendChild(text)将文本节点添加到h2节点对象中。

（6）与步骤（5）相同，将h2节点添加到div元素中。最终效果如8-2右侧图所示。

    
    
    
    



    创建节点

点击创建节点前

点击创建节点后