所有的实例均用下面的html
<div id="id0"> <div id="id1"> 直接text <p> <span>文本内容</span> <input value="111222" type="text" /> </p> </div> </div>
==================JavaScript中的研究=============
1.html的研究(html会返回html标签,不会解析标签)
1.获取值
1. innerHTML:
从对象的起始位置到终止位置的全部内容,不包括Html标签自身。
2. outerHTML:
除了包含innerHTML的全部内容外, 还包含对象标签本身
+ function() { console.log(document.getElementById("id1").innerHTML) console.log(document.getElementById("id1").outerHTML) }();
结果:
2.修改值
innerHTML修改只是修改自己的内部元素,
outerHTML会将元素自身也修改掉。
+ function() { document.getElementById("id1").innerHTML="<p>空了</p>" console.log(document.getElementById("id0").innerHTML) document.getElementById("id1").outerHTML="<p>空了</p>" console.log(document.getElementById("id0").innerHTML) }();
结果:
2.text的研究(text会返回text内容,会解析html标签)
除了作用范围扩大到了包含 调用它的节点之外,outerText 与innerText 基本上没有多大区别。在读取文本值时,outerText 与 innerText 的结果完全一样。但在写模式下,outerText 就完全不同了:outerText 不只是替换调用它的元素的子节点,而是会替换整个元素(包括子节点)。
1.获取元素的值
+ function() { console.log(document.getElementById("id1").innerText) console.log(document.getElementById("id1").outerText) }();
结果:
2.设置元素的值
+ function() { document.getElementById("id1").innerText = "innerText"; console.log(document.getElementById("id1").innerText) document.getElementById("id1").outerText = "outerText"; console.log(document.getElementById("id1").outerText) }();
结果:
本质上,新的文本节点会完全取代调用 outerText 的元素。此后,该元素就从文档中被删除,无法访问。
+ function() { document.getElementById("id1").innerText = "innerText"; console.log(document.getElementById("id0").outerHTML) document.getElementById("id1").outerText = "outerText"; console.log(document.getElementById("id0").outerHTML) }();
结果:
==========jQuery中的研究===============
jQuery中提供了html()方法和text()方法,带参数是改变值,不带参数是获取元素的值。html()会返回标签,而text()会解析标签。如下:
通过查看jQuery的源码发现html()操作的是元素的innerHTML()。
1.html([val])方法:
(1)不带参数的html获取值(返回的是不包括自己的元素,也就是javascript的innerHTML属性)
+ function() { console.log($("#id1").html())) }();
结果:
如果返回包含元素的标签可以用获取元素属性的方法获取:(jQuery获取outerHTML)
+ function() { console.log($("#id1").prop("outerHTML")) }();
结果:
也可以通过扩展jQuery的函数实现获取outerHTML的方法:
jQuery.fn.outerHTML = function(s) { return s ? this.before(s).remove() : jQuery("<p>").append(this.eq(0).clone()).html(); };
测试代码:
+ function() { console.log($("#id0").outerHTML()); }();
(2)修改元素的属性 (html()只会在标签内部修改值)
+ function() { $("#id1").html("<p>这是新内容</p>"); console.log($("#id0").html()) $("#id1").prop("outerHTML","<p>这是新内容</p>"); console.log($("#id0").html()) }();
结果:
2.text([val])方法:
1.text获取元素属性
在上面我们明白在innerText和outerText的时候值是一样的,没有多大区别,所以在这里简单获取。
+ function() { console.log($("#id1").text()) console.log($("#id1").prop("outerText")) }();
结果:
2.jQuery修改元素的text(innerText不影响元素自身,outerText会删除元素自身)
+ function() { $("#id1").text("新的text") console.log($("#id0").html()) $("#id1").prop("outerText", "新的outerText") console.log($("#id0").html()) }();
结果:
总结:
0.html会返回带标签的内容,也就是不会解析html,会将html标签当作字符串返回
text只返回元素开闭标签之间的内容,会解析html元素。
1.innerHTML和outerHTML区别
innerHTML和outerHTML会将html标签也返回来,innerHTML只返回其子元素,而outerHTML会返回包括自己的元素。
采用等号设值的时候innerHTML只会改变其子元素内容。而outerHTML相当于将包括自己在内的标签替换为新的标签。
2.innerText和outerText的区别
在获取值的时候两者没有任何区别,都是获取内部包含的两个标签中的text
在设置值的时候innerText是将其内部的text设为新的值,不会影响标签自身;outerText相当于将元素自身替换为的text,元素自身会被删除。
3.jQuery中的html()和text()方法分别返回的是元素的innerHTML和innerText。要想获取元素的outerHTML和outerText需要采用prop或者attr获取元素的属性