JavaScript DOM 5 - HTML元素的内容

AlgoStrider
• 阅读 1787

一个HTML元素的内容到底是指什么?特别是对于那些有子节点的HTML元素。
1: 首先来看一下可以获取HTML元素的内容的方式有哪些:

1: element.innerHTML

2: element.outerHTML

3: element.textContent

4: element.innerText

我们这么一段HTML代码:

<ul class='bookList'>
    <li class='bookItem'>book 1</li>
    <li class='bookItem'>book 2</li>
</ul> 

我们对这个'<ul>'元素运用以上四个不同的属性得出的结果有什么不同:

JavaScript DOM 5 - HTML元素的内容

2: 四个属性的不同点主要表现在:

1: innerHTML和outerHTML都返回一段HTML
    1: innerHTML返回的HTML不包含这个元素本身的标签,而outerHTML则包含
    
2:textContent和innerText返回纯文本
    1: textContent和innerText都是把当前节点的所有后代的纯文本递归地拼接到一起
    2: 如果此元素的childNodes[0]和childNodes[childNodes.length -1]是空格的话,textContent是会包括的,但是innerText不包括

3: script标签的特殊性

内联的<script>元素,如果把它的type设置为非‘text/javascript’例如:type="text/x-custom-data",那么javaScript的解析器就会忽略这段脚本,但是它依然会存在于HTML中。对于这种类型的<script>,textContent和innerText返回的结果也不同。假如我们有这样的一段HTML代码:

<ul class='bookList'>
    <li class='bookItem'>book 1</li>
    <li class='bookItem'>book 2</li>
    <script type="text/x-custom-data">
          inside script
      </script>
</ul> 

我们对'<ul>'分别取textContent和innerText,得到的结果如下:

JavaScript DOM 5 - HTML元素的内容

textContent还是会把<script>里面的内容返回来,但是innerText则不会。

点赞
收藏
评论区
推荐文章
Karen110 Karen110
3年前
一篇文章带你了解JavaScript htmldom 元素
这篇文章将教会大家如何查找和访问网页中的HTML元素。一、找到HTML元素通常,使用JavaScript,想操作HTML元素。要做到这一点,必须先找到元素。有几种方法可以做到这一点。找到DOM中的HTML元素的最简单的方法,是利用元素的id。使用id"intro"找到元素:varmyElementdocument.getElementById("in
Wesley13 Wesley13
3年前
03. react 初次见面
    与浏览器的DOM元素不同,React当中的元素事实上是普通的对象,ReactDOM可以确保浏览器DOM的数据内容与React元素保持一致。1、将元素渲染到DOM中    首先我们在一个HTML页面中添加一个id"root" 的<div:<divid"root"
Wesley13 Wesley13
3年前
html元素摇摆
<scripttype"text/javascript"src"jquery1.9.0.min.js"</script<scripttype"text/javascript"jQuery.fn.shakefunction(intShakes/\Amountofshakes\/,intDistance/\S
Stella981 Stella981
3年前
Javascript中的正则表达式
正则表达式提供了强大的字符串检索和操作的能力,这些能力在Javascript中有着比其他语言更广泛的应用。对于运行于浏览器环境中的Javascript,HTML文档的DOM操作和样式操作是其主要任务之一,正则表达式的非凡能力正可以应用于此,如:操作DOM节点的内容、解析元素选择器、根据属性值过滤和匹配元素等等。通常总是存在其它方式实现这些操作,但正则表达式可
Wesley13 Wesley13
3年前
HTML 常用快捷方式
tab补全所有标签元素1.在编辑器中输入元素名称,即可自动补全生成HTML标签,即使不是标准的HTML标签。2.输入:!或者html:5或者html:4s或者html:4t将自动补全html基本结构嵌套操作1.使用“”生成子元素//输入div
Stella981 Stella981
3年前
Python Xpath 提取html整个元素(标签与内容)
提取html某标签中文字时,文字中含有:“<sub2</subO<sub5</sub”,导致提取的文字不符合预期。解决方法:codingutf8fromlxmlimportetreefromHTMLParserimportHTMLParserhtmlu'''<h
Stella981 Stella981
3年前
JavaScript的BOM和DOM
1,window对象,所有浏览器都支持window对象,它表示浏览器窗口BOM(browserObjectModel)是指浏览器对象模型,它使JavaScript有能力与浏览器进行"对话".DOM(DocumentObjectModel)是指文档对象类型,通过它,可以访问HTML文档的所有元素window对象客户端JavaScript最高
Stella981 Stella981
3年前
Javascript权威指南——第一章Javascript概述
示例:javascript贷款计算器  相关技术:    1、如何在文档中查找元素;    2、如何通过表单input元素来获取用户的输入数据;    3、如何通过文档元素来设置HTML内容;    4、如何将数据存储在浏览器中;    5、如何使用脚本发起HTTP请求;    6、如何利用<canvas元素绘图。!(h
Stella981 Stella981
3年前
Javascript浏览器兼容性
JS<noscript标签早期浏览器都面临一个特殊的问题,即当浏览器不支持JavaScript时如何让页面平稳地退化。对这个问题的最终解决方案就是创造一个<noscript元素,用以在不支持JavaScript的浏览器中显示替代的内容。这个元素可以包含能够出现在文档<body中的任何HTML元素一一<scri
Stella981 Stella981
3年前
JQuery html()方法使用一些误区。
最近我在处理一个比较复杂的DOM控制的业务的时候发现html()这个方法的一些领我有些不解的地方。1.html()获取的是第一个匹配的元素的内容,不包括它自己。2.如果需要获取包括元素自己本身的html的话,请使用prop("outerHTML"),如:$("div").prop("outerHTML");//这个的返回值会包含div
小万哥 小万哥
1年前
DOM(文档对象模型):理解网页结构与内容操作的关键技术
DOM(文档对象模型)定义了一种访问和操作文档的标准。它是一个平台和语言无关的接口,允许程序和脚本动态访问和更新文档的内容、结构和样式。HTMLDOM用于操作HTML文档,而XMLDOM用于操作XML文档。HTMLDOM示例通过ID获取并修改HTML元素的
AlgoStrider
AlgoStrider
Lv1
烽火平安夜,归梦到家山。
文章
9
粉丝
0
获赞
0