如何利用DOM家族属性获取HTML元素的文本内容？

API 探路者

2026-8-16

借助DOM家族属性实现JavaScript获取指定元素文本

需求说明

点击id为update_pen的<i>标签
获取<a>标签内的文本Hello并存储到变量中

对应HTML代码

<div class="swiper-slide">
    <i class="fa-regular fa-pen-to-square" id="update_pen" onclick="update_function()"></i>
    <div class="services-item mb-40 elementor-repeater-item-78d8e80" id="swiper-slide-one">
        <div class="services-item__content">
            <h4 class="services-item__tp-title mb-30">
                <a href="service-details.html">Hello</a>
            </h4>

            <div class="text_area_box" id="text_area_box">
                <input type="text" name="" required="">
                <label>Titre</label>
            </div>
        </div>
    </div>
</div>

JavaScript实现代码

function update_function() {
    // 获取当前点击的<i>元素
    const currentPen = this;
    // 拿到<i>的下一个元素兄弟（跳过空白文本节点，直接获取目标div）
    const servicesItemDiv = currentPen.nextElementSibling;
    // 从servicesItemDiv中获取子元素services-item__content
    const contentDiv = servicesItemDiv.firstElementChild;
    // 获取contentDiv下的h4元素
    const titleH4 = contentDiv.firstElementChild;
    // 获取h4内的<a>元素
    const targetLink = titleH4.firstElementChild;
    // 提取<a>的文本内容并存入变量
    const helloText = targetLink.textContent;

    // 可添加后续逻辑，比如控制台打印测试
    console.log(helloText); // 输出结果：Hello
}