.innerHTML、.innerText、以及.nodeValue、以及input(这个自结束标签里面的内容，该如何获取的问题)

最新推荐文章于 2023-11-01 17:10:08 发布
原创 最新推荐文章于 2023-11-01 17:10:08 发布 · 978 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

本文详细解析了innerHTML、innerText及nodeValue的区别与应用，特别是它们在处理文本内容、标签内容时的行为差异。此外，还介绍了如何通过value属性获取input框内的文本。

首先.innerHTML、.innerText、.nodeValue均可以获取元素节点(对象)中的文本内容

但是也有不同，HTML可以获取一个元素（节点对象所包含的的其它的标签（元素对象)的内容，该元素的后代元素中，包含标签(元素)，那么也会被显示出来，这是和innerText的一个区别(会打印，该元素所包含的后代元素的标签)，但是，如果，该元素不包括非文本节点(对象)的其它节点(元素节点，注释节点等),那么此时.innerHTML和.innerText只会打印出该元素节点(对象)的文本内容）

元素节点（对象）.innerText，只会打印，该元素节点(对象)里面的文本内容

文本节点(对象).nodeValue只会打印一个文本对象的内容

在这里插入图片描述
在这里插入图片描述

上面的第二种做法是采取，先利用firstChild获取这个文本节点，也就是，这个文本对象，然后利用文本对象.属性，来获取该对象的内容，这个第二种方法中，写fc.innerHTML没有用，而且写fc.innerText也是没有用的

在这里插入图片描述

总结:.innerHTML和.innerText均是针对元素节点(对象)来说的，但是.nodeValue是针对文本节点(对象来说的)

input是一个自结束标签，采用.innerHTML、innnerText均不能获取input框中的内容，但是可以通过对象.value(属性名)来获取，输入到文本框中的内容

在这里插入图片描述

