JavaScript DOM元素获取与交互操作详解

作者：微光时间：2026-10-24 17:20:07浏览：417

本文详细解析JavaScript中DOM元素的获取方式，包括通过ID、类名和标签名获取元素，并介绍如何在指定父级范围内查找。同时涵盖常用鼠标事件及其触发机制的区别，以及元素内容、表单值和自定义属性的读写操作，帮助开发者掌握前端基础交互技巧。

一、元素的获取方式

在文档层级中直接获取元素。

该方法会返回文档中所有符合条件的元素。

通过ID获取元素

基本语法：document.getElementById(id值);
- document：表示当前文档对象，即搜索范围。
- get：意为获取；Element：指单个元素；By：表示通过某种方式。
- 该方法的返回值是一个具体的元素对象。
如果成功找到元素，则返回该元素对象；如果未找到，则返回null。
使用ID获取元素时，必须在document对象下进行，不支持自定义父级范围。


  var box = document.getElementById("box1");
        console.log(box);//<div id="box1">我是DIV</div>
        var box = document.getElementById("box2");
        console.log(box); //null
        var myH2 = document.getElementById("my-h2");
        console.log(myH2);

通过类名获取元素（className）

基本语法：document.getElementsByClassName(类名值);
- document：表示当前文档对象，即搜索范围。
- get：意为获取；Elements：指多个元素（复数）；By：表示通过某种方式。
- 返回的元素集合是一个动态的伪数组对象。
- 可以通过遍历该集合来打印或处理其中的元素。
如果找到元素，返回一个HTMLCollection集合，该集合包含索引和对应的元素值（0对应第一项，1对应第二项，依此类推），集合自带length属性，最后一项的索引为集合.length - 1；如果未找到任何元素，则返回一个长度为0的空集合。
length属性集合的长度或集合中元素的个数
- 使用集合.length属性获取集合长度。
获取集合中具体元素
- 使用集合[索引]方式获取具体元素。


 var tests = document.getElementsByClassName("test");
        console.log(tests);
        console.log(tests.length); //获取长度
        // 直接输出到控制台
        console.log(tests[0]);
        console.log(tests[1]);
        console.log(tests[tests.length - 1]);
        // 存储起来
        var oDiv = tests[0];
        var oH2 = tests[1];
        console.log(oDiv, oH2);
        var test1 = document.getElementsByClassName("test1");
        console.log(test1, test1.length);
        console.log(test1[0]);
        console.log(test1[1]); //没有这个小标或索引 相当于集合中这个位置还没有初始化，或未定义 返回undefined
        var hello = document.getElementsByClassName("hello");
        console.log(hello, hello.length);
        console.log(hello[0]); //undefined

通过标签名获取元素（tagName）

基本语法：document.getElementsByTagName(标签名);
- document：表示当前文档对象，即搜索范围。
- get：意为获取；Elements：指多个元素（复数）；By：表示通过某种方式。
如果找到元素，返回一个HTMLCollection集合，该集合包含索引和对应的元素值（0对应第一项，1对应第二项，依此类推），集合自带length属性，最后一项的索引为集合.length - 1；如果未找到任何元素，则返回一个长度为0的空集合。
length属性集合的长度或集合中元素的个数
- 使用集合.length属性获取集合长度。
获取集合中具体元素
- 使用集合[索引]方式获取具体元素。


   var oLis = document.getElementsByTagName("li");
        console.log(oLis);
        // 获取长度
        console.log(oLis.length);
        // 获取具体的元素
        console.log(oLis[0]);
        console.log(oLis[1]);
        console.log(oLis[2]);
        console.log(oLis[oLis.length - 1]);

在指定范围内获取元素

父级元素必须是一个具体的DOM元素节点。

父级元素.getElementsByClassName(类名值);
父级元素.getElementsByTagName(标签名);


// 获取ol下的li
        // 获取父级元素
        var wrap = document.getElementById("wrap");
        console.log(wrap);
        // var oLis = wrap.getElementsByClassName("test");
        var oLis = wrap.getElementsByTagName("li");
        console.log(oLis);
        console.log(oLis.length);
        console.log(oLis[0]);
        console.log(oLis[1]);
        console.log(oLis[oLis.length - 1]);
        // 获取ul下的li
        // 获取父级
        var wrap1 = document.getElementsByClassName("wrap");
        console.log(wrap1);
        console.log(wrap1[0]);
        console.log(wrap1[1]);
        // var ullis = wrap1[1].getElementsByClassName("test");
        var ullis = wrap1[1].getElementsByTagName("li");
        console.log(ullis);
        console.log(ullis.length);
        console.log(ullis[0]);
        console.log(ullis[1]);
        console.log(ullis[ullis.length - 1]);

二、鼠标事件

绑定事件的目标必须是具体的元素节点，不能直接对元素集合进行操作。

