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 Worldconsole.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
,以确保代码的正确性和可读性。
innerText和innerHTML区别 target和this的区别相关推荐
- innerText和innerHTML区别
innerText和innerHTML区别 尽管DOM带来了动态修改文档的能力,但对开发人员来说,这还不够.IE4.0为所有的元素引入了两个特性,以更方便的进行文档操作,这两个特性是innerText ...
- JavaScript中textContent、innerText和innerHTML的用法以及区别
目录 0.码仙励志 1.textContent的用法 1.设置标签中的文本内容 2.获取标签中的文本内容 2.innerText的用法 1.设置标签中的文本内容 2.获取标签中的文本内容 3.inne ...
- Javascript:innertext和innerhtml的区别
文章目录 前言 一.区别 二.代码示例 1.代码演示 2.最终效果 前言 在Javascript中,通过控件对象的innertext和innerhtml属性都可以对控件对象的显示文字进行读取和修改,那 ...
- innerText 和 innerHTML的区别
innerText 和 innerHTML的区别 1.innerText不识别html标签,非标准,会自动去除空格和换行 var div = document.querySelector('div') ...
- innerText 与 innerHtml的区别 (一)
innerText 与 innerHtml 都是打印标签之间的文本信息 1.innerText 打印标签之间的纯文本信息,会将标签过滤掉,低版本的火狐浏览器不支持,而是支持textContent & ...
- js中的target与currentTarget的区别转
关于js中target与currentTarget的区别的关键在于他们所处在的事件流的阶段是不一样的,target处于事件流的目标阶段,currentTarget处理事件流的捕获.处于目标阶段和冒泡阶 ...
- innerText textContent innerHTML
innerHTML Element.innertHTML 设置和获取元素的HTML innerHTML 元素内部的所有内容都会被删除 outerHTML 替换包含父元素的所有内容 获取源码 <! ...
- innerText和innerHTML改变元素内容
1.innerText: 以点击按钮,div里的文字显示当前时间为例: <button>显示当前系统时间</button> <div>某个时间</div> ...
- r语言和python-Python和R语言的区别_Python与R的区别和联系
Python和R语言的区别_Python与R的区别和联系 可能问这个问题会很无脑,但是我还没有深入接触过Python,只是用过R语言.谁能帮我解答一下,这两者的主要区别呢?是否存在代替关系呢? 精彩解 ...
最新文章
- 基于OpenCV修复表格缺失的轮廓--如何识别和修复表格识别中的虚线
- 中国工程院2021年院士增选第二轮候选人名单公布
- 特征工程中的IV和WOE详解
- java泛型方法 通配符_Java泛型教程–示例类,接口,方法,通配符等
- Java学习(16-20天, 线性数据结构)
- 实时操作系统与通用操作系统的一些比较
- 编程猫海龟编辑器(python)_编程猫海龟编辑器(少儿编程软件)
- 惠普1020打印机驱动安装教程
- 几种常用网络传输协议
- 信息学奥赛一本通(C++版)在线评测系统 1157:哥德巴赫猜想
- 金蝶专业版服务器操作系统,金蝶kis专业版 服务器 设置
- 3D打印技术到底有多强大?
- Android~adb卸载系统预装应用(亲测有效)
- 中大计算机学院不及格,大学要求越来越严格 | 学渣可能无法从中大毕业了
- 设置计算机每天定时自动开关机,如何设置电脑定时自动关机?
- Java中有理数类Rational Number详解
- Tensorflow-Keras教程
- 作业:pytorch实现图卷机网络,与随机梯度下降法实现
- HTTP tunneling is disabled问题 解决
- php如修改登陆后连接地址,两种wordpress更换后台登录界面logo图标方法
热门文章
- BUAA OO2023 Unit3:JML-规格设计
- android tombstone发生过程,如何调试分析Android中发生的tombstone
- 有趣的微分方程之欧拉方程
- LVGL学习(1):中文字体的转换和汉字显示
- SOLIDWORKS 二次开发 VC++
- 【大咖说*对话生态——聚力同行,迈向零碳未来】
- 2020年研究生数学建模竞赛优秀论文汇总
- expected unqualified-id before ....的问题
- e52450相当于i几处理器_【有趣】第3期:八路E7的结局如何?盘点历代至尊版处理器现价...
- C语言(C++)——洛古P1145 约瑟夫