当前位置： 首页 > article >正文

【前端】JavaScript 方法速查大全-DOM、BOM、时间、处理JS原生问题（三）

article 2024/11/13 14:43:36

文章目录

    • 🔥 前言
    • 🌴 DOM 操作
      • 1. 常用 DOM 接口
        • 节点类型
        • 节点操作接口
      • 2. 判断当前位置是否为页面底部
      • 3. 全屏操作
        • 进入全屏
        • 退出全屏
      • 4. 判断 DOM 元素是否具有某个 `className`
        • 方法一：使用 `classList`
        • 方法二：使用正则表达式
    • 🌱 BOM 操作
      • 1. 返回当前网页地址
      • 2. 获取滚动条位置
      • 3. 获取 URL 中的参数
      • 4. 检测设备类型
    • 🕰 时间处理
      • 1. Date 常用 API
      • 2. 一个时间戳是多少天小时分钟秒毫秒
      • 3. 格林尼治时间 转 北京时间
      • 4. 获取两个日期相差天数
      • 5. 数组中有时间字段，需要按时间排序
    • 💍 处理 JS 原生存在的一些问题
      • 1. 加减法精度缺失问题
      • 2. 递归优化（尾递归）
    • 🌲 更多文章
    • 🌟 结尾

🔥 前言

在现代Web开发中，JavaScript是不可或缺的编程语言。无论是前端开发还是后端服务，掌握JavaScript的各种方法和技巧都是每位开发者的必修课。本文将为您提供一个全面、系统的JavaScript方法参考，涵盖数组操作、对象处理、DOM与BOM接口、时间处理、解决JS原生问题、函数应用、正则表达式、数据格式转换、随机数生成、文本处理等众多方面。无论您是初学者还是资深开发者，这份速查大全都将成为您日常开发中的得力助手！💪

JavaScript 方法速查

🌴 DOM 操作

1. 常用 DOM 接口

DOM（文档对象模型）是JavaScript与HTML交互的桥梁。以下是一些常用的DOM操作方法：

// 获取 DOM 节点
document.getElementById('id'); // 通过 ID 获取
document.getElementsByTagName('div'); // 通过标签名获取
document.getElementsByClassName('class'); // 通过类名获取
document.querySelector('.class'); // 通过选择器获取第一个元素
document.querySelectorAll('.class'); // 通过选择器获取所有匹配的元素
document.body; // 获取 body 元素
document.getElementsByName('name'); // 通过 name 属性获取元素
document.documentElement; // 获取 html 元素
节点类型
  • 元素节点（nodeType === 1）
  • 属性节点（nodeType === 2）
  • 文本节点（nodeType === 3）
  • 注释节点（nodeType === 8）
  • 文档节点（nodeType === 9）
  • 文档碎片节点（nodeType === 11）
节点操作接口

  • 增加

    • document.createElement('tag') 创建元素节点
    • document.createTextNode('text') 创建文本节点
    • document.createComment('comment') 创建注释节点
    • document.createDocumentFragment() 创建文档碎片节点

  • 插入

    • parent.appendChild(child) 在父元素末尾插入子元素
    • parent.insertBefore(newNode, referenceNode) 在参考节点前插入新节点

  • 删除

    • element.remove() 删除自身元素
    • parent.removeChild(child) 删除子元素

  • 替换

    • parent.replaceChild(newNode, oldNode) 替换子节点

  • 复制

    • element.cloneNode(true/false) 复制节点，true 深拷贝，false 浅拷贝

2. 判断当前位置是否为页面底部

function bottomVisible() {
  return document.documentElement.clientHeight + window.scrollY >= (document.documentElement.scrollHeight || document.documentElement.clientHeight);
}

console.log(bottomVisible()); // true 或 false

3. 全屏操作

进入全屏
function launchFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.mozRequestFullScreen) { /* Firefox */
    element.mozRequestFullScreen();
  } else if (element.msRequestFullscreen) { /* IE11 */
    element.msRequestFullscreen();
  } else if (element.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
    element.webkitRequestFullscreen();
  }
}

// 使用示例
launchFullscreen(document.documentElement); // 整个页面全屏
launchFullscreen(document.getElementById("id")); // 某个元素全屏
退出全屏
function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  } else if (document.mozCancelFullScreen) { /* Firefox */
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
    document.webkitExitFullscreen();
  }
}

exitFullscreen();

4. 判断 DOM 元素是否具有某个 className

