innerHTML nodeValue 的区别

DOM中的节点是分好几种类型,常见的有
1.文档节点 (document,唯一)
2.元素节点 (那些个标签div,p之类)
3.属性节点(class,src这种)
4.文本节点(插入在p,div内的文本)
其它。。

其中element.nodeValue,是节点的值,其中属性节点和文本节点是有值的,而元素节点没有值。

innerHTML以字符串形式返回该节点的所有子节点及其值

举个例子 :

<p id="example" title="texts">
  这是一段文本
  <span></span>
</p>
var p = document.getElementById(‘example‘);
p.nodeValue
//null,p是元素节点,所以nodeValue为null
p.getAttributeNode(‘id‘).nodeValue
//example,这里获取到p的id属性的属性节点,nodeValue就是它的属性值
p.childNodes[0].nodeValue
/*
"
    这是一段文本
"
p是含有两个子节点的,插入的文本虽然没有标签,但它依然是一个节点。
其类型是是文本节点,其nodeValue是就是写入在其中的字符串,包含换行和缩进
*/
p.innerHTML
/*
"
    这是一段文本
<span></span>"
这里innerHTML返回了p所包含的全部的节点的所包含的各种值了,以字符串的形式。
*/
时间: 2024-10-22 12:52:06

innerHTML nodeValue 的区别的相关文章

js中的innerHTML和outerHTML区别

一.区别:1)innerHTML: 从对象的起始位置到终止位置的全部内容,不包括Html标签.2)outerHTML: 除了包含innerHTML的全部内容外, 还包含对象标签本身. 二.例子: <div id="test"> <span style="color:red">test1</span> test2 </div> 1)innerHTML的值是 1 “<span style="color:re

innerHTML 与 outerHTML区别

示例代码: <div id="test"> <p>这是innerHTML</p> <p>这是innerHTML</p> </div> innerHTML: //读 var test = document.getElementById('test'); console.log(test.innerHTML); //写 test.innerHTML = '<p>重新写入innerHTML</p>

innerHTML与innerText区别

document 对象中有innerHTML和innerText 两个属性, 这两个属性都是获取document对象的文本内容的,这两个属性间有哪些区别呢?通过几个例子来看一下. 示例1 [html] view plain copy <html> <head><title>innerHTML</title></head> <body> <p id="p1">hello world </p>

innerHTML,innertext,textContent区别

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .demo{ 8 visibility: hidden; 9 } 10 .test{ 11 display: none; 12 } 13 </style> 14 </head> 15 <body

DOM系列---基础篇

DOM (Document Object Model) 即文档对象模型, 针对 HTML 和 XML 文档的 API (应用程序接口) .DOM 描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某一部分.DOM 产生于 网景公司及微软公司创始的 DHTML(动态 HTML) ,但现在它已经成为表现和操作页面标记的真正跨平台.语言中立的方式. DOM 中的三个字母: D(文档)可以理解为整个 Web 加载的网页文档: O(对象)可以理解为类似 window 对象之类的东西,可以调用属性

Javascript之DOM的三大节点及部分用法

DOM有三种节点:元素节点.属性节点.文本节点. 一.用nodeType可以检测节点的类型 节点类型 nodeType属性值 元素节点 1 属性节点 2 文本节点 3 这样方便在js中对各个节点进行操作. 元素节点:html中的标签. 属性节点:html便签中的属性值. 文本节点:元素节点之间的文本. 二.用body的childNodes来测试 1 <body>/*第一个文本元素 2 */<div></div>/*第二个文本元素 3 */<div></

javascript中DOM部分基础知识总结

1.DOM介绍 1.1 DOM概念 文档对象模型(Document Object Model),它定义了访问和处理HTML文档的标准方法.现在我们主要接触到的是HTML DOM. HTML文档中的每个成分都是一个节点.HTML文档中的所有节点组成了一个文档树(节点树).HTML文档中的每个元素.属性.文本等都代表着树中的一个节点.树起始于文档节点,并由此继续延伸枝条,直到处于这棵树最低级别的所有文本节点为止.学习DOM,就是学习一些操作页面元素的API(方法).下图表示一个文档树. 1.2 DO

DOM系列---基础篇[转]

DOM (Document Object Model) 即文档对象模型, 针对 HTML 和 XML 文档的 API (应用程序接口) .DOM 描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某一部分.DOM 产生于 网景公司及微软公司创始的 DHTML(动态 HTML) ,但现在它已经成为表现和操作页面标记的真正跨平台.语言中立的方式. DOM 中的三个字母: D(文档)可以理解为整个 Web 加载的网页文档: O(对象)可以理解为类似 window 对象之类的东西,可以调用属性

DOM系列基础知识

DOM (Document Object Model) 即文档对象模型, 针对 HTML 和 XML 文档的 API (应用程序接口) .DOM 描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某一部分.DOM 产生于 网景公司及微软公司创始的 DHTML(动态 HTML) ,但现在它已经成为表现和操作页面标记的真正跨平台.语言中立的方式. DOM 中的三个字母: D(文档)可以理解为整个 Web 加载的网页文档: O(对象)可以理解为类似 window 对象之类的东西,可以调用属性