После понимания структур и узлов DOM (модель объекта текста) наиболее важным является использование этих узлов для обработки веб -страниц HTML
Для узла DOM существует ряд свойств и методов для использования. Обычно используются следующая таблица.
Улучшен: http://www.w3school.com.cn/xmldom/dom_element.asp
1. Доступ к узлам
Bom предоставляет некоторые граничные методы для доступа к узлам. Обычно используются getElementsbytagname () и getelementbyid ()
Кода -копия выглядит следующим образом:
<script type = "text/javascript">
function searchdom () {
var oli = document.getElementsbytagname ("li");
var j = oli.length;
var j2 = oli [5] .tagname;
var J3 = oli [0] .ChildNodes [0] .nodevalue;
document.write (j+"<br>"+j2+"<br>"+j3+"<br>");
}
</script>
<тело>
<body onload = "searchdom ()">
<div id- "in"> </div>
<ul> язык клиента
<li> html </li>
<li> javascript </li>
<li> css </li>
</ul>
<ul> Язык на стороне сервера
<li> asp.net </li>
<li> jsp </li>
<li> php </li>
</ul>
</body>
Document.getElementById ()
Кода -копия выглядит следующим образом:
<script type = "text/javascript">
window.onload = function () {
function findId () {
var j4 = oli2.tagname;
Document.Write (J4);
}
var oli2 = document.getElementById ("Inn");
oli2.onclick = findid;
}
</script>
<li id = "inn"> php </li>
Кода -копия выглядит следующим образом:
<html>
<body id = "myid">
<div> </div>
<script type = "text/javascript">
x = document.getElementsbytagname ('div') [0];
Document.Write ("Div CSS Class:" + X.ClassName);
document.write ("<br />");
Document.Write («Альтернативный путь:»);
document.write (document.getelementbyid ('myid'). classname);
</script>
</body>
</html>
// id Получить классное имя
2. Обнаружение типа узла
Тип узла может быть обнаружен через узловый узел, а один параметр возвращает 12 целочисленных значений.
Формат выражения, такой как Document.NodeType
Что действительно полезно, так это три типа, упомянутые модельными узлами в модели DOM (i)
Узлы элементов, текстовые узлы и атрибуты узлов
1. Узел элемента возвращает значение узла элемента 1
2. Узел атрибута возвращает значение узла атрибута 2
3. Значение возврата текстового узла 3 - 3
Кода -копия выглядит следующим образом:
<script type = "text/javascript">
window.onload = function () {
function findId () {
var j5 = oli2.nodeType;
document.write ("nodetype:" + J5 + "<br>");
}
var oli2 = document.getElementById ("Inn");
oli2.onclick = findid;
}
</script>
<li id = "inn"> css </li>
Возврат: Nodetype: 1
Это означает, что какой -то узел может быть обработан отдельно, что очень практично при поиске узлов. Это будет обсуждаться позже.
3. Используйте отношения отца и брата-брата, чтобы найти узлы
В первом разделе «Узел доступа» используйте атрибут Node для ChildNodes для доступа к текстовому узлу, содержащемуся в узле элемента.
В этом разделе используются отношения узлов отца-брата и брата, чтобы найти узлы
*Используйте атрибуты Haschildnodes и Childnodes, чтобы получить все узлы, содержащиеся в этом узле
Кода -копия выглядит следующим образом:
<голова>
<title> Childnodes </title>
<script language = "javascript">
window.onload = function myDomispector () {
var oul = document.getElementbyId ("mylist"); // Получить тег <ul>
var domstring = "";
if (oul.haschildnodes ()) {// судить, есть ли детские узлы
var och = oul.childnodes;
для (var i = 0; i <och.length; i ++) // Поиск одного за другим
Domstring + = och [i] .nodeName + "<br>";
}
document.write (domstring);
}
</script>
</head>
<тело>
<ul id = "mylist">
<li> Пластые и кислые ребра </li>
<li> Клетная свинина </li>
<li> Kimchi Fish </li>
<li> Каштановый жареный курица </li>
<li> mapo tofu </li>
</ul>
</body>
4. HOM получает родительский узел узла
Кода -копия выглядит следующим образом:
<script language = "javascript">
window.onload = function () {
var food = document.getElementbyId ("myDarfood");
document.write (food.parentnode.tagname)
}
</script>
</head>
<тело>
<ul>
<li> Пластые и кислые ребра </li>
<li> Клетная свинина </li>
<li> Kimchi Fish </li>
<li id = "mydearfood"> Каштановый жареный курица </li>
<li> mapo tofu </li>
</ul>
// возвращение в UL
Используя родительский узел, родительский узел указанного узла был успешно получен
5. Используйте свойство ParentNode
Кода -копия выглядит следующим образом:
<голова>
<title> Childnodes </title>
<script language = "javascript">
window.onload = function () {
var food = document.getElementbyId ("myDarfood");
var parentelm = food.parentnode;
while (parentelm.classname! = "красочный" && parentelm! = document.body)
parentelm = parentelm.parentnode; // Взглянуть вверх
document.write ("Tagename:"+parentelm.tagname+"<br>");
document.write ("claaname:"+parentelm.classname+"<br>");
document.write ("typeof:"+typeof (еда)+"<br>");
}
</script>
</head>
<тело>
<div>
<ul>
<span>
<li> Пластые и кислые ребра </li>
<li> Клетная свинина </li>
<li> Kimchi Fish </li>
<li id = "mydearfood"> Каштановый жареный курица </li>
<li> mapo tofu </li>
</span>
</ul>
</div>
</body> <br> // Выход <br> // Tagename: Div <br> claAname: красочный <br> typeof: объект
Начните с детского узла и найдите родительский узел вверх, пока имя класса узла не станет «красочным»
6. Братство »
Кода -копия выглядит следующим образом:
<голова>
<title> Childnodes </title>
<script language = "javascript">
window.onload = function () {
var foods = document.getElementbyId ("myDarfood");
var nextf = foods.nextibling;
Alert ("nextsibling:" +nextf.tagname +"<br>");
}
</script>
</head>
<тело>
<div>
<ul>
<span>
<li> Пластые и кислые ребра </li>
<li> Клетная свинина </li>
<li> Kimchi Fish </li>
<li id = "mydearfood"> Каштановый жареный курица </li>
<li> mapo tofu </li>
<li> mapo tofu </li>
<li> mapo tofu </li>
</span>
</ul>
</div>
</body>
Выглядит прекрасно, чтобы получить доступ к узлам братьев и сестер, используя свои свойства.
Но это работает только для браузера IE
Чтобы иметь хорошую совместимость с кодом, Nodetype должен использоваться для вынесения суждения
Следующая совместимость:
Кода -копия выглядит следующим образом:
<голова>
<title> братья и сестры </title>
<script language = "javascript">
функция nextsib (node) {
var templast = node.parentnode.lastchild;
// Судите, является ли это последним узлом, если да, верните NULL
if (node == Templast)
вернуть ноль;
var tempobj = node.nextibling;
// Поиск последующих узлов брата один за другим, пока не найден узел элемента
while (tempobj.nodetype! = 1 && tempobj.nextibling! = null)
tempobj = tempobj.nextibling;
// Оператор с тремя точками, если он является узлом элемента, он возвращает сам узел, в противном случае он возвращает NULL
return (tempobj.nodeType == 1)? Tempobj: null;
}
Функция prevsib (node) {
var tempfirst = node.parentnode.firstchild;
// Судите, является ли это первым узлом, если это так, верните NULL
if (node == tempfirst)
вернуть ноль;
var tempobj = node.previoussibling;
// Поиск узлов -узлов предыдущего брата один за другим, пока не найден узлом элемента
while (tempobj.nodetype! = 1 && tempobj.previoussibling! = null)
tempobj = tempobj.previoussibling;
return (tempobj.nodeType == 1)? Tempobj: null;
}
Функция myDomispeper () {
var myitem = document.getElementById ("myDearFood");
// Получить следующий элемент брат узел
var nextListItem = nextsib (myitem);
// Получить предыдущий элемент брат узел
var prelistitem = prevsib (myitem);
Alert («Последний пункт:» + ((nextListItem! = null)? nextListItem.firstchild.nodevalue: null) + "prelistiTem:" + ((prelistitem! = null)? prelistitem.firstchild.nodevalue: null);
}
</script>
</head>
<Body Onload = "myDomispeper ()">
<ul>
<li> Пластые и кислые ребра </li>
<li> Клетная свинина </li>
<li> Kimchi Fish </li>
<li id = "mydearfood"> Каштановый жареный курица </li>
<li> mapo tofu </li>
</ul>
</body>
7. Установите свойства узла
Кода -копия выглядит следующим образом:
<голова>
<title> Childnodes </title>
<script language = "javascript">
window.onload = function () {
// Получить картинки
var imgdatabe = document.getElementsbytagname ("img") [0];
// Получить атрибут заголовка изображения
imgdatabe.setattribute ("src", "02.gif");
imgdatabe.setattribute ("Title", "Дружелюбный склон");
document.write (imgdatabe.getattribute ("title"));
document.write (imgdatabe.getattribute ("alt"));
document.write (imgdatabe.getattribute ("Node-Data"));
document.write (imgdatabe.getattribute ("node_data"));
}
</script>
</head>
<тело>
<div>
<img src = "01.jpg" node-data = "222" node_data = "3333">
<img src = "01.jpg">
</body>
Используйте метод setAttribute () для установки атрибутов узла
Кода -копия выглядит следующим образом:
<голова>
<title> Childnodes </title>
<meta charset = "utf-8" />
<script language = "javascript">
window.onload = function () {
var bkk = document.getElementbyId ("new5");
var clickbk = document.getElementbyId ("Qiehuan");
clickbk.onclick = dsqiehuan;
функция dsqiehuan () {
bkk.setattribute ("class", "xxx")
}
}
</script>
<style>
.xxx {color: #ddd}
</style>
</head>
<тело>
<div id = "new5">
555
</div>
<em id = "Qiehuan"> Switch </em>
</body>
8. CreateElement () Создайте узел
Кода -копия выглядит следующим образом:
<голова>
<title> Childnodes </title>
<meta charset = "utf-8" />
<script language = "javascript">
window.onload = function () {
var op = document.createElement ("p");
var oText = document.createTextNode ("Создать узел с использованием dom");
var oText1 = document.createTextNode («Создать узел 123 с использованием dom»);
Op.AppendChild (OTEXT);
Op.AppendChild (OTEXT1);
document.body.appendchild (op);
}
</script>
</head>
<тело>
<p> Изначально был p здесь, тестирование Createelement () </p>
</body>
9. RemoveChild удаляет узел
Кода -копия выглядит следующим образом:
<голова>
<title> Childnodes </title>
<meta charset = "utf-8" />
<script language = "javascript">
window.onload = function () {
var op = document.getElementsbytagname ("p") [0];
op.parentnode.removechild (op); // окончание - Removechild (op), а не .RemoveChild ("op")
}
</script>
</head>
<тело>
<p> Изначально был p здесь, тестирование Createelement () </p>
</body>
10.insertbefore () вставьте узел перед конкретным узлом
Кода -копия выглядит следующим образом:
<голова>
<title> Childnodes </title>
<meta charset = "utf-8" />
<script language = "javascript">
window.onload = function () {
var opold = document.getElementsbytagname ("p") [0];
var opnew = document.createElement ("p");
var otext = document.createTextNode ("Новый узел")
opnew.appendchild (Otext);
opold.parentnode.insertbefore (opnew, opold); // получение двух параметров, один - новый параметр, а другой - параметр старого узла
}
</script>
</head>
<тело>
<p> Изначально был p </p>
</body>
11. Вставьте новые элементы после определенного узла (добавлено 9 января 2015 г.)
Методы, предоставленные DOM, могут добавить только новые элементы перед целевым элементом, используя InsertBefore () или использовать метод appendChild () для добавления новых элементов в конце детей родительского элемента (пример: адрес).
На практике он часто используется для добавления новых элементов в конце конкретного элемента. Метод DOM не имеет метода INSERTBEFOR (), но использование существующих знаний можно использовать для написания.
Идея кода выглядит следующим образом
Кода -копия выглядит следующим образом:
функция insertafter (newElement, targetElement) {
var Outdoor = targetElement.parentNode; // найти родительский элемент целевого элемента
if (adarent.lastchild == targetElement) // Если цель является последним элементом
Outdoor.AppendChild (NewElement); // Добавить непосредственно к последнему элементу
else // Перед вставкой в узел родительского элемента следующего элемента
Outdoor.InsertBefore (NewElement, TargetElement.NextIbling)
Пример: (добавление вне элемента) исходный экземпляр: адрес
Кода -копия выглядит следующим образом:
<голова>
<meta charset = "utf-8">
<title> </title>
</head>
<body onload = "interp ()">
<p> Первый </p>
<p id = "target"> второй </p>
<script type = "text/javascript">
функция insertafter (newElement, targetElement) {
var Outdoor = targetElement.parentNode; // найти родительский элемент целевого элемента
if (adarent.lastchild == targetElement) // Если цель является последним элементом
Outdoor.AppendChild (NewElement); // Добавить непосредственно к последнему элементу
else // Перед вставкой в узел родительского элемента следующего элемента
Outdoor.InsertBefore (NewElement, TargetElement.NextIbling)
}
функция interp () {
var ooparent = document.getElementbyId ("target");
var oonewp = document.createElement ("a");
oonewp.setattribute ("href", "http://www.qq.com");
var ootextp = document.createTextNode ("link");
oonewp.appendchild (ootextp);
insertafter (oonewp, ooparent);
}
</script>
</body>
Пример: добавлен в элемент
12. Добавьте фрагментацию документа для повышения эффективности выполнения
Кода -копия выглядит следующим образом:
<голова>
<title> Childnodes </title>
<meta charset = "utf-8" />
<script language = "javascript">
window.onload = function () {
var opold = document.getElementsbytagname ("p") [0];
var Acolors = [«Красный», «зеленый», «синий», «пурпурный», «желтый», «шоколад», «черный», «аквамарин», «Лайм», «Фуксия», «Латунь», «Лазур», «Браун», « бронза "," deeppink "," aliceblue "," grey "," медь "," coral "," feldspare "," Orange "," Orchid "," Pink "," слива "," Quartz "," Purple "];
var offragment = document.createdocumentfragment (); // Создать фрагментацию документа
for (var i = 0; i <acolors.length; i ++) {
var op = document.createElement ("p");
var oText = document.createTextNode (acolors [i]);
Op.AppendChild (OTEXT);
offagment.appendchild (op); // сначала добавить узлы в фрагменты
}
//document.body.appendchild(ofragment); // добавлен на страницу наконец -то
opold.parentnode.insertbefore (offagment, opold); // в сочетании с INSERTBE, чтобы добавить фрагменты документа в узел
}
</script>
</head>
<тело>
<p> Изначально был p </p>
</body>