📌  相关文章
📜  评论 dire le nombre de ligne html en cliquamt sur un boutton javascript (1)

📅  最后修改于: 2023-12-03 15:28:09.378000             🧑  作者: Mango

用JavaScript获取HTML行数

想要获取HTML文档中的行数，我们需要使用JavaScript编写一个函数。这个函数将在点击按钮时触发，然后输出文档中的行数。

步骤
编写HTML

首先，我们需要编写一个HTML页面来测试这个函数。我们将创建一个简单的HTML页面，其中包含一个按钮和一个div容器，用于显示行数。以下是HTML代码：

<!DOCTYPE html>
<html>
<head>
	<title>行数统计</title>
</head>
<body>
	<button onclick="countLines()">统计行数</button>
	<div id="lineNumber"></div>
</body>
</html>
编写JavaScript

现在，我们需要编写JavaScript函数来计算HTML文档中的行数并在div容器中显示它们。以下是我们的JavaScript代码：

function countLines() {
  var html = document.getElementsByTagName('html')[0].innerHTML;
  var lines = html.split('\n');
  document.getElementById('lineNumber').innerHTML = '该HTML文档共有 ' + lines.length + ' 行。';
}

这个函数使用getElementsByTagName()获取HTML元素，并使用innerHTML获取到HTML文档的字符串表示形式。然后，它使用split()方法将字符串拆分成行，并返回行数。

当按钮被点击时，我们将调用countLines()函数，并将结果显示在div容器中。

测试

现在，我们可以测试我们的函数并查看HTML文档中的行数。只需要打开现有的HTML文件，并单击“统计行数”按钮即可。您应该会看到一条消息，其中包含HTML文档的行数。

Markdown
# 用JavaScript获取HTML行数

想要获取HTML文档中的行数，我们需要使用JavaScript编写一个函数。这个函数将在点击按钮时触发，然后输出文档中的行数。

## 步骤

### 编写HTML

首先，我们需要编写一个HTML页面来测试这个函数。我们将创建一个简单的HTML页面，其中包含一个按钮和一个div容器，用于显示行数。以下是HTML代码：
行数统计
```
编写JavaScript

现在，我们需要编写JavaScript函数来计算HTML文档中的行数并在div容器中显示它们。以下是我们的JavaScript代码：

function countLines() {
  var html = document.getElementsByTagName('html')[0].innerHTML;
  var lines = html.split('\n');
  document.getElementById('lineNumber').innerHTML = '该HTML文档共有 ' + lines.length + ' 行。';
}

这个函数使用getElementsByTagName()获取HTML元素，并使用innerHTML获取到HTML文档的字符串表示形式。然后，它使用split()方法将字符串拆分成行，并返回行数。

当按钮被点击时，我们将调用countLines()函数，并将结果显示在div容器中。

测试

现在，我们可以测试我们的函数并查看HTML文档中的行数。只需要打开现有的HTML文件，并单击“统计行数”按钮即可。您应该会看到一条消息，其中包含HTML文档的行数。