Тип узла
Nodetype
Вот несколько важных значений узла:
1: элемент элемента
2: атри
3: текст текста
8: Комментарии
9: документ документ
NodeName, Nodevalue
Отношения узла
Childnodes: у каждого узла есть свойство Childnodes, которое имеет объект Nodelist
FirstChild: эквивалент ChildNodes [0]
LastChild: эквивалент ChildNodes.length-1
В то же время доступ к другим узлам в том же списке можно получить, используя свойства предыдущих и обязательств каждого узла в списке.
Операционный узел
appendchild ()
Метод AppendChild () используется для добавления узла в конец списка детей. После добавления узла указатели отношения нового узла, родительский узел и последний дочерний узел детей будут обновлены соответствующим образом.
INSERTBEFOR ()
Метод INSERTBEFOR () принимает два параметра: узел, который должен быть вставлен, и узел, на который подлежат ссылке.
// После вставки он становится последним детьми -узлом returnnode = somenode.insertbefore (newnode, null); // после вставки, он становится первым узел returnnode = somenode.insertbefore (newnode, somenode.firstchild); // insert перед последним детским node nodenode = somenode.insertbefore (newnode);
Replacechild ()
Replacechild () принимает два параметра, узел, который должен быть вставлен, и узел, который должен быть заменен
var returnNode = somenode.replacechild (newnode, somenode.firstchild);
removeChild ()
Удалите и не заменяйте узлы.
var primefirstchild = somenode.removechild (somenode.firstchild);
клоненод ()
пункт 1
пункт 2
пункт 3
var deeplist = mylist.clonenode (true); console.log (deeplist.length); // 3var shaleowlist = mylist.cloneNode (false); console.log (wallowist.childnodes.length); // 0
Тип документа
Узел документа имеет следующие характеристики:
Дети документа
var html = document.documentelement; // Получить ссылку на <html> console.log (html === document.childnodes [0]); // trueconsole.log (html === document.firstchild); // истинный
Документ Информация
// Получить заголовок документа var OriginalTite = document.title; // Установить документ документа Document.title = "Заголовок новой страницы"; // Получить полный urlvar url = document.url; // Получить доменное имя var domain = document.domain; // Получить urlvar referrer = document.referrer; // предположить, что страница происходит от p2p.wrox.com domain document.domain = "Wrox.com"; // успешный документ.domain = "nczonline.net"; // Неуспешный
Вызовать document.getelementbyid ("myelement"); Результат вернет элемент <pint>, как показано ниже;
Лучший способ - не сделать атрибут имени поля формы таким же, как идентификатор других элементов.
<input type = "text" name = "myelement" value = "текстовое поле"> <div id = "myelement"> div </div>
Специальная коллекция
Написание документов
<html> <Head> <title> document.write () Пример 3 </title> </head> <body> <script type = "text/javascript"> document.write ("<script type =/" text/javascript/"src =/" file.js/">") + "<// script>"); </script> </body> </html>Строки <// script> не будут рассматриваться как закрытые теги для тегов внешних сценариев, поэтому на странице не будет ненужного контента.
Тип элемента
Узел элемента имеет следующие характеристики:
Чтобы получить доступ к имени тега элемента, вы можете использовать атрибут NodeName или атрибут Tagname;
<div id = "mydiv"> </div> var div = document.getelementbyid ("mydiv"); console.log (div.tagname); // divconsole.log (div.nodeName); // divif (element.tagname == "div") {// Вы не можете сравнивать так, легко допускать ошибки} if (element.tagname.tolowercase == "div") {// Это лучшее (для любого документа)}}}}}}}}}}}}}}}}}}}}}}}}}Получить функции
Существует три основных метода DOM для рабочих характеристик, а именно Getattribute (), setattribute () и remoeAttribute ();
Обратите внимание, что имя атрибута, передаваемое getattribute (), такое же, как и фактическое имя атрибута. Впечатление: Чтобы получить значение атрибута класса, вы должны пройти в «класс» вместо «classname».
var div = document.getElementbyid ("mydiv"); console.log (div.getAttribute ("class")); // bdСоздать элементы
Используйте метод document.createElement () для создания нового элемента.
Дети элемента
Перед выполнением операции вам обычно нужно сначала проверить свойство Nodetype, как показано в следующем примере:
for (var i = 0; len = element.childnodes.length; i <len; i ++) {if (element.childnodes [i] .nodetype == 1) {// выполнять некоторые операции}}Тип текста
Текстовые узлы имеют следующие характеристики:
Создать текстовый узел
Вы можете использовать document.createTextNode () для создания нового текстового узла.
Нормализованные текстовые узлы
Нормализовать ()
Разделительные текстовые узлы
SplitText ()
Тип комментария
Узел комментариев имеет следующие характеристики:
DOM Operation Technology
Операция форма
// Создание таблицы TableVar Table = document.CreateElement ("table"); table.border = 1; table.width = "100%"; // create tbodyvar tbody = document.createElement ("tbody"); table.appendchild (tbody); // Создать первую строку tbody.insertrow (0); tbody.rows [0] .insertcell (0); tbody.rows [0] .cells [0] .appendchild (document.createtextnode ("cell 1,1")); tbody.rows [0] .InserTcell (1); tbody.rows [0] .cells [1] 2,1 ")); // Создать вторую строку tbody.insertrow (01); tbody.rows [1] .insertcell (0); tbody.rows [1] .cells [0] .appendChild (document.createTextNode (" Cells 1,2 ")); tbody.rows [1] .insertcell (1); tbody.rows [1] .cells [1] .appendChild (document.createTextNode (" ячейка 2,2 ")); Document.Body.AppendChild (таблица);Селектор API
Метод QuerySelector ()
// Получить элемент кузова var tbody = document.queryselector ('body'); // Получить элемент с идентификатором "mydiv" var mydiv = document.queryselector ("#mydiv"); // Получить первый элемент с классом «выбранный» var selected = document.queryselector («. Выбран»); // Получить элемент первого изображения с помощью класса «var img = var img = var img =. document.body.queryselector ("img.button");Метод QuerySelectorall ()
// Получить все элементы <em> в <Div> (аналогично getElementsbytagname ("em")) var ems = document.getElementById ("myDiv"). QuerySelectorallAll ("em"); // Получить все элементы класса «выбранные» var selecteds = документ. document.queryselectorall ("p strong");HTML5
Связанные с классом расширения
getelementsbyclassname () Метод:
Этот метод может быть вызван через объект документа и все элементы HTML.
// Получить все элементы, содержащие «имя пользователя» и «текущее» в классе. Порядок имен классов не имеет значения varcurrentusernames = document.getelementsbyclassname ("current usemance current"); // Получить все элементы с именем класса «выбран» в элементе с id «mydiv» var selected = document.getelementbyid («mydiv»). Getelementsbyclassname («Selected»);Управление фокусом
HTML5 также добавляет функцию помощи в управлении DOM FOCUS. Первый - это свойство документа.
var button = document.getElementById ("myButton"); button.focus (); alert (document.activeElement === Кнопка); // истинныйПо умолчанию, когда документ просто загружается, документ. Во время загрузки документов значение Document.ActiveElement равна нулю.
Кроме того, был добавлен метод Document.hasfocus (), который используется для определения того, получил ли документ фокус.
var button = document.getElementByid ("myButton"); botton.focus (); alert (document.hasfocus ()); // истинный