Document Object Model , сокращенно DOM, по-китайски:文档对象模型— это标准编程接口, рекомендованный организацией W3C для обработки расширяемых языков разметки.
DOM Tree означает解析HTML страницы через DOM и生成HTML tree树状结构HTML и соответствующего访问方法. С помощью DOM Tree мы можем напрямую и简易управлять каждым содержимым разметки на HTML-странице, например, следующим HTML-кодом
. html><head>
<title>Играем с домом</title></head><body>
<p>Я dom-узел</p>
<р>
<p>п п</p>
</p></body></html> Абстрагируется в дереве DOM следующим образом: 
После понимания вышеизложенных знаний я объясню ниже четыре аспекта: как получить DOM, как создать и добавить DOM, как изменить DOM и как удалить DOM. Последующие действия,
чтобы
Есть много API для получения DOM, но все они очень простые.
:
document.getElementById("id name"); Пример:
<body>;
<p id="p">Я p-узел</p>
<скрипт>
var p = document.getElementById("p");
консоль.журнал(п);
</script></body> 
Откройте консоль и вы увидите, что вы успешно получили
:
document.getElementsByTagName("имя тега" Пример:
<body>;
<p>Я p-узел</p>
<p>Я тоже p-узел</p>
<скрипт>
var p = document.getElementsByTagName("p");
консоль.журнал(п);
for (пусть я = 0; я < p.length; я++) {
console.log(p[i]);
}
</script></body> 
Примечание . Используйте метод getElementsByTagName() для возврата коллекции объектов с указанными именами тегов. Поскольку полученная информация представляет собой коллекцию объектов, нам необходимо выполнить обход, если мы хотим работать с элементами внутри. Примечание. Объекты элементов, полученные с помощью этого метода. метод является динамическим
:
document.getElementsByClassName("имя класса" Пример:
<body>;
<p class="p">Я p-узел</p>
<p class="p">Я p-узел</p>
<скрипт>
var p = document.getElementsByClassName("p");
консоль.журнал(п);
for (пусть я = 0; я < p.length; я++) {
console.log(p[i]);
}
</script></body> 
Это тоже очень просто, просто запомните это
синтаксис через новый API HTML5:
document.querySelector("Подробнее см. в примерах"); document.querySelectorAll
("Подробнее см. в примерах") ;
<p class="p">Я p-узел</p>
<p class="name">Цветок груши</p>
<p id="info">Информация</p>
<скрипт>
// Получаем переменную по имени тега p = document.querySelector("p");
// Получение через имя класса, не забудьте добавить var qname = document.querySelector(".name");
// Получить по идентификатору, не забудьте добавить #
var info = document.querySelector("#info");
// Получаем все совпавшие элементы и возвращаем массив var all = document.querySelectorAll("p");
консоль.журнал(п);
console.log(qname);
console.log(информация);
for (пусть я = 0; я < all.length; я++) {
console.log(все [я]);
}
</script></body> 
Как видите, использование нового API HTML5 очень гибкое, поэтому мне очень нравится его использовать, и я рекомендую вам использовать
. Кроме того, существуют некоторые специальные элементы, которые имеют свои собственные методы получения, например. в качестве тела элемент html
Синтаксис элемента:
document.body
Пример:
<body>;
<скрипт>
вар тело = document.body;
console.log(тело);
</script></body> 
Как видите, все содержимое элемента body было успешно получено.
синтаксис
пример
document.documentElement:
<body>;
<скрипт>
вар HTML = document.documentElement;
console.log(html);
</script></body> 
Как видите, весь html веб-страницы получен. Итак, получение DOM подошло к концу. Теперь приступим к динамическому созданию и добавлению dom.
Грубо говоря,
мы научимсяОперация с dom — это то же самое, что игра с данными, добавление, удаление, изменение и проверка, а создание и добавление эквивалентно добавлению. Когда мы добавляем данные, мы должны сначала получить данные, а затем добавить их. Операции с DOM Сначала мы должны создать DOM, а затем указать, где его добавить. Наконец, операция завершена. Давайте узнаем, как создать dom и как добавить dom
. не бойся, хаха
Синтаксис
:
document.createElement("Имя элемента");
Если вы хотите динамически создать элемент p , вы можете написать его так. То же самое можно сказать и о других вещах. Применить выводы
var p = document.createElement("p"); и добавить dom.
Используйте их в зависимости от ситуации. Один из них добавляетсяв
конец дочернего элемента, другой — после указанного дочернего элемента
.
Синтаксис:
node.appendChild(child);
<р>
<a href="">Байду</a>
</p>
<скрипт>
var p = document.createElement("p");
p.innerText = "Я — п"
var p = document.querySelector("p");
p.appendChild(p);
</script></body> 
Динамически создайте тег абзаца элемента p и напишите текст «I am p». Наконец, получите элемент p и добавьте p как дочерний элемент p. Этот метод добавления добавляется в конец, поэтому эффект показан на рисунке.
.
Синтаксис:
node.insertBefore(child, указанный элемент);
Пример:
<body>;
<р>
<a href="">Байду</a>
<span>Я младший брат Спан</span>
</p>
<скрипт>
var p = document.createElement("p");
p.innerText = "Я — п"
var p = document.querySelector("p");
var a = document.querySelector("a");
//Создаем p под p перед элементом a p.insertBefore(p, a);
</script></body> 
Это конец? Да, что ты думаешь? Разве это не очень просто? Достаточно просто. Осталось еще попрактиковаться. Хорошо, давайте перейдем к следующему шагу. Как изменить DOM?
резюмируется следующим образом:
Пример 1: Получите тег p страницы и измените содержимое на «Zhou Qiluo»
<body>
<р>
<p></p>
</p>
<скрипт>
var p = document.querySelector("p");
p.innerText = "Чжоу Цилуо";
</script></body> Пример 2. Нажмите кнопку, чтобы создать гиперссылку Baidu
<body>
<р>
<button onclick="createBaidu()">Нажмите, чтобы создать гиперссылку Baidu</button>
</p>
<скрипт>
функция createBaidu() {
var p = document.querySelector("p");
var a = document.createElement("a");
a.href = "https://www.baidu.com";
a.innerText = "Просто найдите в Baidu, и вы все узнаете";
p.append(а);
}
</script></body> 
Пример 3: нажмите кнопку, цвет текста в теге p станет зеленым, а голова собаки
<body>изменится вручную.
<р>
<button onclick="changeColor()">Нажмите, чтобы стать зеленым</button>
<p>Сейчас я позеленею</p>
</p>
<скрипт>
функция изменения цвета() {
var p = document.querySelector("p");
p.style.color = "зеленый";
}
</script></body> 
Метод node.removeChild() удаляет дочерний узел из DOM и возвращает удаленный узел.
Синтаксис:
node.removeChild(child);
Case:
<body>.
<р>
<button onclick="removeP()">Нажмите, чтобы удалить p</button>
<p>Я п, время скоро закончится</p>
</p>
<скрипт>
функция удаленияP() {
var p = document.querySelector("p");
var p = document.querySelector("p");
п.removeChild(p);
}
</script></body> 