Клонирование узла

@xte · Регистрация: 14.01.2019

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

Для клонирования ссылки использую конструкцию:

JavaScript
1
2
3
4
5
                      var oNameClone = oName.cloneNode(true);
                      oNameClone.className = '';  // заменяю класс
                      oNameClone.target = '_blank';
                      var oHead = oWindow.firstChild;
                      oHead.insertBefore(oNameClone, oHead.firstChild);

1) Как удалить атрибут "class"?
2) Можно ли клонировать узел, таким образом, чтобы при изменении атрибутов оригинала (title, style) автоматически изменялись атрибуты клона?

@kidASM · 18.01.2019, 10:35

1. removeAttribute()
2. Автоматически, - нет. Нужно писать код для изменения, в котором указывать что и как менять.

Qwerty_Wasd · 18.01.2019, 10:59

xte, kidASM,

Сообщение от kidASM

removeAttribute()

можно использовать как вариант в случае присутствия одного класса у элемента. Если их несколько, removeAttribute сотрет их все.
Если нужно удалить только один из них, лучше использовать element.classList.remove("имя_класса")
https://developer.mozilla.org/... /classList

@kidASM · 18.01.2019, 11:08

1. ТС писал именно о удалении аттрибута.
2. Свойство classList - только для чтения. classList.remove - заменяет значение класса, но не удаляет сам класс.

Qwerty_Wasd · 18.01.2019, 11:20

kidASM,

Сообщение от kidASM

но не удаляет сам класс

не удаляет атрибут. Только указанный класс. И как раз удаляет. А read-only означает, что метод не "перегрузить\переназначить". И упреждая возможный ход диалога - да, в JS нет понятия "перегрузка". Зато запросто можно сымитировать.

Сообщение от kidASM

ТС писал именно о удалении аттрибута

мой пост не поправка к Вашему - скорее дополнение.

@amr-now · 18.01.2019, 20:29

Сообщение от xte

2) Можно ли клонировать узел, таким образом, чтобы при изменении атрибутов оригинала (title, style) автоматически изменялись атрибуты клона?

Сообщение от kidASM

2. Автоматически, - нет. Нужно писать код для изменения, в котором указывать что и как менять.

Один из 100500 способов data binding (тут из коробки):

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <div>Первый потомок</div>
    <div name="oname" class="first">Текст</div>
    <script>
        let oName = document.getElementsByName("oname")[0],
            oWindow = document.body,
            oHead = oWindow.firstElementChild;
 
        let oNameClone = oName.cloneNode(true);
        oNameClone.removeAttribute("class");
        oNameClone.setAttribute("target", "_blank");
        oHead.insertBefore(oNameClone, oHead.firstChild);
 
        // создаём экземпляр MutationObserver        
        let observer = new MutationObserver(callback);
        function callback(mutations) {
            mutations.forEach((mutation) => {
                oNameClone.setAttribute(mutation.attributeName, oName.getAttribute(mutation.attributeName));
            });
        }
        // конфигурация нашего observer:
        let config = { attributes: true, subtree: false, attributeFilter: ["title", "style"] }; // Наблюдение за атрибутами элемента
 
        // передаём в качестве аргументов целевой элемент и его конфигурацию
        observer.observe(oName, config);
 
        // Изменим цвет исходного элемента
        oName.style.color = "red";
    </script>
</body>
</html>r

Показали, что jQuery data binding в разы короче ))

@xte · 23.01.2019, 16:45 **[ТС]**

amr-now, спасибо.
Добавил в копилку ))

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

Клонирование узла

Решение

Решение

@kidASM 414 / 305 / 113 Регистрация: 28.08.2013 Сообщений: 818
	18.01.2019, 10:35
	Сообщение было отмечено amr-now как решение Решение 1. removeAttribute() 2. Автоматически, - нет. Нужно писать код для изменения, в котором указывать что и как менять. 2

@kidASM 414 / 305 / 113 Регистрация: 28.08.2013 Сообщений: 818
	18.01.2019, 11:08
	1. ТС писал именно о удалении аттрибута. 2. Свойство classList - только для чтения. classList.remove - заменяет значение класса, но не удаляет сам класс. 0

@xte 0 / 0 / 0 Регистрация: 14.01.2019 Сообщений: 24
	23.01.2019, 16:45 [ТС]
	amr-now, спасибо. Добавил в копилку )) 0