htmlcollection

Typescript,'NodeListOf<Element>' is not an array type or a string type

由 你。 提交于 2020-07-18 03:36:30
问题 Converting my JS to TS strict mode. The following syntax looks fine to me but TS is complaining in the for loop on allSubMenus with: [ts] Type 'NodeListOf<Element>' is not an array type or a string type. What am I missing? function subAct(target:Node){ const allSubMenus : NodeListOf<Element> = document.querySelectorAll('.subMenuItems') for (const sub of allSubMenus){ sub.classList.remove('active') } } 回答1: You need to set the target compiler option to es6 or higher for NodeListOf<T> to be

NodeList 和 HTMLCollection

由 爷，独闯天下 提交于 2020-03-09 16:48:43
NodeList 类数组对象 代表节点的集合 部分浏览器为NodeList加入了namedItem接口。 规范: http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-536297177 HTMLCollection 类数组对象 代表HTML元素的集合 可以使用namedItem接口，以id(优先)或name获取集合中的元素。 规范: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506 NodeList的[]操作符 同item接口，可以通过索引值获取元素。例如, nodelist[0]。 同namedItem接口，可以通过id或name获取集合中的元素。例如，nodelist['name']。 实时对象 实时对象的意思是，文档内容的变化会立即体现在对象上。 document.getElementsByName, document.getElementsByClassName, document.getElementsByTagName, document.getElementsByTagNameNS 返回的是实时对象 document.links, document.forms, document.images, document.scripts,

Convert script to handle multiple tables independently

由 ￣綄美尐妖づ 提交于 2020-01-05 09:35:30
问题 I have two scripts which work perfectly when a page contains a single table. However, now I have need to put multiple tables on the same page which support the same functions. I need some help converting these two scripts to work with multiple tables on the same page, while maintaining the same functionality. The first script is called "TABLE DATA STATES". The second script is called "SORT TABLE DATA". Current JSBin: https://jsbin.com/noyoluhasa/1/edit?html,js,output // ======================

Why doesn't htmlCollection inherit from array

由 好久不见. 提交于 2020-01-05 04:07:39
问题 Why doesn't htmlCollection inherit from array? I understand that htmlCollection is a live collection, as opposed to an array which is a snapshot, but can't it still inherit from array? There's the obvious way of converting an htmlCollection to an array, but that's converting it. It's not like that by default. Update This is regarding the comment below: Possible duplicate of Is HTMLCollection An Array? – @winhowes As explained in the comments, these two questions widely differ. The other

HTMLCollection appearing in console with many elements but has length 0

由 点点圈 提交于 2020-01-02 23:01:18
问题 There are a bunch of span elements on the page that I'm trying to grab that are formatted like so: <div class="ca-evp1 te" style="color:#2952A3"> <span class="te-t">11am </span> <span class="te-s">Antoine Diel</span> </div> So, I decided to select them using getElementsByClassName() and then iterate over this HTMLCollection, which when I view in the developer console shows 32 items but when I check the length property it is 0. var toType = function(obj) { return ({}).toString.call(obj).match(

Change data-attribute on click of HTML elements

由 徘徊边缘 提交于 2019-12-25 13:17:15
问题 I am trying to apply changes to the DOM when a <tr> is clicked. When clicked, it should add data-state=enabled and data-display=expanded to the clicked <tr> while applying data-state=disabled and data-display=collapsed to every other <tr> . So it should look like highlighting the clicked row while disabling the other rows. Then, when a row is highlighted, and a user clicks elsewhere, it should reset to default , i.e. data-state=enabled and data-display=collapsed for all <tr> 's Currently, I

Elegant way around HTMLCollections updating dynamically

由 别说谁变了你拦得住时间么 提交于 2019-12-25 01:58:00
问题 Today, I discovered something in Javascript that looked like "strange behavior" to me. Let's assume the following minimal example: HTML: <div id="test"> <span>1</span> <span>2</span> </div> JS: var div = document.getElementById('test'); var spans = div.getElementsByTagName('span'); div.removeChild(spans[0]); div.removeChild(spans[1]); (Fiddle: http://jsfiddle.net/SkYJg/) Now, when running the script, I get an error: TypeError: Argument 1 of Node.removeChild is not an object. Looking closer,

Getting values from an HTMLCollection to a string

由 筅森魡賤 提交于 2019-12-22 13:53:47
问题 I am attempting to grab the selected values of a multi-select dropdown and convert them into a single string for later manipulation. At the moment I have the following code: HTML: <select id="genreList" multiple="multiple" name="addGenre[]" style="width: 150px;font-size: 10pt;"> <option value="Action">Action</option> <option value="Comedy">Comedy</option> <option value="Fantasy">Fantasy</option> <option value="Horror">Horror</option> <option value="Mystery">Mystery</option> <option value="Non

how to iterate on HTMLCollection? [duplicate]

由 有些话、适合烂在心里 提交于 2019-12-14 00:52:38
问题 This question already has answers here : Why does jQuery or a DOM method such as getElementById not find the element? (8 answers) Is Chrome's JavaScript console lazy about evaluating arrays? (6 answers) Use spread operator on NodeList in Typescript (1 answer) Closed last year . I have some elements in my HTML with class node-item , I access them in my component using: let nodeItems = document.getElementsByClassName('node-item'); and when I log nodeItems it gives me a HTMLCollection[] with

Can't access the value of HTMLCollection

由 我怕爱的太早我们不能终老 提交于 2019-12-10 10:36:01
问题 test.html <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <script> var eles = document.getElementsByClassName('review'); console.log(eles); console.log(eles.length); console.log(eles[0]); // for(var i=0, max=eles.length) </script> </head> <body> <div class="review"></div> <div class="review"></div> <div class="review"></div> <div class="review"></div> <div class="review"></div> </body> I
订阅 htmlcollection