JS如何获取span元素的文本

作者：andy0012019.12.30来源：Web前端之家浏览：14821评论:0

关键词：js

方法1：使用HTML DOM textContent属性

HTML DOM textContent属性设置/返回已定义节点及其所有后代的文本内容。通过设置textContent属性，子节点将被删除，并将其替换为具有指定字符串的单个Text节点。

语法：

返回节点的文本内容

node.textContent

设置节点的文本内容

node.textContent = text

属性值：包含单值text，指定指定节点的文本内容。

返回值：返回一个字符串，表示节点及其所有后代的文本。如果元素是文档，文档类型或表示法，则返回null。

示例：使用textContent属性获取内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>

	<body style="text-align:center;" id="body">
		<h2>HTML DOM textContent属性</h2>
		<span id="Span" style="font-size: 15px; font-weight: bold;">这是span元素的文本。</span>
		<br><br>
		<button onclick="Run()">单击这里 </button>

		<p id="DOWN" style="color:red; font-size: 20px; font-weight: bold;">
		</p>

		<script>
			var span = document.getElementById("Span");
			var el_down = document.getElementById("DOWN");

			function Run() {
				el_down.innerHTML = span.textContent;
			}
		</script>
	</body>

</html>

方法2：使用HTML DOM innerText属性

HTML DOM innerText属性设置/返回已定义节点及其所有后代的文本内容。通过设置innerText属性，将删除所有子节点，并将其替换为具有指定字符串的单个Text节点。

语法：

返回节点的文本内容

node.innerText

设置节点的文本内容

node.innerText=text

属性值：包含单值text，指定指定节点的文本内容

返回值：返回一个字符串，表示节点及其所有子节点的“rendered”文本内容。

示例：使用innerText属性获取内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>

	<body style="text-align:center;" id="body">
		<h2>HTML DOM textContent属性</h2>
		<span id="Span" style="font-size: 15px; font-weight: bold;">这是span元素的文本。</span>
		<br><br>
		<button onclick="Run()">单击这里 </button>

		<p id="DOWN" style="color:palevioletred; font-size: 20px; font-weight: bold;">
		</p>

		<script>
			var span = document.getElementById("Span"); 
            var el_down = document.getElementById("DOWN"); 
              
            function Run() { 
                el_down.innerHTML = span.innerText; 
            } 
		</script>
	</body>

</html>

赏您的支持是我们创作的动力！