什么是JavaScript中的HTMLCollection
#javascript #网络开发人员 #htmlcollection #getelementsbytagname

htmlCollection是以 array like 方式的一组或组HTML元素。根据返回方式，以文档顺序存在HTMLCollection。就像数组一样，它具有访问其集合中每个HTML项目的长度属性和方法。

htmlCollection据说是活的，因为它会自动更换DOM中的文档。

。

访问HTMLCollection

我们可以使用JavaScript中的文档对象访问HTMLCollection。据说这些对象在使用时返回htmlcollection。

这些包括;

  • getElementsbytagname（）

  • getElementsByClassName（）

  • 儿童

  • document.forms

getElementsbytagname（）

getElemenetsByTagName()方法用于获取具有类似标签名称的HTML元素。当我们想与JavaScript文件中的特定元素集合一起工作时，这很有用。

尝试下面的代码 

 <ul id="parent">
        <li id="one" class="children">Apple</li>
        <li id="two" class="children">Orange</li>
        <li id="three" class="children">Lime</li>
        <li id="four" class="children">Banana</li>
    </ul>

const getItemsList = document.getElementsByTagName('li');
console.log(getItemsList)

浏览器预览

Image description

getElementsbyTagName()方法返回当前HTML文档中的所有li元素。返回的元素以DOM顺序排列，并在4的4上有一个length。

getElementsByClassName（）

getElementsByClassName()方法用于获取同一类名称的html元素。

尝试下面的代码 

const getItemsList = document.getElementsByClassName('children');
console.log(getItemsList);

浏览器预览

Image description

孩子们

children属性用于返回HTMLCollection。这是一个只读的属性，它返回给定元素的直接子女。

尝试下面的代码示例 

const getItemsList = document.getElementById('parent')
const children = getItemsList.children;

console.log(children);

浏览器预览

Image description

document.forms

document.forms是一个只读属性，它返回文档中所有表单元素的htmlcollection列表。

     <form action="">
        <input type="text" name="text" placeholder="say something">
    </form>

    <form action="">
        <input type="button" name="button" value="button">
    </form>

const getItemsList = document.forms;
console.log(getItemsList);

浏览器预览

Image description

从浏览器预览中，两个表单标签由document.forms属性返回，使其长度为2。

属性和方法

HTMLCollection具有内置属性和方法，可用于访问HTMLCollection列表中的修改元素。这些包括。

  • 长度：此属性返回HTMLCollection中存在的标签的总长度 
const getItemsList = document.getElementById('parent')
const children = getItemsList.children;

console.log(children.length);
  • item（）：此方法根据解析的索引返回指定的元素。 
const getItemsList = document.getElementById('parent')
const children = getItemsList.children;

console.log(children.item(2));
  • 名称initem（）：此方法根据所用Id元素返回指定的元素。 
const getItemsList = document.getElementById('parent')
const children = getItemsList.children;

console.log(children.namedItem('four'));

使用forloop

htmlCollection是一个类似于html元素的数组的集合，因此，它可以用forloop迭代以通过集合中的每个项目循环。

const getItemsList = document.getElementById('parent')
const children = getItemsList.children;

function bgColor(){
    for(let j = 0; j < children.length; j++){
        children[j].style.color = 'blue';
    }

    children[3].style.color = 'orange';
}
bgColor();

鲍尔预览

Image description

从浏览器输出中，我们使用forloop循环循环每个项目，并应用blue的color时，在最后一项时，我们通过指定htmlcollection中的元素索引来设置color的color。

。

将htmlcollection转换为阵列（array.from）方法

HTMLCollection没有可用的JavaScript内置阵列方法。但是，需要将其转换为常规数组，以用数组方法对其进行操作。

const getItemsList = document.getElementById('parent')
const children = getItemsList.children;

const copy = Array.from(children);
console.log(copy);

copy.forEach((items)=>{
   items.style.color = 'plum';
})

浏览器预览

Image description

从浏览器预览中，请注意原型现在是一个数组。

将项目添加到HTMLCollection

我们可以直接从JavaScript文件中添加和删除HTMLCollection的项目。

尝试下面的代码示例。

htmlcollection返回实时收集列表项目，这意味着当项目添加到页面时，它会自动将其更新在DOM中。上面的项目显示此操作。

只需将您喜欢的水果添加到水果清单项目中，然后单击“添加”，单击删除以从底部删除水果。

执行此操作时，请打开浏览器控制台。您添加或删除的任何项目都会返回项目列表中数组的总长度。

包起来

我们了解了 javascript中的htmlcollection ，我们讨论了以下内容。

  • 什么是htmlcollcetion

  • 访问htmlcollcetion

  • htmlCollection属性和方法

  • 使用htmlcollection forloop

  • 将htmlcollection转换为数组（array.from）方法

  • 将项目添加到htmlcollection

好吧！我们来到本教程的结尾。感谢您抽出宝贵的时间阅读本文完成。随意问的问题。我很高兴回答。您可以在Twitter和其他社交媒体@ocxigin上找到我。或给我发电子邮件ocxigin@gmail.com

欢呼