个人中心
gpt4 book ai didi

javascript - 如何在 JavaScript 中使用关键字 "this"进行 DOM 操作

转载 作者：行者123 更新时间：2023-12-01 01:35:49 26 4
gpt4 key购买 nike

我正在学习如何在 JavaScript 中使用关键字“this”进行 DOM 操作，但我有一个误解。也许有人可以帮助我理解它。

例如，我有这个简单的程序:

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript + DOM</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Shopping List</h1>
    <p id="first">Get it done today</p>
    <p class="second">No excuses</p>
    <input id="userinput" type="text" placeholder="enter items">
    <button id="enter">Enter</button>
    <ul>
        <li class="three">Notebook</li>
        <li>Jello</li>
        <li>Spinach</li>
        <li>Rice</li>
        <li>Birthday</li>
        <li>Candles</li>
    </ul>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

样式.css:

.done {
    text-decoration: line-through;
}

脚本.js:

var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");
var li = document.getElementsByTagName("li"); 

console.log("This 1 = " + this);

function inputLength() {
    return input.value.length;
}

function createListElement() {
        var li = document.createElement("li");
        li.appendChild(document.createTextNode(input.value));
        ul.appendChild(li);
        console.log("This 2 = " + this);
        input.value = "";
}

function addListAfterClick() {
    if (inputLength() > 0) {
        createListElement();
    } 
}

function addListAfterKeypress(event) {
    if (inputLength() > 0 && event.keyCode === 13) {
        createListElement();
    }
}

function changeClass() {
        this.classList.toggle("done");
        console.log("This 3 = " + this);
}

for (var i = 0; i < li.length; i++) {
    li[i].addEventListener("click", changeClass)
}

button.addEventListener("click", addListAfterClick)

input.addEventListener("keypress", addListAfterKeypress)

这是一个简单的列表，您可以在列表中添加新元素，也可以在单击列表中的元素时更改元素的类。

当我刷新浏览器时，我会进入控制台:This 1 = [object Window]

之后，我在框中输入一个字母，然后单击“Enter”按钮，然后进入控制台:This 2 = [object Window]。所以，该对象仍然是“Window”。

之后，我单击列表中的一个元素，然后进入控制台:This 3 = [object HTMLLIElement]。我看到该对象已从 Window 更改为 HTMLLIElement。

我不明白对象何时从 Window 更改为 HTMLLIElement。为什么 This 2 的对象是 Window 而 This 3 的对象是 HTMLLIElement。谢谢!

最佳答案

When I refresh the browser I get in the console: This 1 = [object Window]

在全局代码中，this 设置为全局(浏览器中的窗口)对象。

After that I type a letter in the box and click the "Enter" button and I get in the console: This 2 = [object Window]. So, the object is still "Window".

调用函数时，this 未在调用中设置，因此默认为全局/窗口对象。在严格模式代码中，它将是未定义。

After that I click on an element from the list and I get in the console: This 3 = [object HTMLLIElement]. I see that the object is changed from Window to HTMLLIElement.

当调用由 addEventListener 添加为监听器的函数时，其 this 将设置为设置监听器的元素，就像通过:

changeClass.call(element, event)

相关事件作为第一个参数传递。

I don't understand when the object is changed from Window to HTMLLIElement. Why the object for This 2 is Window and the object for This 3 is HTMLLIElement.

this 是创建上下文时设置的执行上下文的参数。它可以在调用中设置或使用bind，或者在箭头函数中按词法设置(即从外部执行上下文采用)。请参阅How does the “this” keyword work?

关于javascript - 如何在 JavaScript 中使用关键字 "this"进行 DOM 操作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52833893/

26 4 0
文章推荐： python - 使用python打开txt文件时出现FileNotFoundError
文章推荐： wiki - 推荐使用类似Wiki的“ super ”应用程序的注释
文章推荐： jquery - Rails 3.2.8 应用程序中的 AJAX 不会重新加载目标 div
文章推荐： SQL - 返回有限的行数，但完整的行数
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com