深入15个HTML元素方法，你见过吗？

虽然现代化的 web 开发更多地依赖各种 MVC 框架，但开发者仍需要熟练掌握 HTML 与 DOM 方面的基础知识。不过，即使是有着多年经验的前端开发者，也会遇到一些不明所以的情况。本文首先将为初学者介绍 HTML 与 DOM 的基本常识，随后为大家介绍15个比较冷门的 HTML 元素的方法。

初学者指导

首先让我们来讨论一下 HTML 与 DOM 之间的区别。

显然，普通的

元素就是一段 HTML 代码，它可以应用在任何一个以 .html 为扩展名的文件中。元素自带一系列特性（attribute），以控制它的显示方式与行为。

这就是元素的全部内容，它与 JavaScript 没有任何关联。

而 DOM 的作用是将你的 JavaScript 代码与文档中的 HTML 元素关联在一起，让你能够以对象的方式与这些元素进行交互。

这就是所谓的文档对象模型。

在 HTML 中的每个元素都对应着一个 DOM ‘接口’，其中定义了若干属性（property，通常会映射至 HTML 元素上的特性）与方法。举例来说，一个

元素对应着一个 HTMLTableElement 接口。

你可以按以下方式获取某个元素的引用：

const searchBox = document.getElementById('search-box');

现在，你就可以访问该元素上定义的所有属性与方法了。打个比方，你可以通过 searchBox.value 访问它的 value 属性，也可以调用 searchBox.focus() 方法让光标移至输入框上。

感谢你参加这个58秒的 DOM 入门培训课程，哈哈。

现在的问题在于，大多数元素都没有提供什么有趣的方法。因此，除非你特意到官方文档规范上去搜索那些可能永远都用不到的东西，否则很容易忽略掉那些零散的小技巧。

幸运的是，浏览规范与整理小技巧正是我用于避免陷入困境的两种最喜欢的方式。那么，让我们开始吧……

如果你也希望尝试一下这些技巧，又恰好有一些浏览器 DevTools 可以使用的话，可以在元素树型结构中先选中某个元素，然后在控制台中输入 $0，它会返回给你一个所选中元素的引用。如果你需要返回该元素的对象，请输入 dir($0)。

在控制台中，你可以实现各种丰富的功能。

1 table 的方法

原始的 table 元素（时至今日仍然是网站布局方法里的第一名）本身自带许多精巧的方法，使用这些方法创建表格就像搭建宜家里的桌子一样简单。

以下是部分实用的方法。

const tableEl = document.querySelector('table');
const headRow = tableEl.createHead().insertRow();
headerRow.insertCell().textContent = 'Make';
headerRow.insertCell().textContent = 'Model';
headerRow.insertCell().textContent = 'Color';
const newRow = tableEl.insertRow();
newRow.insertCell().textContent = 'Yes';
newRow.insertCell().textContent = 'No';
newRow.insertCell().textContent = 'Thank you';

整段代码里完全用不着使用 document.createElement() 方法。

如果你在一个 table 元素上直接调用 .insertRow() 方法，它甚至会自动为你插入一个

元素，是不是很棒？

2 scrollIntoView()

你知道吗？当页面的 URL 中包含 #something 元素时，一旦页面加载，浏览器就会自动滚动至具有这个 ID 的元素之处。

这确实是一项很贴心的功能，但如果你在页面加载之后再渲染元素，这项功能就不起作用了。

不过，你也可以通过以下方式，手动地让这项功能重新生效：

document.querySelector(document.location.hash).scrollIntoView();

3 hidden

好吧，hidden 或许不是一个方法，但如果你提出抗议，那我也要争论一下：在 hidden 的背后很可能对应着一个 setter，这可是一个货真价实的方法，对不对？

不管怎样，你是否曾经为了隐藏某个元素而使用过 myElement.style.display = 'none' 这种方法呢？如果是的话，请别再这么做了！

只需调用 myElement.hidden = true ，即可实现元素隐藏的功能。

4 toggle()

嗯，toggle 也不算是元素的方法，它实际上是元素属性上的一个方法。严格来说，这是一种为元素添加或删除某个 class 的方法，具体做法是 myElement.classList.toggle('some-class') 。

如果你曾经通过 if 条件语句为元素添加 class，那就应该赶紧改用这种做法。

正确的方式是为 toggle 方法传入第二个参数，如果该参数返回 true ，则指定的 class 就会添加至元素上。

el.classList.toggle('some-orange-class', theme === 'orange');

我知道你在想些什么：这种写法违背了 ‘toggle’ 这个词的本义（开关），那些从 IE 时代过来的开发者们都这么想，他们断言应当彻底摒弃使用第二个参数的做法。

所以，我收回我的话。不必坚持这种写法了，各位请随意！

5 querySelector()

好吧，你当然知道这个方法，但据我推测，应该只有 17% 的开发者才知道，该方法可以使用在任意元素上。

打个比方，myElement.querySelector('.my-class') 的作用是返回在 myElement 的子代中包含 my-class 这个 class 的所有元素。

6 closest

