1.dom: модель объекта документа DOM (модель объекта документа) Определяет стандартные методы для доступа и обработки документов HTML. DOM делает HTML -документы в виде дерева -структуры (дерева узлов) с элементами, атрибутами и текстом.
2. Некоторые обычно используемые свойства DOM
2.1 Получите элементы от ID
(1) Синтаксис:
Кода -копия выглядит следующим образом:
document.getelementbyid ("id");
(2) Функция: ID относится к удостоверению личности человека. Мы можем найти тег, ища идентификатор тега, а затем выполнить соответствующие операции.
(3) Примечание: не забудьте написать документ!
2.2 Атрибуты Innerhtml
(1) Синтаксис:
Кода -копия выглядит следующим образом:
Obgect.innerhtml = "Привет, мир"
(2) Функция: в основном для получения или замены контента в теге
(3) Пример:
Кода -копия выглядит следующим образом:
<! Doctype html>
<html>
<голова>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> innerhtml </title>
</head>
<тело>
<h2 id = "con"> javascript </h2>
<p> Javascript - это простой язык сценариев, основанный на объекте и событиях. Он встроен в HTML -документы и интерпретируется и выполняется браузером, создавая динамический эффект отображения на веб -странице и реализацию функций взаимодействия пользователя. </p>
<script type = "text/javascript">
var mychar = document.getElementbyId ("con");
document.write ("Оригинальный заголовок:"+mychar.innerhtml+"<br>"); // Вывод исходного содержимого тега H2
mychar.innerhtml = "Привет, мир!";
document.write («Модифицированный заголовок:»+mychar.innerhtml); // Вывод модифицированного содержимого тега H2
</script>
</body>
</html>
(4) Примечание. Объект является полученным объектом элемента, таким как элемент, полученный через Document.getElementByID («id»).
2.3 Изменить стиль HTML
(1) Синтаксис:
Кода -копия выглядит следующим образом:
Object.style.property
(2) Функция: используется для изменения стиля HTML
(3) Пример:
Кода -копия выглядит следующим образом:
<тело>
<h2 id = "con"> я люблю javascript </h2>
<p> javascript позволяет веб -страницам отображать динамические эффекты и реализует функции взаимодействия пользователя. </p>
<script type = "text/javascript">
var mychar = document.getElementbyId ("con");
mychar.style.color = "red";
mychar.style.backgroundcolor = "#ccc";
mychar.style.width = "300px";
</script>
</body>
(4) Примечание: свойство имеет много стилей, таких как цвет, высота и т. Д., Которые можно изменить с помощью этого метода. Не забудьте добавить полуколон в свойства после них.
2.4 Показать и скрыть (атрибут отображения)
(1) Синтаксис:
Object.style.display = значение
(2) Функция: отображение и укрытие часто наблюдаются на веб -страницах, что достигается с помощью атрибута дисплея.
(3) Пример:
Кода -копия выглядит следующим образом:
<script type = "text/javascript">
функция hiddentext ()
{
var mychar = document.getElementbyId ("con");
mychar.style.display = "нет";
}
функция showtext ()
{
var mychar = document.getElementbyId ("con");
mychar.style.display = "block";
}
</script>
(4) Примечание. Значение значения не является блок, где ни один не отображается, и блок отображается.
2.5 Атрибут имени класса
(1) Синтаксис:
Кода -копия выглядит следующим образом:
Object.classname = classname
(2) Функция: 1. Получить атрибут класса элемента; 2. Укажите стиль CSS для элемента на веб -странице, чтобы изменить внешний вид элемента.
(3) Пример:
Кода -копия выглядит следующим образом:
<голова>
<meta http-equiv = "content-type" content = "text/html; charset = gb2312">
<Title> атрибут ClassName </title>
<style>
тело {font-size: 16px;}
.один{
Граница: 1PX SOLID #EEE;
Ширина: 230px;
Высота: 50px;
Фон: #CCC;
Цвет: красный;
}
.два{
Граница: 1PX SOLID #CCC;
Ширина: 230px;
Высота: 50px;
Фон:#9CF;
Цвет: синий;
}
</style>
</head>
<тело>
<P ID = "P1"> JavaScript позволяет веб -страницам отображать динамические эффекты и реализует функции взаимодействия пользователя. </p>
<input type = "button" value = "добавить стиль" onclick = "add ()"/>
<P ID = "P2"> JavaScript позволяет веб -страницам отображать динамические эффекты и реализует функции взаимодействия пользователя. </p>
<input type = "button" value = "изменение внешнего вида" onclick = "modify ()"/>
<script type = "text/javascript">
функция add () {
var p1 = document.getElementbyId ("p1");
p1.classname = "One";
}
функция modify () {
var p2 = document.getElementbyId ("p2");
p2.classname = "два";
}
</script>
</body>
Выше приведено в этой статье, надеюсь, вам понравится.