Question

使用querySelectorAll获取元素文本时遇到问题。我已经尝试过使用querySelector，但它只给了我第一个元素的值。我想要实现的是获取被点击元素的文本。这是我的代码：

function __(selector){

   var self = {};
   self.selector = selector;

   if(typeof selector == 'undefined'){
      self.element = [self.selector];
   }else{
      self.element = document.querySelectorAll(self.selector);
   }

   // creating a method (.on)

    self.on = function(type, callback){
        self.element.forEach(function(elements){
           elements['on' + type] = callback;
        });
    }

     self.text = function(elems){
          [].slice.call(self.element).forEach(function(el,i){
                return el.innerHTML;
           });
     }

     return self;
}

HTML文件：

<script src="selector.js"></script>
<script>
   window.onload = function(){

        __('p').on('click', function(){
               alert(__(this).text());
        });
   }
</script>

<p>Hello</p>  
<p>World</p>

上面的代码为我提供了undefined值。

Answer 1

您的代码实际上会抛出错误：SyntaxError: '[object HTMLElement]' is not a valid selector。这是因为在__(this)您将所选元素本身传递给函数，而不是选择器。您可以通过将此作为第三种情况包括在内来解释这一点：

if(typeof selector == "undefined"){
  self.element = [self.selector];
}
else if(typeof selector == "string"){
  self.element = document.querySelectorAll(self.selector);
}
else if(selector instanceof HTMLElement){
  self.element = [selector];
}

现在，您所描述的实际问题是因为don’t return anything in the self.text function而发生的。 return用于forEach函数参数，该参数将被忽略。返回self.text函数本身的文本，并使用map代替forEach。像这样：

self.text = function(elems){
  return [].slice.call(self.element).map(function(el,i){
    return el.innerHTML;
  });
}

这将返回一个数组，其中包含每个元素的内部HTML文本。

代码在行动

function __(selector) {

  var self = {};
  self.selector = selector;

  if (typeof selector == "undefined") {
    self.element = [self.selector];
  } else if (typeof selector == "string") {
    self.element = document.querySelectorAll(self.selector);
  } else if (selector instanceof HTMLElement) {
    self.element = [selector];
  }

  // creating a method (.on)

  self.on = function(type, callback) {
    self.element.forEach(function(elements) {
      elements['on' + type] = callback;
    });
  }

  self.text = function(elems) {
    return [].slice.call(self.element).map(function(el, i) {
      return el.innerHTML;
    });
  }

  return self;
}

console.log(__("p").text()); // Logs texts of all <p>s

__("p").on("click", function() {
  console.log(__(this).text()); // Logs text of clicked <p>
});

<p>Hello</p>
<p>World</p>

使用querySelectorAll获取元素的文本

1 个答案:

代码在行动