JavaScript-ում տարր ստանալիս սխալ

Երբեմն սկսնակ ծրագրավորողները սխալվում են՝ մեկ DOM տարր ստանալու համար օգտագործելով querySelectorAll մեթոդը querySelector մեթոդի փոխարեն:

Եկեք նայենք այս սխալի բնորոշ առանձնահատկություններին: Ենթադրենք տրված է պարբերություն.

<p>text</p>

Ինչ-որ ծրագրավորող որոշել է ստանալ և փոխել այդ պարբերության տեքստը: Դրա համար նա տարրի հղումը ստացել է փոփոխականի մեջ՝ սխալմամբ օգտագործելով ոչ ճիշտ մեթոդ.

let elem = document.querySelectorAll('p');

Այնուհետև ծրագրավորողը փորձել է փոխել պարբերության տեքստը: Սակայն պարբերության տեքստը չի փոխվել.

elem.textContent = '!!!'; // չգործեց

Այս դեպքում կոնսոլում ոչ մի սխալ չի հայտնվել: Բանն այն է, որ կատարվել է թույլատրելի գործողություն, բայց ոչ մեկ տարրի, այլ խմբի վրա: Իսկ խմբի տարրերի տեքստը կարդալ կամ փոխել հնարավոր չէ անմիջապես՝ միայն օղակով դրանք բազմապատկելով և յուրաքանչյուր տարրին առանձին դիմելով:

Ինչպես հայտնաբերել սխալը

Եկեք տեսնենք, թե ինչպես պետք է ծրագրավորողը գործի, որպեսզի հայտնաբերի այս սխալը: Իրականում, որոշակի փորձ ունենալով, այն հեշտությամբ կարելի է հայտնաբերել բնորոշ նշաններով:

Ենթադրենք, սակայն, դա տեղի չի ունեցել: Այդ դեպքում սխալներ փնտրելիս ծրագրավորողի առաջին գործողությունը պետք է լինի փոփոխականների արժեքների արտածումը կոնսոլում: Նրա դեպքում կա միայն մեկ փոփոխական՝ elem: Պետք է արտածել այդ փոփոխականի արժեքը և նայել, թե ինչ է պարունակվում դրանում.

let elem = document.querySelectorAll('p');
console.log(elem); // կարտածի զանգված, և ոչ թե մեկ տարր

Կոնսոլում անմիջապես երևում է, որ փոփոխականում ոչ թե մեկ տարր է, այլ զանգված: Սա անմիջապես տալիս է ակնհայտ հուշում, որ տարր ստանալու մեթոդում սխալ է թույլ տրվել: