你可能从未听说过的15种HTML元素方法!

时间: 2018-07-25阅读: 1599标签: html

初学者须知

我们来讨论html和DOM之间的区别。显然,一个普通<table>元素就是html。您可以在.html的文件中使用它。它有一组属性影响它的外观和行为方式。这就是HTML,不过它与JavaScript无关。

DOM是将JavaScript代码与文档中的HTML元素相关联的内容,因此您可以与对象等元素进行交互。

它是一个文档到对象模型.HTML中的每种类型的元素都有自己的DOM“接口”,用于定义属性(通常映射到HTML元素上的属性)和方法。例如,<table>有一个名为HTMLTableElement的接口。

您可以通过编写以下内容来获取对特定元素的引用:

然后,您可以访问可用于该类型元素的所有属性和方法。例如,您可以使用searchBox.value访问value属性,或者通过调用searchBox.focus()将光标放在框中。

感谢您参加关于DOM的58秒课程。

你可以在浏览器DevTools中尝试一下,在元素树中选择一个元素,然后在控制台中输入$0。它会为您提供了所选元素的参考。要将元素视为对象,请键入dir($0)。你可以在控制台中做很多事情。


#1 table methods

table (仍然是排列网站的第一种方式)有很多漂亮的方法,使得构建它们就像构建一个Ikea表一样简单。

使用document.createElement()只会创造一个单一的table,不过如果直接在table元素上调用它,.insertRow()方法甚至会为你插入一个<tbody>。不是很好吗?


#2 scrollIntoView()

您知道如果在URL中有#something,那么当页面加载时,浏览器将滚动页面以便您可以看到具有该ID的元素?

这是非常周到的,但如果您在页面加载后渲染该元素,则它不起作用。


#3 hidden

无论如何,你有没有做过myElement.style.display ='none'来隐藏一个元素?好吧,别这样做了!

你可以用myElement.hidden = true。


#4 toggle()

好的,这也不是一个元素方法,它是一个元素属性的方法。具体来说,它是一种使用myElement.classList.toggle('some-class')来切换从元素添加/删除类的方法。

您应该刚刚将第二个参数传递给toggle方法。如果成功,你的 class将被添加到元素中。


#5 querySelector()

好的,你肯定已经知道了这个,但我怀疑你们中有17%的人不知道你可以在任何元素上使用它。

例如,myElement.querySelector('.my-class')只匹配具有类my-class并且是myElement的后代的元素。


#6 closest()

这是一个可用于查看_up_元素树的所有元素的方法。它就像一个reverso querySelector()。所以,我可以使用这样的方式得到当前部分的标题:

到第一个<article>然后回到第一个<h1>。


#7 getBoundingClientRect()

这将返回一个整洁的小对象,其中包含有关您调用它的元素的一些维度细节。

但请注意两种不同的方式:

  • 调用它会导致重新绘制。根据设备和页面的复杂程度,这可能需要几毫秒。如果你反复打电话,请密切注意,例如在动画中。

  • 并非所有浏览器都返回所有这些值。


#8 matches()

可以使用它来检查特定元素是否具有特定类。


#9 insertAdjacentElement()

我今天学到了这个!它就像appendChild(),但可以更好地控制你追加那个child的位置。

parentEl.insertAdjacentElement('beforeend',newEl)与执行parentEl.appendChild(newEl)相同,但您也可以指定beforebegin或afterbegin或afterend将其放在这些名称所暗示的位置。


#10 contains()

你有没有想知道一个元素是否在另一个元素中?

例如,如果我正在处理鼠标单击并想知道它是发生在模态内还是外部(所以我可以关闭它)


#11 getAttribute()

当然,除了一个特定的情况外,所有元素方法中最无用的。

你还记得当我提到的时候,properties通常映射到attributes

其中一个不实的情况是<a href="/animals/cat"> Cat </a>等元素的href属性。

el.href不会像你期望的那样返回/ animals / cat。 这是因为<a>元素实现了HTMLHyperlinkElementUtils接口,该接口具有一堆辅助属性,如协议和散列,可以告诉您有关链接目标的信息。

其中一个有用的属性是href,它将为您提供full URL,包含所有修剪,而不是属性中的相对URL。

因此,如果您想要href属性中的文字字符串,则必须使用el.getAttribute('href')。


#12 the dialog element trio

相对较新的<dialog>元素show()和close()将完全按照你的期望去做。