onclick：单击事件。
ondblclick：双击事件。
onmousedown：鼠标按键按下。
onmouseup：鼠标按键抬起。
onmousemove：鼠标移动。
oncontextmenu：鼠标右键点击。
onmouseover：鼠标移入元素。
onmouseout：鼠标移出元素。
onmouseenter：鼠标进入元素。
onmouseleave：鼠标离开元素。


  <div id="box"></div>
    <ul id="myUl">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
   var box = document.getElementById("box");
   console.log(box);
   var myUl = document.getElementById("myUl")
   console.log(myUl);
   var oLis = myUl.getElementsByTagName("li");
   console.log(oLis);
            // - onclick  单击事件
            box.onclick = function() {
                console.log("单击");
            }
            // - ondblclick  双击事件
            oLis[0].ondblclick = function() {
                console.log("双击事件");
            }
            // - onmousedown 鼠标按下
            oLis[1].onmousedown = function() {
                console.log("鼠标按下");
            }
            // - onmouseup  鼠标抬起
            oLis[1].onmouseup = function() {
                console.log("鼠标抬起");
            }
            // - onmousemove 鼠标移动
            oLis[1].onmousemove= function() {
                console.log("鼠标移动");
            }
            // - oncontextmenu 鼠标右击
            oLis[2].oncontextmenu = function() {
                console.log("鼠标右击");
            }
            // - onmouseover 鼠标移入
            myUl.onmouseover = function() {
                console.log("鼠标移入");
            }
            // - onmouseout 鼠标移出
            myUl.onmouseout = function() {
                console.log("鼠标移出");
            }
            // - onmouseenter  鼠标进入
            myUl.onmouseenter = function() {
                console.log("鼠标进入");
            }
            // - onmouseleave  鼠标离开
            myUl.onmouseleave = function() {
                console.log("鼠标离开");
            }
    </script>

onmouseover：鼠标移入元素。
onmouseout：鼠标移出元素。
onmouseenter：鼠标进入元素。
onmouseleave：鼠标离开元素。

主要区别：

onmouseover和onmouseout事件具有冒泡特性，不仅会触发当前元素的事件处理函数，还会触发父级元素对应的事件处理函数。

onmouseenter和onmouseleave事件不具有冒泡特性，只会触发当前元素的事件处理函数，不会触发父级元素对应的事件处理函数。

三、元素操作

基本原则：提供值即为设置，不提供值即为获取。

所有元素操作必须针对具体的元素节点，不能直接对元素集合进行操作。

1. 操作元素内容

从元素中获取的内容均为字符串类型，如果元素没有内容，则返回空字符串。

操作表单元素的内容

设置：表单元素.value = 值;
获取：表单元素.value;

// 多次赋值时，后面的值会覆盖前面的值。


// 获取元素
var inputs = document.getElementsByTagName("input");
var btn = document.getElementsByTagName("button")[0];
console.log(inputs, btn);
// 将两个输入框的和展示到第三个输入框
// 绑定事件
// 事件每点击一次 函数中代码就重新执行一次
btn.onclick = function () { //做什么事情
    // 获取两个输入框的值
    var oneVal = inputs[0].value;
    var twoVal = inputs[1].value;
    console.log(oneVal, twoVal);
    // 遇到字符串表示拼接 先转为数字
    var total = parseFloat(oneVal) + parseFloat(twoVal);
    console.log(total);
    // 将和设置给第三个输入框
    inputs[2].value = total;
}

操作普通闭合标签的内容

设置：元素.innerText/innerHTML = 值;
获取：元素.innerText/innerHTML;
区别：innerText仅识别纯文本内容，而innerHTML既可以识别纯文本，也可以识别HTML标签。


var div = document.getElementsByTagName("div")[0];
var h2 = document.getElementsByTagName("h2")[0];
var p = document.getElementsByTagName("p")[0];
console.log(div, h2,p);
// 设置：表单元素.innerText/innHTML = 值;
// 后边设置的覆盖前边的
// div.innerText = "我是div";
// div.innerText = "<h6>我是div</h6>";
// div.innerHTML = "我是div";
div.innerHTML = "<h6><a href='https://www.baidu.com'>我是div</a></h6>";
h2.innerHTML = "我是H2";
// 获取：表单元素.innerText/innHTML;  
console.log(div.innerText);//我是div
console.log(div.innerHTML);//<h6><a href="https://www.baidu.com">我是div</a></h6>
console.log(p.innerText);
console.log(p.innerHTML);

2. 操作元素属性

用于操作元素结构上天生自带的属性。

设置：元素.属性 = 值; 如果属性不存在则返回空字符串。
获取：元素.属性;

元素.id = 值; / 元素.id; 元素.className = 值; / 元素.className; 元素.title = 值; / 元素.title; ...


// 获取元素
var div =  document.getElementsByTagName("div")[0];
// 设置
div.className = "myBox";
div.title = "我是div";
// 获取
console.log(div.id);
console.log(div.className);
console.log(div.title);

总结

本文到此结束，希望能为读者提供帮助，同时也欢迎大家关注本站以获取更多相关内容。

作者最新文章

JavaScript零基础入门：从环境搭建到运行第一段代码

2026-11-05 15:29:58

HTML链接中javascript：void(0)的作用及现代替代方案

2026-11-05 10:07:47

在线调试 JS 时怎么引入 jQuery 或 Vue 等第三方库

2026-11-05 08:53:56

原生JavaScript实现简易颜色选择器原理与代码

2026-11-03 23:22:19

JS原生表单序列化：FormData与URLSearchParams用法详解

2026-11-03 23:13:21