innerText和innerHTML区别 target和this的区别

innerText和innerHTML区别 target和this的区别

1 innerText和innerHTML区别

innerText 和 innerHTML 是 JavaScript 中常用的属性，用于获取或设置 HTML 元素的文本内容。

区别如下：

• innerText: 获取或设置元素的纯文本内容。它返回元素及其后代节点的可见文本内容，即去除了 HTML 标签和注释后的内容。当你使用 innerText 设置元素的内容时，会自动对特殊字符进行编码，以避免注入攻击。例如，< 会被转义为 <。
• innerHTML: 获取或设置元素的 HTML 内容。它返回元素内部的所有 HTML 标记、文本和子元素，包括标签和注释。你可以使用 innerHTML 设置元素的内容，替换或添加新的 HTML 结构。然而，要注意的是当你通过 innerHTML 设置内容时，如果内容包含有恶意代码，可能会导致跨站脚本攻击（XSS）的安全风险。因此，在设置 innerHTML 时，应该确保内容的来源可靠，或者进行必要的安全处理。

例如，考虑以下 HTML 代码：

<div id="myDiv">
  <p>Hello <strong>World</strong></p>
</div>

使用 JavaScript：

var divElement = document.getElementById("myDiv");

console.log(divElement.innerText); // 输出：Hello World

console.log(divElement.innerHTML); // 输出："<p>Hello <strong>World</strong></p>"

总结来说，innerText 返回纯文本内容，而 innerHTML 返回元素的 HTML 内容。在设置元素内容时，应根据具体需求来选择使用哪个属性，并注意安全性问题。如果仅需要获取或设置文本内容，推荐使用 innerText。如果需要操作和修改HTML结构，则可以使用 innerHTML。

2 target和this的区别

在JavaScript中，target和this是两个常用的关键字，它们有不同的含义和用法。

target是事件触发时的目标元素。当事件被触发时（比如点击按钮、鼠标悬停等），event.target属性可以访问到事件所针对的元素。例如，在一个点击事件的处理函数中，event.target表示被点击的元素。target属性返回一个指向事件触发的元素的引用，可以通过它来获取或修改元素的属性、样式等。注意，target指向的是实际触发事件的元素，而不是事件绑定所在的元素。

this是当前执行上下文的上下文对象，它通常指向调用函数或方法的对象。this的值在每次函数调用时动态确定，根据调用方式的不同，this可能会指向不同的对象。在函数内部使用this关键字可以访问当前执行上下文的相关属性和方法。

区别总结如下：

• target是事件触发时的目标元素，用于获取触发事件的具体元素。
• this表示当前执行上下文的上下文对象，根据函数调用方式的不同，this可能指向不同的对象。

需要注意的是，在使用this时要特别注意其指向问题，特别是在嵌套函数、对象方法、事件处理函数等场景下，this的指向可能会发生变化。在不同的情况下，需要正确理解和使用this关键字来获取和操作相应的对象或上下文。

下面是一些示例，演示了target和this在不同场景下的使用：

示例中展示了一个事件处理函数，当点击按钮时，会通过event.target获取到被点击的按钮元素，并修改其文本内容。

<button onclick="changeText(event)">点击我</button>

<script>
function changeText(event) {
  var target = event.target;
  target.textContent = "按钮已点击";
}
</script>

示例中展示了一个对象方法，通过this关键字访问对象的属性。

var person = {
  name: "Alice",
  sayHello: function() {
    console.log("Hello, my name is " + this.name);
  }
};

person.sayHello(); // 输出：Hello, my name is Alice

示例中使用了构造函数创建对象，并在构造函数内部使用this关键字添加属性。

function Person(name) {
  this.name = name;
}

var person1 = new Person("Bob");
var person2 = new Person("Charlie");

console.log(person1.name); // 输出：Bob
console.log(person2.name); // 输出：Charlie

这些示例展示了target和this在事件处理、对象方法和构造函数等不同场景下的应用。注意，在实际开发中，需要根据具体的情况合理使用和理解target和this，以确保代码的正确性和可读性。