第一章：前后端数据交换之document.getElementByIdd的使用

友谱

于 2025-06-18 17:18:05 发布

阅读量734

点赞数 16

CC 4.0 BY-SA版权

文章标签： javascript 开发语言

本文链接：https://blog.youkuaiyun.com/clwhgg/article/details/148744080

前言

前后端交互中最难的一点就是各种数据的交互，要求对数据格式有着很深的理解

一、document.getElementById是什么？

是 JavaScript 中用于操作 DOM（文档对象模型）的一个核心方法，它的作用是通过元素的 ID 属性快速获取对应的 DOM 元素。获取元素后即可对该元素进行操作，如设置值，设置属性值等等

二、使用步骤

1.作用

1）作用：

根据 ID 获取元素：在 HTML 文档中查找具有指定 id 属性的元素，并返回该元素的 DOM 对象。

如果找不到：返回 null。

2）语法：
let element = document.getElementById(id);
参数：id（字符串），要查找的元素的 ID（区分大小写）。

返回值：匹配的 DOM 元素对象（如 HTMLElement），若没有则返回 null。

2.使用示例

1）获取元素并修改内容

<p id="message">原始文本</p>
<script>
  let message = document.getElementById("message");
  message.textContent = "修改后的文本！"; // 修改文本
</script>

（2）获取元素并修改样式

let box = document.getElementById("box");
box.style.backgroundColor = "blue";
box.style.color = "white";

（3）获取输入框的值

<input type="text" id="username" value="张三">
<button οnclick="getValue()">获取值</button>

<script>
  function getValue() {
    let input = document.getElementById("username");
    alert("输入的值是：" + input.value);
  }
</script>

（4）绑定事件

let button = document.getElementById("myButton");
button.addEventListener("click", () => {
  alert("按钮被点击了！");
});

（5）绑定事件

<input name="account" type="text" id="account">

<span id="account_err" class="err_msg" style="display: none">用户名不正确</span>

document.getElementById("account").onblur = function () {
    console.log(this.value);
    //得到account后通过axios发送到后端进行注册检验
    axios({
        method:"get",
        url:'/WebProject_war_exploded/register',
        params:{
            account:this.value
        }
    }).then(function (response) { //处理返回值
        if ("no" == response.data){
            document.getElementById("account_err").style.display = ''
        }else {
            document.getElementById("account_err").style.display = 'none'
        }
    })
}

功能解析：（1）获取id=account的元素，并绑定事件

（2）获取id=account_err的元素，并设置该元素的style