HistoryART
@HistoryART
Молодой и дерзкий

Как нужно мапить nodelist элементов?

Доброй ночи. Написал скрипт для масштабирования текста в зависимости от кол-ва символов, но получаю ошибку text.map() is not a function, пробовал forEach, reduce - аналогично. Скажите пожалуйста как поправить мой косяк и где именно? Спасибо.

const text = await document.querySelectorAll('.company-item dd');

        return text.map(el => {
            return el.innerText.length >= 4 ? el.style.fontSize = '5px' : false;
        });


Структура nodeList:

NodeList(542) [dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, dd, …]
[0 … 99]
0: dd
title: ""
lang: ""
translate: true
dir: ""
hidden: false
accessKey: ""
draggable: false
spellcheck: true
autocapitalize: ""
contentEditable: "inherit"
isContentEditable: false
inputMode: ""
offsetParent: body
offsetTop: 250
offsetLeft: 384
offsetWidth: 365
offsetHeight: 35
style: CSSStyleDeclaration {alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}
innerText: "Пишавка Денис Владимирович"
outerText: "Пишавка Денис Владимирович"
oncopy: null
oncut: null
onpaste: null
onabort: null
onblur: null
oncancel: null
oncanplay: null
oncanplaythrough: null
onchange: null
onclick: null
onclose: null
oncontextmenu: null
oncuechange: null
ondblclick: null
ondrag: null
ondragend: null
ondragenter: null
ondragleave: null
ondragover: null
ondragstart: null
ondrop: null
ondurationchange: null
onemptied: null
onended: null
onerror: null
onfocus: null
onformdata: null
oninput: null
oninvalid: null
onkeydown: null
onkeypress: null
onkeyup: null
onload: null
onloadeddata: null
onloadedmetadata: null
onloadstart: null
onmousedown: null
onmouseenter: null
onmouseleave: null
onmousemove: null
onmouseout: null
onmouseover: null
onmouseup: null
onmousewheel: null
onpause: null
onplay: null
onplaying: null
onprogress: null
onratechange: null
onreset: null
onresize: null
onscroll: null
onseeked: null
onseeking: null
onselect: null
onstalled: null
onsubmit: null
onsuspend: null
ontimeupdate: null
ontoggle: null
onvolumechange: null
onwaiting: null
onwheel: null
onauxclick: null
ongotpointercapture: null
onlostpointercapture: null
onpointerdown: null
onpointermove: null
onpointerup: null
onpointercancel: null
onpointerover: null
onpointerout: null
onpointerenter: null
onpointerleave: null
onselectstart: null
onselectionchange: null
onanimationend: null
onanimationiteration: null
onanimationstart: null
ontransitionend: null
dataset: DOMStringMap {}
nonce: ""
autofocus: false
tabIndex: -1
enterKeyHint: ""
onpointerrawupdate: null
ontouchcancel: null
ontouchend: null
ontouchmove: null
ontouchstart: null
namespaceURI: "www.w3.org/1999/xhtml"
prefix: null
localName: "dd"
tagName: "DD"
id: ""
className: ""
classList: DOMTokenList [value: ""]
slot: ""
attributes: NamedNodeMap {length: 0}
shadowRoot: null
part: DOMTokenList [value: ""]
assignedSlot: null
innerHTML: "Пишавка Денис Владимирович"
outerHTML: "Пишавка Денис Владимирович"
scrollTop: 0
scrollLeft: 0
scrollWidth: 365
scrollHeight: 35
clientTop: 0
clientLeft: 0
clientWidth: 365
clientHeight: 35
attributeStyleMap: StylePropertyMap {size: 0}
onbeforecopy: null
onbeforecut: null
onbeforepaste: null
onsearch: null
elementTiming: ""
previousElementSibling: dt
nextElementSibling: null
children: HTMLCollection []
firstElementChild: null
lastElementChild: null
childElementCount: 0
onfullscreenchange: null
onfullscreenerror: null
onwebkitfullscreenchange: null
onwebkitfullscreenerror: null
nodeType: 1
nodeName: "DD"
baseURI: "localhost:3000/find-company"
isConnected: true
ownerDocument: document
parentNode: dl
parentElement: dl
childNodes: NodeList [text]
firstChild: text
lastChild: text
previousSibling: text
nextSibling: text
nodeValue: null
textContent: "Пишавка Денис Владимирович"
__proto__: HTMLElement
1: dd
2: dd
3: dd
4: dd
5: dd
6: dd
7: dd
8: dd
9: dd
10: dd
11: dd
12: dd
13: dd
14: dd
15: dd
16: dd
17: dd
18: dd
19: dd
20: dd
21: dd
22: dd
23: dd
24: dd
25: dd
26: dd
27: dd
28: dd
29: dd
30: dd
31: dd
32: dd
33: dd
34: dd
35: dd
36: dd
37: dd
38: dd
39: dd
40: dd
41: dd
42: dd
43: dd
44: dd
45: dd
46: dd
47: dd
48: dd
49: dd
50: dd
51: dd
52: dd
53: dd
54: dd
55: dd
56: dd
57: dd
58: dd
59: dd
60: dd
61: dd
62: dd
63: dd
64: dd
65: dd
66: dd
67: dd
68: dd
69: dd
70: dd
71: dd
72: dd
73: dd
74: dd
75: dd
76: dd
77: dd
78: dd
79: dd
80: dd
81: dd
82: dd
83: dd
84: dd
85: dd
86: dd
87: dd
88: dd
89: dd
90: dd
91: dd
92: dd
93: dd
94: dd
95: dd
96: dd
97: dd
98: dd
99: dd
[100 … 199]
[200 … 299]
[300 … 399]
[400 … 499]
[500 … 541]
  • Вопрос задан
  • 52 просмотра
Решения вопроса 2
locky_yotun
@locky_yotun Куратор тега JavaScript
Я видел некоторый джаваскрипт
1) Зачем вы используете await?
2) Уберите await и forEach заработает. Вот тут расписаны все методы NodeList: https://developer.mozilla.org/en-US/docs/Web/API/N...

Вот рабочий код:
const textElements = document.querySelectorAll('.company-item dd');

textElements.forEach(el => {
    if (el.innerText.length >= 4) {
        el.style.fontSize = '5px';
    }
});
Ответ написан
@StockholmSyndrome
зачем await?
const text = [...document.querySelectorAll('.company-item dd')];
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы