HTML - DOM 元素 toString() 方法

**toString()** 方法允许我们将 HTML 元素转换为字符串格式，而不会更改原始元素。它通常显示其类型为 [object Object]。

语法

object.toString();

参数

此方法不接受任何参数。

返回值

toString() 方法不会直接返回值。相反，它会自动用于将对象转换为字符串格式。

HTML DOM 元素 'toString()' 方法示例

以下是 toString() 方法的一些示例，这些示例将对象转换为字符串格式，以便在 HTML DOM 中显示或执行不同的操作。

在 HTML 元素上使用 toString() 方法

此示例显示了 toString 方法的使用。代码通过调用 toString() 函数访问 **<div>** 元素的内容，该函数将元素转换为其字符串格式并将内容更新为显示 toString() 的结果。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>toString() Method Example</title>
</head>

<body>
  <h1>HTML - DOM Element</h1>
  <h2>toString() Method</h2>
  <p>Click the button to get the result!</p>
  <div id="myDiv">
      <p>Example content.</p>
  </div>

  <button onclick="displayToString()">
    Display toString() Result
  </button>

  <div id="ot"></div>

  <script>
      function displayToString() {
          const m=document.getElementById('myDiv');
          const opd=document.getElementById('ot');

          // Using toString() on the HTML element
          const elementString = m.toString();

          // Displaying the result
          opd.textContent = 
          `toString() Result: ${elementString}`;
      }
  </script>
</body>

</html>

将数组转换为字符串

此示例包含一个包含元素的数组。toString() 方法用于将数组转换为字符串。然后，代码更新 **<div>** 元素的内容以显示数组作为字符串。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>toString() Example: Array</title>
</head>

<body>
  <h1>HTML - DOM Element</h1>
  <h2>toString() Method</h2>
  <p>Converting an Array to String</p> 
  <button onclick="convertArrayToString()">
    Convert Array to String
  </button>

  <div id="output"></div>

  <script>
      function convertArrayToString() {
          const my=['apple', 'banana', 'cherry'];
          const arrayString = my.toString();

          const ot=document.getElementById('output');
          ot.textContent = 
          `Array as String: ${arrayString}`;
      }
  </script>
</body>

</html>

将数字转换为字符串

此示例显示了使用 toString() 方法将数字转换为字符串。然后，代码调用 toString() 方法并更新 **<div>** 元素的内容以显示数字作为字符串。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>Converting Number</title>
</head>

<body>
  <h1>HTML - DOM Element</h1>
  <h2>toString() Method</h2>
  <p>Converting Number to String</p>   

  <button onclick="convertNumberToString()">
    Convert Number to String
  </button>

  <div id="output"></div>

  <script>
      function convertNumberToString() {
          const myNumber = 12345;
          const numstr = myNumber.toString();

          const ot=document.getElementById('output');
          ot.textContent = 
          `Number as String: ${numstr}`;
      }
  </script>
</body>

</html>

将对象转换为字符串

此示例显示了使用 toString() 方法将具有属性“name”和“age”的对象转换为字符串。然后，代码调用 toString() 方法并更新 **<div>** 元素的内容以显示对象作为字符串。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>Converting Object</title>
</head>

<body>
  <h1>HTML - DOM Element</h1>
  <h2>toString() Method</h2>
  <p>Converting Object to String</p>  

  <button onclick="convertObjectToString()">
    Convert Object to String
  </button>

  <div id="output"></div>

  <script>
      function convertObjectToString() {
          const myObject={name:'John',age:30};
          const objectString=myObject.toString(); 


          const outputDiv = 
          document.getElementById('output');
          outputDiv.textContent = 
          `Object as String: ${objectString}`;
      }
  </script>
</body>

</html>

支持的浏览器

方法
toString()	是	是	是	是	是

html_dom_element_reference.htm

打印页面