DOM--nodeValue与innerHTML的区别

布满荆棘的人生 2022-07-05 15:05 220阅读 0赞

nodeValue属性规定的是节点的值，

\*元素节点的nodeValue是undefined或者是null的，说明的元素节点本身是没有值的。

\*文本节点的nodeValue是文本的本身，因为文本节点本身是有值的。

\*属性节点的nodeValue是其的属性值，很明显属性一般来说都是有值的。

innerHTML这个是以字符串的形式但会该节点的所有子节点以及其值的。

我们来举个例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="jquery-2.1.3.js" type="text/javascript"></script> <body> <p id="p">这是一段文本  <span>我是span元素内的文本哦</span></p> <script type="text/javascript"> var p=document.getElementById("p"); document.write("p.innerHTML:"+p.innerHTML+"<br>"); document.write("p.nodeValue:"+p.nodeValue+"<br>"); document.write("p.getAttributeNode:"+p.getAttributeNode("id").nodeValue+"<br>"); document.write("p.childNodes[0].nodeValue:"+p.childNodes[0].nodeValue); </script> </body> </html>

![Center][]

需要注意的是文本也算是一个节点，因为它是文本的节点。

[Center]: /images/20220705/e9f31643a73440ce82a9573015f16779.png

发表评论取消回复

表情：

评论列表（有 0 条评论，220人围观）

还没有评论，来说两句吧...

相关阅读

相关 innerText 与 innerHTML 以及 value 的区别

innerText 与 innerHTML 以及 value 的区别 1.标签对之间是一个值即：是在< p > < /p >标签中间直接写一个值。 <htm

傷城~/ 2023年10月02日 21:06/ 0 赞/ 19 阅读

相关 outerHTML和innerHTML的区别

假设html为 <div class="div1"> <div class="circle"> <img src="http://loc

野性酷女/ 2023年03月03日 15:28/ 0 赞/ 20 阅读

相关 document.write与innerHTML的区别

document.write是直接写入到页面的内容流，如果在写之前没有调用document.open，浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写

亦凉/ 2022年11月25日 13:10/ 0 赞/ 142 阅读

相关 innerHTML与innerText区别

document 对象中有innerHTML和innerText 两个属性，这两个属性都是获取document对象的文本内容的，这两个属性间有哪些区别呢？通过几个例子

清疚/ 2022年08月07日 03:57/ 0 赞/ 232 阅读

相关 DOM--nodeValue与innerHTML的区别

nodeValue属性规定的是节点的值， \元素节点的nodeValue是undefined或者是null的，说明的元素节点本身是没有值的。 \文本节点的nodeValue

布满荆棘的人生/ 2022年07月05日 15:05/ 0 赞/ 221 阅读

相关 .write()与innerHTML的区别

<script type="text/javascript"> window.onload = function(){ var oTestDiv = document.

女爷i/ 2022年06月17日 08:12/ 0 赞/ 227 阅读

相关 innerHTML和innertext的区别

innerHTML和innertext的区别很容易区分，那什么时候用innerHTML，innertext呢。 innerHTML获取的是标签的内容。而innertext获取

柔光的暖阳◎/ 2022年06月07日 02:12/ 0 赞/ 443 阅读

相关 innerHTML与jquery里的html()区别介绍

内容为转载原文链接：[http://www.jb51.net/article/31548.htm][http_www.jb51.net_article_31548.htm

雨点打透心脏的1/2处/ 2022年05月26日 09:41/ 0 赞/ 175 阅读

相关 innerHTML和outerHTML区别

1.innerHTML <body> <p>你好</p> <div id="test"><h5>就是喜欢你</h5></div>

╰半橙微兮°/ 2022年05月12日 09:14/ 0 赞/ 174 阅读

相关 innerHTML和innerText的区别

innerHTML 获得：得到元素内部所有标签的内容和标签设置：内容中包含了标签，标签是起作用 innerText 获得：得到元素内部的文本，没有标签

末蓝、/ 2022年02月23日 08:48/ 0 赞/ 228 阅读