目录

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. 代码

解释:

1. 获取元素:

   • 获取容器和小球元素。

2. 定义小球初始位置:

   • 设置小球的初始位置。

3. 定义小球移动速度:

   • 定义了一个未使用的速度变量。

4. 生成随机坐标:

   • 定义一个函数生成随机坐标。

5. 小球移动函数:

   • 移动小球并设置随机颜色。

6. 绑定点击事件:

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

7. 初始移动:

   • 页面加载时调用一次移动函数。

8. 生成随机颜色:

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

2. 效果

4. 根据选择器获取元素

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

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

案例: 控制小球移动

1. 代码

    
    
    

    




    

        

    

    
    

        向上移动
        向下移动
        向左移动
        向右移动
    
    
    

2. 效果

初始状态

        小球是动态的

控制小球向右移动

控制小球向下移动

控制小球向左移动

控制小球向上移动

5. 获取 HTML 的基本元素

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

 html元素

• 描述：这是整个 HTML 文档的根元素，它包含了所有的其他元素。
• 获取方法：
  • document.documentElement 属性返回  元素。

 head元素

• 描述：这个元素包含了所有关于文档头部的信息，如标题（）、样式表链接（）和脚本引用（）等。
• 获取方法：
  • 在现代浏览器中，可以使用 document.head 属性直接获取  元素。
  • 如果 document.head 不可用（在非常旧的浏览器中），可以使用 getElementsByTagName 方法。

 body元素

• 描述：这是文档的主要内容部分，几乎所有的可视内容都是在这个元素内部显示的。
• 获取方法：
  • 使用 document.body 属性可以直接访问  元素。

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

1. 代码

    
    
    
    



    
    
欢迎来到我的网站

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

    
    

        
项目一
        
项目二
        
项目三
    

    
    CSDN

    
    

        

            
姓名
            
年龄
            
城市
        
        

            
张三
            
25
            
北京
        
        

            
李四
            
30
            
上海
        
    

    
    

        姓名:
        


        邮箱:
        


        
    

    
    

2. 效果

页面的基本情况

控制台获取的元素

获取头部信息

获取身体信息

获取根元素

获取表单信息

附录

素材下载地址:

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