DOM ( SGML/HTML/XML). DOM W3C - http://www.w3.org/DoM/.
, HTML- . DOM , , , ( , , ), , , . .
W3C
The Document Object Model Working Group:
Document Object Model Level 1
Document Object Model Level 2 Core
Document Object Model Level 2 Views
Document Object Model Level 2 Events
Document Object Model Level 2 Style
Document Object Model Level 2 Traversal and Range
Document Object Model Level 2 HTML
Document Object Model Level 3 Core
Document Object Model Level 3 Load and Save
Document Object Model Level 3 Validation.
( ) . , .
JavaScript , DOM.
, . 0 (Document Object Model level0 - DOM0), W3C.
Javascript, Window, . , , Window. , , , . .
Screen ( screen) . , , , . , , :
width - ;
height - ;
availWidth - ;
availHeight - .
Navigator ( navigator) .
Location ( location) URL , . URL, : , .. , , . , , ,
 |
|
|
|
, , . :
reload() ;
replace() , .
History ( history) length ( ), , :
back() - ;
forward() - ;
go(n) - n ( n >0, , n <0, ).
Document ( document), . , (Document Object Model Level 0 - DOM0). DOM.
frames[] , .
, , , . , DOM W3C, .
JavaScript Wikipedia, DOM .
function domImplementationTest(){ var featureArray = ['HTML', 'XML', 'Core', 'Views',
'StyleSheets', 'CSS', 'CSS2', 'Events',
'UIEvents', 'MouseEvents', 'HTMLEvents', 'MutationEvents', 'Range', 'Traversal']; var versionArray = ['1.0', '2.0', '3.0'];
var i; var j;
if(document.implementation && document.implementation.hasFeature){ for(i=0; i < featureArray.length; i++){ for(j=0; j < versionArray.length; j++){ document.write(
' '+ featureArray[i] + ' ' + versionArray[j] + ': ' +
(document.implementation.hasFeature(featureArray[i], versionArray[j])?
'<font style="color:green">true</font>': '<font style="color:red">false</font>') + '<br/>'
 |
);
}
document.write('<br/>');
}
}
}
DOM- JavaScript : http://www.w3.org/standards/techs/dom#w3c all https://developer.mozilla.org/en/DOM Levels.
DOM Core .
:
<html>
<head>
<title>Sample Document</title>
</head>
<body>
<h1>An HTML Document</h1>
|
|
|
<p>This is a <i>simple</i> document.
</body>
</html>
DOM-, , 3.
3 HTML
. Node, childNodes, firstChild, lastChild, nextSibling, previousSibling parentNode,
appendChild(), removeChild(), replaceChild() insertBefore(). , . document.body.h1.
(.. Node) , nodeType. 2.
| nodeType | nodeType | |
| Element | Node.ELEMENT NODE | 1 |
| Text | Node.TEXT NODE | 3 |
| Document | Node.DOCUMENT NODE | 9 |
| Comment | Node.COMMENT NODE | 8 |
| DocumentFragment | Node.DOCUMENT FRAGMENT NODE | 11 |
| Attr | Node.ATTRIBUTE NODE | 2 |
2
4 DO M
4.
JavaScript .
var tables = document.getElementsByTagName("table"); !" : " + tables.length);
, , , .
4-
var myParagraph = document.getElementsByTagName("p");
, specialParagraph. , .
<p id="specialParagraph">
var myParagraph = document.getElementById("specialParagraph");
:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>CoppoBKa . . JavaScript.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
function sortkids(e) {
// , if (typeof e == "string") e = document.getElementById(e);
// ( ) var kids = [];
for(var x = e.firstChild; x!= null; x = x.nextSibling)
if (x.nodeType == 1 /* Node.ELEMENT NODE */) kids.push(x);
// // . , // - Text kids.sort(function(n, m) { // var s = n.firstChild.data; // n var t = m.firstChild.data; // m if (s < t) return -1; // n m else if (s > t) return 1; // n m else return 0; // n m
});
// // . // , ,
//
// . , ,
// , .
for(var i = 0; i < kids.length; i++) e.appendChild(kids[i]);
}
</script>
</head>
<body>
<ul id="list"> <!- >
|
|
|
<^><^><^><^><^>
<!-- -->
</ul>
<!-- , -->
<button onclick="sortkids('list')"> </button> </body>
</html>
, HTML . innerHTML. , , innerHTML.
table:
var table = document.createElement("table"); // <table>
table.border = 1; //
// ||
table.innerHTML = "<tr><th></th><th></th><th></th></tr>";
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> .</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#result {font-style: italic;}
div.text p { margin: 0 5px 5px 5px; background-color:yellow}
</style>
<script type="text/javascript">
function print(el)
{
// ,
//
var result = document.getElementById('result');
result.innerHTML = "<hr/><p>"+Date()+"</p>" +
"<" + el.nodeName + ">" + el.textContent +
"<p> !</p><hr/>";
}
function mouseOver(el)
{
el.style.backgroundColor = "green";
}
function mouseOut(el)
{
el.style.backgroundColor = "yellow";
}
</script>
</head>
<body>
<div>
<h1> HTML</h1>
<p> </p>
</div>
<div class="text">
<p onclick="print(this)">1. div!</p>
<p onclick="print(this)">2. div!!</p>
</div>
<div class="text">
<p onclick="print(this)"
onMouseOut="mouseOut(this)" onMouseOver="mouseOver(this)">
3. div!!!</p>
<p onclick="print(this)"
onMouseOut="mouseOut(this)" onMouseOver="mouseOver(this)">
4. div!!!!</p>
</div>
<!-- -->
<div id="result"></div>
</body>
</html>
HTML , . <p> onclick ( ), onMouseOver ( ), onMouseOut ( ). this, , , .
, DOM-.
function mouseOver(el)
{
el.style.backgroundColor = "green";
}
, :
|
|
|
function print(el)
{
var result = document.getElementById('result'); result.innerHTML = "<hr/><p>"+Date()+"</p>" +
"<" + el.nodeName + ">" + el.textContent + "^^ !</p><hr/>";
}
, Date(), . 
jQuery
jQuery - . . http://docs.iquery.com.
, . jQuery AJAX-. , , .
jQuery , , CSS , . $() jQuery().
, .
. :
<!DOCTYPE html>
<html>
<head>
<style> table {
background:#f3f7f5;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<table border="1">
<tr><td>Row with Index #0</td></tr>
<tr><td>Row with Index #1</td></tr>
<tr><td>Row with Index #2</td></tr>
<tr><td>Row with Index #3</td></tr>
</table>
<script>$("tr:odd").css("background-color", "#bbbbff");</script>
</body>
</html>
, jQuery .
5.
 |
.
, jQuery , . http://iquervui.com/demos/.
(http://jqueryui.com/demos/sortable/) , .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Sortable - Default functionality</title>
<script src="js/jquery.js"></script>
<script src="js/ui/jquery-ui.js"></script>
<link rel="stylesheet" href="js/demos.css">
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li {
margin: 0 5px 5px 5px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; background-color:cyan }
#sortable li span { position: absolute; margin-left: -1.3em; }
</style>
<script>
$(function() {
$("#sortable").sortable();
$("#sortable").disableSelection();
});
</script>
</head>
<body>
<div class="demo">
<ul id="sortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
<li class="ui-state-default">Item 6</li>
<li class="ui-state-default">Item 7</li>
</ul>
</div><!-- End demo -->
</body>
</html>
, , ul , (id-'sortable"), $().
$(function() {
$("#sortable").sortable();
$("#sortable").disableSelection();
});
, , $() , - , jQuery.
|
|
|
. , Javascript.
<!DOCTYPE html>
<html>
<head>
<^^> .</^^>
<meta charset="utf-8" />
<style>
#result {font-style: italic;}
div.text p { margin: 0 5px 5px 5px; background-color:yellow}
</style>
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div.text p").mouseover(function(){ this.style.backgroundColor = "green";
}).mouseout(function(){
this.style.backgroundColor = "yellow";
}).click(function () {
// , $("#result").html("<hr/><p>"+Date()+"</p>" +
"<" + this.nodeName + ">" + this.textContent +
"^^ !</pXhr/>");
})
})
</script>
</head>
<body>
<div>
<h1> HTML</h1>
<p> <^>
</div>
<div class="text">
<p>1. div!</p>
<p>2. div!!</p>
</div>
<div class="text">
<p>3. div!!!</p>
<p>4. div!!!!</p>
</div>
<!-- -->
<div id="result"></div>
</body>
</html>
, HTML- . jQuery DOM-, .
, $(document).ready , js-. . jQuery
$("div.text p").mouseover(function (){}
2
2-3 .( )
JS jQuery.
, .
, ,
