Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
 
Рейтинг 4.67/18: Рейтинг темы: голосов - 18, средняя оценка - 4.67
 Аватар для Teamur
29 / 29 / 5
Регистрация: 06.01.2015
Сообщений: 336

Добавление своих свойств в HTMLElement.prototype

26.02.2017, 18:21. Показов 3955. Ответов 26
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Попытка:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!doctype html>
 
<meta charset='utf-8'>
<title>Добавление своих свойств в HTMLElement.prototype</title>
 
<div id='Box'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
 
<script>
 
HTMLElement.prototype.childs = function() {
  collection = this.children;
  console.log(collection);
  return collection;
}
 
var ch = Box.childs
 
</script>
Всё это возвращает функцию, а нужны Чилдрены #Box (
0
Лучшие ответы (1)
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
26.02.2017, 18:21
Ответы с готовыми решениями:

HTMLElement.prototype.YourMethod в Safari
Hi 2 all Vopros, vozmojno kakto podtzepiti etot interface v Safari? To esti, dobaviti novii method kak v mozilla: ...

Prototype Добавление свойства
Всем привет, вот смотрю урок Время 33:58 (ссылка привязана ко времени видео) https://youtu.be/VXASGCI08CI?t=2038 И там вот...

Prototype Добавление свойства
Всем привет, вот смотрю урок Время 33:58 (ссылка привязана ко времени видео) https://youtu.be/VXASGCI08CI?t=2038 И там вот...

26
 Аватар для diadiavova
7259 / 2606 / 744
Регистрация: 11.04.2015
Сообщений: 4,150
Записей в блоге: 43
26.02.2017, 19:11
JavaScript
1
var ch = Box.childs();
1
 Аватар для Teamur
29 / 29 / 5
Регистрация: 06.01.2015
Сообщений: 336
26.02.2017, 19:46  [ТС]
diadiavova, а можно без скобок?

Box.childs
Также как и:
Box.children

Или
Box.nodes
Как и
Box.childNodes

Box.last
Как и
Box.lastChild

Вот как всё это реализовать?

Вот как разработчики прописали свойства children, childNodes, firstChild, lastChild в ПРОТОТИП HTMLElement
0
 Аватар для diadiavova
7259 / 2606 / 744
Регистрация: 11.04.2015
Сообщений: 4,150
Записей в блоге: 43
26.02.2017, 19:54
Teamur, то что ты показал - не функции, а свойства. Загугли JavaScript defineproperty. В данном случае код, описанный тобой в функции надо внести в геттер свойства.

Добавлено через 3 минуты
JavaScript
1
2
3
4
5
6
7
8
        Object.defineProperty(HTMLElement.prototype, "childs", {
            get: function ()
            {
                collection = this.children;
                console.log(collection);
                return collection;
            }
        });
1
 Аватар для Teamur
29 / 29 / 5
Регистрация: 06.01.2015
Сообщений: 336
26.02.2017, 20:41  [ТС]
diadiavova, спасибо!
Я сейчас с планшета, не могу проверить, а в codepen не хочу заходить!

Приведенный вами код рабочий?
0
 Аватар для diadiavova
7259 / 2606 / 744
Регистрация: 11.04.2015
Сообщений: 4,150
Записей в блоге: 43
26.02.2017, 20:48
Лучший ответ Сообщение было отмечено Teamur как решение

Решение

Цитата Сообщение от Teamur Посмотреть сообщение
Приведенный вами код рабочий?
Да я даже проверил
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script>
        Object.defineProperty(HTMLElement.prototype, "childs", {
            get: function ()
            {
                collection = this.children;
                console.log(collection);
                return collection;
            }
        });
 
        alert(document.body.childs.length)
    </script>
</body>
</html>
Такая страница при загрузке показывает алерт с единичкой.
1
 Аватар для Teamur
29 / 29 / 5
Регистрация: 06.01.2015
Сообщений: 336
26.02.2017, 20:52  [ТС]
diadiavova, Вы молодец! Спасибо! Всего доброго!
0
 Аватар для Teamur
29 / 29 / 5
Регистрация: 06.01.2015
Сообщений: 336
25.03.2017, 14:47  [ТС]
Проверка наличия нескольких элементов в коробке
HTML5
1
2
3
4
5
<div id='Box'>
  <div id='A'>A</div>
  <div id='B'>B</div>
  <div id='C'>C</div>