该方法可在任意元素上使用，它能够向上查找元素的树型结构，可以理解为与 querySelector() 相反的方法。因此，我可以通过以下方法获取当前内容的对应标头：

myElement.closest('article').querySelector('h1');

这段方法首先向上找到最近的

元素，然后再向下找到最近的

元素。

7 getBoundingClientRect()

在对 DOM 元素调用该方法时，将返回一个包含其空间结构详细信息的简单对象。

{
  x: 604.875,
  y: 1312,
  width: 701.625,
  height: 31,
  top: 1312,
  right: 1306.5,
  bottom: 1343,
  left: 604.875
}

不过，在调用该方法时需要注意两点：

调用该方法会导致元素的重绘，根据设备与页面复杂程度的不同，重绘的时间可能会占用几毫秒。因此，如果你需要重复地调用该方法，例如在使用动画的场景下，需要特别注意这一点。
并非所有的浏览器都会返回这些值，他们有这个责任么？

8 matches()

假设我需要检查某个元素是否包括一个特定的 class。

这是最复杂的方式：

if (myElement.className.indexOf('some-class') > -1) {
  // do something
}

比上面的好一点，但和本文没什么关系：

if (myElement.className.includes('some-class')) {
  // do something
}

最佳方式：

if (myElement.matches('.some-class')) {
  // do something
}

9 insertAdjacentElement()

我今天才刚学到这一条！它的作用类似于 appendChild() ，但能够更好地控制插入子元素的具体位置。

parentEl.insertAdjacentElement('beforeend', newEl) 与 parentEl.appendChild(newEl) 的作用是一样的，但除此之外，你还可以指定 beforebegin、afterbegin 或 afterend 这几个参数值，元素将按这些值的名称所示插入相应的位置。

多么强大的控制能力！

多棒的点子。

10 contains()

你有没有遇到过这样的情形，需要知道某个元素是否被包含在另一个元素中？至少我本人经常会遇到这样的问题。

打个比方，假设我在处理一个鼠标点击事件时，需要知道它是发生在一个模态窗口中还是发生在外面（这样我才能够关闭这个窗口），我大概会这么做：

const handleClick = e => {
  if (!modalEl.contains(e.target)) modalEl.hidden = true;
};

代码中的 modalEl 是模态窗口的引用，而 e.target 则代表各种发生点击事件的元素。

有趣的是，每当遇到这种情形，在我第一遍写代码的时候，100%的概率会将其中的判断逻辑写反。

哪怕是我提高了警惕，并在保存代码之前尝试将逻辑颠倒过来写，仍然还是写错。

#11 getAttribute()

这毫无疑问是所有元素方法中最没用的一个，但有一个场景除外。

你是否记得，我在本文的开头部分曾提到，对象的属性 property 通常也会映射到它的特性 attribute 中（我在上文中特别用粗体强调了这一点，注意不是斜体）？

但在某一个场景中，这种假设并不成立，这就是某个元素的 href 特性，例如 Cat 。

调用 el.href 不会返回 /animals/cat，这可能与你的猜测不符。原因在于元素实现了 HTMLHyperlinkElementUtils接口，该接口提供了一系列辅助属性，例如 prototol 与 hash 等等，以展现与链接的目标相关的值。

href 就是其中一个实用的属性，它将返回完整的 URL，并去掉无用的空格，而不是返回在特性中所指定的相对 URL。

这样一来，如果你需要获取 href 特性中的字符串字面值，就只能使用 el.getAttribute('href') 方法了。

12 dialog 元素的三大法宝

是一个相对较新的元素，它带来了两个还算能用的方法，和一个非常棒的方法。其中show() 和 close() 方法的功能与你所想象的一样，我感觉还算可以。

而 showModal() 方法能够将

元素显示在页面的顶层，居中对齐，这正是所期望的模态窗口行为。你无需指定 z-index，或者手动添加一个灰色的背景，也不需要监听 esc 按键以关闭此窗口。浏览器能够理解模态窗口的工作方式，并自动完成你所期望的行为。

这真是太棒了。

13 forEach()

某些情况下，当你获取到一个元素列表的引用时，可以通过 forEach() 方法进行迭代式调用。

用 for() 进行循环已经是 2014 年代的老古董了。

假设你需要记录页面中所有链接的 URL，可以输入以下代码，只要你不介意看到报错。

document.getElementsByTagName('a').forEach(el ==> {
  console.log(el.href);
});

也可以这么做：

document.querySelectorAll('a').forEach(el ==> {
  console.log(el.href);
});

问题出在 getElementsByTagName 与其他类似的 get… 方法返回的是一个 HTMLCollection 接口，而 querySelectorAll返回的是一个 NodeList 接口。

而 NodeList 接口为我们提供了 forEach() 方法（此外还包括 keys()、values()，和 entries() 等方法）。

理想的情况下，最好是每个方法都只返回简单的数组，而不是返回一些类似数组的对象。不过别担心，ECMA 大神为我们提供了 Array.from() 方法，它能够把所有这些类数组对象转化为一个真正的数组。

所以，这样的代码就能够正常工作：

