Что такое Дом? DOM - это набор интерфейсов API на основе программирования браузеров (в этом уроке это можно сказать, что это программирование DHTML). W3C имеет некоторые тонкие различия в каждом браузере. Среди них браузер Mozilla наиболее похож на стандарт. Простой JavaScript должен объединить DOM для выполнения программирования DHTML и может создавать красивые эффекты и применяться к Интернету. Это почти то же самое, что и другие языки, так же, как C/C ++ требует поддержки библиотеки. В противном случае это просто грамматическое исследование. Мы больше всего обеспокоены тем, что DOM соединяет веб -страницы со сценариями и другими языками программирования. DOM принадлежит к браузеру, а не основному контенту, указанному в спецификации языка JavaScript.
Найти элементы
1. Поиск напрямую
| Название метода | описывать |
| getElementbyId (id) (документ) | Получить элементы в документе с указанным уникальным значением атрибута идентификатора |
| getElementsbytagname_r (имя) | Возвращает массив детских элементов с указанным Tagname в текущем элементе |
| Document.GetElementsByClassName | Получить коллекцию тегов на основе атрибутов |
| getattribute (имя) | Возвращает значение атрибута элемента, атрибут указан по имени |
1> document.getElementById ('id')
<body> <div id = "zhang"> не красиво </div> <script type = "text/javascript"> var i = document.getElementbyid ('Zhang'); // Найти указанный идентификатор i.innertext = 'очень красивый'; // InnerText изменить указанную строку </script> </body>Эффект отображения, когда мы откроем IE, он будет изменен, чтобы быть очень красивым.
2> getElementsbytagname_r (имя)
<body> <div name = "zhang"> не красиво </div> <script type = "text/javascript"> var i = document.getelementbytagnmae ('zhang'); // Найти указанное имя имени I.InnerText = 'очень красиво'; // InnerText изменить указанную строку </script> </body>Тот же эффект отображения
3> document.getElementsbyclassname
<body> <div> не красиво </div> <script type = "text/javascript"> var i = document.getElementClassName ('Zhang'); // Найти указанное имя класса i.innerText = 'очень красиво'; // InnerText изменить указанную строку </script> </body>2. Косвенное поиск
| Имя атрибута | описывать |
| детские | Возвращает массив всех дочерних элементов текущего элемента |
| детские | Возвращает все детские элементы текущего элемента |
| Firstchild | Возвращает первый нижний дочерний элемент текущего элемента |
| LastChild | Возвращает последний дочерний элемент текущего элемента |
| обезвреживание | Возвращает элемент сразу же после текущего элемента |
| Предыдущий | Возвращает элемент, непосредственно предшествующий текущему элементу |
| ParentElement | Возвращает свой родительский элемент метки узла |
| дети | Вернуть все свои субтитры |
| FirstElementchild | Возвращает первый элемент подзаголка |
| LastElementChild | Возвращает последний элемент подтаги |
| NextElementsibling | Вернуться下一个兄弟标签元素 |
| Предыдущий размер | Вернуться к предыдущему элементу тега брата |
С W3C DOM вы можете написать простые сценарии кросс-браузера, используя в полной мере преимущество мощности и гибкости XML для использования XML в качестве среды связи между браузером и сервером.
Элементы операции
1. Свойства и методы W3C DOM, используемые для динамического создания контента
| Свойства/методы | описывать |
| document.createelement_x (Tagname) | Метод CreateElement_x в объекте документа может создавать элементы, указанные Tagname. Если строковый Div используется в качестве параметра метода, будет сгенерирован элемент div |
| document.createtextnode (текст) | Метод CreateTextNode объекта документа создаст узел, содержащий статический текст. |
| <element> .appendChild (ChildNode) | Метод AppendChild добавляет указанный узел в список детских узлов текущего элемента (в качестве нового детского узла). |
| <element> .setattribute (имя, значение) | Эти методы соответственно получают и устанавливают значение атрибута имени в элементе |
| <element> .insertbefore (newnode, targetNode) | Вставьте Nodedode Node в качестве дочернего узла текущего элемента перед элементом TargetNode |
| <element> .RemoVeatTribute (имя) | Этот метод удаляет имя атрибута из элемента |
| <element> .RemoveChild (ChildNode) | Этот метод удаляет детские элементы по детью из элемента |
| <element> .replacechild (newnode, OldNode) | Этот метод заменяет узел OldNode на Node NewNode |
| <element> .haschildnodes () | Этот метод возвращает логическое значение, указывающее, есть ли у элемента дочерние элементы |
2. Тэг Содержание
InnerText Получите текстовое содержимое тега innerhtml Получить значение контента HTML Получить значение, то есть значение представленной формы формы
То есть следующее:
<div> 1111 </div> <div> 2222 </div> <input type = "text" value = "Zhang Yanlin"> <Script> document.getElementsByClassName ("Zhang"). InnerText = 123; // Получить тег с именем класса Zhang и измените контент на 123 Document.GetElementsByClassName ("yan"). Innerhtml = 456; // Получить тег с именем класса Yan и измените контент на 456 Document.GetElementsByClassName ("lin"). Value = "Zhang Yanlin - это красивый"; // Получить тег с именем класса Lin и изменить контент на Чжан Янлин.3. Атрибуты
Attributes // Получить все атрибуты тега SetatTribute (key, значение) // Установить атрибут тега getAttribute (key) // Получить указанный атрибут тега
Благодаря пользовательским свойствам вы можете сделать случай выбора всех, невыполнения и отказа от выбора. Код заключается в следующем:
<! Doctype html> <html lang = "en"> <Head> <meta charset = "utf-8"> <Title> title </title> </head> <body> <div> <input vintult value = "value =" onclick = "checkall ();"> <input type = "value =" cancel "onclick =") value="undelect" onclick="recvall();"></div><div id = "i1"> <ul> <li><input type="checkbox" value="1">Basketball</li> <li><input type="checkbox" value="2">Football</li> <li><input type="checkbox" value="3">Volleyball</li> </ul></div><script> function Checkall () {var b = document.getElementsbyclassname ("c1"); for (var i = 0; i <b.length; i ++) {var check = b [i]; check.checked = true}} function cancleall () {var b = document.getelementsbyclassname ("c1"); for (var i = 0; i <var i = 0; i <b.length; i ++) {var check = b [i]; check.checked = false}} function recvall () {var b = document.getElementsbyclassname ("c1"); for (var i = 0; i <b.length; i ++) {var check = b [i]; if (check.cecked) {check.checked = false} else {check.checked = true}}} </script> </body> </html> выберите All, обратный, отменить случаиПримечание: Onclick - это событие Click, которое будет упомянуто позже
4. Классная операция
ClassName // Получить все имена классов classlist.remove (cls) // Удалить указанный класс classlist.add (cls) // Добавить класс
Эта вещь очень полезна. Например, в JD.com, когда наша мышь помещается на все продукты, многие продукты появляются ниже. Продукты скрыты и появляются только после того, как инициирующее событие - это определение скрытого атрибута CSS. После того, как мышь вставлена, спрятанный атрибут CSS удаляется; Мышь удаляется, а скрытый атрибут добавляется.
<! Doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> скрыть </title> <style> .hide {display: none; } </style> </head> <body> <span onmouseover = "mouover ();"> избавьтесь от этого, но он исчезает, не ставя его </span> <div id = "zhangyanlin" style = "font-size: 60px"> zhang yanl document.getElementById ("Zhangyanlin"). classlist.remove ("hide"); } function mouout () {document.getElementById ("Zhangyanlin"). classlist.add ("hide"); } </script> </body> </html> давайте разбудим мозг с помощью случая5. Операция тега
Мы можем создавать теги через DOM и добавить их в указанное место. Вот два метода для эксплуатации тегов
// Метод один var zhang = "<input type = 'text' />";xxx.insertadjacenthtml("beforeend", zhang);xxx.insertadjacentelement('afterbegin', document.createelement(a ') // Примечание: первый параметр может быть только« после того, как », после того, как« после того »,« после того, как ». = document.createElement ('div') xxx.appendchild (Tag) // Добавить элемент div xxx.insertbefore (Tag, xxx [1]) // Вставка в указанную позицию, вы можете использовать индекс <! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> title </title> </head> <body> <div> <div> <input type = "text"/> <input type = "value =" add "onclick =" AddElement (this); "/>; /> </div> <div style = "position: velivary;"> <ul id = "commentlist"> <li> alex </li> <li> eric </li> </ul> </div> </div> <script> addElment (ths) {// Получить входное значение var = ths.previouselementsibling.valement; ths.previouselementsibling.value = ""; var commentlist = document.getElementbyId ('commentList'); // первая форма, строка метод // var str = "<li>" + val + "</li>"; // 'до begin', 'afterbegin', 'перед', ', «послеэнд» // перед внутренним последним // перед внешним верхним // afterbegon Внутреннее закрытие // после окончания внешней стенки //commentlist.insertadjacenthtml("beforend",str); // второй метод - метод элемента var Tag = document.createElement ('li'); tag.innertext = val; var temp = document.createElement ('a'); temp.innertext = 'baidu'; temp.href = "http://etiantian.org"; tag.appendchild (temp); // commentlist.appendchild (Tag); CommentList.InsertBefore (Tag, CommentList.children [1]); } </script> </body> </html> добавить6. Операция в стиле
<body> <div id = i1> Zhang Yanlin - это красивый </div> <script> var obj = document.getElementById ('i1'); obj.style.fontsize = "32px"; obj.style.backgroundcolor = "red"; </script> </body>Эффекты следующие:
Давайте возьмем дело. Просто смотреть на очки знаний скучно. Мы часто видим более темный шрифт в поле ввода, который побуждает вас что -то ввести. Когда вы нажимаете, он исчезает. Это волшебная операция. Это достигается через DOM. Просто прочитайте код, не говоря о том, как много ерунды.
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> title </title> <style> .bb {color: #9a9a9a; } .aa {color: black; } </style> </head> <body> <input value = "Пожалуйста, введите контент" onfocus = "inpatu (this);" onblur = "onbtu (this);"> <script> function inpatu (ths) {ths.classname = "aa"; var text = ths.value; if (text == "Пожалуйста, введите контент") {ths.value = ""; }} function onbtu (ths) {var text = ths.value; if (text == "Пожалуйста, введите контент" || text.trim (). Length == 0) {ths.classname = "bb"; ths.value = "Пожалуйста, введите контент"; }} </script> </body> </html>7. Операция положения
Общая высота документа Document.documentelement.Offsetheight Текущий документ занимает Document Document Document.documentelement.ClientHeight Self-Shieth Tag.OffSetheight Distect до превосходного тега высоты позиционирования.
Вы думали, что в нижнем правом углу веб -страницы есть возврат к вершине, а затем вернется к вершине в малейшем месте? Да, это для расчета этих высот; И когда вы стягиваете мышь, соответствующий стиль строки меню слева изменится.
<! Doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> </title> </head> <style> body {margin: 0px; } img {border: 0; } ul {padding: 0; поля: 0; Список стиля: нет; } h1 {padding: 0; поля: 0; } .clearfix: после {content: "."; дисплей: блок; высота: 0; ясно: оба; видимость: скрыта; } .wrap {width: 980px; Поле: 0 Авто; } .pg-header {founal-color: #303a40; -Webkit-box-shadow: 0 2px 5px rgba (0,0,0, .2); -Мозо-бокс-тень: 0 2px 5px rgba (0,0,0, .2); Box-Shadow: 0 2px 5px rgba (0,0,0, .2); } .pg-header .logo {float: left; Подкладка: 5px 10px 5px 0px; } .pg-header .logo img {vertical-align: middle; Ширина: 110px; Высота: 40px; } .pg-header .nav {line-hight: 50px; } .pg-header .nav ul li {float: left; } .pg-header .nav ul li a {display: block; Цвет: #CCC; Заполнение: 0 20px; Текстовое декорация: нет; размер шрифта: 14px; } .pg-header .nav ul li a: hover {color: #fff; фоновый цвет: #425A66; } .pg-body {} .pg-body .catalog {position: Absolute; Верх: 60px; Ширина: 200px; фоновый цвет: #fafafa; Внизу: 0px; } .pg-body .catalog.fixed {position: fixed; Верх: 10px; } .pg-body .catalog .catalog-item.active {color: #fff; фоновый цвет: #425A66; } .pg-body .content {position: Absolute; Верх: 60px; Ширина: 700px; Мяботая маржа: 210px; фоновый цвет: #fafafa; переполнение: авто; } .pg-body .content .section {height: 500px; Граница: 1px твердый красный; } </style> <body onscroll = "scrollevent ();"> <div> <div> <div> <a href = "#"> <img src = "http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn"> </i-div> <i Div> <i Div> href = "#"> home </a> </li> <li> <a href = "#"> Функция 1 </a> </li> <li> <a href = "#"> Функция 2 </a> </li> </ul> </div> </div> </div> </div> <div> <div> <div> <div ud = "catalog" 1 </a> </div> <div auto-to = "function2"> <a> изображение 2 </a> </div> <div auto-to = "function3"> <a> изображение 3 </a> </div> </div> <div id = "Содержание"> <Div Menu = "function1"> <h1> Глава 1 </h1> </div> <Div Menu = "function1> <h1> </H1> </H1> </div> <Div> <H1> </H1> </H1> </div> <Div> <H1> </H1> </H1> </div> <Div =" function1 " </div> <div menu = "function3"> <h1> Глава 3 </h1> </div> </div> </div> </script> <script> function scollevent () {var BodyScrolltop = document.body.scrolltop; if (bodyscrolltop> 50) {document.getElementsbyclassname ('catalog') [0] .classlist.add ('fixed'); } else {document.getElementsbyclassname ('catalog') [0] .classlist.remove ('fixed'); } var content = document.getElementById ('content'); var sections = content.children; for (var i = 0; i <sections.length; i ++) {var current_section = sections [i]; // Абсолютная высота текущей метки с верхнего var scofftop = current_section.offsettop + 60; // текущая метка сверху, относительная высота var offtop = scofftop - bodyscrolltop; // текущая высота метки var height = current_section.scrollheight; if (offtop <0 && -offtop <eight) {// Текущая метка добавляет активное // другое удаление активного var menus = document.getelementbyid ('catalog'). Дети; var current_menu = меню [i]; current_menu.classlist.add ('active'); for (var j = 0; j <menus.length; j ++) {if (menus [j] == current_menu) {} else {menus [j] .classlist.remove ('active'); } } перерыв; }}}} </script> </body> </html> меню прокрутки <! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> title </title> <style> .pg-top {position: fixed; фоновый цвет: #0095bb; Высота: 40px; Ширина: 40px; Внизу: 50px; Справа: 40px; Цвет: Whitesmoke; } .hide {display: none; } </style> </head> <body onscroll = "func ();"> <div style = "height: 3000px;" id = "i1"> <h1> Zhang Yanlin </h1> </div> <div id = "i2"> <a href = "javaScript: void (0);" onclick = "gotop ();"> вернуться в Top </a> </div> <script> function func () {var scrolltop = document.body.scrolltop; var i1 = document.getElementbyId ("i2"); if (scrolltop> 20) {i1.classlist.remove ("hide")} else {i1.classlist.add ("hide")}} function gotop () {document.body.scrolltop = 0; } </script> </body> </html> назад к вершине8. Другие операции
Console.log вывод вывода оповещения всплывающего окна Подтверждение подтверждения подтверждения блока URL / URL и Location.href get urllocation.href = "url" redirect location.reload () reload // timer setInterval несколько таймер ClearInterval Clear Maily Timer Settimeout One Timer Cleartimeout Определенный таймер Timer
Позвольте мне рассказать вам о таймере. Таймер более полезен. Например, когда мы удалим электронное письмо, мы найдем всплывающее окно. Электронное письмо было удалено. Это единственный таймер. Несколько таймера можно использовать, когда у вас есть конкретные потребности.
// Многократный случай таймеров <input type = "button" value = "interval" onclick = "interval ();"> <input type = "button" value = "stopInterval" onClick = "stopInterval ();"> <Script> Function Interval () {s1 = setInterval (function () {console.log (123)/////continous вывод 123}}, 500); s1 = setInterval (function () {console.log (123)}, 500); } function stopInterval () {clearInterval (s1); // очистить один несколько таймер} </script>Одиночный таймер
<div> <input type = "button" value = "delete" onclick = "delete ();"> <input type = "value =" keal текущее состояние "onclick =" undelete (); "> <div id =" status "> </div> </div> <script> function delete () {document.getElementById (" vatureteledtet ineRtext = "delTextelet"; t1 = settimeout (clearStatus, 1500); } function clearStatus () {document.getElementById ("status"). innerText = ""; } function undelete () {cleartimeout (t1); // после очистки таймера он будет продолжать показывать} </script>событие
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> title </title> </head> <body> // Нормальное событие <button Id = "btn1" onclick = "func ();"> button> <cropipt> var btn = document.geteLementByid (); function func () {alert ("Обычная обработка времени")} </script> // Уровень 0 Событие обработки <button id = "btn2"> кнопка обработки уровня 0 </button> <script> var btn = document.getElementbyid ("btn2"); btn.onclick = function () {alert ("0-уровневая кнопка обработки")}; // btn.onclick = null; // Очистить обработку событий, многократные события будут перезаписаны, оставляя только последнее событие </script> // streation 2 событие обработки <button id = "btn3"> кнопка обработки уровня 2 </button> <script> var btn = document.getElementByID ("btn3"). AddEventListener ("click", function () ("второе LE-обработка"); var btn1 = document.getElementById ("btn3"). addEventListener ("click", function () {alert ("Событие вторичной обработки 2")}); // Не перезаписываться </script> <button id = "btn4"> Полная совместимая кнопка </button> <script> var btn = document.getElementById ("btn4"); if (btn.addeventlistener) {btn.addeventListener ("click", demo); } else if (btn.attachevent) {btn.attachevent ("onclick", demo); } else {btn.onclick = demo; } функция demo () {alert ("обработка интегрированной совместимости")} </script> </body> </html>Список событий:
| свойство | Когда происходит это событие (когда запускается) |
| Onabort | Загрузка изображения прерывается |
| Онблур | Элемент теряет фокус |
| Онхандж | Содержание области было изменено |
| Onclick | Руководство события вызвано, когда пользователь нажимает на объект (выполняя пример приведенного выше пример кода при нажатии на тег ввода) |
| Ondblclick | Руководство событий вызвано, когда пользователь дважды щелкает объектом |
| Onerror | Произошла ошибка при загрузке документа или изображения |
| Onfocus | Элементы получают фокус |
| OnKeyDown | Клавиша клавиатуры нажимается |
| OnKeyPress | Клавиша клавиатуры нажимается и выпущена |
| OnKeyUp | Выпущена клавиатура |
| нагрузка | Страница или изображение загружается |
| Onmousedown | Кнопка мыши нажата |
| OnmouseMove | После того, как мышь переезжает |
| Onmouseout | Мышь удаляется из элемента |
| Onmouseover | Переместить мышь на элемент |
| Onmouseup | Кнопка мыши выпускается |
| Onreset | Кнопка сброса нажимается |
| onresize | Окно или кадр изменяются |
| на выборе | Текст выбран |
| onsubmit | Кнопка подтверждения нажимается |
| нагрузка | Страница выхода пользователя |
Примечание. Тег может привязать несколько событий, этот тег в настоящее время работает, а событие инкапсулирует содержание текущего события.
Давайте проведем несколько случаев, иначе я чувствую, что не видел его после прочтения
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> title </title> <style> ul {list-style: none; Заполнение: 0; поля: 0; } ul li {float: left; фоновый цвет: #038cae; Цвет: белый; Заполнение: 15px 20px; } .clearfix: после {display: block; содержание: '.'; высота: 0; видимость: скрыта; ясно: оба; } .hide {display: none; } .tab-menu {border: 1px solid #dddddd; } .tab-menu .title {фоновое цветное: #dddddd; } .tab-menu .title .active {foangy-color: белый; Цвет: черный; Пограничная топ: 2px сплошной красный; } .tab-menu .content {border: 1px solid #dddddd; Мин-высот: 150px; } </style> </head> <body> <div> <div> <div> <ul> <li target = "h1" onclick = "show (this);"> ценовые тенденции </li> <li target = "h2" onclick = "show (this);"> Рыночное распределение </li> <li target = "h3" onclick = "show (this)"> </li> <li target = "h3" onclick = "? "Содержание"> <div con = "h1"> content1 </div> <div con = "h2"> content2 </div> <div con = "h3"> content3 </div> </div> </div> </div> </div> </div> </div> </div> <script> function show (ths) {var = ths.getattrubule ('target'); ths.classname = 'active'; var brother = ths.parentelement.children; for (var i = 0; i <brother.length; i ++) {if (ths == Brother [i]) {} else {brother [i] .RemoVeatTribute ("class"); }} var content = document.getElementById ("content"). Дети; for (var j = 0; j <content.length; j ++) {var current_content = content [j]; var con = current_content.getattribute ("con"); if (con == target) {current_content.classlist.remove ("hide"); } else {current_content.classname = "hide"; }}}} </script> </body> </html> meg Menu Case <! Doctype html> <html lang = "en"> <Head> <meta charset = "utf-8"> <title> title </title> </head> <body> <input type = "onclick =" func (); " value = "click me"/> <div id = "i1"> <div> 123 </div> <div Alex = "sb"> 123 </div> <div> 123 </div> <div Alex = "sb"> 123 </div> <div> 123 </div> <!-<input = "text">-> <!-<! Func () {// i1 // i1 все дети, зацикливайте каждого ребенка, судья, если Alex = 'sb' var i1 = document.getElementById ('i1'); var divs = i1.children; for (var i = 0; i <divs.length; i ++) {var current_div = divs [i]; var result = current_div.getattribute ('alex'); // console.log (результат); if (result == "sb") {current_div.innertext = "456"; }}} </script> </body> </html> изменить значения элементов через пользовательские атрибутыПриведенная выше статья имеет глубокое понимание объектов DOM JavaScript. Эта статья - весь контент, которым я делюсь с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.