</div>
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
Object.defineProperty(
HTMLElement.prototype,
'has',
{
  get(...elems) {
    var i, arr = [];
    for (i of elems) {
      arr.push(this.contains(i));
    };
    return arr;
  }
}
);
Не работает:
JavaScript
1
2
var result = Box.has(A,B,D,C);
console.log(result);  // На выходе должно быть: [true, true, undefined, true]
Добавлено через 8 минут
а лучше [1,1,0,1]
0
 Аватар для diadiavova
7259 / 2606 / 744
Регистрация: 11.04.2015
Сообщений: 4,150
Записей в блоге: 43
25.03.2017, 15:44
Teamur, во-первых, ты опять перепутал, на сей раз тебе нужна функция, а не свойство.
Во-вторых, что это за конструкция this.contains ? Ну и в-третьих, ты передаешь id элементов как имена каких-то переменных, в то время как надо передавать как строки.
JavaScript
1
2
3
4
5
6
7
8
9
10
11
        HTMLElement.prototype.has = function (...elems)
        {
            var i, arr = [];
            for (i of elems)
            {
                arr.push(!!(this.querySelector("#" + i)));
            };
            return arr;
        };
 
        alert(document.querySelector("#Box").has("A","B","C","D"))
А чтобы выдавало единицы и нули можно перед двумя восклицательными знаками еще плюсик поставить.

Добавлено через 47 секунд
JavaScript
1
arr.push(+!!(this.querySelector("#" + i)));
В шестой строке.

Добавлено через 33 минуты
Немного дополню. Изначально я немного неправильно понял, что ты делаешь, отсюда вопросы насчет contains и переменных вместо строк. Вот такой вариант вполне работоспособен
JavaScript
1
2
3
4
5
6
7
8
9
        HTMLElement.prototype.has = function (...elems)
        {
            var i, arr = [];
            for (i of elems)
            {
                arr.push(this.contains(i));
            };
            return arr;
        };
Но проблема здесь именно в вызове. Когда ты передаешь переменные, созданные из существующих id элементов, то проблем нет, но вот элемента D не существует на странице и обращение к нему вызывает ошибку. Можно написать как-то так
JavaScript
1
2
3
4
5
6
7
8
9
10
11
        HTMLElement.prototype.has = function (elems)
        {
            var i, arr = [];
            for (i of elems)
            {
                arr.push(this.contains(i));
            };
            return arr;
        };
 
        alert(document.querySelector("#Box").has("A,B,C,D".split(",").map(function (e) { return document.getElementById(e);})));
То есть явно вызывать getElementById и таким образом передаваться будет либо реальный элемнет, либо null.
1
 Аватар для Teamur
29 / 29 / 5
Регистрация: 06.01.2015
Сообщений: 336
25.03.2017, 16:08  [ТС]
diadiavova,
https://developer.mozilla.org/... e/contains

Node.contains(otherNode)

Я передаю элемент.
Я мог бы конечнно записать:
JavaScript
1
2
3
4
5
6
var box = document.getElementById('Box');
var a = document.getElementById('A');
 
box.has(a);
 
box.contains(a); // вернет true согласно справке от MDN
Но допускается обращаться к элементам просто прописав их ID.

Зисом является #Box, как бы

Добавлено через 4 минуты
Хотя передавать селектор, более мощное решение.

Добавлено через 5 минут
Просто так: .has(A,B,C,D) короче

А тут надо добавлять кавычки
Цитата Сообщение от diadiavova Посмотреть сообщение
.has("A","B","C","D"))
Добавлено через 5 минут
Дело в том, что в моем проекте практически все элементы имеют ID.
ID я пишу с большой буквы, а переменные с малой. Поэтому я не путаюсь и могу, не писать getElementById,
кроме того я могу скажем все переменные начинать, нпр так $offset

Поэтому я и пишу .has(A,B,C)
0
 Аватар для diadiavova
7259 / 2606 / 744
Регистрация: 11.04.2015
Сообщений: 4,150
Записей в блоге: 43
25.03.2017, 16:20
Цитата Сообщение от Teamur Посмотреть сообщение
Просто так: .has(A,B,C,D) короче
Но если D не существует - вылетает ошибка.
Цитата Сообщение от Teamur Посмотреть сообщение
А тут надо добавлять кавычки
Можно передавать строку, в которой идентификаторы будут разделены каким-нибудь сепаратором, в теле функции разделить это дело сплитом. Одни кавычки, конечно, останутся, но это не такая большая проблема.
JavaScript
1
.has("A,B,C,D")
Если будут использоваться селекторы, то вместо запятой придется придумать что-то другое, поскольку синтаксис селекторов сам содержит запятую.
1
 Аватар для Teamur
