vue 操纵dom元素_操纵dom找到真爱

vue 操纵dom元素

People will spend their whole lives searching for The One. According to Kelly Clarkson’s hit song, “A Moment Like This” some people wait a lifetime!

人们将花费一生来寻找The One。 根据凯利·克拉克森(Kelly Clarkson)的热门歌曲“像这样的瞬间”，有些人终生难忘！

But what if I told you there was an easier way to find the one you’re looking for? In fact, there are many different ways. By navigating the DOM with different search methods, we can get access to exactly what we want.

但是，如果我告诉您，有一种更简单的方法来找到您要的方法呢？ 实际上，有许多不同的方法。 通过使用不同的搜索方法浏览DOM，我们可以准确地访问我们想要的内容。

querySelector (querySelector)

To find your one and only element, you’d be damned if you didn’t try querySelector first. Throw that sucker onto a specific element or on the entire document element like so document.querySelector(".one-true-love")

要找到您唯一的元素，如果您没有先尝试使用querySelector话，那该死的。 将吸盘扔到特定元素或整个文档元素上，就像document.querySelector(".one-true-love")

querySelector is searching for a provided CSS selector. The CSS selector in question is a class, hence the . at the beginning of our query term. The querySelector above will return the first element that meets your criteria ".one-true-love" but only the first one, the rest are out of luck. If they liked it then they should’ve put a ring on it. 🤷‍♂

querySelector正在搜索提供CSS选择器。 有问题CSS选择器是一个类，因此是. 在查询字词的开头。 上面的querySelector将返回满足您的条件".one-true-love"的第一个元素，但只有第一个元素，其余的则不走运。 如果他们喜欢它，那么他们应该在上面加上一个戒指。 ‍♂

querySelectorAll (querySelectorAll)

If you’re a feeling a little polyamorous, take a gander at querySelectorAll which will return all the elements matching your query. If your heart desires to find all of your one-true-loves you could simply search for them using document.querySelectorAll(“.one-true-love”)

如果您感觉有点杂乱无章，请在querySelectorAll处添加一个gander，它将返回所有与查询匹配的元素。 如果你的心脏希望找到所有你对one-true-love是你可以使用简单的搜索他们document.querySelectorAll(“.one-true-love”)

The above will return all of the elements that match the given selector. Hey, to each their own!

上面将返回与给定选择器匹配的所有元素。 嘿，每个人自己！

Photo by Dayne Topkin on Unsplash

Dayne Topkin在 Unsplash上 拍摄的照片

getElementById (getElementById)

Another great strategy we can implement to find what we’re yearning for is document.getElementById('am-i-the-one') this will allow us to grab the element that matches the id am-i-the-one regardless of where it lives in the document. Who said long distance doesn’t work?

我们可以实施的另一种伟大策略是找到我们想要的东西，即document.getElementById('am-i-the-one')这将使我们能够获取与id am-i-the-one匹配的元素，无论它在文档中的位置。 谁说长途行不通？

The caveat here is that there can only be one element with the id of am-i-the-one otherwise getElementById will not be able to find the one for you; try Tinder.

需要注意的是，只能有一个id为am-i-the-one one的元素，否则getElementById将无法为您找到一个元素。 尝试火种。

getElementById can only be called on document, not on another element. I’m so sorry to disappoint.

getElementById只能在document上调用，而不能在另一个元素上调用。 真令人失望。

getElementsByName (getElementsByName)

Call me by your name… or by the element’s name at least. Calling document.getElementsByName("love-me") will return all the elements with the name "love-me" as an HTML Collection. A collection will be returned even if there is only one element with that name.

用你的名字叫我……至少要用元素的名字叫我。 调用document.getElementsByName("love-me")将返回所有名称为"love-me"的元素作为HTML集合。 即使只有一个具有该名称的元素，也将返回一个集合。

There are plenty of fish in the sea, make sure you pick the right one by putting the index of the element you want in a bracket notation.

海中有很多鱼，请通过将所需元素的索引放在方括号中来确保选择正确的鱼。

演示地址

Gif of Doggo to Keep Readers Engaged

Doggo的Gif可以吸引读者参与

getElementsByTagName (getElementsByTagName)

This here getElementsByTagName will return a collection of all the tags that meet the search criteria. If you were looking for anchor tags on your document (or a specific element,) you could do so by calling document.getElementsByTagName('a')

这里的getElementsByTagName将返回所有符合搜索条件的标签的集合。 如果要在文档(或特定元素)上寻找锚标记，可以通过调用document.getElementsByTagName('a')

Keep in mind that this also returns an HTML Collection of elements regardless of if there is only one element being returned.

请记住，这也将返回元素HTML集合，无论是否仅返回一个元素。

Tag you’re it… corny, I know.

标记你就是它……老兄，我知道。

getElementsByClassName (getElementsByClassName)

At this point, I hope you know what getElementByClassName would return, but if you don’t, fret not for I will tell you. If you were looking for a class by the name of "i-do" you could call document.getElementByClassName(‘i-do’) which will return all the elements with the class name of "i-do" in an HTML Collection.

在这一点上，我希望您知道getElementByClassName将返回什么，但是如果不这样做，则不用烦恼，我会告诉您。 如果要通过"i-do"名称查找类，则可以调用document.getElementByClassName('i-do') ，它将在HTML集合中返回所有具有"i-do"类名称的元素。

You can call this on a specific element to search through children elements or you can cast a wider net and call it right on document. The choice is yours, never settle for less than you deserve.

您可以在特定元素上调用此元素以搜索子元素，也可以投射更宽的网并直接在document上调用它。 选择权是您的，决不满足于应有的选择。

试试看！ (Try it out!)

If you’d like to test some of these element selectors, try them out in this handy dandy Repl below. Always try before you buy. 😉

如果您想测试其中一些元素选择器，请在下面的便捷花哨的Repl中尝试一下。 购买前请务必尝试。 😉

演示地址

I hope this helps you find the right element for you, whichever it may be. Thanks for reading!

我希望这可以帮助您找到适合您的元素，无论它是什么。 谢谢阅读！

翻译自: https://medium.com/@codycastro/manipulate-dom-find-true-love-d2ba5074c3a4

vue 操纵dom元素