但是showModal()将在页面中心的其他所有内容上显示<dialog>,就像你想要你的模态一样。 无需z-index或手动添加灰色背景或监听转义键以关闭它 - 浏览器知道模态如何工作并将为您完成所有这些操作。


#13 forEach()

当您获得对元素列表的引用时,可以使用forEach()迭代它们。

这是因为getElementsByTagName和其他get ...方法返回一个HTMLCollection,但querySelectorAll返回一个NodeList。

NodeList接口为我们提供了forEach()方法(以及keys(),values()和entries())

如果每个人都只是简单地返回数组而不是试图用他们不完整的数组来获得所有的幻想,那真的会更好。 但是不要害怕,因为ECMA的优秀人员给了我们Array.from(),它会把像数组一样的东西变成数组。

通过创建数组,您可以使用map()和filter()以及reduce()或任何其他数组方法。

filter( )是我最喜欢的方式,让我将来试图弄清楚它的作用。


#14 Forms

您可能已经知道的<form>有一个submit()方法。您知道表单具有reset()方法的可能性稍微小一些,如果您在表单元素上使用验证,则可以使用reportValidity()。

您还可以使用带有点表示法的表单元素属性来通过其name属性引用元素。例如,myFormEl.elements.email将返回属于<form>的元素<input name =“email”/>。

例如:如果您有三个单选按钮,每个按钮具有相同的名称animal,则formEl.elements.animal将为您提供对该组单选按钮的引用(1个控件,3个元素)。

并且formEl.elements.animal.value将返回选择的任何单选按钮的值。

如果你考虑它,这是奇怪的语法。分解,brotha:formEl是一个元素,elements是一个HTMLFormControlsCollection,一个非真实数组,其中每个项目不一定是HTML元素。动物是几个单选按钮的集合,只是因为它们具有相同的名称属性(只是为此目的有一个RadioNodeList接口),并且值查找选择集合中任何单选按钮的value属性。


#15 select()

.select()方法将选择您调用它的任何输入中的所有文本。


原文链接: hackernoon.com 
翻译来源:www.zcfy.cc
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/951

html鼠标自定义右键菜单:css+js实现自定义html右键菜单

我们在网页中很多都有右键菜单的功能,一般点击右键显示的是浏览器默认的菜单选项,那么我们直接如何通过css+js实现html的右键菜单呢?这篇文章将讲解html鼠标自定义右键菜单的实现原理和实现代码。

HTML/CSS代码风格指南(Google)

本文档定义了HTML/CSS的编写格式和风格规则,适用于HTML/CSS文件,包括GSS文件。如果你要编辑代码,先花几分钟看看它的代码风格,如果它这么做,那你也应该这么做。

编译原理之 html parser

asta 是一个类似于 svelte 的前端框架,它把 template 编译为 dom 指令,最大的好处是 no runtime,适合某些对内存珍贵的场景,比如小程序双线程,RN 的三线程等等,它的本质其实就是个 compiler,今天我们主要说 html parser 的部分

页面为要加<!DOCTYPE html>

最近因为写一个js函数,需要用到$(window).height(); 由于手写demo的时候,过于自信,其实对前端方面的认识也不够体系,用文本文件直接敲出来的html代码

构建WEB项目的 25 个HTML建议

HTML 超文本标记语言是一种用于创建网页的标准标记语言。HTML是一种基础技术,常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。

html包含html文件的方法

我们在写asp页面的时候,常常使用include命令来包含公共文件。由于这个方法用起来非常方便,于是很多人在HTML页面里尝试使用include,但是发现根本就不起作用

在html中做嵌套页面_客户端实现html页面的嵌套

如何在客户端利用html、或js将一个html页面嵌套在另一个页面中,这篇文章主要讲解以下几种方式:IFrame引入 、<object>方式、Behavior的download方式 、使用JQuery的load方法

html5和html的区别

html5是对html的第五次重大修改。HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准!html5继承了html所有的语法,同时html5也会增加一些新的特性

Js禁用html表单enter提交

很多时候我们开发的前端页面要考虑到用户在进行输入操作的时候回车只是为了跳到下一个输入项,而不是保存提交注册,为此需要禁用enter,从而就可以使用tab来行使enter的功能。所以就的使用js来控制html。

KeyPress 和KeyDown 、KeUp之间的区别

input 框在输入查询内容之后,按回车键居然有两种不同的表现形式(input 框没有绑定键盘事件),谷歌和火狐功能正常,但IE在按了回车键以后居然自动调用方法。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!