29 / 29 / 5
Регистрация: 06.01.2015
Сообщений: 336
25.03.2017, 16:35  [ТС]
diadiavova,
как можно упростить это:

JavaScript
1
2
3
4
5
6
HTMLElement.prototype.has=function(...elems){
  if(elems.length==1)return this.contains(elems[0]);
  var i, arr=[];
  for(i of elems){arr.push(this.contains(i))};
  return arr;
}
Типа если передается только один элемент, то возвращает просто TRUE/FALSE, а НЕ массив.
А то код дублируется.
Спасибо!
0
 Аватар для diadiavova
7259 / 2606 / 744
Регистрация: 11.04.2015
Сообщений: 4,150
Записей в блоге: 43
25.03.2017, 18:39
Цитата Сообщение от Teamur Посмотреть сообщение
Типа если передается только один элемент, то возвращает просто TRUE/FALSE, а НЕ массив.
А то код дублируется.
Так, например
JavaScript
1
2
3
4
5
6
        HTMLElement.prototype.has = function (...elems)
        {
            var i, arr = [];
            for (i of elems) { arr.push(this.contains(i)) };
            return arr.length == 1 ? arr[0] :arr;
        }
Хотя вообще, это так себе идея. Хорошо, когда функция возвращает какой-то конкретный тип. Ну вот возьми ситуацию, когда ты получаешь массив и обрабатываешь его в цикле, а тут вдруг раз и функция вернула булеву величину и как это будет обрабатываться? Скорей всего приведет к ошибке.

Добавлено через 41 минуту
И кстати, раз уж речь зашла о том, чтобы сократить (по крайней мере, если ты оставил идею возвращать разные типы, то есть еще такие варианты
JavaScript
1
        HTMLElement.prototype.has = function(elems){ return elems.map(e => this.contains(e)) };
и
JavaScript
1
        HTMLElement.prototype.has = function (elems) { return elems.map(HTMLElement.prototype.contains.bind(this)) };
1
 Аватар для Teamur
29 / 29 / 5
Регистрация: 06.01.2015
Сообщений: 336
25.03.2017, 18:48  [ТС]
diadiavova,
Спасибо!

Второй вариант с использованием bind имеет ли какие-то преимущества по сравнению с предпоследним вариантом?
Например по быстродействию?
0
 Аватар для diadiavova
7259 / 2606 / 744
Регистрация: 11.04.2015
Сообщений: 4,150
Записей в блоге: 43
25.03.2017, 18:54
Цитата Сообщение от Teamur Посмотреть сообщение
Второй вариант с использованием bind имеет ли какие-то преимущества по сравнению с предпоследним вариантом?
Например по быстродействию?
Точно не знаю, но думаю, что вряд ли. Это просто способ достать готовую функцию contains для передачи ее map, а в первом варианте функция создается лямбда-выражением, а contains уже вызывается в его теле. По идее, конечно, в первом варианте есть еще один промежуточный уровень, то есть вместо непосредственной передачи функции, она упаковывается в еще одну, из которой вызывается, но я не думаю, что это может дать какой-то заметный эффект. Хотя, если хочешь знать это точно, то можно в профилировщике запустить проверить, сейчас во всех браузерах есть инструменты разработчика и там профилировщики тоже имеются.
1
 Аватар для Teamur
29 / 29 / 5
Регистрация: 06.01.2015
Сообщений: 336
25.03.2017, 18:55  [ТС]
По поводу идеи.
Скажем мы проверяем коробку на наличие определенных элементов, а затем реагируем на результат выполнения функции, нпр:
1100: f1(){...},
1011: f2(){...}.
И тд.
Вместо массива можно выдать строку, или число, но вроде JS не поймет что такое 0010, поэтому либо массив либо строка, можно даже объект.
Такие вот дела.. )
0
 Аватар для diadiavova
