Помогите мне понять объекты в DOM

Question

У меня вопрос об объектах DOM.

Что я узнал, так это то, что все в документе - это объекты?

<form name="myform" action="script.js">
    <input type="text">type something</input>
</form>

Если мы посмотрим на пример, является ли form объектом со свойствами name и action?

Но являются ли name и action самими объектами? я не совсем понимаю разницу между объектами и свойствами.

А в чем разница между элементом объекта и узлом?

Я знаю основы html, css, javascript и dom. но может ли кто-нибудь описать мне общую картину того, как эти части взаимодействуют друг с другом.

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

Answer 1

Эта статья является хорошим местом для начала изучения DOM.

http://w3schools.com/htmldom/default.asp

Answer 2

Мне кажется, ваша проблема в том, что вы не понимаете концепцию объектно-ориентированного программирования. JavaScript это объектно-ориентированный язык. Вы, вероятно, должны совершить краткий обзор концепций .

Вкратце, однако, объекты - это способ инкапсулировать как данные («свойства», на которые вы ссылаетесь), так и функциональные возможности («методы» или «функции», которые вы можете попросить у объекта выполнить).

В случае JavaScript DOM существует дерево объектов, где каждый объект содержит свойства, которые сами являются объектами. Таким образом, вы можете иметь объект Form с такими методами, как onSubmit () и свойствами, такими как «elements», который является массивом полей формы. Каждый элемент в массиве - это другой объект, например, объект TextField или флажок.

Итак, теперь вы знаете об объектах. Одна вещь об объектах состоит в том, что они могут наследовать свойства от родительского класса объекта. Например, в JavaScript есть класс Element, и каждый из объектов поля формы является экземпляром «подкласса» класса Element. Таким образом, поскольку Element определяет свойство «name», а TextField и Checkbox и все их друзья наследуют от Element, у всех них автоматически также доступно это свойство «name».

Термин «узел» относится к конкретному местоположению в структуре дерева или графа. В этом случае DOM (объектная модель документа) определяет типы объектов, которые могут быть узлами в дереве, представляющем веб-страницу. Для каждой посещаемой веб-страницы браузер создает «дерево DOM», представляющее собой большое дерево объектов, представляющих каждый из элементов веб-страницы.

Обратите внимание, что HTML естественно имеет древовидную структуру: тег html содержит заголовок и тело, тег заголовка содержит теги заголовка, мета и сценария, а тег мета содержит такие атрибуты, как имя и содержимое. Все это организовано браузером в дерево объектов, и , которым является то, чем вы манипулируете, когда используете JavaScript для программирования DOM.

Итак, резюмируем: объекты - это фундаментальное представление данных и функциональности в JavaScript. Элементы - это особые классы объектов, которые являются подклассами класса «Элемент» и представляют какое-то поле формы. Их можно найти в массиве form.elements, который является свойством объекта формы. Наконец, узлы - это точки в дереве тегов, текста, сценария и других объектов, составляющих веб-страницу.

Надеюсь, это поможет!

Answer 3

Я уже рассказывал людям о DOM и обнаружил, что видя DOM в действии.

Иди возьми клоп-пожарника, если у тебя его нет. http://getfirebug.com/

После того, как вы, конечно, перезапустите Firefox ...

Откройте любую веб-страницу и щелкните правой кнопкой мыши что-нибудь, появится опция «Проверка элемента». Это отобразит отрендеренный код страницы. Когда я говорю «отрендеренный», я имею в виду страницу после того, как она была изменена любым javascript, отличным от стандартного исходного кода, который представляет собой просто прямой HTML, отправленный с сервера.

Элемент, который вы проверяете, будет выделен. Теперь щелкните правой кнопкой мыши на этом выделенном элементе и выберите «Проверка на вкладке DOM».

Когда вы попадаете на вкладку DOM, здесь отображаются все свойства проверенного элемента. Здесь вы можете увидеть атрибуты элемента, такие как type = "input", методы элемента, такие как focus (), возможно, собственные прототипы, собственные атрибуты Firefox и многое другое.

Вот несколько методов, функций и атрибутов, которые вам нужны для получения списка, посмотрите их в Mozilla Developer Center. Потратьте некоторое время на написание сценариев, которые перемещают вас по DOM и позволяют изменять его, используя их, не используйте innerHTML для каких-либо действий.

• createElement
• createTextNode
• AppendChild
• InsertBefore
• RemoveChild
• cloneNode
• SetAttribute
• removeAttribute
• getElementById
• getElementsByTagName
• ChildNodes
• FirstChild
• LastChild
• NextSibling
• hasChildNodes
• тэгу
• attachEvent (IE) / addEventListener (все остальные)
• detachEvent (IE) / removeEventListener (все остальные)

Answer 4

Атрибуты HTML отображаются как свойства объекта-элемента.

• http://www.w3.org/TR/DOM-Level-2-HTML/html.html
• http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-745549614

Элемент = объект, свойство = атрибут. Метод - это просто вызываемое свойство, например, onclick.

<form
onsubmit="alert('hi');"
id="contact-form"
>

onsubmit - это метод, id - это свойство, form - это узел с типом узла 1, что означает, что это HTMLElement и наследует общие свойства HTML.

Answer 5

в вашем примере имя и действие являются атрибутами объекта формы. если у вас было что-то подобное на странице JSP

<form name="frm" action="somepage.jsp" onSubmit=" return validateForm();">
  <input type="text" name="txtField" id="txtField"></input>
  <input type="submit" value="submit"></input>
</form>

и функция js, определенная так, чтобы проверять, был ли какой-либо текст введен в текстовое поле.

<script>
  function validateForm(){
    if(document.frm.txtField.value="")
       return false;
    else
       return true;
  }
 </script>

Вы можете использовать объект документа для доступа к объекту формы в dom и от этого доступа к элементу ввода, который содержится в форме.