Question

我希望我的HTML文件中的4个锚标签能够同时更改其css属性。所以我在我的JS文件中创建了一个名为query()的可重用函数来模仿jQuery中令人惊讶的美元符号DOM选择机制，只使用普通的JS。在query()函数内部，有一个循环检查elem（DOM元素）参数的长度，并应用它来获取并返回每个输入的DOM元素的索引。我很惊讶它只返回了第一个元素。

function query(elem) {
    for(var i=0; i<document.querySelectorAll(elem).length; i++) {
        return document.querySelectorAll(elem)[i];
    }
}

query('a').style.color = 'yellow';

我认为问题在于return的范围。我希望有人可以指出或纠正我的代码错误。提前谢谢。

Answer 1

您无法在return循环中使用for关键字，因为您将在第一个循环后退出该函数。

我建议你制作一个新的数组并将其中的每个找到的元素推送到其中，以便能够操纵它。

function query(elem, prop, value) {
  var elems = document.getElementsByTagName(elem);
  var result = [];

  for (var i = 0; i < elems.length; i++) {
    result.push(elems[i]);
    result[i].style[prop] = value;
  }
}

query('h1', 'color', 'red');

.box {
  height: 50px;
  width: 50px;
  background: green;
  margin: 5px;
}

<div class='box'></div>
<div class='box'></div>
<div class='box'></div>

<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>

您也可以使用forEach()函数代替for循环，以获得更快的结果。

function query(elem) {
  var result = [];
  document.querySelectorAll(elem).forEach(v => result.push(v));
  console.log(result);
}

query('div');

<div class='box'></div>
<div class='box'></div>
<div class='box'></div>

Answer 2

我建议你使用getElementsByTagName DOM来不迭代所有dom元素你的功能很像这个原生功能

document.getElementsByTagName（ELEM）;

你的函数的问题是返回一个HTMLCollection，你不能将样式应用于此。

我建议这样做：

function query(elem, callback) {
  var elems =  document.getElementsByTagName(elem);
  for(var i; i < elems.lenght; i++){
      callback(elems[i]);
  }
}

query('a', function(a){
  a.style.color = 'yellow';
})

Answer 3

＆＃13;

NodeList.prototype.css = function (css) {
	for (var i=0; i<this.length; i++)
		for (var j in css)
			this[i].style[j] = css[j]
}
document.querySelectorAll('a').css({
	'color' : 'yellow',
	'background-color' : 'black'
})

＆＃13;

<a href="">The Link</a>

＆＃13;

使用可重用函数返回所有DOM元素

3 个答案: