JavaScript 新手指南: 获取和操作 DOM 元素

原创于 2025-01-06 11:10:44 发布 · 796 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript #DOM #前端

前端专栏收录该内容

61 篇文章

订阅专栏

JavaScript获取元素

1、Web API 基本介绍
2、DOM--简介
3、获取元素方法
4、元素获取应用

1、Web API 基本介绍

APl (Application Programming Interface,应用程序编程接口)是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。简单理解:API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能
Web API是浏览器提供的一套操作浏览器功能和页面元素的API( BOM和DOM )
MDN 详细 API : MDN/Web API

2、DOM–简介

文档对象模型（Document Object Model，简称DOM)，是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口
W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式
DOM树：

在这里插入图片描述

文档:一个页面就是一个文档，DOM中使用document表示
元素:页面中的所有标签都是元素，DOM中使用element表示
节点:网页中的所有内容都是节点(标签、属性、文本、注释等)，DOM中使用node表示
DOM把以上内容都看做是对象

3、获取元素方法

在JavaScript中，有多种方法可以用来获取HTML文档中的元素。以下是一些常用的方法：

document.getElementById(id)
- 通过元素的id属性来获取单个元素。
- 示例：var element = document.getElementById('myId');

<div id="time">2024-10-1</div>

<script>
  // 1. 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面
  // 2. get 获得 element 元素 by 通过 驼峰命名法 
  // 3. 参数 id是大小写敏感的字符串
  // 4. 返回的是一个元素对象
  var timer = document.getElementById('time');
  console.log(timer);
</script>

document.getElementsByTagName(name)
- 通过标签名来获取所有匹配的元素，返回一个HTMLCollection。
- 示例：var elements = document.getElementsByTagName('div');

<ul>
  <li>知否知否，应是等你好久11</li>
  <li>知否知否，应是等你好久22</li>
  <li>知否知否，应是等你好久33</li>
  <li>知否知否，应是等你好久44</li>
</ul>

<script>
  // 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
  var lis = document.getElementsByTagName('li');
  console.log(lis);
  console.log(lis[0]);
  // 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式
  for (var i = 0; i < lis.length; i++) {
    console.log(lis[i]);

  }
</script>

document.getElementsByClassName(name)
- 通过类名来获取所有匹配的元素，返回一个HTMLCollection。
- 示例：var elements = document.getElementsByClassName('myClass');

<div class="box">盒子1</div>
<div class="box">盒子2</div>

<script>
  var boxs = document.getElementsByClassName('box');
  console.log(boxs);
</script>

document.querySelector(selectors)
- 使用CSS选择器来获取第一个匹配的元素。
- 示例：var element = document.querySelector('.myClass > .childClass');

<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
  <ul>
    <li>首页</li>
    <li>产品</li>
  </ul>
</div>

<script>
  // querySelector 返回指定选择器的第一个元素对象  切记 里面的选择器需要加符号 .box  #nav
  var firstBox = document.querySelector('.box');
  console.log(firstBox);
  var nav = document.querySelector('#nav');
  console.log(nav);
  var li = document.querySelector('li');
  console.log(li);
</script>

document.querySelectorAll(selectors)
- 使用CSS选择器来获取所有匹配的元素，返回一个NodeList。
- 示例：var elements = document.querySelectorAll('li.item');

<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
  <ul>
    <li>首页</li>
    <li>产品</li>
  </ul>
</div>

<script>
  // querySelectorAll()返回指定选择器的所有元素对象集合
  var allBox = document.querySelectorAll('.box');
  console.log(allBox);
  var lis = document.querySelectorAll('li');
  console.log(lis);
</script>

document.getElementsByName(name)
- 通过name属性获取具有指定名称的所有元素，通常用于表单元素，返回一个NodeList。
- 示例：var elements = document.getElementsByName('username');

<h2>用户注册表单</h2>
<form>
  <label for="username1">用户名 1:</label>
  <input type="text" id="username1" name="username" value="user1"><br><br>

  <label for="username2">用户名 2:</label>
  <input type="text" id="username2" name="username" value="user2"><br><br>

  <button type="button" onclick="showUsernameValues()">显示用户名值</button>
</form>

<script>
  // 当页面加载完成后执行
  window.onload = function () {
    // 获取所有 name 为 'username' 的元素
    var usernameFields = document.getElementsByName('username');

    // 遍历并输出每个元素的值
    for (var i = 0; i < usernameFields.length; i++) {
      console.log('用户名字段 ' + (i + 1) + ': ' + usernameFields[i].value);
    }
  };

  // 当点击按钮时，获取并显示所有 name 为 'username' 的元素的值
  function showUsernameValues() {
    var usernameFields = document.getElementsByName('username');
    var output = '';
    for (var i = 0; i < usernameFields.length; i++) {
      output += '用户名字段 ' + (i + 1) + ': ' + usernameFields[i].value + '\n';
    }
    alert(output);
  }
