使元素引用不那么笨拙

Making element referencing less clunky

本文关键字：元素 引用      更新时间：2023-09-26

我是javascript的新手，所以如果这是一个简单的答案，请原谅我。我似乎找不到它。我有一小段脚本，根据段落内容替换文本。非常简单。我的问题是，为什么我必须把整个参考资料纠正两次？变量是否不指向同一事物？有没有更简单的方法？

这项工作：

<p id="name">Electric City</p>
<script type="text/javascript">
    var name = document.getElementById("name").innerHTML;
    if (name == "Electric City") {
        document.getElementById("name").innerHTML = "Welcome!";
    }
</script>

这不是：

<p id="name">Electric City</p>
<script type="text/javascript">
    var name = document.getElementById("name").innerHTML;
    if (name == "Electric City") {
        name = "Welcome!";
    }
</script>

谢谢！

var name = document.getElementById("name").innerHTML;

这行代码从"name"元素（使用其innerHTML属性）获取值，并将其复制到变量name。name变量不引用"name"元素本身。

如果你想简化你的代码，你可以这样做：

<script type="text/javascript">
    var nameElement = document.getElementById("name");
    if (nameElement.innerHTML  == "Electric City") {
        nameElement.innerHTML = "Welcome!";
    }
</script>

在JavaScript中，说variable = value不会影响variable最初引用的东西。说variable.property = value会影响variable引用的东西。

因此，为了简化代码，请执行以下操作：

var element = document.getElementById("name");
if (element.innerHTML == "Electric City") {
    element.innerHTML = "Welcome!";
}

示例

试试这个：

<script type="text/javascript">
    var name = document.getElementById("name");
    if (name.innerHTML == "Electric City") {
        name.innerHTML = "Welcome!";
    }
</script>

name只是保存值，并没有作为一个整体引用实际元素。

您需要获取元素THEN检查并对其应用innerHTML。

试试这个：

var elem = document.getElementById("name");
if (elem.innerHTML == "Electric City") {
    elem.innerHTML = "Welcome!";
}

问题是，您有一个对字符串的引用，而不是对包含该字符串的对象的引用。由于字符串是不可变的，设置一个字符串变量的新值只会创建一个全新的字符串，并保持原始字符串（指我的your元素）不变。

就像这个一样简单

   <p id="demo">Electric City</p>
    <script>
    var str = document.getElementById("demo").innerHTML; 
    var res = str.replace(/Electric City/gi," Welcome!");
    document.getElementById("demo").innerHTML=res;
    </script>

或

<script>
    var str = document.getElementById("demo"); 
    var res = str.innerHTML.replace(/Electric City/gi," Welcome!");
    str.innerHTML=res;
</script>
相关文章：