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

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

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

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

Javascript

                      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

<!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, спасибо.
Добавил в копилку ))

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

Решение

Решение

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

@Qwerty_Wasd dev - investigator 2148 / 1493 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	18.01.2019, 10:59	3
	xte, kidASM, Сообщение от kidASM removeAttribute() можно использовать как вариант в случае присутствия одного класса у элемента. Если их несколько, removeAttribute сотрет их все. Если нужно удалить только один из них, лучше использовать element.classList.remove("имя_класса") https://developer.mozilla.org/... /classList 0

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

@Qwerty_Wasd dev - investigator 2148 / 1493 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	18.01.2019, 11:20	5
	kidASM, Сообщение от kidASM но не удаляет сам класс не удаляет атрибут. Только указанный класс. И как раз удаляет. А read-only означает, что метод не "перегрузить\переназначить". И упреждая возможный ход диалога - да, в JS нет понятия "перегрузка". Зато запросто можно сымитировать. Сообщение от kidASM ТС писал именно о удалении аттрибута мой пост не поправка к Вашему - скорее дополнение. 0

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

Опции темы