📄 dhtml_dom.asp@output=print
字号:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DHTML Document Object Model</title>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="Keywords" content="xml,tutorial,html,dhtml,css,xsl,xhtml,javascript,asp,ado,vbscript,dom,sql,colors,soap,php,authoring,programming,training,learning,beginner's guide,primer,lessons,school,howto,reference,examples,samples,source code,tags,demos,tips,links,FAQ,tag list,forms,frames,color table,w3c,cascading style sheets,active server pages,dynamic html,internet,database,development,Web building,Webmaster,html guide" />
<meta name="Description" content="Free HTML XHTML CSS JavaScript DHTML XML DOM XSL XSLT RSS AJAX ASP ADO PHP SQL tutorials, references, examples for web building." />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "../../https@ssl./default.htm" : "../../www./default.htm");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-3855518-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>
</head>
<body>
<p>From <b>http://www.w3schools.com</b> (Copyright Refsnes Data)</p>
<h1>DHTML - HTML Document Object Model (DOM)</h1>
<a href="dhtml_javascript.asp"><img border="0" alt="previous" src="../images/btn_previous.gif" width="100" height="20" /></a>
<a href="dhtml_events.asp"><img border="0" alt="next" src="../images/btn_next.gif" width="100" height="20" /></a>
<hr />
<p class="intro">The DOM presents HTML as a tree-structure (a node tree), with
elements, attributes, and text:</p>
<p>
<img border="0" src="htmltree.gif" alt="DOM HTML tree" width="486" height="266" />
</p>
<hr />
<h2>Examples</h2>
<p><a target="_blank" href="tryit.asp@filename=trydhtml_dom_innertext">innerHTML</a><br />
How to access and change the innerHTML of an element.</p>
<p><a target="_blank" href="tryit.asp@filename=trydhtml_dom_image">Attribute change</a><br />
How to access an image element and change the "src" attribute.</p>
<hr />
<h2>What is the HTML DOM?</h2>
<p>The HTML DOM is:</p>
<ul>
<li>A standard object model for HTML</li>
<li>A standard programming interface for HTML</li>
<li>Platform- and language-independent</li>
<li>A W3C standard</li>
</ul>
<p>The HTML DOM defines the <b>objects and properties</b> of all HTML elements,
and the <b>methods</b> (interface) to access them.</p>
<p>In other words:</p>
<p><b>The HTML DOM is a standard for how to get, change, add, or delete HTML
elements.</b></p>
<hr />
<h2>Using the HTML DOM to Change an HTML Element</h2>
<p>The HTML DOM can be used to change the content of an HTML element:</p>
<table class="ex" cellspacing="0" border="1" width="100%">
<tr>
<td><pre><html>
<body>
<h1 id="header">Old Header</h1>
<script type="text/javascript">
document.getElementById("header").innerHTML="New Header";
</script>
</body>
</html></pre></td>
</tr>
</table>
<p>HTML output:</p>
<table class="ex" cellspacing="0" border="1" width="100%">
<tr>
<td>
<h1>New Header</h1>
</td>
</tr>
</table>
<p>Example explained:</p>
<ul>
<li>The HTML document contains a header with id="header"</li>
<li>The DOM is used to get the element with id="header"</li>
<li>A JavaScript is used to change the HTML content (innerHTML) </li>
</ul>
<p><a target="_blank" href="tryit.asp@filename=trydhtml_dom_innertext">Try it
yourself</a></p>
<hr />
<h2>Using the HTML DOM to Change an HTML Attribute</h2>
<p>The HTML DOM can be used to change the attribute of an HTML element:</p>
<table class="ex" cellspacing="0" border="1" width="100%" id="table1">
<tr>
<td><pre><html>
<body>
<img id="image" src="smiley.gif">
<script type="text/javascript">
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html></pre></td>
</tr>
</table>
<p>HTML output:</p>
<table class="ex" cellspacing="0" border="1" width="100%" id="table2">
<tr>
<td>
<img src="landscape.jpg" alt="landscape" />
</td>
</tr>
</table>
<p>Example explained:</p>
<ul>
<li>The HTML document loads with an image with id="image"</li>
<li>The DOM is used to get the element with id="image"</li>
<li>A JavaScript changes the scr attribute from smiley.gif to landscape.jpg </li>
</ul>
<p><a target="_blank" href="tryit.asp@filename=trydhtml_dom_image">Try it
yourself</a></p>
<hr />
<h2>More About the HTML DOM</h2>
<p>If you want to study more about the HTML DOM, find the complete HTML DOM tutorial on our <a target="_top" href="../default.asp">Home Page</a>.</p>
<hr />
<a href="dhtml_javascript.asp"><img border="0" alt="previous" src="../images/btn_previous.gif" width="100" height="20" /></a>
<a href="dhtml_events.asp"><img border="0" alt="next" src="../images/btn_next.gif" width="100" height="20" /></a>
<p>From <b>http://www.w3schools.com</b> (Copyright Refsnes Data)</p>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -