You are using a array as an object, the difference between getElementbyId and getElementsByClassName is that:

• getElementbyId will return an Element object or null if no element with the ID is found
• getElementsByClassName will return a live HTMLCollection, possibly of length 0 if no matching elements are found

getElementsByClassName

The getElementsByClassName(classNames) method takes a string that contains an unordered set of unique space-separated tokens representing classes. When called, the method must return a live NodeList object containing all the elements in the document that have all the classes specified in that argument, having obtained the classes by splitting a string on spaces. If there are no tokens specified in the argument, then the method must return an empty NodeList.

https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#getelementsby classname

getElementById

获得元素ById () 方法以指定的 ID 进入第一个元素 。

https:// developmenter.mozilla.org/en-US/docs/Web/API/Document/getElementById" rel=“noreferr'>https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

在您的代码行中:

- 文件 1 。 getE元素ByClassName (我的元素). stype. size = 100px;

将按预期进行 < enger> NOT < / strong > 工作, 因为 < code> getEplementByClassName 将返回一个数组, 而数组将返回一个数组, 数组将返回 < enger> NOT 拥有 < code > 样式 属性, 您可以通过它们循环访问每个 < code> element 。

s 这就是为什么函数getEplementById 为您工作的原因, 此函数会返回直接对象。 因此您可以访问 stype 属性 。

ES6 提供Array.from() 方法,该方法从阵列相似或可循环的物体中创建了新的阵列实例 。

let boxes = document.getElementsByClassName( box );

setTimeout(() => {
  Array.from(boxes).forEach(v => v.style.background =  green );
  console.log(Array.from(boxes));
}, 500);

.box {
  width: 50px;
  height: 50px;
  margin: 5px;
  background: blue;
  display: inline-block;
}

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

从代码片断中可以看到,在使用Array.from () 函数后,您可以操纵每个元素。

$( .box ).css({ background : green });

.box {
  width: 50px;
  height: 50px;
  margin: 5px;
  background: blue;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class= box ></div>
<div class= box ></div>
<div class= box ></div>
<div class= box ></div>

以下描述摘自"http://www.w3schools.com/jsref/met_document_getelementsby slearname.asp" rel=“没有跟随无悔者”>此页:

获得元素ByClassName () 的方法返回文档中包含指定类名的所有元素的集合, 作为节点列表对象 。

The NodeList object represents a collection of nodes. The nodes can be accessed by index numbers. The index starts at 0.

提示 : 您可以使用节点列表对象的长度属性来确定带有指定类别名称的元素数量, 然后您可以环绕所有元素并提取您想要的信息 。

因此,作为参数 getE元素ByClassName 将接受一个类名 。

如果这是您的 HTML 身体 :

<div id="first" class="menuItem"></div>
<div id="second" class="menuItem"></div>
<div id="third" class="menuItem"></div>
<div id="footer"></div>

然后 var 菜单项目 =文档。 getElementsByClassName (菜单项) 将返回3个上端 的收藏( 不是数组), 因为它们符合给定的类名 。

然后您可以在此节点( in this case) 收藏中复制 :

for (var menuItemIndex = 0 ; menuItemIndex < menuItems.length ; menuItemIndex ++) {
   var currentMenuItem = menuItems[menuItemIndex];
   // do stuff with currentMenuItem as a node.
}

请参看“https://stackoverflow.com/ questions/9979172/difference-we间-node-object-and-element-object>,以了解关于元素和节点之间差异的更多情况。

其它词 < 强/ 强 > < 强/ 强 >

• document. exector () > 只选择指定选择器中的第一个 < strong > one 元素。 所以它不吐出一个数组, 它是一个单值。 类似于 document. getElementById () , 只获取 ID 元素, 因为 ID 必须是独一无二的 。

• document.querySelectorAll () 选择有指定选择器的 all 元素, 并在一个阵列中返回它们。 类似 document. getElementsByClassName () for class and document. getElementsByTagName () tag () 标签仅用于分类和 < code> documents > 。

使用任何支持 ES5+ 的浏览器( 基本上高于 IE8 的任何浏览器), 您可以使用 < code> Array. prototype. forEach 方法 。

Array.prototype.forEach.call(document.getElementsByClassName( answer ), function(el) {
    el.style.color=  red ;
});

< a href=>""https://caniuse.com/mdn-javascript_ buildingins_array_foreach" rel="不跟随 nofollow noreferrer" >caniuse 源

因此,我被告知,这是我问题的一个复制品,我应该删除我的问题,我将这样做,这样我就可以使论坛保持干净,保持提问的权利。

由于我认为我和这个问题确实不同,我将指出我的答案,因此我将完成这一页的知识,信息不会丢失。

<强问/强>

1. 我在片段有一个代码, 它有一个 document.getElementsByClassName (“ close”) [0] , [0] 正在做什么?

2. 我从未见过在 getEplementsByClassName 中使用方括号是为了什么目的?

3. 还有,我怎么把它转换成jQuery?

< 强 > 反响

1. 片断中的代码有一个 < code> [0] 代码,它实际上被用作数组使用,而它是 0,它指的是首次使用指定的类别。

2. 上面也一样

3. 我无法真正做到这一点, 也没有人回答 。 在提到 < code> event. target 的代码部分中, 目标 我无法使用 < code>$( "我的摩尔" ) 而不是 document. getElementById ("我的摩尔") , 我认为它们应该等同, 但在这种情况下, 替换标准格式的 jQuery 形式将不会产生预期的效果 。

    window.onclick = function(event) {
      if (event.target == modal) {
        modal.style.display = "none";
      }
    }

var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
  modal.style.display = "block";
}
span.onclick = function() {
  modal.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

body {font-family: Arial, Helvetica, sans-serif;}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

<h2>Modal </h2>

<button id="myBtn">Open Modal</button>

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>
</div>

您可以使 < strong > a 函数对 < code > word 元素 中的任何元素 有效, 并传递您想要变换的元素的数量, 例如 :

// Binds `wordButtons` to an (array-like) HTMLCollection of buttons
const wordButtons = document.getElementsByClassName("word");

// Applies the `slantWord` function to the first word button
slantWord(1);

// Defines the `slantWord` function
function slantWord(wordNumber) {
  const index = wordNumber - 1; // Collection index is zero-based
  wordButtons[index].style.transform = "rotate(7deg)"; // Transforms the specified button
}

<div class="wordGameContainer">
  <button class="word word1">WORD 1</button>
  <button class="word word2">WORD 2</button>
  <button class="word word3">WORD 3</button>
  <button class="word word4">WORD 4</button>
</div>

<div>
  <button onclick="moveWord()" class="playButton">PLAY</button>
</div>