Javascript — Javascript DOM. th.innerHTML is not a function


Javascript with DOM

Javascript works with DOM

Javascript can modify the DOM (change HTML elements)

Here is an example how to change the content of the HTML element.

Using the getElementById(. ) function you can make modification in your HTML element .

Using it,you can

  • Change HTML element
  • Delete HTML element
  • Create HTML element
  • Copy HTML element
  • etc.

Javascript with css

Javascript lets you work with css using getElementById(. ) function .

  • Create styles
  • Change styles
  • Delete styles
  • Add css classes
  • Remove css classes
  • etc.

Почему когда я повесил обработчик события на DIV браузер выдает ошибку что div.addEventListener is not a function?

Потому что skin1 в данном случаем возвращает массив.


Присоединюсь.
getElementsByClassName — возвращает коллекцию (массив).
Ознакомьтесь с пруфами 1, 2

Дополню.
Возможно addEventListener лучше не использовать, т.к. может повесится несколько обработчиков делающих одно и то же. Если заметите, что клик срабатывает несколько раз, перепишите на onclick

innerHTML

Contents

innerHTML JavaScript: Main Tips

  • This property is used to set or return the HTML content ins >

So, what is innerHTML? Let’s start by reminding everyone that every HTML element has an inner HTML property. It is used to define HTML tags and also the content that is inserted between them. This property is one of the components of the DOM that lets developers manipulate the appearances of web pages. In other words, it allows you to get information about all DOM elements.

Additionally, you have the opportunity to modify or replace HTML elements. Therefore, you should learn how the innerHTML JavaScript property can be used to your advantage.

People can struggle and complain about innerHTML not working. Such things usually occur because of human error, when strings are not appropriately defined, or there are some mistakes in JavaScript code.

This property is used to set or return the HTML content inside an element:

Correct Syntax

To avoid mistakes, we suggest you learn the proper way of manipulating DOM elements using the innerHTML JavaScript property. After you learn the basics, you won’t have to worry about innerHTML not working ever again.


To return the HTML content inside an element, you should follow this code example:

If you wish to modify HTML elements with the innerHTML JavaScript property, we present you the appropriate way of setting the HTML content inside an element:

Theory is great, but we recommend digging deeper!
JavaScript Tutorial: Learn JavaScript Just in 1 Hour

Parameters

As you can see in the syntax examples, the innerHTML JavaScript property can only take one value. It is called text.

Text specifies the HTML content inside an element. As a parameter, it is used to make modifications to the text of the element. After applying it, you will be able to change texts that are positioned between different HTML tags.

Return Value

After the innerHTML JavaScript property is applied to a DOM element, you will receive its content. A string which represents the HTML content inside an element is called the return value.

There are no limitations to the type of tags the inner HTML can set and return. Therefore, feel free to practice. The more you try, the more you learn!

Code Examples

To help you understand what is innerHTML property and how it’s used, we’ll provide you with useful code examples that you can practice your code-writing skills on. After you click the Try it Live button, you will be able to make modifications and learn without having to leave the browser!

The first example displays how you can make modifications to two DOM elements:

The following code is used to alert the content of


AppendChild is not a function

08.05.2014, 13:37

InnerHtml и appendChild
Добрый вечер, проблема в следующем — есть два эквивалентных кода код 1 x =.

Цукерберг рекомендует:  Языки - Подскажите литературу для программирования