方法一：使用 classList
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ClassList 示例</title>
</head>
<body>
  <div id="test" class="te"></div>

  <script>
    let div = document.getElementById('test');
    console.log(div.classList.contains("te")); // true

    // 拓展操作
    div.classList.add('new-class');
    div.classList.remove('te');
    div.classList.toggle('active');
  </script>
</body>
</html>
方法二：使用正则表达式
const hasClass = (el, className) => new RegExp(`(^|\\s)${className}(\\s|$)`).test(el.className);

let div = document.getElementById('test');
console.log(hasClass(div, 'te')); // true 或 false

🌱 BOM 操作

1. 返回当前网页地址

function currentURL() {
  return window.location.href;
}

console.log(currentURL()); // "https://juejin.im/timeline"

2. 获取滚动条位置

function getScrollPosition(el = window) {
  return {
    x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
    y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
  };
}

console.log(getScrollPosition()); // {x: 0, y: 692}

3. 获取 URL 中的参数

function getURLParameters(url) {
  const params = url.match(/([^?=&]+)(=([^&]*))/g);
  return params ? params.reduce(
    (a, v) => (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1), a), {}
  ) : [];
}

console.log(getURLParameters('http://www.baidu.com/index?name=tyler')); // {name: "tyler"}

4. 检测设备类型

const detectDeviceType = () => 
  /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent) 
    ? 'Mobile' 
    : 'Desktop';

console.log(detectDeviceType()); // "Desktop" 或 "Mobile"

🕰 时间处理

1. Date 常用 API

let dateMe = new Date();

console.log(dateMe); // Fri Jul 12 2019 19:59:59 GMT+0800 (中国标准时间)
console.log(Date.now()); // 当前时间的时间戳，毫秒数
console.log(Date.parse('2019.7.12')); // 1562860800000

// 年月日时分秒 获取
console.log(dateMe.getFullYear()); // 2019
console.log(dateMe.getMonth()); // 6（0 表示一月）
console.log(dateMe.getDate()); // 12
console.log(dateMe.getHours()); // 20
console.log(dateMe.getMinutes()); // 11
console.log(dateMe.getSeconds()); // 29
console.log(dateMe.getMilliseconds()); // 363
console.log(dateMe.toJSON()); // "2019-07-12T12:05:15.363Z"
console.log(dateMe.getDay()); // 5（星期五）
console.log(dateMe.getTime()); // 时间戳，毫秒数
console.log(dateMe.toString()); // "Fri Jul 12 2019 20:05:15 GMT+0800 (中国标准时间)"
console.log(dateMe.getTimezoneOffset()); // -480（分钟）
console.log(dateMe.toDateString()); // "Fri Jul 12 2019"

2. 一个时间戳是多少天小时分钟秒毫秒

const formatDuration = ms => {
  if (ms < 0) ms = -ms;
  const time = {
    day: Math.floor(ms / 86400000),
    hour: Math.floor(ms / 3600000) % 24,
    minute: Math.floor(ms / 60000) % 60,
    second: Math.floor(ms / 1000) % 60,
    millisecond: Math.floor(ms) % 1000
  };
  return Object.entries(time)
    .filter(val => val[1] !== 0)
    .map(([key, val]) => `${val} ${key}${val !== 1 ? 's' : ''}`)
    .join(', ');
};

console.log(formatDuration(3161012)); // "52 minutes, 41 seconds, 12 milliseconds"

3. 格林尼治时间 转 北京时间

function myTimeToLocal(inputTime){
  if(!inputTime && typeof inputTime !== 'number'){
    return '';
  }
  let localTime = '';
  inputTime = new Date(inputTime).getTime();
  const offset = (new Date()).getTimezoneOffset();
  localTime = (new Date(inputTime - offset * 60000)).toISOString();
  localTime = localTime.substr(0, localTime.lastIndexOf('.'));
  localTime = localTime.replace('T', ' ');
  return localTime;
}

console.log(myTimeToLocal(1530540726443)); // "2018-07-02 22:12:06"
console.log(myTimeToLocal('2017-11-16T05:23:20.000Z')); // "2017-11-16 13:23:20"

4. 获取两个日期相差天数

function getDaysDiffBetweenDates(dateInitial, dateFinal) {
  return (dateFinal - dateInitial) / (1000 * 3600 * 24);
}

console.log(getDaysDiffBetweenDates(new Date('2017-12-13'), new Date('2017-12-22'))); // 9

