目录

1.根据id属性获取元素

案例:点击使球球变大

1.代码

解释:

2.效果

2.根据标签名获取元素

案例:点击显示图片

1.代码

2.效果

3.根据类名获取元素

案例:点击使小球随机移动随机获取颜色

1.代码

2.效果

4.根据选择器获取元素

案例:控制小球移动

1.代码

2.效果

5.获取HTML的基本元素

html元素

head元素

body元素

案例:获取网页的基本机构

1.代码

2.效果

附录

素材下载地址:

1.根据id属性获取元素

根据id属性获取元素 使用 document.getElementById() 方法可以根据元素的ID来获取该元素。这个方法返回的是一个单一的元素对象，因为在一个HTML文档中，ID应该是唯一的。

案例:点击使球球变大

1.代码

解释:

获取元素:

这行代码通过 getElementById 方法获取页面上 ID 为 "ball" 的元素，并将其赋值给变量 ball。

定义初始宽度和高度:

这两行代码定义了两个变量 ballWidth 和 ballHeight，分别表示球的初始宽度和高度，初始值均为 100 像素。

绑定点击事件:

这段代码为 ball 元素绑定了一个点击事件处理函数。当用户点击 ball 元素时，事件处理函数会被执行：

ballWidth 和 ballHeight 分别增加 100 像素。使用 ball.style.width 和 ball.style.height 更新元素的宽度和高度属性，并将它们设置为新的值加上 "px" 后缀。

2.效果

2.根据标签名获取元素

使用 document.getElementsByTagName() 方法可以根据元素的标签名称来获取所有匹配的元素。这个方法返回的是一个NodeList对象，类似于数组，包含了所有具有给定标签名的元素。

案例:点击显示图片

1.代码

点击显示图片，再次点击取消显示

2.效果

初始状态

点击一次的状态

再次点击之后的状态

3.根据类名获取元素

使用 document.getElementsByClassName() 方法可以根据元素的类名来获取所有匹配的元素。同样，这个方法返回的是一个NodeList对象。

案例:点击使小球随机移动随机获取颜色

1.代码

解释:

获取元素:

获取容器和小球元素。 定义小球初始位置:

设置小球的初始位置。 定义小球移动速度:

定义了一个未使用的速度变量。 生成随机坐标:

定义一个函数生成随机坐标。 小球移动函数:

移动小球并设置随机颜色。 绑定点击事件:

给容器绑定点击事件，点击时调用移动函数。 初始移动:

页面加载时调用一次移动函数。 生成随机颜色:

定义一个函数生成随机颜色。

2.效果

4.根据选择器获取元素

使用 document.querySelector() 或 document.querySelectorAll() 方法可以根据CSS选择器来获取元素。querySelector() 返回第一个与指定选择器匹配的元素节点，而 querySelectorAll() 返回所有匹配的元素节点列表（静态 NodeList）。

选择器可以是id选择器，类选择器等

案例:控制小球移动

1.代码

2.效果

初始状态

小球是动态的

控制小球向右移动

控制小球向下移动

控制小球向左移动

控制小球向上移动

5.获取HTML的基本元素

获取HTML的基本元素通常指的是获取文档的主要结构元素，比如、和等。下面是这些元素的简要说明以及如何使用JavaScript来获取它们：

html元素

描述：这是整个HTML文档的根元素，它包含了所有的其他元素。获取方法：

document.documentElement 属性返回 元素。

head元素

描述：这个元素包含了所有关于文档头部的信息，如标题（

欢迎来到我的网站

这是一个简单的示例网页，用于展示基本的HTML结构。

• 项目一
• 项目二
• 项目三

CSDN

姓名	年龄	城市
张三	25	北京
李四	30	上海

姓名:

邮箱:

2.效果

页面的基本情况

控制台获取的元素

获取头部信息

获取身体信息

获取根元素

获取表单信息

附录

素材下载地址:

aMouse.png等2个文件官方版下载丨最新版下载丨绿色版下载丨APP下载-123云盘