JS композиция
Мы все знаем, что javascript имеет три части: ECMAScript , DOM и BOM . В зависимости от хоста (браузер), конкретные проявления также различны, а IE и другие браузеры имеют очень разные стили.
1. DOM - стандарт W3C; [Стандарт, что все браузеры публично соответствуют]
2. BOM основан на DOM различными производителями браузеров
Реализация в каждом браузере; [Это проявляется как разные определения разных браузеров, а методы реализации различны]
3. Окно - это объект Bom, а не объект JS;
DOM (модель объекта документа) - это интерфейс прикладной программы ( API ) для HTML и XML .
BOM в основном имеет дело с окнами и фреймворками браузера, но расширения JavaScript специфичные для браузера, обычно рассматриваются как часть COM. Эти расширения включают в себя:
Новое окно браузера перемещается, закройте окно браузера и изменяйте размер Windows. Позиционирование объектов, которые предоставляют данные веб -браузера. Объекты экрана, которые предоставляют подробности разрешения экрана пользователя. Поддержка файлов cookie. Т.е. расширил BOM и добавил класс ActiveXObject. Объекты ActiveX могут быть созданы с помощью JavaScript.
javacsript Accesses, EnsliceS и модифицирует клиента (браузер), получив доступ к объекту BOM (модель объекта браузера). Поскольку window BOM содержит document , свойства и методы окна объекта могут быть непосредственно использованы и воспринимаются. Следовательно, атрибут document объекта window может быть непосредственно использован, а содержимое и структуру документа XHTML можно получить, получить, извлекать и модифицировать через атрибут document . Потому что объект document является корневым узлом модели DOM (объект документа). Можно сказать, что BOM содержит DOM (объект), а браузер обеспечивает доступ к объекту BOM, который затем обращается к объекту DOM , чтобы JS может управлять браузером, а документы, прочитанные браузером. в
DOM содержит: window
Окно -объект содержит свойства: документ, местоположение, навигация, экран, история, фреймдокумент корневой узел содержит дочерние узлы: формы, местоположение, якоря, изображения, ссылки
Из window.document можно увидеть, что наиболее фундаментальным объектом DOM является дочерний объект окна Bom.
Разница: DOM описывает методы и интерфейсы для обработки содержания веб -страницы, а BOM описывает методы и интерфейсы для взаимодействия с браузером.
Познакомиться с домом
Давайте посмотрим на следующий код:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "en"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> dom </title> </hade> <hbod> href = "http://www.baidu.com"> javascript dom </a> </h2> <p> управляйте html -элементами, добавляйте, изменяйте или удаляет стили CSS и т. Д.
Разложить код HTML на диаграмму иерархии узлов DOM:
** Документы HTML можно сказать, что являются коллекцией узлов. Узлы DOM включают: ** 1. Узлы элементов: на приведенном выше рисунке, <html>, <body>, <p> и т. Д. - все элементы, то есть теги. 2. Текстовый узел: Содержание отображается для пользователей, таких как JavaScript, DOM, CSS и другой текст в <li> ... </li>. 3. Узел атрибута: атрибуты элемента, такие как атрибут ссылки href = "http://www.baidu.com" из тега <a>.
Атрибут атрибута узла nodemaname возвращает строку, содержимое которого является именем узла Nodetype возвращает целое число. Это значение представляет тип данного узла Nodevalue возвращает текущее значение данного узла.
Триверс -узловой дерево , дерево, дерево, дети, возвращают массив, этот массив состоит из детей от данного элемента первого количества возврата первого дочернего узела Последний узел возвращает последний узел узел.
Операция DOM Operation DOM CreateElement (элемент) Создание нового элемента Node -CreatextNode () Создать новый текстовый узел, содержащий заданный текстовый AppenDChild (). Добавить новый детский раздел после последнего списка узлов указанного узла INSERTBEFORE () Вставьте заданный узел в переднюю часть заданного детского узла данного элемента removeChild () Удалить родительский node node node node (). Заменная node node (). с другим узлом
DOM представляет документы, создавая дерево, описывая методы и интерфейсы для обработки веб -контента, так что разработчики имеют беспрецедентный контроль над содержанием и структурой документов. Используя API DOM, узлы могут быть легко удалены, добавлены и замены.
1. Доступ к узлам
`var ohtml = document.documentelement;` // Возвращает корневой узел документа, который существует в документах XML и HTML. OHTML содержит объект htmleLement `document.body` -представление <html/> // является специальным расширением для страниц HTML, обеспечивая прямой доступ к тегам <body> </span> <pan> </span> </span>` document.getelementbyid («id») `// intring in in in in in in in in in in in in in in in in in in in in in in in in in in in in in in in in in in ie Также верните элемент с именем в качестве указанного идентификатора `document.getElementbyname (" name ")` с именем в качестве указанного идентификатора // Получить все элементы с атрибутами имени, равным указанному значению. Однако на IE6 и Opera7.5 он также вернет элементы с идентификатором в качестве данного имени и только проверить <input/> и <img/> `var x = document.getelementsbytagname (" p ");` // Использовать указанное имя тега, чтобы вернуть все элементы списки Nodelist, с номером индекса, начинающимся с 0. Параметр является параметром.2. Характеристики и методы узлов узлов
FirstChild // Узел, укажите на первый узел в списке Laildnodes LastChild // Узел, укажите на последний узел в списке ParentNodes Listnodes /// Узел, указывайте на родительский узел владелец. Childnodes Перечислите Parentnodes, списки Childnodes // Узел, укажите на родительский узел ChildNodes // NodeList, список всех детей, ранее занимающихся делом /узел, укажите на предыдущий узел братьев и сестры: если этот узел является первым узлом, то значение NULL `nextsibling` //, указывая на следующий узел: «Последнее значение», тогда это NODE, это новое значение, тогда это NODE - это значение. `haschildnodes ()` // boolean, когда Childnodes содержит один или несколько узлов, возвращается истинное значение.
3. СОБЫТИЯ
Дом имеет две модели событий одновременно: событие пузырькового события и события захвата события: события запускаются в порядке от наиболее специфической цели события до наименее конкретной цели события <body onclick = "handleclick ()"> <div onclick = "handleclick ()"> Click Me </div> </body> orgering - это: div, html (ie 6.0 и yocmitvill. (Мозилла 1.0). Захватываемое событие: в противоположном процессе для пузырькового события события начинаются с наиболее неточного объекта, а затем до наиболее точного порядка запуска приведенного выше примера: Document, Div. Самым уникальным свойством модели события DOM является то, что текстовые узлы также запускают события (не в IE).
4. Функция обработки событий/функция прослушивания
** Функция обработчика событий/функция прослушивания ** в JavaScript: var Odiv = document.getElementById ("div1"); ODIV.ONCLICK = function () {// onClick можно использовать только в нижнем регистре, по умолчанию - оповещение о событии пузыря («Нажмите!»); } В html: <div onclick = "javaScript: alert (" clicked! ")"> </Div> // onclick является произвольным в случаеIE Handlers AtteneVent () и Detachevent ()
В IE, каждый элемент и окно имеют два метода: attachEvent()和detachEvent() , которые принимают два идентичных параметра, имя обработчика событий и функцию обработчика событий, такие как:
[object] .attachevent ("name_of_event_handler", "function_to_attach") [Object] .detachevent ("name_of_event_handler", "function_to_remove") var fnclick = function () {alert ("clicked!"); } odiv.attachevent ("onclick", fnclick); // Добавить функцию обработки событий odiv.attachevent ("onclick", fnclickanother); // Вы можете добавить несколько функций обработки событий odiv.detachevent ("onclick", fnclick); // Удалить функцию обработки событий odiv.detachevent ("onclick", fnclick); // Удалить функцию обработки событий odiv.detachevent ("onclick", fnclick); // Удалить функцию обработки событий odiv.attachevent ("onclick", fnclick); // Удалить функцию обработки событий odiv.attachevent ("onclick", fnclick); // Удалить функцию обработки событий odiv.detachevent ("onclick", fnclick); // Удалить функцию обработки событий odiv.attachevent ("onclick", fnclick); // Удалить функцию обработки событий odiv.attachevent ("onclick", fnclick); // Удалить функцию обработки событий С помощью метода attachEvent() обработчик событий работает в глобальной области, так что это равняется окну.
Поперечный обработчик событий
addHandler()和removeHandler() Метод addHandler() принадлежит объекту с именем eventuntil (). Оба метода принимают три идентичных параметров, элемент, который будет управлять, имя события и функция обработчика событий.
Тип события
** Тип события ** Событие мыши: нажмите, DBClick, Mousedown, MouseUp, MouseOver, Mouseout, MouseMove Клавиатура Событие: Keydown, KeyPress, Keyup HTML Событие: загрузка, разгрузка, прерывание, ошибка, выберите, изменение, отправка, сбросьте, сбросьте, прокрутите, фокусируется, пятно, пропор
Обработчик событий
Программа, которая выполняет код JavaScript, отвечает на события, когда происходят события. В ответ на конкретное событие
Выполненный код называется процессором событий.
Синтаксис для использования обработчиков событий в тегах HTML:
<HTML标签事件处理器="JavaScript代码''>Обработчик событий
Событие - это определенное действие, выполняемое пользователем или самим браузером. Например click,mouseup,keydown,mouseover и т. Д. - все имена событий. Функция, которая отвечает на определенное событие, называется обработчиком событий (слушатель событий). Обработчик событий начинается с on , так что обработчик событий click - это onclick
Обработчик событий DOM уровня 0
Обработчик событий DOM уровня 0: назначить функцию атрибутам обработчика события
<input type = "button" value = "кнопка 2" id = "ben2"/> var btn2 = document.getElementById ('btn2'); Получить Btn2 кнопку объекта Btn2.onclick // Добавить атрибут OnClick в BTN2, а атрибут запускает обработчик событий btn2.onclick = function () {} // Добавить анонимную функцию btn2.onclick = null // Удалить атрибут OnClickКак остановить пузырьки?
Есть следующие способы предотвращения пузырьков:
e.cancelBubble=true;e.stopPropagation();return false;Innertext, innerhtml, Outerhtml, Overtext
InnerText, Innerhtml, Overhtml, Overtext Innertext: указывает текст между начальным тегом и конечным тегом innerhtml: html -код, который представляет все элементы и текст элемента, такие как: <div> <b> world </b> innertext innertext innerded, innerhtml - это Hellopempt, что The World The World The World The World. И проблема возвращает тот же содержимое, что и Innertext Outterhtml: отличие от первого заключается в том, что весь целевой узел заменяется, и возвращается полный HTML -код элемента, включая сам элемент
Обработчик событий DOM уровня 2
События DOM уровня 2 определяют два метода для определения и удаления работы обработчика событий. addEventListener() и removeEventListener()
addEventListener () и removeEventListener ()
В DOM AddEventListener () и RemoveEventListener () используются для распределения и удаления обработчиков событий. В отличие от IE, эти методы требуют три параметра: имя события, независимо от того, используется ли функция, которая должна быть выделена и функция обработки используется для стадии пузырька (FALSE) или стадии захвата (TRUE). По умолчанию является пузырьковая стадия false [object] .addeventListener ("name_of_event", fnhander, bcapture) [Object] .RemoveEventListener ("name_of_event", fnhander, bcapture) var fnclick = function () {alert ("Щелкнул!"); } odiv.addeventListener ("onclick", fnclick, false); // Добавить функцию обработки событий odiv.addeventlistener ("onclick", fnclickanother, false); // Как и IE, несколько функций обработки событий могут быть добавлены ODIV.RemoveEventListener («OnClick», Fnclick, false); // Удалить функцию обработки событий Если вы используете addEventListener (), чтобы добавить функцию обработки событий на стадию захвата, необходимо указать в removeEventListener () в качестве стадии захвата, чтобы правильно удалить эту функцию обработки событий odiv.onclick = fnclick; Odiv.onclick = fnclick; // Использование прямого назначения, последующие функции обработки событий будут перезаписать предыдущую функцию обработки odiv.onclick = fnclick; Odiv.AddeventListener ("onclick", fnclickanother, false); // звонок будет вызван в порядке и не будет перезаписанКартина, чтобы понять outhtml, innertext, innerhtml:
Dom Basic Operation Mind Map
Для получения более подробной степени XML DOM - для свойств и методов элементов объектов, пожалуйста, посетите w3cshool
Часть
Ядро BOM - это window , а window объект играет двойную роль. Это как интерфейс, чтобы получить доступ к окну браузера через JS и Global объект. Это означает, что любой объект, переменная и функция, определенная на веб -странице, принимает окно в качестве своего global объекта.
window.close (); // ЗАКРЫТЬ окно окна. // вспять системное поле сообщения с кнопками OK, отображая указанное текстовое окно. Confirm («Вы уверены?»); // вспять диалоговое окно запроса с кнопками OK и отмены, возвращая логическое значение value.prompt («Как ваше имя?», «По умолчанию»); // Позволяет пользователю ввести информацию и принять два параметра, а именно текст, который будет отображаться для пользователя, и значение по умолчанию в текстовом поле верните значение в текстовом поле в качестве значения функции. // Вы можете временно изменить текст панели панели состояния. // Установить указанный код после указанного числа миллисекундов, принять 2 параметры, выполнять код, и количество миллисекундов, которые будут ждать window.cleartimeout ("id"); // Отмените паузу, которая не была выполнена, и передать идентификатор паузы в окно. // Повторите указанный код бесконечно каждый указанный период времени, параметры совпадают с Window.clearInterval ("id"); // Отменить интервал времени и передать идентификатор интервала в window.history.go (-1); // Доступ к истории окна браузера. Отрицательное число - это обратное, а положительное число - это вперед window.history.back (); // так же, как и выше Window.history.forward (); // То же, что и выше Window.history.length // Вы можете просмотреть количество страниц в историидокумент объект
Объект документа: на самом деле это свойство объекта Window. Document == windo.document верно, это единственный объект, который принадлежит как Bom, так и DOM Document.lastmodified // Получить строку, представляющую Document.ReerRer // для отслеживания, где пользовательские ссылки на документ .title // На странице Document.forms [0] или document.forms ["formName"] // Доступ к всем формам Document.Images [0] или Document.Images ["imgname"] // Доступ к всем изображениям document.links [0] или document.links ["linkname"] // Доступ к всем ссылкам Document.Applets [0] или Document.Applets ["appletName"] / /applet applet applets. document.embeds ["upedName"] // Доступ к всем встроенным объектам Document.Write (); или document.writeln (); // вставить струны туда, где они называются
объект местоположения
Объект местоположения: представляет URL -адрес окна загрузки, и на него также можно ссылаться на windo.location location.href // Полный URL на данный момент загруженной страницы, такой как http://www.somewhere.com/pictures/index.htm location.portocol // Протокол, используемый в URL, то, что является частью, то, как есть, как есть, так же, как HT, так же, как HT, так, как HT, так же, как HT, так, как HT, так же, как HT, так, как HT, так, как HT, так же, как на Serv.HOST. например, www.wrox.com location.hostname // обычно равняется хосту, а иногда и предыдущий www location.port // порт запрошенного URL -адреса. По умолчанию, большинство URL -адресов не имеют информации о порте, например, 8080 location.pathname // Часть после имени хоста в URL, например, /pictures/index.htm location.search // Часть после отметки вопроса в URL, который выполняет url -запрос, также называется Query String, такой как? Param = location.hash // if wrongor -asmor #atemor #atemor -asmor. location.assign ("http: www.baidu.com"); // то же место. Href, новый адрес будет добавлен в историю Stack Stack Browser. // Тот же назначение (), но новый адрес не будет добавлен в стек истории браузера и местоположение. // Перезагрузите текущую страницу, если она неверно, она будет перегружена из кэша браузера, и если она верно, она будет перегружена со стороны сервера, а по умолчанию неверноНавигатор объект
`Объект Navigator ': содержит много информации о веб -браузерах, которая очень полезна для обнаружения браузеров и операционных систем. На него также можно ссылаться window.navigator `navigator.appcodename` // Строка кода браузера представляет Navigator.appname // Строка официального имени браузера представляет Navigator.appversion // Строка версии браузера представляет собой навигатор. Включено, вернуть True, в противном случае возвращает false navigator.platform // строка компьютерной платформы, где находится браузер, представляет Navigator.plugins // Массив плагина, установленные в браузеровом навигаторе.
Экран объект
Объект экрана: используется для получения некоторой информации о экране пользователя. Вы также можете обратиться к нему с помощью window.screen.width/Height // Ширина и высота экрана, в пикселях, экране. AvailWidth/ViaseHeight // Ширина и высота экрана, который может использовать окно, в Pixels, Screen.colordepth // Количество битов цвета, используемых пользователем и большинством систем, используются 32-битные окно. window.resizeto (screen.availwidth, screen.availheight); // заполнить экран пользователя
метод оконного объекта
Схематическая диаграмма структурной взаимосвязи между BOM и DOM
Карта разума Windows объекта