Array.from(document.getElementsByTagName('a')).forEach(el ==> {
  console.log(el.href);
});

奖励关卡：创建了一个数组之后，你就能够对其使用 map() 、filter() 和 reduce() 以及其他各种数组方法了。打个比方，先不管目的是什么，总之你可以按以下方式返回所有外部链接的数组：

Array.from(document.querySelectorAll('a'))
  .map(el => el.origin)
  .filter(origin => origin !== document.origin)
  .filter(Boolean);

我最喜欢的一个方法是 .filter(Boolean)，它肯定会给将来的我在调试问题时带来无穷的烦恼，哈哈。

14 表单

或许你已经知道，有一个 submit() 方法。但或许你不知道表单还有一个 reset() 方法，而且当你需要对表单元素进行验证时，还可以调用 reportValidity() 方法。

此外，你也可以通过对表单的 elements 属性加上元素的 name 特性的方式调用它的属性。打个比方，myFormEl.elements.email 将返回属于某个中的元素（‘属于’，并不代表它一定是一个‘子元素’）。

好吧，其实刚才我是骗你的。elements 并不会返回一个元素列表，而是返回一个控件列表（显然它不是一个数组，因为没必要这么做）。

举例来说：假设你有三个单选按钮，每个都有相同的名称 animal，那么 formEl.elements.animal 将返回一个单选按钮集的引用（一个控件，三个元素）。

而 formEl.elements.animal.value 将返回所选中的单选按钮的值。

这种语法看起来非常古怪，让我们来分解一下看看：formEl 是一个元素，elements 则对应 HTMLFormControlsCollection 接口，这并非一个真正的数组，其中的每一项内容也未必代表一个 HTML 元素。animal是多个单选按钮的集合，只是因为他们具有相同的 name 特性才聚集在一起（RadioNodeList 接口就是为此而生的），而 value 则返回该集合中所选中的那个单选按钮的 value 特性。

非常直观，嗯……

15 select()

感谢你耐心阅读本文，希望本文能为你带来一些新知识，给你的工作带来实际的用途。

你可能感兴趣的:(深入15个HTML元素方法，你见过吗？)

