Функция slice не работает для document.querySelector. Ошибка .slice is not a function

#javascript #queryselector

Что-то запутался. Почему так? как исправить?

var longtext = document.querySelector('.excerpt>p:nth-child(2)');// 
long long text
var cuttext = longtext.slice(0, 40); // Uncaught TypeError: longtext.slice is not
a function
if (cuttext.length < longtext) {
    cuttext += "...";
}

    

Ответы

Ответ 1

Используемый метод document.querySelector возвращает только один элемент, а не массив.

Поэтому дальнейшая попытка взять первые сорок элементов(?) из одного выглядит странно.

Чтобы получить коллекцию элементов необходимо воспользоваться методом document.querySelectorAll.

Которая возвращает коллекцию подходящих элементов, однако, у возвращаемой коллекции
отсутствует метод slice, и чтобы его применять нужно либо одолжить его у массива, либо
преобразовать полученную коллекцию непосредственно в массив, например с помощью Array.from

var longtext = Array.from(document.querySelectorAll('.excerpt>p:nth-child(2)'));
var cuttext = longtext.slice(0,40); //Uncaught TypeError: longtext.slice is not a
function
if (cuttext.length < longtext.length) { 
    cuttext+="...";
}




Однако, судя по названию переменных, можно предположить что работа ожидается с текстом,
а не html элементами. В этом случае, чтобы получить текст выбранного элемента необходимо
было воспользоваться методом textContent, либо если нужно получить текст включая html-теги,
innerHTML

var longtext = document.querySelector('.excerpt>p:nth-child(2)').textContent;//long
long text
var cuttext = longtext.slice(0,40); //Uncaught TypeError: longtext.slice is not a
function
if (cuttext.length < longtext.length) {
    cuttext+="...";
}


Ответ 2

cuttext в твоем варианте это не массив, а html collection.

переведи html collection в массив, потом сделай слайс

var arr = Array.prototype.slice.call( longtext )
var cuttext = arr.slice(0,40);


в итоге твой код:




используя ES2015, я обычно делаю так:

var arr = [...longtext];