one or two
关注
Vue源码分析之-虚拟DOM
前端高薪进击手记
07-10 535
虚拟DOM 代码演示new Vue()实例时，render的定义中有个习惯命名为h的函数类型参数，参数h()函数实际上对应我们源码中的$createElement()。h() 函数的作用是用来创建一个虚拟节点VNode，调用 h(tag, data, children) 函数的时候需要传入三（4）个参数：这里的 h函数 跟 snabbdom中的有些类似，核心作用都是一样的，都是为了创建vnode。 只不过Vue中的 h函数 它里面支持组件 component，并且还支持 slots 插槽。...
JQuery+ajax实现类似百度搜索自动匹配功能
热门推荐
Jack 架构师之路
10-23 1万+
引言    我们接触最多的、用的最多的搜索引擎就是百度了，可以说现在我们的生活如果离开像百度、谷歌这样的搜索引擎还是我们的生活没有了方向，我们在使用的时候都有一个体验就是我我们在输入关键紫的时候，他会自动给我们匹配很多的关键字，像下图所示：            这种非常人性化的功能对于我们在平常开发软件的时候是非常有必要借鉴的，所以在小编最近的项目中就需要用到这个功能给用户
HTML DOM中innerHTML、textContent和innerText属性的用法与区别
青春木鱼的博客
05-21 9679
想要获取、设置标签的内容，innerHTML以及innerText、textContent都可以使用，如果在标签中设置新的html标签内容，innerText、textContent会忽略新的html标签，仅获取纯文本内容，但innerText、textContent属性会解析标签里特殊符号，把特殊符号翻译为正文。innerHTML可以获取所有的html标签内的内容，包括新的html标签，每一个字符都会原样输出，所写即所得，且新的html标签，不会被解析，也就是没有标签效果，但输出到浏览器页面会被浏览器正常
元素innerText 和innerHTML 属性的应用与区别
往前爬的蜗牛
04-01 1397
元素innerText 属性 将文本内容添加/更新到任意标签位置 , 文本中包含的标签不会被解析 为元素设置标签之间的文本内容 特点：innerText不能对内容中的html标签结构进行解析，而是会原样输出 let info = document.querySelector('#info') info.innerText = 'abc' info.innerText = '<h3>只识别内容，不能解析html标签,标签会当成字符串</h3>' 注意点： 1. 单标签不
js-5秒之后跳转页面
qq_41670147的博客
12-03 1985
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
在 innerHtml 中得到需要的内容
无
06-22 342
通过innerHtml方法渲染并且需要点击点击对应DOM获得数据
JavaScript DOM杂知识(value/innerHTML/innerText/textContent对比、nodeType/nodeName/nodeValue区别、获取任意类型的属性)
carriehaohao的博客
03-06 1353
1. value/innerHTML/innerText/textContent对比 2. nodeType/nodeName/nodeValue区别 3. 获取任意类型的CSS样式的属性值
// var item = group.pageItems[i]; 这一步获取文字，怎么修改文字不改变文字格式
07-18
因此，我建议用户重新考虑设计：将需要动态修改的文本部分放在一个单独的标签内（如`<span>`），并给这个标签一个id，然后通过修改这个标签的`textContent`来改变文本。 例如： ```html 其他固定文本，需要...
获取某个节点的所有内容
最新发布
08-22
假设我们有一个节点元素`element`，我们可以通过`element.innerHTML`获取其所有内容。 注意：如果节点是input或textarea等表单元素，则应该使用`value`属性获取其内容。 但是，问题描述是“某个节点”，所以...
文件：jquery.min.js
sushuyan的博客
07-09 1321
/*! jQuery v1.11.3 | (c) 2005, 2015 jQuery Foundation, Inc. | jquery.org/license */ !function(a,b){"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("jQuery requir.
javascript中innerHTML 获取或替换html内容的实现代码
12-28
innerHTML 属性用于获取或替换 HTML 元素的内容，语法为Object[removed] 其中1.Object是获取的元素对象，如通过document.getElementById(ID)获取的元素；2.注意书写，innerHTML区分大小写。 我们通过id=light获取<div> 元素，并将元素的内容输出和改变元素内容，代码如下: <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>innerHTML属性</title> </head> <body> <div id=cshi>
Js(四)：input文本框 innerHtml 或 innerText 赋值不生效问题
weixin_41297324的博客
08-11 9828
上周的任务项目中有一个小需求，在后端接收到数据后需要将进行可视化显示后，需要对显示的数据进行一个人性化的操作：点击句子自动跳转。本想着这个需求分分钟可以搞定，然而还是踩了一会的坑。 如点击“标注例句1”后，自动进行关闭当前模态框，然后将参数数据传递至如下的文本框。 前端HTML： <div class="row"> <div class="col-xs-12"> <input type="text" placeho
js获取input输入框的值
weixin_42017221的博客
11-01 305
【代码】js获取input输入框的值。
textContent、innerHTML、innerText、outerText、outerHTML、nodeValue使用场景和区别
weixin_34358092的博客
03-24 359
今天要讲的这些属性都可以用来获取某个元素的内容，你可能会觉得不可思议，或是说上一句“丧心病狂”也。但当你看完以下内容后，会发现除outerText无用外，其他的都有各自的使用场景，不然它就真的是丧心病狂，然后我们就可以各回各家了。 innerText 引用MDN，Node.textContent上的一段话: Internet Explorer 引入了 element.innerText，目的是相...
input文本框 innerHtml 或 innerText 赋值不生效问题
Jackie Huang
12-29 8918
问题： 在写一个js小效果时，要给input文本框赋值，但赋值后却不生效，input框里面不管怎么赋值都是空白的。 num.innerText = "1 18 7 11 18 20 23"; 打开控制台看到input标签里面的值是以及变动了的 解决方案： 突然意识到input的赋值是不一样的，input赋值是用value赋值的，和其他标签赋值搞混了。 所以只要将innerTe...
关于inerHTML input value无效的问题
zb219的专栏
12-11 5833
原来在IE下面,手改文本框的值,innerHTML是可以体现出来的,但IE9,EI10,之后就不会体现了. 因为在标准模式下,  同  aa.value是不一样的,一个算是attributes属性,一个是表单元素的JS属性,这个在早期的IE是通用的,可是w3c是不通用的 你修改了aa.value 不代表你的aa.attributes["value"]也改了,而innerHTML 只能输出att
获取文本节点内容(nodeValue)的方法。
Spotlight_mar的博客
10-02 1389
<ul id = "prompt"> <li><a>A</a></li> <li><a>B</a></li> <li><a>C</a></li> <li><a>D</a></li> </ul>var prompt = document.getElementById("prompt"); var text = prompt.childNodes[1].childNode
button,input,html与value,innerText,innerHTML的对应关系
敲代码的余文乐的博客
02-28 837
<html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> <script> function myFunction() { var btn1 = document.getElementById("btn1"); ...
innerHML、innerText、textContent 获取和设置内容总结
wei_qiu_na的博客
07-16 2800
1.获取内容： innerText：获取的是纯文本，不带标签，也就是说，当获取到的内容里面包含标签时，会自动忽略掉标签，值获取标签的文本内容； 结果为： innerHTML：获取的内容带标签，严格来说，他才是真正的获取双标签里所有的内容，包括标签，也就是说，不解析标签，把标签显示出来； 结果为： 2.设置内容： innerText：设置的时候带标签，也会把比起爱你当...
.value，.innerHTML，.innerText在JS中使用的区别
05-31
在 JavaScript 中，`.value`、`.innerHTML` 和 `.innerText` 是用于获取或设置元素内容的属性。 `.value` 属性通常用于表单元素，如输入框和下拉列表。它用于获取或设置表单元素的值。例如，如果有一个输入框元素：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值