<li>* 在HTML中，网页中的每一对标记就是一个元素对象，例如，<p></p>、<div></div>、 <table></table>等。为得到网页中的对象，可先将每一个标记赋值为一个惟一的id，例如，<p id="block1"></p>、<div id="titleBar"></div>等。
<li>* 通过对对象id的引用，就可以使用“document.getElementById（元素标识）”方法得到所需的方法。
<li>* W3C文档对象模型将网页结构作为树状节点处理，每一个节点代表网页中的一个元素，对应于HTML文件中的一对标记。因此，当通过id得到某一节点的元素对象后，就可以通过节点方便地得到与其相关的其他网页对象。
<li>* 通过W3C文档对象模型方法改变网页内容的步骤如下：通过节点对象的nodeValue方法得到网页中节点处网页元素对象的内容；通过文档对象的 creatElement方法或creatTextNode方法新建节点元素对象；通过节点对象的appendChild方法添加节点；通过节点对象的 replaceNode方法改变节点内容
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>W3C对象模型方法</title>
<script language="JavaScript">
<!--
function display() //函数：显示内容
{ //定义节点
var titleTextNode = document.getElementById('titleBar').firstChild;
var title = titleTextNode.nodeValue; //定义节点内容
alert(title); //显示输出
}
function change() //函数：修改内容
{
//定义节点
var newTextNode = document.createTextNode('这是改变后的标题');
var titleNode = document.getElementById('titleBar'); //定义节点内容
var titleTextNode = document.getElementById('titleBar').firstChild;
titleNode.replaceChild(newTextNode,titleTextNode); //替换
}
//-->
</script>
</head>
<body bgcolor="#ffc0c0">
<h2>W3C对象模型方法</h2><hr>
<h1 id="titleBar">这是一个测试标题</h1>
<div style="margin-top:10px;">
<!--通过onclick调用display()函数显示网页内容-->
<input type="button" value="显示" οnclick="display();">
<!--通过onclick调用change ()函数改变网页内容-->
<input type="button" value="修改" οnclick="change()">
</div>
</body>
</html>
<li>* 通过对对象id的引用，就可以使用“document.getElementById（元素标识）”方法得到所需的方法。
<li>* W3C文档对象模型将网页结构作为树状节点处理，每一个节点代表网页中的一个元素，对应于HTML文件中的一对标记。因此，当通过id得到某一节点的元素对象后，就可以通过节点方便地得到与其相关的其他网页对象。
<li>* 通过W3C文档对象模型方法改变网页内容的步骤如下：通过节点对象的nodeValue方法得到网页中节点处网页元素对象的内容；通过文档对象的 creatElement方法或creatTextNode方法新建节点元素对象；通过节点对象的appendChild方法添加节点；通过节点对象的 replaceNode方法改变节点内容
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>W3C对象模型方法</title>
<script language="JavaScript">
<!--
function display() //函数：显示内容
{ //定义节点
var titleTextNode = document.getElementById('titleBar').firstChild;
var title = titleTextNode.nodeValue; //定义节点内容
alert(title); //显示输出
}
function change() //函数：修改内容
{
//定义节点
var newTextNode = document.createTextNode('这是改变后的标题');
var titleNode = document.getElementById('titleBar'); //定义节点内容
var titleTextNode = document.getElementById('titleBar').firstChild;
titleNode.replaceChild(newTextNode,titleTextNode); //替换
}
//-->
</script>
</head>
<body bgcolor="#ffc0c0">
<h2>W3C对象模型方法</h2><hr>
<h1 id="titleBar">这是一个测试标题</h1>
<div style="margin-top:10px;">
<!--通过onclick调用display()函数显示网页内容-->
<input type="button" value="显示" οnclick="display();">
<!--通过onclick调用change ()函数改变网页内容-->
<input type="button" value="修改" οnclick="change()">
</div>
</body>
</html>
1187
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
