如何在JavaScript中不使用outerHTML获取标签文本？如何高效获取不含innerHTML的outerHTML？

Hey there! Let's break down your two JavaScript questions with practical, low-overhead solutions:

First, let's clarify what you mean by "标签文本"—if you're after the full HTML structure of the element (including its own tags) without using outerHTML, you can manually construct the string by gathering the element's tag name, attributes, and content. If you just need the text content inside the element (stripped of HTML), that's even simpler.

Option 1: Get full element HTML (no outerHTML) #

This approach builds the HTML string from scratch, avoiding the outerHTML property entirely:

function getElementFullHTML(element) {
  // Get lowercase tag name (matches standard HTML output)
  const tag = element.tagName.toLowerCase();
  
  // Build attribute string from all element attributes (escape quotes to avoid invalid HTML)
  const attributes = Array.from(element.attributes)
    .map(attr => `${attr.name}="${attr.value.replace(/"/g, '"')}"`)
    .join(' ');
  
  // Construct opening tag
  const openingTag = attributes ? `<${tag} ${attributes}>` : `<${tag}>`;
  
  // Construct closing tag
  const closingTag = `</${tag}>`;
  
  // Combine with inner content
  return openingTag + element.innerHTML + closingTag;
}

Option 2: Get just the plain text content #

If you only need the text inside the element (no HTML markup), use either:

• element.textContent: Returns all text content, including hidden elements (faster and more consistent across browsers)
• element.innerText: Returns text as it appears visually (respects CSS styles like display: none)

Example:

const plainText = myElement.textContent;

Since accessing innerHTML can be costly (especially for elements with large or complex child content), we can skip it entirely by building just the element's opening and closing tags (or self-closing tag for elements like <img>).

Here's a lightweight function that avoids parsing inner content entirely:

function getEmptyElementHTML(element) {
  const tag = element.tagName.toLowerCase();
  
  // List of self-closing HTML5 tags (no need for a closing tag)
  const selfClosingTags = new Set([
    'img', 'input', 'br', 'hr', 'meta', 'link', 
    'area', 'base', 'col', 'embed', 'keygen', 
    'param', 'source', 'track', 'wbr'
  ]);
  
  // Build attribute string (escape quotes to prevent invalid HTML)
  const attributes = Array.from(element.attributes)
    .map(attr => `${attr.name}="${attr.value.replace(/"/g, '"')}"`)
    .join(' ');
  
  const openingTag = attributes ? `<${tag} ${attributes}>` : `<${tag}>`;
  
  // Return the appropriate tag format
  if (selfClosingTags.has(tag)) {
    // Optional: Use HTML-style self-closing syntax for consistency
    return openingTag.replace('>', '/>');
  } else {
    return `${openingTag}</${tag}>`;
  }
}

Why this is better for performance: #

• We never touch innerHTML, so there's no overhead from parsing or serializing the element's child content.
• The function only iterates over the element's attributes (a small, fixed-cost operation) and handles tag formatting directly.

内容的提问来源于stack exchange，提问作者Chakradar Raju