</script>

document.forms, document.images, document.links
- 这些是特殊的集合，可以直接访问文档中的所有表单、图片和链接。

<h2>表单、图片和链接示例</h2>

<!-- 表单 -->
<form name="myForm" action="/submit" method="post">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username"><br><br>
  <label for="password">密码:</label>
  <input type="password" id="password" name="password"><br><br>
  <button type="submit">提交</button>
</form>

<!-- 图片 -->
<img src="https://via.placeholder.com/150" alt="示例图片1">
<img src="https://via.placeholder.com/150" alt="示例图片2">

<!-- 链接 -->
<p>这里有一些链接：</p>
<a href="https://www.example.com">Example Link 1</a><br>
<a href="https://www.example.org">Example Link 2</a>

<script>
  // 当页面加载完成后执行
  window.onload = function () {
    // 获取所有的表单
    var forms = document.forms;
    console.log("表单数量: " + forms.length);
    for (var i = 0; i < forms.length; i++) {
      console.log("表单 " + (i + 1) + ": " + forms[i].name);
    }

    // 获取所有的图片
    var images = document.images;
    console.log("图片数量: " + images.length);
    for (var i = 0; i < images.length; i++) {
      console.log("图片 " + (i + 1) + ": " + images[i].src);
    }

    // 获取所有的链接
    var links = document.links;
    console.log("链接数量: " + links.length);
    for (var i = 0; i < links.length; i++) {
      console.log("链接 " + (i + 1) + ": " + links[i].href);
    }
  };
</script>

event.target
- 在事件处理程序中，event.target指向触发事件的元素。
- 示例：function handleClick(event) { var clickedElement = event.target; }

<h2>点击按钮示例</h2>

<!-- 按钮 -->
<button class="button">按钮 1</button>
<button class="button">按钮 2</button>
<button class="button">按钮 3</button>

<p>点击上面的任意一个按钮，会弹出一个提示框显示被点击按钮的文本。</p>

<script>
  // 当页面加载完成后执行
  window.onload = function () {
    // 获取所有的按钮并添加点击事件监听器
    var buttons = document.querySelectorAll('.button');
    for (var i = 0; i < buttons.length; i++) {
      buttons[i].addEventListener('click', function (event) {
        // 使用 event.target 来获取触发事件的元素
        alert('你点击了：' + event.target.textContent);
      });
    }
  };
</script>

4、元素获取应用

通过子元素获取到父节点相关信息
完整代码：

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <title>获取父节点示例</title>
  <style>
    /* 一些基本样式 */
    body {
      font-family: Arial, sans-serif;
    }

    .button {
      display: inline-block;
      margin: 10px;
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      text-align: center;
      text-decoration: none;
      outline: none;
      color: #fff;
      background-color: #4CAF50;
      border: none;
      border-radius: 15px;
      box-shadow: 0 9px #999;
    }

    .button:hover {
      background-color: #3e8e41
    }

    .button:active {
      background-color: #3e8e41;
      box-shadow: 0 5px #666;
      transform: translateY(4px);
    }
  </style>

</head>

<body>
  <h2>点击按钮获取父节点示例</h2>

  <!-- 按钮 -->
  <div id="buttonContainer">
    <button class="button" id="button1">按钮 1</button>
    <button class="button" id="button2">按钮 2</button>
    <button class="button" id="button3">按钮 3</button>
  </div>

  <p>点击上面的任意一个按钮，会弹出一个提示框显示被点击按钮及其父节点的信息。</p>

  <script>
    // 当页面加载完成后执行
    window.onload = function () {
      // 获取所有的按钮并添加点击事件监听器
      var buttons = document.querySelectorAll('.button');
      for (var i = 0; i < buttons.length; i++) {
        buttons[i].addEventListener('click', function (event) {
          // 使用 event.target 来获取触发事件的元素
          var clickedButton = event.target;
          // 获取被点击按钮的父节点
          var parentElement = clickedButton.parentNode;
          // 显示父节点的标签名和内容
          alert('你点击了：' + clickedButton.textContent + '\n父节点是：' + parentElement.tagName + '\n父节点的内容是：' + parentElement.innerHTML);
        });
      }
    };
  </script>
</body>

</html>