获取Html元素三个主要方法总结_获取页面html元素的方法-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45190226/article/details/121262421

本文总结了三种主要的获取HTML元素的方法，通过实例代码详细解析了每种方法的使用，帮助读者更好地理解和应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

分别用不同方法获取html元素，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过document获取数据or赋值</title>
    <style type="text/css">
        input{margin: 10px}
        p{font-size: larger;
            font-family: 微软雅黑;
          color: red;}
    </style>
    <script type="text/javascript">
    function fn4() {
            var pElement = document.getElementById("pid");
            alert(pElement.innerText);
        }
        function fn5() {
            var pElement1 = document.getElementsByTagName("p")[0];
            alert(pElement1.innerText);
        }
        function fn6() {
            var pElement1 = document.getElementsByName("pText")[0];
            alert(pElement1.innerText);
        }
    </script>
</head>
<body>
<p id="pid" name="pText">
        p元素中的文本内容是：黑鹰坠落！
        <input type="button" value="通过此按钮获取p元素中的文本内容" onclick="fn6()"/>
    </p>
</body>
</html>