【数据结构-合法括号字符串】力扣1963. 使字符串平衡的最小交换次数 hlc@ 数据结构数据结构 leetcode 算法
给你一个字符串s，下标从0开始，且长度为偶数n。字符串恰好由n/2个开括号‘[’和n/2个闭括号‘]’组成。只有能满足下述所有条件的字符串才能称为平衡字符串：字符串是一个空字符串，或者字符串可以记作AB，其中A和B都是平衡字符串，或者字符串可以写成[C]，其中C是一个平衡字符串。你可以交换任意两个下标所对应的括号任意次数。返回使s变成平衡字符串所需要的最小交换次数。示例1：输入：s=“][][”输
LeetCode1963. 使字符串平衡的最小交换次数超好的小白各种算法题算法
给你一个字符串s，下标从0开始，且长度为偶数n。字符串恰好由n/2个开括号‘[’和n/2个闭括号‘]’组成。只有能满足下述所有条件的字符串才能称为平衡字符串：字符串是一个空字符串，或者字符串可以记作AB，其中A和B都是平衡字符串，或者字符串可以写成[C]，其中C是一个平衡字符串。你可以交换任意两个下标所对应的括号任意次数。返回使s变成平衡字符串所需要的最小交换次数。示例1：输入：s=“][][”输
lxml模块的学习 bad kid's cute lxml模块 lxml模块 python 爬虫
1.lxml的认识在前面学习了xpath的语法，那么在代码中我们如何使用xpath呢，对应的我们需要lxm博文链接：xpath和lxml类库安装方式：pipinstalllxml2.lxml的使用1.导入lxml的etree库(导入没有提示不代表不能用)fromlxmlimportetree2.利用etree.HTML，将字符串转化为Element对象,Element对象具有xpath的方法,返回
C++高频面试问题 HJ_sky C++
C++常见面试问题汇总一、指针和引用的区别1.指针有自己的一块空间，而引用只是一个别名；2.使用sizeof看一个指针的大小是4，而引用则是被引用对象的大小；3.指针可以被初始化为NULL，而引用必须被初始化且必须是一个已有对象的引用；4.作为参数传递时，指针需要被解引用才可以对对象进行操作，而直接对引用的修改都会改变引用所指向的对象；5.可以有const指针，但是没有const引用；6.指针在使
深入GPU渲染流水管线：从顶点到像素的微观世界晴空了无痕图形学 GPU渲染管线
现代图形硬件的架构解密与优化实践一、渲染流水线全景解析1.经典渲染管线阶段划分应用阶段几何阶段光栅化阶段像素处理阶段输出合并阶段2.现代GPU架构演进SIMT架构特性：NVIDIASM(StreamingMultiprocessor)vsAMDCU(ComputeUnit)硬件管线并行度：顶点着色器：32线程/Warp像素着色器：8x8像素/Quad延迟渲染革命：Tile-BasedDeferre
如何用deepseek快速生成思维导图和流程图？ ProcessOn官方账号流程图
一起来看看md格式和mermaid格式，与deepseek的碰撞会产生怎样的魔法吧！1、md格式+deepseek，快速生成思维导图Markdown是一种轻量级的标记语言，旨在以易读易写的纯文本格式编写文档，并能够轻松转换为结构化的HTML（超文本标记语言）或其他格式。它最初由JohnGruber和AaronSwartz于2004年创建，因其简洁性和可读性而广受欢迎。操作方法：Step1：给dee
python技巧之下划线老虎也淘气 Python编程掌握指南 python django 开发语言
‍♂️个人主页@老虎也淘气个人主页✍作者简介：Python学习者希望大家多多支持我们一起进步！如果文章对你有帮助的话，欢迎评论点赞收藏加关注python技巧之下划线1、python的moudles文件中__all__作用2、__slots__用于限定类属性，如：3、下面的小技巧可以获取私有变量：4、下划线种类单个下划线（_）单下划线前缀的名称（例如_shahriar）双下划线前缀的名称（例如__s
给我的 IM 系统加上监控两件套：【Prometheus + Grafana】蝎子莱莱爱打怪 prometheus grafana
监控是一个系统必不可少的组成部分，实时，准确的监控，将会大大有助于我们排查问题。而当今微服务系统的话有一个监控组合很火那就是Prometheus+Grafana，嘿你别说这俩兄弟配合的相当完美，Prometheus负责数据采集，Grafana负责可视化展示,各就其位，各司其职一起来完成监控这个活儿。紧接着我们简单对这两工具做个介绍~1、Prometheus与Grafana简介Prometheus作
关于修改 Ollama 及其模型默认路径、迁移已安装的 Ollama 程序和模型以及重启 Ollama 的操作指南星沉大海@T Ollama Ollama 迁移指南
以下是关于修改Ollama及其模型默认路径、迁移已安装的Ollama程序和模型以及重启Ollama的操作指南，以问答格式呈现，并将涉及命令操作的部分使用代码块按执行顺序和步骤形式展示：Q1：如何修改Ollama及其模型的默认路径？A1：Windows系统：创建新目录：在非C盘的磁盘中创建一个新目录，用于存放Ollama的模型文件，例如D:\AIModels。设置环境变量：右键点击“此电脑”或“计算
XFlow 开源项目教程余靖年Veronica
XFlow开源项目教程XFlowReactcomponentforbuildinginteractivediagrams.项目地址:https://gitcode.com/gh_mirrors/xf/XFlow1.项目介绍XFlow是由AntV团队打造的一个基于React的交互式图表构建组件。它旨在简化复杂图形界面的创建过程，让开发者能够更轻松地实现图形编辑和流程图设计功能。XFlow提供了统一的
JavaScript 性能优化实战：优化 DOM 操作提升交互响应 deying0865423 javascript 开发语言 ecmascript
目录一、理解DOM操作的性能损耗二、减少DOM操作次数（一）批量操作DOM（二）缓存DOM查询结果三、优化DOM查询（一）使用更高效的查询方法（二）利用事件委托四、减少回流与重绘（一）批量修改样式（二）使用requestAnimationFrame在现代Web应用开发中，JavaScript与DOM（文档对象模型）的交互极为频繁。无论是创建动态界面、响应用户操作，还是更新页面内容，DOM操作都扮演
Java方法详解 NaclarbCSDN java 开发语言
Java方法详解方法基本概念 packagecom.arbedu.method; publicclassDemo01{ //main方法 publicstaticvoidmain(String[]args){ inta; intb; intsum=add(1,2);//实际参数，用来调用传递的参数 System.out.println(sum);
【华为OD-E卷 -123 判断一组不等式是否满足约束并输出最大差 100分（python、java、c++、js、c）】 CodeClimb 算法题华为od （A+B+C+D+E 卷）收录分享华为od python java javascript c++
【华为OD-E卷-判断一组不等式是否满足约束并输出最大差100分（python、java、c++、js、c）】题目给定一组不等式，判断是否成立并输出不等式的最大差(输出浮点数的整数部分)要求:不等式系数为double类型，是一个二维数组不等式的变量为int类型，是一维数组;不等式的目标值为double类型，是一维数组不等式约束为字符串数组，只能是:“>”,“>=”,“<”,“<=”,“=”，例如，
【华为OD-E卷 -122 字符统计及重排 100分（python、java、c++、js、c）】 CodeClimb 算法题华为od （A+B+C+D+E 卷）收录分享 python 华为od java c++javascript
【华为OD-E卷-字符统计及重排100分（python、java、c++、js、c）】题目给出一个仅包含字母的字符串，不包含空格，统计字符串中各个字母（区分大小写）出现的次数，并按照字母出现次数从大到小的顺序。输出各个字母及其出现次数。如果次数相同，按照自然顺序进行排序，且小写字母在大写字母之前输入描述输入一行，为一个仅包含字母的字符串输出描述按照字母出现次数从大到小的顺序输出各个字母和字母次数，
Prometheus+Grafana监控平台搭建_grafana专业监控项 2401_89828619 prometheus grafana
Prometheus提供多种类型的Exporter用于采集各种不同服务的运行状态。目前支持的有数据库、硬件、消息中间件、存储系统、HTTP服务器、JMX等。·alertmanager警告管理器，用来进行报警。·其他辅助性工具Prometheus系统架构图：它的服务过程是这样的Prometheusdaemon负责定时去目标上抓取metrics(指标)数据，每个抓取目标需要暴露一个http服务的接口给
【华为OD-E卷-02 最多提取子串数目100分（python、java、c++、js、c）】 CodeClimb 算法题华为od （A+B+C+D+E 卷）收录分享华为od python java c++javascript
【华为OD-E卷-最多提取子串数目100分（python、java、c++、js、c）】题目给定[a-z]，26个英文字母小写字符串组成的字符串A和B，其中A可能存在重复字母，B不会存在重复字母，现从字符串A中按规则挑选一些字母，可以组成字符串B。挑选规则如下：同一个位置的字母只能挑选一次被挑选字母的相对先后顺序不能被改变求最多可以同时从A中挑选多少组能组成B的字符串。输入描述输入为2行，第1行输
【蓝桥杯】每日练习 Day4 百渡ovO 算法数据结构蓝桥杯 c++
目录前言回文游戏分析代码牛奶交换分析代码最大限度的提高生产力分析代码前言幸运日！！！遇到三个非常简单的题。几乎没费什么脑子就写出来了。本来今天是不打算再写的，因为做完实验本身就已经十点了，而且实验过程并不愉快（一条双绞线裁了九次……不过最终主播在朋友的帮助下还是成功做出来了——皆大欢喜）。还有回寝室的时候遇到一只野生哈基米，好可爱^_^今日事今日毕。事不宜迟我们马上开始吧！回文游戏分析首先看到（最
install of jenkins-2.501-1.1.noarch conflicts with file 计算机辅助工程 centos jenkins
在处理RPM包冲突问题时，首先要明确的是，Jenkins2.501-1.1.noarch是一个特定的RPM包版本，通常用于RedHatEnterpriseLinux(RHEL)或CentOS系统。如果你在安装或更新Jenkins时遇到了冲突问题，这通常是因为系统中已存在一个或多个与新安装包冲突的包。解决步骤查找冲突的包：使用rpm命令来查找哪些包与Jenkins2.501-1.1.noarch冲突
C++高频（二） HUZ_小Z c++课程设计笔记经验分享
C++面试高频（二）1.知道动态链接与静态链接吗？两者有什么区别动态链接和静态链接的区别：动态链接：在程序运行时进行链接，加载共享库文件。节省空间，可多个程序共享库文件。灵活性高，可以动态加载不同版本的库文件。维护方便，只需更新库文件本身。静态链接：在编译时进行链接，将库函数复制到可执行文件中。独立的可执行文件，不依赖外部库文件。可执行文件较大，可能会有冗余代码。维护复杂，更新库函数需重新编译和分
基于改进ISODATA算法的负荷场景曲线聚类（matlab代码）电力程序小学童聚类 matlab ISODATA算法风电光伏
目录1主要内容聚类中心选取步骤核方法2部分代码3程序结果4程序链接1主要内容程序复现文献《基于机器学习的短期电力负荷预测和负荷曲线聚类研究》第三章《基于改进ISODATA算法的负荷场景曲线聚类》模型，该方法不止适用于负荷聚类，同样适用于风光等可再生能源聚类，只需要改变聚类的数据即可，该方法的通用性和可创新性强。该代码实现一种基于改进ISODATA算法的负荷场景曲线聚类方法，代码中，主要做了四种聚类
PyPI 镜像源使用国内镜像，提升下载速度和安装成功率 zhiranyouni 同事技术分享
临时使用：可以在使用pip的时候加参数-ihttps://pypi.tuna.tsinghua.edu.cn/simple如：pipinstall-ihttps://pypi.tuna.tsinghua.edu.cn/simplepymysql这样会从清华源的镜像去安装pymysql永久修改，一劳永逸：修改~/.pip/pip.conf(没有就创建一个文件夹及文件）mkdir.pipcd.pipt
软件设计师之编译原理核心知识深度剖析：从词法到语法分析一杯年华@编程空间软考中级软考中级
软件设计师之编译原理核心知识深度剖析：从词法到语法分析在软件开发的知识体系中，编译原理是极为关键的一环，它就像一座桥梁，连接着人类可读的程序代码与计算机能够执行的机器指令。我写这篇博客的目的，是希望和大家一起学习进步，深入剖析编译原理中的词法分析和语法分析等核心知识，让这些复杂的概念变得通俗易懂，助力大家在软件设计领域更上一层楼。一、词法分析相关知识（一）正规表达式与正规集正规表达式是描述词法规则
python的try和except_Python 异常处理(Try...Except) weixin_40001309
版权所有，未经许可，禁止转载try块让你可以检测代码块中的错误。except块让你可以处理错误。finally块让你可以执行最终代码，不管try与except块的结果如何，finally块的代码都将执行。异常处理当错误(或者异常)发生时，Python通常会停止执行，并报错。这些异常可以使用try/except语句处理：示例下面try块会产生异常，因为x没有定义:try:print(x)except
VUE动态路由 qq_41164527 vue vue.js 前端 javascript
在Vue.js中，路由是实现单页应用（SPA）的核心功能之一。Vue提供了vue-router库来管理路由。以下是Vue路由的几种常见方式：1.声明式路由导航（使用）是VueRouter提供的组件，用于声明式导航。它会被渲染成一个标签，点击后会跳转到指定的路由。HomeAboutto属性指定目标路由的路径。默认会渲染为标签，点击后不会刷新页面，而是通过VueRouter进行路由切换。2.编程式路由
NLP高频面试题（四）——BN和LN的区别与联系，为什么attention要用LN Chaos_Wang_ NLP常见面试题自然语言处理人工智能
在深度学习模型中，Normalization是一种极为重要的技巧，BatchNormalization（BN）和LayerNormalization（LN）是其中最为常用的两种方法。然而，二者在实际应用中有着明显的区别与联系，尤其在Transformer的Attention机制中，LN有着独特的优势。一、BN与LN的核心区别与联系1.BatchNormalization(BN)BN的思想源于一个叫
利用Python进行数据可视化（Plotly与Dash的应用）步入烟尘 Python超入门指南全册信息可视化 python plotly
本文已收录于《Python超入门指南全册》本专栏专门针对零基础和需要进阶提升的同学所准备的一套完整教学，从基础到精通不断进阶深入，后续还有实战项目，轻松应对面试，专栏订阅地址：https://blog.csdn.net/mrdeam/category_12647587.html优点：订阅限时19.9付费专栏，私信博主还可进入全栈VIP答疑群，作者优先解答机会（代码指导、远程服务），群里大佬众多可以
JavaScript基础-DOM 简介難釋懷 javascript 开发语言
在现代Web开发中，JavaScript与HTML和CSS一起构成了网页的核心技术。而在这三者之中，DOM（DocumentObjectModel，文档对象模型）作为浏览器处理网页内容的一种接口，扮演着至关重要的角色。通过DOM，JavaScript能够动态地访问和操作网页的内容、结构以及样式。本文将介绍DOM的基本概念、核心组成部分以及如何使用JavaScript来操作DOM。一、什么是DOM？
JAVA中List数组与泛型 Yeauty java 泛型
去除ArrayList中重复字符串元素方式A:案例演示需求：ArrayList去除集合中字符串的重复值(字符串的内容相同)思路：创建新集合方式/***A:案例演示*需求：ArrayList去除集合中字符串的重复值(字符串的内容相同)*思路：创建新集合方式*/publicstaticvoidmain(String[]args){ArrayListlist=newArrayList();list.ad
HTML入门 Yeauty html
HTML的概述什么是HTML:HyperTextMarkupLanguage超文本标记语言超文本:比普通文本更加强大,能够定义许多文本样式标记语言:通过一组标签来对内容进行标记,并且修饰-标签:为什么要学习HTML它是网页设计的设计,基本上所有的网站都是用它开发的如何来学习HTMLHTML语法规范HTML是一个.html或者.htm结尾的文件HTML文件中是头和体两部分HTML是通过一组标签来对内
《基于机器学习的负荷曲线聚类算法对比与改进：K-L-isodata的创新性研究》 TWHiwhjig 机器学习算法聚类
基于机器学习的负荷曲线聚类包括kmeansisodata和改进的L-isodata以及在其基础上再次进行改进的K-L-isodata(有创新性)，四者通过评价指标进行了对比精品代码可修改性极高有参考文献ID:93150688324967700自律的电气人基于机器学习的负荷曲线聚类是一种基于数据分析和模式识别的技术，它可以帮助我们对系统的负荷变化进行分类和理解。在负荷曲线聚类的研究中，K-means
Nginx负载均衡 510888780 nginx 应用服务器
Nginx负载均衡一些基础知识: nginx 的 upstream目前支持 4 种方式的分配 1)、轮询（默认）每个请求按时间顺序逐一分配到不同的后端服务器，如果后端服务器down掉，能自动剔除。 2)、weight 指定轮询几率，weight和访问比率成正比
RedHat 6.4 安装 rabbitmq bylijinnan erlang rabbitmq redhat
在 linux 下安装软件就是折腾，首先是测试机不能上外网要找运维开通，开通后发现测试机的 yum 不能使用于是又要配置 yum 源，最后安装 rabbitmq 时也尝试了两种方法最后才安装成功机器版本： [root@redhat1 rabbitmq]# lsb_release LSB Version: :base-4.0-amd64:base-4.0-noarch:core
FilenameUtils工具类 eksliang FilenameUtils common-io
转载请出自出处：http://eksliang.iteye.com/blog/2217081 一、概述这是一个Java操作文件的常用库，是Apache对java的IO包的封装，这里面有两个非常核心的类FilenameUtils跟FileUtils，其中FilenameUtils是对文件名操作的封装;FileUtils是文件封装，开发中对文件的操作，几乎都可以在这个框架里面找到。非常的好用。
xml文件解析SAX 不懂事的小屁孩 xml
xml文件解析:xml文件解析有四种方式， 1.DOM生成和解析XML文档(SAX是基于事件流的解析) 2.SAX生成和解析XML文档(基于XML文档树结构的解析) 3.DOM4J生成和解析XML文档 4.JDOM生成和解析XML 本文章用第一种方法进行解析，使用android常用的DefaultHandler import org.xml.sax.Attributes;
通过定时任务执行mysql的定期删除和新建分区，此处是按日分区酷的飞上天空 mysql
使用python脚本作为命令脚本，linux的定时任务来每天定时执行 #!/usr/bin/python # -*- coding: utf8 -*- import pymysql import datetime import calendar #要分区的表 table_name = 'my_table' #连接数据库的信息 host,user,passwd,db =
如何搭建数据湖架构？听听专家的意见蓝儿唯美架构
Edo Interactive在几年前遇到一个大问题：公司使用交易数据来帮助零售商和餐馆进行个性化促销，但其数据仓库没有足够时间去处理所有的信用卡和借记卡交易数据 “我们要花费27小时来处理每日的数据量，”Edo主管基础设施和信息系统的高级副总裁Tim Garnto说道：“所以在2013年，我们放弃了现有的基于PostgreSQL的关系型数据库系统，使用了Hadoop集群作为公司的数
spring学习——控制反转与依赖注入 a-john spring
控制反转（Inversion of Control，英文缩写为IoC）是一个重要的面向对象编程的法则来削减计算机程序的耦合问题，也是轻量级的Spring框架的核心。控制反转一般分为两种类型，依赖注入（Dependency Injection，简称DI）和依赖查找（Dependency Lookup）。依赖注入应用比较广泛。
用spool+unixshell生成文本文件的方法 aijuans xshell
例如我们把scott.dept表生成文本文件的语句写成dept.sql,内容如下: 　　set pages 50000; 　　set lines 200; 　　set trims on; 　　set heading off; 　　spool /oracle_backup/log/test/dept.lst; 　　select deptno||','||dname||','||loc
1、基础--名词解析(OOA/OOD/OOP) asia007 学习基础知识
OOA:Object-Oriented Analysis（面向对象分析方法）是在一个系统的开发过程中进行了系统业务调查以后，按照面向对象的思想来分析问题。OOA与结构化分析有较大的区别。OOA所强调的是在系统调查资料的基础上，针对OO方法所需要的素材进行的归类分析和整理，而不是对管理业务现状和方法的分析。　　OOA（面向对象的分析）模型由5个层次（主题层、对象类层、结构层、属性层和服务层）
浅谈java转成json编码格式技术百合不是茶 json编码 java转成json编码
json编码;是一个轻量级的数据存储和传输的语言在java中需要引入json相关的包,引包方式在工程的lib下就可以了 JSON与JAVA数据的转换（JSON 即 JavaScript Object Natation，它是一种轻量级的数据交换格式，非常适合于服务器与 JavaScript 之间的数据的交
web.xml之Spring配置(基于Spring+Struts+Ibatis) bijian1013 java web.xml SSI spring配置
指定Spring配置文件位置 <context-param> <param-name>contextConfigLocation</param-name> <param-value> /WEB-INF/spring-dao-bean.xml,/WEB-INF/spring-resources.xml, /WEB-INF/
Installing SonarQube（Fail to download libraries from server） sunjing Install Sonar
1. Download and unzip the SonarQube distribution 2. Starting the Web Server The default port is "9000" and the context path is "/". These values can be changed in &l
【MongoDB学习笔记十一】Mongo副本集基本的增删查 bit1129 mongodb
一、创建复本集假设mongod,mongo已经配置在系统路径变量上，启动三个命令行窗口，分别执行如下命令： mongod --port 27017 --dbpath data1 --replSet rs0 mongod --port 27018 --dbpath data2 --replSet rs0 mongod --port 27019 -
Anychart图表系列二之执行Flash和HTML5渲染白糖_ Flash
今天介绍Anychart的Flash和HTML5渲染功能 HTML5 Anychart从6.0第一个版本起，已经逐渐开始支持各种图的HTML5渲染效果了，也就是说即使你没有安装Flash插件，只要浏览器支持HTML5，也能看到Anychart的图形（不过这些是需要做一些配置的）。这里要提醒下大家，Anychart6.0版本对HTML5的支持还不算很成熟，目前还处于
Laravel版本更新异常4.2.8-> 4.2.9 Declaration of ... CompilerEngine ... should be compa bozch laravel
昨天在为了把laravel升级到最新的版本，突然之间就出现了如下错误： ErrorException thrown with message "Declaration of Illuminate\View\Engines\CompilerEngine::handleViewException() should be compatible with Illuminate\View\Eng
编程之美-NIM游戏分析-石头总数为奇数时如何保证先动手者必胜 bylijinnan 编程之美
import java.util.Arrays; import java.util.Random; public class Nim { /**编程之美 NIM游戏分析问题：有N块石头和两个玩家A和B，玩家A先将石头随机分成若干堆，然后按照BABA...的顺序不断轮流取石头，能将剩下的石头一次取光的玩家获胜，每次取石头时，每个玩家只能从若干堆石头中任选一堆，
lunce创建索引及简单查询 chengxuyuancsdn 查询创建索引 lunce
import java.io.File; import java.io.IOException; import org.apache.lucene.analysis.Analyzer; import org.apache.lucene.analysis.standard.StandardAnalyzer; import org.apache.lucene.document.Docume
[IT与投资]坚持独立自主的研究核心技术 comsci it
和别人合作开发某项产品....如果互相之间的技术水平不同,那么这种合作很难进行,一般都会成为强者控制弱者的方法和手段..... 所以弱者,在遇到技术难题的时候,最好不要一开始就去寻求强者的帮助,因为在我们这颗星球上,生物都有一种控制其
flashback transaction闪回事务查询 daizj oracle sql 闪回事务
闪回事务查询有别于闪回查询的特点有以下3个：（1）其正常工作不但需要利用撤销数据，还需要事先启用最小补充日志。（2）返回的结果不是以前的“旧”数据，而是能够将当前数据修改为以前的样子的撤销SQL（Undo SQL）语句。（3）集中地在名为flashback_transaction_query表上查询，而不是在各个表上通过“as of”或“vers
Java I/O之FilenameFilter类列举出指定路径下某个扩展名的文件游其是你 FilenameFilter
这是一个FilenameFilter类用法的例子，实现的列举出“c:\\folder“路径下所有以“.jpg”扩展名的文件。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
C语言学习五函数，函数的前置声明以及如何在软件开发中合理的设计函数来解决实际问题 dcj3sjt126com c
# include <stdio.h> int f(void) //括号中的void表示该函数不能接受数据，int表示返回的类型为int类型 { return 10; //向主调函数返回10 } void g(void) //函数名前面的void表示该函数没有返回值 { //return 10; //error 与第8行行首的void相矛盾 } in
今天在测试环境使用yum安装，遇到一个问题： Error: Cannot retrieve metalink for repository: epel. Pl dcj3sjt126com centos
今天在测试环境使用yum安装，遇到一个问题： Error: Cannot retrieve metalink for repository: epel. Please verify its path and try again 处理很简单，修改文件“/etc/yum.repos.d/epel.repo”，将baseurl的注释取消， mirrorlist注释掉。即可。 &n
单例模式 shuizhaosi888 单例模式
单例模式懒汉式 public class RunMain { /** * 私有构造 */ private RunMain() { } /** * 内部类，用于占位，只有 */ private static class SingletonRunMain { priv
Spring Security（09）——Filter 234390216 Spring Security
Filter 目录 1.1 Filter顺序 1.2 添加Filter到FilterChain 1.3 DelegatingFilterProxy 1.4 FilterChainProxy 1.5
公司项目NODEJS实践0.1 逐行分析JS源代码 mongodb nginx ubuntu nodejs
一、前言前端如何独立用nodeJs实现一个简单的注册、登录功能，是不是只用nodejs+sql就可以了？其实是可以实现，但离实际应用还有距离，那要怎么做才是实际可用的。网上有很多nod
java.lang.Math liuhaibo_ljf java Math lang
System.out.println(Math.PI); System.out.println(Math.abs(1.2)); System.out.println(Math.abs(1.2)); System.out.println(Math.abs(1)); System.out.println(Math.abs(111111111)); System.out.println(Mat
linux下时间同步 nonobaba ntp
今天在linux下做hbase集群的时候，发现hmaster启动成功了，但是用hbase命令进入shell的时候报了一个错误 PleaseHoldException: Master is initializing，查看了日志，大致意思是说master和slave时间不同步，没办法，只好找一种手动同步一下，后来发现一共部署了10来台机器，手动同步偏差又比较大，所以还是从网上找现成的解决方
ZooKeeper3.4.6的集群部署 roadrunners zookeeper 集群部署
ZooKeeper是Apache的一个开源项目，在分布式服务中应用比较广泛。它主要用来解决分布式应用中经常遇到的一些数据管理问题，如：统一命名服务、状态同步、集群管理、配置文件管理、同步锁、队列等。这里主要讲集群中ZooKeeper的部署。 1、准备工作我们准备3台机器做ZooKeeper集群，分别在3台机器上创建ZooKeeper需要的目录。数据存储目录
Java高效读取大文件 tomcat_oracle java
　　读取文件行的标准方式是在内存中读取，Guava 和Apache Commons IO都提供了如下所示快速读取文件行的方法：　　Files.readLines(new File(path), Charsets.UTF_8); 　　FileUtils.readLines(new File(path)); 　　这种方法带来的问题是文件的所有行都被存放在内存中，当文件足够大时很快就会导致
微信支付api返回的xml转换为Map的方法 xu3508620 xml map 微信api
举例如下： <xml> <return_code><![CDATA[SUCCESS]]></return_code> <return_msg><![CDATA[OK]]></return_msg> <appid><

按字母分类： A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 其他