W3C对象模型方法

原创 2007年10月15日 14:18:00
<li>*     在HTML中,网页中的每一对标记就是一个元素对象,例如,&lt;p&gt;&lt;/p&gt;、&lt;div&gt;&lt;/div&gt;、 &lt;table&gt;&lt;/table&gt;等。为得到网页中的对象,可先将每一个标记赋值为一个惟一的id,例如,&lt;p id="block1"&gt;&lt;/p&gt;、&lt;div id="titleBar"&gt;&lt;/div&gt;等。

<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="显示"  onclick="display();">

               <!--通过onclick调用change ()函数改变网页内容-->

               <input type="button" value="修改" onclick="change()">

      </div>

</body>

</html>

手写事件模型及事件代理/委托

在前端面试,js是重头戏,也是体现面试者的重要方面。jq库类在前端影响深远,以至于很多入门者直接用jq代替原生js来开发项目,效率是提升了,但是往往面试官为了考察面试者的基础,几乎不可能问你jq里面的...
  • yilufanhuaxiangsong
  • yilufanhuaxiangsong
  • 2017年11月16日 21:03
  • 65

W3C盒模型和IE盒模型的区别

盒模型在初学css的时候就会接触到,其实很容易理解,这里也不多废话,但是实际上在布局的时候还是会出现很多问题。对于盒模型的认识不能只停留在知道一个盒模型由哪些部分构成,也要更多的了解如何在不同情况下利...
  • u011366705
  • u011366705
  • 2015年06月29日 10:42
  • 7163

JavaScript Window浏览器对象模型方法与属性汇总

Window 对象 所有浏览器都支持 window 对象。它表示浏览器窗口。 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。 全...
  • u012172536
  • u012172536
  • 2016年06月26日 00:53
  • 307

W3C的标准DOM事件模型和IEDOM事件模型的区别

在浏览器解析事件的时候,有两种触发方式,一种叫做Bubbling(冒泡),另外一种叫做Capturing(捕获)。由上图可以看出来,冒泡的方式效果就是当一个DOM元素的某事件例如click事件被fir...
  • liuqi332922337
  • liuqi332922337
  • 2017年02月10日 23:07
  • 152

面向过程、面向对象 的模型和方法

“面向过程”(Procedure Oriented)是一种以“过程”为中心的编程思想,所谓“面向过程”的编程就是以“什么事情发生”或“什么流程进行”为目标或单元进行编程,而面向对象的则是以“谁在受影...
  • conquer0715
  • conquer0715
  • 2017年02月14日 12:04
  • 3381

对象建模方法与技术学习笔记(一)

面向对象为什么要面向对象面向对象的思想认为,在需求中人和物是相对稳定的,他们是事物的本质;而需求中的功能和行为是以人和物为主体的特征;人和物是相对稳定的,而功能和行为是易变的。因此,反映需求分析与软件...
  • u013745854
  • u013745854
  • 2015年08月01日 16:45
  • 1349

JavaScript第五章知识点总结——常用DHTML对象 Window对象 对话框 定时器

JavaScript第五章知识点总结——常用DHTML对象 Window对象 对话框 定时器 知识点预览 DHTML概述 Window对象 对话框 定时器     ...
  • yasiyuan
  • yasiyuan
  • 2014年10月11日 15:58
  • 307

动态HTML和W3C文档对象模型

1、Web标准       1994年,Tim创立了万维网联盟(World Wide Web Consortium,W3C),该组织致力于Web技术演变的管理。它主要有三个目标: 提供通用的访问技...
  • haandxc
  • haandxc
  • 2016年04月01日 09:35
  • 387

JavaScript Window- 浏览器对象模型和W3C

一个document.documentElement.clientWidth为0的问题 关于获取各种浏览器可见窗口大小的一点点研究 function getInfo() { v...
  • u013898564
  • u013898564
  • 2014年03月17日 16:48
  • 175

W3C标准与规范

W3C标准,即一系列标准的集合,他的本质是结构标准语言。就像平时使用的HTML、CSS等都需要遵守这些标准。 万维网联盟创建于1994年,是web技术领域最具权威和影响力的国际中立性技术标准机构。它...
  • u011641865
  • u011641865
  • 2016年04月10日 20:07
  • 2093
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:W3C对象模型方法
举报原因:
原因补充:

(最多只允许输入30个字)