5. 数组中有时间字段，需要按时间排序

let data = [
  { id: 1, publishTime: "2019-05-14 18:10:29" },
  { id: 2, publishTime: "2019-05-14 18:17:29" },
  { id: 3, publishTime: "2019-05-14 15:09:25" }
];

data.sort((a, b) => new Date(b.publishTime) - new Date(a.publishTime));

console.log(data);
// 0: {id: 2, publishTime: "2019-05-14 18:17:29"}
// 1: {id: 1, publishTime: "2019-05-14 18:10:29"}
// 2: {id: 3, publishTime: "2019-05-14 15:09:25"}

💍 处理 JS 原生存在的一些问题

1. 加减法精度缺失问题

// 加法函数
function add(arg1, arg2) { 
    let r1, r2, m; 
    try { r1 = arg1.toString().split(".")[1].length } catch (e) { r1 = 0 } 
    try { r2 = arg2.toString().split(".")[1].length } catch (e) { r2 = 0 } 
    m = Math.pow(10, Math.max(r1, r2)); 
    return (arg1 * m + arg2 * m) / m; 
}

console.log(add(0.1, 0.2)); // 0.3

// 减法函数
function sub(arg1, arg2) { 
    let r1, r2, m, n; 
    try { r1 = arg1.toString().split(".")[1].length } catch (e) { r1 = 0 } 
    try { r2 = arg2.toString().split(".")[1].length } catch (e) { r2 = 0 } 
    m = Math.pow(10, Math.max(r1, r2)); 
    n = r1 >= r2 ? r1 : r2; 
    return Number(((arg1 * m - arg2 * m) / m).toFixed(n)); 
}

console.log(sub(0.3, 0.1)); // 0.2

2. 递归优化（尾递归）

// 尾递归优化函数
function tco(f) {
  let value;
  let active = false;
  let accumulated = [];

  return function accumulator() {
    accumulated.push(arguments);
    if (!active) {
      active = true;
      while (accumulated.length) {
        value = f.apply(this, accumulated.shift());
      }
      active = false;
      return value;
    }
  };
}

// 使用示例
function factorial(n, acc = 1) {
  if (n <= 1) return acc;
  return factorial(n - 1, acc * n);
}

const optimizedFactorial = tco(factorial);
console.log(optimizedFactorial(5)); // 120

🌲 更多文章

【VScode】中文版ChatGPT编程工具-CodeMoss！教程+示例+快捷键
【VScode】VSCode中的智能编程利器，全面揭秘ChatMoss & ChatGPT中文版

🌟 结尾

以上内容涵盖了常用的JavaScript方法与技巧，希望对大家在日常开发中有所帮助。掌握这些方法不仅能提高开发效率，还能帮助您更好地解决实际问题。如果您有更好的方法或建议，欢迎在评论区交流！💬


http://www.kler.cn/a/388208.html

相关文章：

  • Mysql 8迁移到达梦DM8遇到的报错
  • AI生活之我用AI处理Excel表格
  • Django 的 ModelViewSet 中的 get_queryset 方法自定义查询集
  • Oracle OCP认证考试考点详解082系列16
  • 如何优化Elasticsearch的查询性能？
  • 数据安全、信息安全、网络安全区别与联系
  • C++学习笔记----11、模块、头文件及各种主题（一）---- 模板概览与类模板（1）
  • python opencv灰度变换
  • Docker部署Oracle 11g
  • selinux与防火墙
  • 【1】虚拟机安装
  • 开源模型应用落地-glm模型小试-glm-4-9b-chat-vLLM集成（四）
  • 快速傅里叶变换（FFT）基础（附python实现）
  • Go语言异常处理
  • Windows配置NTP时间同步
  • Docker：镜像构建 DockerFile
  • Spring 配置绑定原理分析
  • 安全编码实践：反射API的“间谍游戏”
  • java-web-web后端知识小结
  • 让金融数据处理更精准-C#银行回单识别集成示例、回执单识别
  • GNU/Linux - /proc/sys/vm/overcommit_memory
  • 《Python 与 SQLite：强大的数据库组合》
  • thinkphp如何查出值是null的布尔类型的值
  • 代码随想录算法训练营Day13 | 二叉树理论基础、递归遍历、迭代遍历、统一迭代、层序遍历
  • Android智能座驾，carlink场景截屏黑屏问题
  • Pycharm远程调试deepspeed！可用！