7259 / 2606 / 744
Регистрация: 11.04.2015
Сообщений: 4,150
Записей в блоге: 43
25.03.2017, 18:57
Teamur, ну смотря для чего тебе это нужно. можно и в число перевести из двоичного формата. Здесь результат все-таки состоит из единиц и нулей.
1
 Аватар для Teamur
29 / 29 / 5
Регистрация: 06.01.2015
Сообщений: 336
26.03.2017, 10:10  [ТС]
diadiavova, если будет время, объясните почему приведенный ниже код работает не корректно.
Передача узлов из одного контейнера в другой:
HTML5
1
2
3
4
5
6
7
8
9
10
<!doctype html>
<meta charset='utf-8'>
<title>2603</title>
 
<div id='B1'>
  text
  <div></div>
</div>
 
<div id='B2'></div>
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var i;
 
NodeList.prototype.to=function(box){
  for(i of this){
    box.append(i);
  }
}
 
var B1Nodes = B1.childNodes;
console.log(B1Nodes);
 
var B2Nodes=B2.childNodes;
console.log(B2Nodes);
 
B1Nodes.to(B2);
 
console.log(B2Nodes); // Покажет только текстовый узел, а DIV'a не будет
0
 Аватар для diadiavova
7259 / 2606 / 744
Регистрация: 11.04.2015
Сообщений: 4,150
Записей в блоге: 43
26.03.2017, 11:00
Teamur, несмотря на то, что ты, вроде как, используешь новомодные конструкции типа for...of, за кулисами этого процесса коллекция все также продолжает обходиться с помощью индексации и в результате возникает обычная проблема с которой можно столкнуться всякий раз, когда пытаешься при обходе коллекции в цикле тут же изменять ее. Удаляешь первый элемент и индексация сбивается. То есть за кулисами происходит следующее: сначала работа идет с индексом 0, ты удаляешь элемент с таким индексом и у всех последующих элементов индексы смещаются, то есть когда надо перейти на следующий элемент, то скриптовый движок обрабатывает узел под индексом 1, но из-за удаления первого узла у твоего дива теперь индекс 0 и он из-за этого пропускается. Выход здесь один: все время бери из коллекции нулевой элемент пока они не закончатся.
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
        NodeList.prototype.to = function (box)
        {
            while (this.length > 0)
            {
                box.appendChild(this[0]);
            }
        }
 
        var B1Nodes = B1.childNodes;
        console.log(B1Nodes);
 
        var B2Nodes = B2.childNodes;
        console.log(B2Nodes);
 
        B1Nodes.to(B2);
        console.log(B2Nodes); // Покажет все как надо
2
 Аватар для Teamur
29 / 29 / 5
Регистрация: 06.01.2015
Сообщений: 336
26.03.2017, 11:12  [ТС]
diadiavova, очень благодарен Вам за помощь и внимание к теме!
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
26.03.2017, 11:12
Помогаю со студенческими работами здесь

Добавление своих свойств в Active Directory
(Задаю очередной вопрос, на который скорее всего сам потом дам ответ) Народ! Никто не добавлял в Active Directory своих свойств? Типа как...

Prototype Добавление адреса в цикл с картинками
Есть вот такой вот цикл: &lt;style type=&quot;text/css&quot;&gt;.photo{border:4px solid #ccc;}&lt;/style&gt;&lt;script type=&quot;text/javascript&quot;&gt; function...

Реализация окна свойств для своих объектов
Всем привет. Делаю свою программку для автокада, но не суть - вопрос общий. Итак, я создаю свой класс, который описывает мой объект....

Как сделать, чтобы в своих классах выскакивал список доступных свойств?
Когда выпадает список доступных свойств и методов класса возле каждого элемента пишется его примечание, описание. Как сделать, чтобы в...

Какой из методов рациональнее использовать: Array.prototype.indexOf() или String.prototype.indexOf()
функции передаётся буква алфавита в нижнем регистре и она должна вернуть следующую по очереди букву алфавита в нижнем регистре при этом...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
20
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D
8Observer8 04.03.2026
Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий
8Observer8 02.03.2026
Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11680&amp;d=1772460536 Одним из. . .
Реалии
Hrethgir 01.03.2026
Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .
Ритм жизни
kumehtar 27.02.2026
Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .
SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten
8Observer8 27.02.2026
Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами
8Observer8 20.02.2026
Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .
Конвертировать закладки radiotray-ng в m3u-плейлист
damix 19.02.2026
Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI
Eddy_Em 18.02.2026
Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru