两次点击为什么内容不同

2026-03-03 15:56:06 网络作者：本站点击：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document文档对象</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/mr-style.css">

</head>
<body>
<div class="zzsc-container">
    <div class="container mt50">
        <h1 style="text-align: center">Document文档对象</h1>
        <div class="row" style="margin-top:50px">
            <div class="col-md-4 col-sm-6">
                <div class="mr-box">
                    <img src="img/1.png" alt="">
                    <div class="over-layer">
                        <h3 class="title">获取文档信息</h3>
                        <p class="description">获取页面标题：<button onclick="getTitle();" style="color:black">试一下</button></p>
                        <p class="description">获取当前域名：<button onclick="getDomain();" style="color:black">试一下</button></p>
                        <p class="description">获取页面URL：<button onclick="getReferrers();" style="color:black">试一下</button></p>
                    </div>
                </div>
            </div>

            <script>
                //获取页面标题
                function getTitle(){
                    var originalTitle = document.title;
                    alert(originalTitle);
                }

                //获取当前域名
                function getDomain(){
                    var domain = document.domain;
                    alert(domain);
                }

                //获取页面URL
                function getReferrers(){
                    var referrer = document.URL;
                    alert(referrer);
                }

            </script>
            <div class="col-md-4 col-sm-6">
                <div class="mr-box">
                    <img src="img/2.png" alt="">
                    <div class="over-layer">
                        <h3 class="title">查找文档元素</h3>
                        <p class="description">getElementById()：<button onclick="getId();" style="color:black">试一下</button></p>
                        <div id="myDiv" style="display: none">51购商城</div>
                        <p class="description">getElementsByTagName()：<button onclick="getTag();" style="color:black">试一下</button></p>
                        <h1 style="display: none">我是h1标签</h1>
                    </div>
                </div>
            </div>

            <script>
                //getElementById()方法的说明
                function getId(){
                    var id_content ='含有id属性的标签：<div id="myDiv">51购商城</div>';
                    alert(id_content);
                    var div = document.getElementById("myDiv"); // 取得<div>元素的引用
                    alert(div.innerHTML);
                }

                //getElementsByTagName()方法的说明
                function getTag(){
                    var tag_content ='标签名：<h1 >我是h1标签</h1>';
                    alert(tag_content);
                    var h1_content = document.getElementsByTagName("h1");
                    alert(h1_content[0].innerHTML);
                }

            </script>

            <div class="col-md-4 col-sm-6">
                <div class="mr-box">
                    <img src="img/3.png" alt="">
                    <div class="over-layer">
                        <h3 class="title">写入文档标签</h3>
                        <p class="description">设置文档颜色：<button onclick="setColor();" style="color:black">试一下</button></p>
                        <p class="description">设置文字大小：<button onclick="setFontSize();" style="color:black">试一下</button></p>
                        <p class="description">设置文档图片：<button onclick="setImage();" style="color:black">试一下</button></p>
                    </div>
                    <script>
                        //设置文档颜色
                        function setColor(){
                            document.body.style.backgroundColor="red";
                        }

                        //设置文字大小
                        function setFontSize(){
                            document.body.style.fontSize="20px";
                        }

                        //设置背景图片
                        function setImage(){
                            document.body.style.backgroundImage="url(img/5.jpg)";
                        }

                    </script>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

讲一下上面的代码，这一段：

//getElementsByTagName()方法的说明
                function getTag(){
                    var tag_content ='标签名：<h1 >我是h1标签</h1>';
                    alert(tag_content);
                    var h1_content = document.getElementsByTagName("h1");
                    alert(h1_content[0].innerHTML);
                }，

两次点击为什么不同？为什么第一次点击是：标签名：<h1 >我是h1标签</h1>，而再点击就是：我是h1标签？

这是一个很好的问题！让我详细解释一下这段代码的行为。

function getTag(){
    var tag_content ='标签名：<h1 >我是h1标签</h1>';
    alert(tag_content);                    // 第一次alert
    var h1_content = document.getElementsByTagName("h1");
    alert(h1_content[0].innerHTML);        // 第二次alert}

两次点击显示不同的原因

第一次点击的流程：

第一个 alert(tag_content)：

显示的是字符串变量 tag_content 的内容
内容是：'标签名：<h1 >我是h1标签</h1>'
这只是一个纯文本字符串，里面的 <h1> 只是普通字符，不是真正的HTML标签

第二个 alert(h1_content[0].innerHTML)：

document.getElementsByTagName("h1") 从DOM中查找真实的 <h1> 元素
页面上确实有一个隐藏的 <h1> 标签：<h1 style="display: none">我是h1标签</h1>
h1_content[0] 获取到这个真实的DOM元素
innerHTML 获取该元素内部的HTML内容："我是h1标签"
所以第二个弹窗显示的是实际DOM元素的内容

第二次点击的流程：

当第一次点击执行完后，发生了什么？

alert(h1_content[0].innerHTML);  // 这行代码执行时，弹窗显示了"我是h1标签"

注意：这里只是读取了 h1_content[0].innerHTML，并没有修改任何东西
页面上的 <h1 style="display: none">我是h1标签</h1> 元素依然存在，没有变化
所以第二次点击时：

第一个弹窗仍然显示字符串 '标签名：<h1 >我是h1标签</h1>'
第二个弹窗仍然显示从DOM获取的 "我是h1标签"

为什么会觉得两次点击不同？

您可能观察到的现象是：

第一次点击：两个弹窗依次显示

弹窗1：标签名：<h1 >我是h1标签</h1>
弹窗2：我是h1标签

第二次点击：两个弹窗依次显示

弹窗1：标签名：<h1 >我是h1标签</h1>（与第一次相同）
弹窗2：我是h1标签（与第一次相同）

实际上，两次点击的行为是完全相同的，只是您可能误以为第二次点击只显示了第二个弹窗？

如果代码真的如您所写，两次点击的结果应该完全一致。

可能的误解来源

如果您的观察是第一次点击显示了两行，第二次点击只显示了一行，那可能是：

浏览器弹窗拦截：某些浏览器可能在短时间内阻止重复弹窗
代码被修改过：可能在您测试过程中代码被修改了
事件绑定问题：按钮可能被多次绑定，导致行为异常

验证方法

您可以在控制台手动执行几次这个函数来验证：

// 在浏览器控制台输入getTag();  // 多次执行，观察结果是否一致

结论：这段代码的逻辑是确定性的，只要页面结构不变，每次执行的结果都应该相同。如果您观察到不同，可能是浏览器行为或测试环境造成的偶然现象。

标签：