原生js怎么获取文本

原生JS获取文本的方法包括使用innerText、textContent、nodeValue、innerHTML等。本文将详细介绍这些方法，并探讨它们在不同场景下的使用情况。

一、innerText、textContent

innerText和textContent都是获取或设置元素文本内容的常用方法。innerText会考虑CSS样式和HTML标签，textContent则只获取纯文本内容。

innerText

innerText会返回元素的可见文本内容，忽略那些通过CSS隐藏的文本。它会将内容中的HTML标签解析并去除，仅保留文本。

let element = document.getElementById("example");

let text = element.innerText;
console.log(text);

textContent

textContent会返回元素的所有文本内容，包括隐藏的文本。它不会解析HTML标签，而是直接返回所有文本。

let element = document.getElementById("example");

let text = element.textContent;
console.log(text);

区别： innerText会考虑CSS样式和布局，textContent则不会。因此，当你需要获取页面上用户可见的文本时，innerText更为适合；如果你需要获取所有文本内容，不论其是否可见，textContent是更好的选择。

二、nodeValue、innerHTML

nodeValue

nodeValue主要用于获取或设置文本节点的值。它通常用于处理直接文本节点，而不是元素节点。

let textNode = document.getElementById("example").firstChild;

let text = textNode.nodeValue;
console.log(text);

innerHTML

innerHTML会返回元素的HTML内容，包括所有子元素和文本。它不仅可以获取文本，还可以获取和设置HTML结构。

let element = document.getElementById("example");

let htmlContent = element.innerHTML;
console.log(htmlContent);

区别： nodeValue只适用于文本节点，且只能获取或设置纯文本；innerHTML适用于元素节点，可以获取和设置整个HTML内容。

三、使用场景分析

动态获取文本

在处理动态网页时，文本内容可能会频繁变化。使用innerText或textContent可以方便地获取最新的文本内容。特别是在进行数据展示或用户交互时，这些方法非常有用。

let element = document.getElementById("dynamicText");

setInterval(() => {
    console.log(element.innerText);
}, 1000);

表单输入处理

在处理表单输入时，获取用户输入的文本内容是常见需求。通过value属性可以轻松获取输入框的内容。

let inputElement = document.getElementById("userInput");

let inputValue = inputElement.value;
console.log(inputValue);

简单文本替换

在需要替换网页中的某段文本时，innerText和textContent是最简便的方法。它们可以直接更新元素的文本内容。

let element = document.getElementById("example");

element.innerText = "新文本内容";

四、性能和安全考量

在使用innerText、textContent、nodeValue和innerHTML时，性能和安全性是需要考虑的重要因素。

性能

频繁操作DOM可能会带来性能问题，尤其是在大型复杂页面中。相比之下，textContent通常比innerText更快，因为它不会触发样式计算和布局。

安全

使用innerHTML时需要特别注意安全问题。直接设置innerHTML可能会导致XSS（跨站脚本）攻击。因此，在处理用户输入或动态内容时，应当进行适当的过滤和转义。

let userContent = "<script>alert('XSS!')</script>";

let element = document.getElementById("example");
element.innerHTML = userContent; // 可能导致XSS攻击

为防止XSS，可以使用文本节点或DOM操作来替代直接设置HTML。

let textNode = document.createTextNode(userContent);

let element = document.getElementById("example");
element.appendChild(textNode);

五、实际应用示例

获取标题文本

假设有一个网页包含多个标题元素，你需要获取并显示所有标题的文本内容。

<h1>标题1</h1>

<h2>标题2</h2>
<h3>标题3</h3>

你可以使用querySelectorAll来获取所有标题元素，并通过innerText或textContent获取文本内容。

let titles = document.querySelectorAll("h1, h2, h3");

titles.forEach(title => {
    console.log(title.innerText);
});

动态更新文本

在单页应用（SPA）中，动态更新文本内容是常见需求。你可以使用innerText或textContent来实现这一功能。

<div id="content">原始文本内容</div>

<button onclick="updateText()">更新文本</button>

function updateText() {

    let contentElement = document.getElementById("content");
    contentElement.innerText = "更新后的文本内容";
}

表单输入验证

在处理表单提交时，通常需要验证用户输入。你可以获取输入框的文本内容，并进行相应的验证。

<form onsubmit="return validateForm()">

    <input type="text" id="username" required>
    <button type="submit">提交</button>
</form>

function validateForm() {

    let usernameInput = document.getElementById("username");
    let username = usernameInput.value;
    if (username.length < 6) {
        alert("用户名必须至少包含6个字符");
        return false;
    }
    return true;
}

六、总结

原生JS提供了多种获取文本内容的方法，包括innerText、textContent、nodeValue和innerHTML。在选择适当的方法时，需要考虑实际应用场景、性能和安全性。通过合理使用这些方法，可以高效地获取和处理网页中的文本内容，从而提高用户体验和应用性能。

相关问答FAQs：

1. 如何使用原生JS获取网页中的文本内容？

如果您想要获取网页中的文本内容，可以使用以下原生JavaScript代码：

var text = document.getElementById("elementId").innerText;

其中，elementId是您想要获取文本内容的元素的ID。该代码将返回指定元素的文本内容，并将其赋值给变量text。

2. 如何使用原生JS获取输入框中的文本内容？

如果您想要获取输入框中的文本内容，可以使用以下原生JavaScript代码：

var inputText = document.getElementById("inputId").value;

其中，inputId是您想要获取文本内容的输入框的ID。该代码将返回指定输入框中的文本内容，并将其赋值给变量inputText。

3. 如何使用原生JS获取选中文本的内容？

如果您想要获取用户在网页中选中的文本内容，可以使用以下原生JavaScript代码：

var selectedText = "";
if (window.getSelection) {
  selectedText = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
  selectedText = document.selection.createRange().text;
}

以上代码将检查浏览器是否支持window.getSelection方法，如果支持，则使用该方法获取选中的文本内容。如果不支持，则使用document.selection对象的createRange方法获取选中的文本内容。无论哪种方法，最后将选中的文本内容赋值给变量selectedText。