摘要:有时候做项目会用到上述四个属性来获取文档里的一些内容,但对他们的区别还是有些模糊,所以写了几个简单的函数,通过打印在控制台上的结果看看他们之间的区别。
有时候做项目会用到上述四个DOM属性来获取HTML文档里的一些内容,但对他们的区别还是有些模糊,所以写了几个简单的函数,通过打印在控制台上的结果看看他们之间的区别。
代码:outerinner one
betweeninner two
var showInnerHTML = function(){ console.log(document.getElementById("outer").innerHTML); } var showOuterHTML = function(){ console.log(document.getElementById("outer").outerHTML); } var showInnerText = function(){ console.log(document.getElementById("outer").innerText); } var showOuterText = function(){ console.log(document.getElementById("outer").outerText); }innerHTML
控制台结果:
总结:获取当前节点下子节点的HTML文本,如果子节点只有文本节点,则它的输出效果和innerText相同
outerHTML控制台结果:
总结:获得包括当前节点本身以及节点下子节点的HTML文本
innerText控制台结果:
总结:获得当前节点子节点内的纯文本内容
outerText控制台结果:
总结:获得当前节点以及子节点内的纯文本内容(总感觉和innerText的输出效果是一样的,没想到什么例子可以有不同的效果,如果你有,欢迎评论(#^.^#))
疑问:可以看到innerText的输出结果中,中间有一个空行,并不是很懂……
虽然是简单的例子,但是通过代码把概念区分了一下,也是挺好的~如果有写得不足的,欢迎指正留言~不胜感激!
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/99812.html
利用JS就可以实现在点击按钮实现图片排序,做个狠人,直接说: 效果 1 、点击按钮 如果按钮文字是从大到小 将li标签按照从大到小的顺序排列 文字改成从小到大 如果按钮文字是从小到大 将li标签按照从小到大的顺序排列 文字变成从大到小 2 、点击按钮 将li随机排序 <style> *{ padding:0; margin:0; list-style:n...
这篇文章为大家讲如何用JSd代码实现音乐播放。 音乐播放的主要js代码 音乐数据的数组对象 这里不仅有前端网页提供数据,还有为后面的js代码提供了音乐路径,分享给大家。 { ablum:"海阔天空", artist:"Beyond", id:1, name:"大地", path:"musics/1...
摘要:会省略内嵌的标签名,所以文本的只显示了的内容,并没有显示的标签名也必须是标签对的形式删除了格式信息,所有文本均在一行,所以文本的内容都在一行。也用来设置或获取成对标签之间的内容,并且只关注文本信息。之前,是不支持的。是的亲儿子,放心用吧。 原文地址:https://www.xksblog.top/innerHTML-innerText-textContent-outerHTML-val...
var a = & alert(a); var c = document.createElement(div); c.innerHTML = a; a = c.innerText || c.textContent; c = null; alert(a); 吃水不忘挖井人:http://jsfiddle.net/xqin/6jra...
摘要:设置或获取对象起始标签和结束标签之间的内容。使用上面的操作执行输出执行输出注意到区别了吗,输出中的内容时,标签是不包含在内的。在设置时,执行此时页面显示的内容是,此时标签名没有被解析,当作字符原样输出。 1.innerHTML:设置或获取对象起始标签和结束标签之间的内容。如: hello world segmentfault dazhuaoyao 执行console.log(doc...
阅读 778·2023-04-25 20:18
阅读 2063·2021-11-22 13:54
阅读 2484·2021-09-26 09:55
阅读 3787·2021-09-22 15:28
阅读 2920·2021-09-03 10:34
阅读 1654·2021-07-28 00:15
阅读 1514·2019-08-30 14:25
阅读 1245·2019-08-29 17:16