开发中，我们经常需要获取用户在表单中输入的数据，然后进行处理或提交到服务器。今天我们就来聊一聊，如何用JavaScript获取HTML表单中的值。

使用FormData构造函数

FormData 是一个非常方便的工具，它可以把表单中的所有数据打包成键值对的形式。我们来看一个例子，假设我们有一个用户登录表单：

<form id="login-form">
  用户名: <input type="text" name="username">
  <br />
  密码: <input type="password" name="password">
  <br />
  <input type="submit" value="登录">
</form>

现在我们要获取用户输入的用户名和密码，可以这样写：

const form=document.getElementById('login-form');
form.addEventListener('submit', function (e) {
  e.preventDefault(); // 阻止表单的默认提交行为
  const formData=new FormData(form); // 创建FormData对象
  for (const pair of formData.entries()) {
    console.log(`${pair[0]}: ${pair[1]}`); // 输出每一个表单字段的键和值
  }
});

代码解析

• document.getElementById('login-form') ：首先，我们通过ID获取到表单元素。
• form.addEventListener('submit', function (e) {...})：然后，我们给表单绑定一个submit事件监听器，当用户点击登录按钮时，这个事件就会触发。
• e.preventDefault()：这行代码非常关键，它阻止了表单的默认提交行为。这样我们可以用JavaScript来处理数据，而不是直接刷新页面。
• const formData=new FormData(form)：FormData对象会自动读取表单中的所有输入字段，并将其封装成键值对的形式。
• formData.entries()：这个方法返回一个包含所有键值对的可迭代对象。我们可以用for...of循环来遍历它们，并输出每个字段的名称和值。

假设你在开发一个在线购物的系统，用户在填写订单表单后点击提交，你可以用上面的方法获取到用户的所有输入数据，然后进行验证或发送到服务器。

你还可以根据需要，把这些数据通过fetch或axios发送到后端服务器，完成用户的登录或其他操作。

form.addEventListener('submit', function (e) {
  e.preventDefault();
  const formData=new FormData(form);
  
  fetch('/login', {
    method: 'POST',
    body: formData
  })
  .then(response=> response.json())
  .then(data=> console.log(data))
  .catch(error=> console.error('Error:', error));
});

结束

FormData 是处理表单数据的强大工具，特别适合在现代Web开发中使用。它不仅简化了数据获取的过程，而且能够很好地与后端API集成。在下次你需要处理表单数据时，不妨试试这个方法，希望这篇文章能帮助你更好地掌握这一技巧。如果你有任何疑问或其他场景的需求，欢迎在评论区与我交流！

axios.get(url).then((resp)=> {
 请求成功，处理resp.data中的html数据
}).catch((err)=> {
 请求失败，错误处理
})

fs=require("fs")
jquery=require('jquery')
jsdom=require('jsdom') //fs.readFileSync()返回结果是一个buffer，相当于byte[] 
html=fs.readFileSync('haha.html').toString('utf8') 
dom=new jsdom.JSDOM(html) 
$=jquery(dom.window) console.log($('h1'))

cheerio=require('cheerio')
html=require('fs').readFileSync("haha.html").toString('utf8')
$=cheerio.load(html)
console.log($('h1'))

var axios=require("axios")
var cheerio=require("cheerio")
axios.get("https://github.com/weiyinfu?tab=repositories").then(resp=> {
 var $=cheerio.load(resp.data)
 var lis=$("#user-repositories-list li")
 var repos=[]
 for (var i=0; i < lis.length; i++) {
 var li=lis.eq(i)
 var repo={
 repoName: li.find("h3").text().trim(),
 repoUrl: li.find("h3 a").attr("href").trim(),
 repoDesc: li.find("p").text().trim(),
 language: li.find("[itemprop=programmingLanguage]").text().trim(),
 star: li.find(".muted-link.mr-3").eq(0).text().trim(),
 fork: li.find(".muted-link.mr-3").eq(1).text().trim(),
 forkedFrom: li.find(".f6.text-gray.mb-1 a").text().trim()
 }
 repos.push(repo)
 }
 console.log(repos)
})

日常开发中，我们经常需要在用户浏览页面时进行一些动态操作，比如实现无限滚动加载更多内容、调整布局、或触发动画效果。为了实现这些功能，准确获取整个网页文档的高度是关键的一步。今天，我们就结合一个实际业务场景，来看一下如何用JavaScript获取整个文档的高度。

场景介绍

假设你在开发一个电商网站，需要在用户滚动到底部时自动加载更多商品。为了实现这个功能，我们需要精确地获取当前网页的高度，并判断用户是否已经滚动到页面底部。

方法一 ：获取文档高度的方法

要获取文档的高度，可以使用scrollHeight、offsetHeight和clientHeight这些属性的最大值。

示例代码

在这个场景中，我们可以这样编写代码：

// 获取文档的高度
function getDocumentHeight() {
  const body=document.body;
  const html=document.documentElement;
  return Math.max(
    body.scrollHeight,
    body.offsetHeight,
    html.clientHeight,
    html.scrollHeight,
    html.offsetHeight
  );
}

// 监听滚动事件，加载更多内容
window.addEventListener('scroll', ()=> {
  const scrollTop=window.scrollY || document.documentElement.scrollTop;
  const windowHeight=window.innerHeight;
  const documentHeight=getDocumentHeight();

  // 判断是否滚动到底部
  if (scrollTop + windowHeight >=documentHeight) {
    loadMoreProducts();
  }
});

// 模拟加载更多商品的函数
function loadMoreProducts() {
  console.log('加载更多商品...');
  // 这里可以加入实际的加载更多商品的代码逻辑
}

属性解释

• scrollHeight：元素内容的总高度，包括不可见部分。
• offsetHeight：元素的高度，包括内边距和边框。
• clientHeight：元素的内部高度（像素），包括内边距但不包括边框、外边距和水平滚动条。

通过取这些属性的最大值，我们可以得到整个文档的高度，确保在任何情况下都能准确测量。

方法二：使用getBoundingClientRect方法

在某些情况下，比如需要获取元素的精确位置和尺寸时，可以使用getBoundingClientRect方法。这种方法返回一个包含元素尺寸及其相对于视口位置的对象。

示例代码

在我们这个加载更多商品的场景中，也可以使用这种方法来获取文档高度：

// 获取文档的高度
function getDocumentHeight() {
  const body=document.body;
  const html=document.documentElement;
  return Math.max(
    body.getBoundingClientRect().height,
    html.getBoundingClientRect().height
  );
}

// 监听滚动事件，加载更多内容
window.addEventListener('scroll', ()=> {
  const scrollTop=window.scrollY || document.documentElement.scrollTop;
  const windowHeight=window.innerHeight;
  const documentHeight=getDocumentHeight();

  // 判断是否滚动到底部
  if (scrollTop + windowHeight >=documentHeight) {
    loadMoreProducts();
  }
});

// 模拟加载更多商品的函数
function loadMoreProducts() {
  console.log('加载更多商品...');
  // 这里可以加入实际的加载更多商品的代码逻辑
}

总结

通过这篇文章，我们结合实际业务场景，了解了如何用JavaScript获取整个文档的高度。不论是通过scrollHeight、offsetHeight和clientHeight组合，还是使用getBoundingClientRect方法，都能帮助我们在实际开发中实现动态加载和布局调整的功能。希望这些技术能帮助你在日常开发中更加得心应手！