Вложенные appendChild. Получается span внутри container
Пишу следующий код: container.appendChild( document.createElement(‘div’).appendChild( .

AppendChild is not a function
Здравствуйте! Есть код HTML:

не срабатывает appendChild
Здравствуйте. При нажатии на кнопку с , должен создаваться новый Div , далее.

innerHTML

Поддержка браузерами

Описание

Свойство innerHTML представляет собой содержимое элемента (элементы-потомки, комментарии, текст и т.д.), которое хранится в нём в виде строки. Свойство доступно для чтения и записи, поэтому у нас есть возможность получать и изменять содержимое элемента.

Примечание: если текстовый узел элемента содержит символы «&», » «, то свойство innerHTML преобразует эти символы в «&», » » соответственно. Для получения правильной копии содержимого текстового узла используйте свойство textContent.

Синтаксис

При установке нового содержимого, сначала удаляется старое содержимое элемента, и только затем устанавливается новое.


Обратите внимание, свойство innerHTML отсутствует у пустых элементов, его можно применять только с теми элементами, которые имеют открывающий и закрывающий тег.

What’s wrong with innerHTML?

The innerHTML property is extremely popular because it provides a simple way to completely replace the contents of an HTML element. Another way to do that is to use the DOM Level 2 API (removeChild, createElement, appendChild) but using innerHTML is by far the easiest and most efficient way to modify the DOM tree. However, innerHTML has few problems of its own that you need to be aware of:

    Content is replaced everywhere : When you append to (or otherwise modify) innerHTML, all the DOM nodes inside that element have to be re-parsed and recreated.

Preserves event handlers attached to any DOM elements : Setting innerHTML will not automatically reattach event handlers to the new elements it creates, so you would have to keep track of them yourself and add them manually, potentially creating a memory leak on some browsers.

Even if you use +=like «innerHTML = innerHTML + ‘html'» still the old content is replaced by html: String concatenation just does not scale when dynamic DOM elements need to be created as the plus’ and quote openings and closings becomes difficult to track.

Практический JS: проблемы innerHTML

Примечание: ниже перевод статьи Julien Lecomte «The Problem With innerHTML», в которой автор рассматривает проблемы при использовании метода innerHTML в современных браузерах и предлагает ряд советов, как ее можно избежать. Мои комментарии далее курсивом

Свойство innerHTML крайне популярно среди веб-разработчиков в силу своей простоты и удобства, поскольку оно совершено элементарно позволяет заменить HTML-содержание у конкретного тега. Можно также воспользоваться DOM Level 2 API ( removeChild , createElement , appendChild ), но использование innerHTML гораздо более простой и эффективный способ для модификации DOM-дерева. Однако, есть ряд проблем при использовании innerHTML , которых следует избегать:

  • Неправильная обработка свойства innerHTML может привести к атакам, связанным со script-инъекциями (XSS) в Internet Explorer, когда HTML-строка содержит вызов
  • Выставление свойства innerHTML уничтожит все текущие вложенные HTML-элементы со всеми обработчиками событий, что потенциально может вызвать утечки памяти в некоторых браузерах.

Есть и еще несколько более мелких недостатков, которые тоже стоит упомянуть:


  • Нельзя получить ссылку на только что созданные элементы, вам приходится добавлять код для получения ссылки на них вручную (используя DOM API).
  • Вы не можете выставить innerHTML для всех HTML-элементов во всех браузерах (к примеру, Internet Explorer не позволяет выставить innerHTML для строки таблицы (tr)).

Лично меня больше волнуют вопросы безопасности и использовании памяти, связанные с использованием свойства innerHTML . Однако, описанная проблема далеко не нова, и уже некоторые светлые головы уделили ей внимание и предложили методы, для ее решения.

Douglas Crockford написал функцию purge , которая удаляет некоторые циклические ссылки (circular references), вызванные добавлением обработчиков событий к HTML-элементам, позволяя сборщику мусора (garbage collector) полностью освободить всю память, с ними связанную.

Свойство innerHTML

Эта страница создана, чтобы собрать информацию и фичи работы с innerHTML в одном месте. Если Вы вдруг найдете еще интересный хинт — напишите на iliakan сабака gmail.com и я обязательно его сюда включу.

Свойство innerHTML устанавливает или получает всю разметку и содержание внутри данного элемента.

Очистка при помощи innerHTML. Фича 1.

Свойство innerHTML можно использовать для очистки всего элемента.

Однако, в браузере Internet Explorer можно натолкнуться на подводный камень. При очистке div таким образом, в нем при определенных обстоятельствах (например, просмотр живого HTML) остается . Это, скорее всего, баг, встречается в IE6, IE7. Чтобы с этим никогда не встречаться — очищайте элемент через DOM, функцией типа

Добавление текста при помощи innerHTML. Фича 2.

Вообще, свойство innerHTML хоть и не входит в стандарт, но поддерживается почти всеми браузерами, и работает гораздо быстрее операций с DOM.

Цукерберг рекомендует:  Тест по C++. Сложный уровень

Структура работы innerHTML. Фича 3

innerHTML в таблицах. Фича 4


Цитата из мана Microsoft..

. The property is read/write for all objects except the following, for which it is read-only: COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR.

Короче, говоря, используйте DOM и помните о TBODY, которое обязательно должно присутствовать в таблице. А если что — браузер его добавит.

Работа с DOM-моделью

Каждый объект Window имеет свойство document, ссылающееся на объект Document. Этот объект Document не является автономным объектом. Он является центральным объектом обширного API, известного как объектная модель документа (DOM), который определяет порядок доступа к содержимому документа.

Обзор модели DOM

— это фундаментальный прикладной программный интерфейс, обеспечивающий возможность работы с содержимым HTML и XML-документов. Прикладной программный интерфейс (API) модели DOM не особенно сложен, но в нем существует множество архитектурных особенностей, которые вы должны знать.

Прежде всего, следует понимать, что вложенные элементы HTML или XML-документов представлены в виде дерева объектов DOM. Древовидное представление HTML-документа содержит узлы, представляющие элементы или теги, такие как и

, и узлы, представляющие строки текста. HTML-документ также может содержать узлы, представляющие HTML-комментарии. Рассмотрим следующий простой HTML-документ:

DOM-представление этого документа приводится на следующей диаграмме:

Тем, кто еще не знаком с древовидными структурами в компьютерном программировании, полезно узнать, что терминология для их описания была заимствована у генеалогических деревьев. Узел, расположенный непосредственно над данным узлом, называется родительским по отношению к данному узлу. Узлы, расположенные на один уровень ниже другого узла, являются дочерними по отношению к данному узлу. Узлы, находящиеся на том же уровне и имеющие того же родителя, называются сестринскими. Узлы, расположенные на любое число уровней ниже другого узла, являются его потомками. Родительские, прародительские и любые другие узлы, расположенные выше данного узла, являются его предками.

Каждый прямоугольник на этой диаграмме является узлом документа, который представлен объектом Node. Обратите внимание, что на рисунке изображено три различных типа узлов. Корнем дерева является узел Document, который представляет документ целиком. Узлы, представляющие HTML-элементы, являются узлами типа Element, а узлы, представляющие текст, — узлами типа Text. Document, Element и Text — это подклассы класса Node. Document и Element являются двумя самыми важными классами в модели DOM.

Тип Node и его подтипы образуют иерархию типов, изображенную на диаграмме ниже. Обратите внимание на формальные отличия между обобщенными типами Document и Element, и типами HTMLDocument и HTMLElement. Тип Document представляет HTML и XML-документ, а класс Element представляет элемент этого документа. Подклассы HTMLDocument и HTMLElement представляют конкретно HTML-документ и его элементы:


На этой диаграмме следует также отметить наличие большого количества подтипов класса HTMLElement, представляющих конкретные типы HTML-элементов. Каждый из них определяет JavaScript-свойства, отражающие HTML-атрибуты конкретного элемента или группы элементов. Некоторые из этих специфических классов определяют дополнительные свойства или методы, которые не являются отражением синтаксиса языка разметки HTML.

Выбор элементов документа

Работа большинства клиентских программ на языке JavaScript так или иначе связана с манипулированием элементами документа. В ходе выполнения эти программы могут использовать глобальную переменную document, ссылающуюся на объект Document. Однако, чтобы выполнить какие-либо манипуляции с элементами документа, программа должна каким-то образом получить, или выбрать, объекты Element, ссылающиеся на эти элементы документа. Модель DOM определяет несколько способов выборки элементов. Выбрать элемент или элементы документа можно:

по значению атрибута id;

по значению атрибута name;

по имени класса или классов CSS;

по совпадению с определенным селектором CSS.

Все эти приемы выборки элементов описываются в следующих подразделах.

Выбор элементов по значению атрибута id

Все HTML-элементы имеют атрибуты >getElementById() объекта Document:

Это самый простой и самый распространенный способ выборки элементов. Если сценарию необходимо иметь возможность манипулировать каким-то определенным множеством элементов документа, присвойте значения атрибутам id этих элементов и используйте возможность их поиска по этим значениям.

В версиях Internet Explorer ниже IE8 метод getElementById() выполняет поиск значений атрибутов id без учета регистра символов и, кроме того, возвращает элементы, в которых будет найдено совпадение со значением атрибута name.

Выбор элементов по значению атрибута name

HTML-атрибут name первоначально предназначался для присваивания имен элементам форм, и значение этого атрибута использовалось, когда выполнялась отправка данных формы на сервер. Подобно атрибуту id, атрибут name присваивает имя элементу. Однако, в отличие от id, значение атрибута name не обязано быть уникальным: одно и то же имя могут иметь сразу несколько элементов, что вполне обычно при использовании в формах радиокнопок и флажков. Кроме того, в отличие от id, атрибут name допускается указывать лишь в некоторых HTML-элементах, включая формы, элементы форм и элементы и .


Выбрать HTML-элементы, опираясь на значения их атрибутов name, можно с помощью метода getElementsByName() объекта Document:

Цукерберг рекомендует:  Javascriot - мое второе приложение по расчету стоимости заказа

Метод getElementsByName() определяется не классом Document, а классом HTMLDocument, поэтому он доступен только в HTML-документах и не доступен в XML-документах. Он возвращает объект NodeList, который ведет себя, как доступный только для чтения массив объектов Element.

В IE метод getElementsByName() возвращает также элементы, значения атрибутов id которых совпадает с указанным значением. Чтобы обеспечить совместимость с разными версиями браузеров, необходимо внимательно подходить к выбору значений атрибутов и не использовать одни и те же строки в качестве значений атрибутов name и id.

Выбор элементов по типу

Метод getElementsByTagName() объекта Document позволяет выбрать все HTML или XML-элементы указанного типа (или по имени тега). Например, получить подобный массиву объект, доступный только для чтения, содержащий объекты Element всех элементов в документе, можно следующим образом:

Подобно методу getElementsByName(), getElementsByTagName() возвращает объект NodeList. Элементы документа включаются в массив NodeList в том же порядке, в каком они следуют в документе, т.е. первый элемент

в документе можно выбрать так:

Имена HTML-тегов не чувствительны к регистру символов, и когда getElementsByTagName() применяется к HTML-документу, он выполняет сравнение с именем тега без учета регистра символов. Переменная spans, созданная выше, например, будет включать также все элементы , которые записаны как .

Можно получить NodeList, содержащий все элементы документа, если передать методу getElementsByTagName() шаблонный символ «*».

Кроме того, классом Element также определяет метод getElementsByTagName(). Он действует точно так же, как и версия метода в классе Document, но выбирает только элементы, являющиеся потомками для элемента, относительно которого вызывается метод. То есть отыскать все элементы внутри первого элемента

можно следующим образом:

По историческим причинам класс HTMLDocument определяет специальные свойства для доступа к узлам определенных типов. Свойства images, forms и links, например, ссылаются на объекты, которые ведут себя как массивы, доступные только для чтения, содержащие элементы , и (но только те теги , которые имеют атрибут href). Эти свойства ссылаются на объекты HTMLCollection, которые во многом похожи на объекты NodeList, но дополнительно могут индексироваться значениями атрибутов id и name.

Объект HTMLDocument также определяет свойства-синонимы embeds и plugins, являющиеся коллекциями HTMLCollection элементов . Свойство anchors является нестандартным, но с его помощью можно получить доступ к элементам , имеющим атрибут name, но не имеющим атрибут href. Свойство scripts определено стандартом HTML5 и является коллекцией HTMLCollection элементов

Node properties: type, tag and contents


Let’s get a more in-depth look at DOM nodes.

In this chapter we’ll see more into what they are and learn their most used properties.

DOM node classes

Each DOM node belongs to the corresponding built-in class.

The root of the hierarchy is EventTarget, that is inherited by Node, and other DOM nodes inherit from it.

Here’s the picture, explanations to follow:

The classes are:

  • EventTarget – is the root “abstract” class. Objects of that class are never created. It serves as a base, so that all DOM nodes support so-called “events”, we’ll study them later.
  • Node – is also an “abstract” class, serving as a base for DOM nodes. It provides the core tree functionality: parentNode , nextSibling , childNodes and so on (they are getters). Objects of Node class are never created. But there are concrete node classes that inherit from it, namely: Text for text nodes, Element for element nodes and more exotic ones like Comment for comment nodes.
  • Element – is a base class for DOM elements. It provides element-level navigation like nextElementSibling , children and searching methods like getElementsByTagName , querySelector . A browser supports not only HTML, but also XML and SVG. The Element class serves as a base for more specific classes: SVGElement , XMLElement and HTMLElement .
  • HTMLElement – is finally the basic class for all HTML elements. It is inherited by concrete HTML elements:
    • HTMLInputElement – the class for elements,
    • HTMLBodyElement – the class for elements,
    • HTMLAnchorElement – the class for elements,
    • …and so on, each tag has its own class that may provide specific properties and methods.

So, the full set of properties and methods of a given node comes as the result of the inheritance.

For example, let’s consider the DOM object for an element. It belongs to HTMLInputElement class.

It gets properties and methods as a superposition of (listed in inheritance order):

  • HTMLInputElement – this class provides input-specific properties,
  • HTMLElement – it provides common HTML element methods (and getters/setters),
  • Element – provides generic element methods,
  • Node – provides common DOM node properties,.
  • EventTarget – gives the support for events (to be covered),
  • …and finally it inherits from Object , so “plain object” methods like hasOwnProperty are also available.
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих