关闭

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

时间: 2018-07-25阅读: 1448标签: 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

如何用 Python 解析 HTML

用一些简单的脚本,可以很容易地清理文档和其它大量的 HTML 文件。但是首先你需要解析它们。我决定为自己创建一个项目来解决这个问题。 一种方法是搜索未使用的现有图像文件。

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

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

KeyPress 和KeyDown 、KeUp之间的区别

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

HTML的Doctype

<!DOCTYPE> 声明位于文档中的最前面,处于 <html> 标签之前。告知浏览器的解析器,用什么文档类型 规范来解析这个文档。DOCTYPE不存在或格式不正确会导致文档以混杂(兼容)模式呈现。

Js禁用html表单enter提交

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

js 调用向html追加内容

position 是相对于 element 元素的位置,并且只能是以下的字符串之一:1. beforeBegin: 插入到标签开始前,2. afterBegin:插入到标签开始标记之后

html包含html文件的方法

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

css/html 空格,html空格符的显示、标示方式【html空格代码】

css/html 空格,html空格符的显示、标示方式。在html里面空格的话,你直接敲打出来的空格是不可以的,这篇文章将通过html和css中设置显示空格的实现总结

什么是XHTML?

XHTML代表可扩展超文本标记语言(eXtensible HyperText Markup Language),是一种标记语言,表现方式与超文本标记语言(HTML)类似,不过语法上更加严格。XHTML是基于可扩展标记语言(XML),由万维网联盟(W3C)开发

html5和html的区别

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

点击更多...

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