Question

首先，我尝试创建多个DOM节点并将它们缓存为变量以便在函数中使用。我想要做的是创建一个按类名设置元素的函数。然后将该函数作为变量调用以供以后使用。

其次，当您想要选择具有该名称的所有类时，我不确定通过classname操作插入节点时的正确语法是什么。

即for (var i = 0; i < insertedNodes.length; i++) {

为了澄清我究竟在问什么，我的问题是：

如何将节点作为变量插入，以便以后在函数中使用。
如何调用这些变量。
如何将这两个变量一起调用。

希望我的代码能帮助解释我想要进一步理解的内容：

var div1 = document.querySelector('.div1');
var div2 = document.querySelector('.div2');

var node1     = {};
var node2     = {};
var bothNodes = {};


function nodes() {

   function insertNodes() { 
     node1 = div1.appendChild(nodeBase);
     node2 = div2.appendChild(nodeBase);
     bothNodes = [node1, node2];
   }

   function nodeBase() {
     var node = document.createElement('div');
     node.className = 'newNode';
   }

   function dosomething(node1, node2) {
   //

   }

    function dosomethingElse(bothNodes) {
   //

   }

}

new nodes();

Answer 1

你不会在这里返回节点..

function nodeBase() {
  var node = document.createElement('div');
  node.className = 'newNode';
  // ADD THIS LINE
  return node;
}

正如费利克斯在评论中指出的那样：

function insertNodes() { 
   node1 = div1.appendChild(nodeBase());  // Fixed
   node2 = div2.appendChild(nodeBase());  // Fixed
   bothNodes = [node1, node2];
}

Answer 2

这可能会被投票淹没，但指向另一个方向。

~~如何将节点作为变量插入，以便稍后在函数中使用。~~

你实际上不必存储这些元素。您可以随时查询它们。

如何调用每个变量。

您可以选择具有特定类的第一个匹配元素，如下所示：

    var div1 = document.getElementsByClassName('.div1')[0];

OR

    var div1 = document.querySelector('.div1');

如何同时调用这两个变量。

您可以选择具有特定类的所有元素，遍历集合并应用逻辑，如下所示：

    var nodes = document.getElementsByClassName('.div1');

OR

    var nodes = document.querySelectorAll('.div1');

    for(var i=0;i<nodes.length;i++){
       // your loic
    }

用于将DOM节点创建为变量的JavaScript语法

2 个答案: