dom选择器_使用放置选择器进行DOM操作

dom选择器

DOM node manipulation is a big part of the web today; just look at how popular the jQuery JavaScript framework has gotten. The ability to easily work with the DOM allows us to do a lot of work in a little bit of code. Thanks to a new JavaScript module by Dojo Toolkit developer Kris Zyp, working with the DOM just got a lot more compact. With a name as short as the syntax itself, put could make you change the way you work with the DOM.

如今，DOM节点操纵已成为Web的重要组成部分。 只要看看jQuery JavaScript框架的流行程度如何即可。 轻松使用DOM的能力使我们可以用一点点代码完成很多工作。 感谢Dojo Toolkit开发人员Kris Zyp开发的新JavaScript模块，使用DOM的工作变得更加紧凑。 使用与语法本身一样短的名称， put可以使您改变使用DOM的方式。

创建DOM节点 (Creating DOM Nodes)

Creating new nodes is just about as simple as it gets:

创建新节点非常简单：

// Create an empty DIV
var div = put("div");

Boom, there's your new DIV element! And if you want your new code to have a few CSS classes:

繁荣，有您新的DIV元素！ 并且如果您希望新代码具有一些CSS类：

// Create a DIV with some CSS classes
var div2 = put("div.classOne.classTwo");

How about creating nodes with attributes?

如何创建具有属性的节点？

// Create a DIV with some CSS classes and attributes
var div3 = put("div.classOne.classTwo[title=Hover over me][style=display:inline-block]");

The syntax for inserting the DOM node is a bit different because the parent then becomes the first argument in the put signature:

插入DOM节点的语法有些不同，因为父节点随后成为put签名中的第一个参数：

// Create an INPUT with an ID and an attribute, place it into the body
// The body text goes into the third argument;  not(!) innerHTML, just text
var div4 = put(document.body, "input[type=text]#myInput", "This is inner html");

操纵现有的DOM节点 (Manipulating Existing DOM Nodes)

Manipulating DOM nodes is actually very much like creating the nodes themselves:

实际上，操作DOM节点非常类似于自己创建节点：

var myInput = document.getElementById("myInput");
put(myInput, ".anotherClass");

// Add CSS classes attributes to the element
put(myInput, "[placeholder=first name][required=true][title=first name element].yetAnotherClass");

Just remove the tagName and you can modify the node.

只需删除tagName，就可以修改节点。

节点，类和属性删除 (Node, Class, and Attribute Deletion)

The "!" character is meaningful in that it represents deletion within put. Let's remove a few classes and attributes from a given node, then let's remove the node itself:

“！” 字符是有意义的，因为它表示put内的删除。 让我们从给定节点中删除一些类和属性，然后让我们删除节点本身：

// Remove a CSS class from the INPUT element
put(myInput, "!anotherClass");

// Remove attributes from the INPUT element
put(myInput, "[!required][!title]");

// Delete a node!
put(myInput, "!");

The syntax for deletion is short but sweet. The only criticism I have is that if this could create a maintenance problem if developers are not experience with put.

删除的语法很简短但很不错。 我唯一的批评是，如果开发人员没有使用put的经验，是否会造成维护问题。

创建和管理子节点 (Creating and Managing Child Nodes)

Creating childNodes for an existing node is another functionality made easier by put:

为现有节点创建childNodes是通过放置put变得更加容易的另一种功能：

// Create a base node so we can add nodes around it
var baseNode = put(document.body, "div#baseNode");

// Add two DIVs *after* the baseNode
put(baseNode, "+div +div");

// Add a SPAN element *before* the baseNode
put(baseNode, "-span");

// Create the parent list element 
var ul = put(document.body, "ul");

// Create a child list item
var firstItem = put(ul, "li");

移动和重新分配节点 (Moving and ReParenting Nodes)

Reparenting and moving elements within the DOM is another basic task that, when you use JavaScript's native functions, takes far too much code. Let's have a look at moving nodes around with put:

在DOM中重新元素化和移动元素是另一项基本任务，当您使用JavaScript的本机函数时，会占用太多代码。 让我们看一下使用put移动节点：

// Move one node to another parent
// parent > child
put(ul, ">", firstItem);

// Put one element after the first
put(div1, "+", div2);

A simple series of symbols designates where within the node try an element should go!

一个简单的符号系列指定元素在节点内尝试的位置！

更传统的节点属性管理 (More Traditional Node Property Management)

For those who prefer a more verbose element creation syntax, put-selector provides that as well:

对于那些更喜欢使用冗长的元素创建语法的人，put-selector也提供了这一点：

var span = put(parent, "span", {
	title: "Hover over me!",
	style: "font-style: italic;"
});

Kris' tool is great in that it's ultra-efficient, modular, and easy to learn. On the other side, it's possible that the syntax may be a bit too compact for persons try to maintain an application that they didn't write. What do you think of put? An easy to use utility or a "simple but complicated" resource? If I'm honest, I'm teetering on the fence -- maybe you can convince me?

Kris的工具之所以出色，是因为它超高效，模块化且易于学习。 另一方面，对于尝试维护自己未编写的应用程序的人来说 ，语法可能过于紧凑。 您如何看待看跌期权？ 易于使用的实用程序还是“简单但复杂”的资源？ 老实说，我在栅栏上摇摇欲坠-也许您可以说服我？

翻译自: https://davidwalsh.name/put-selector

dom选择器