总结之前项目的技术要点
2010-09-04 11:35
344 查看
一、js代码的完全面向对象
二、js的Dom有几个重要的函数。
什么是DOM?
Dom其实就是将页面文档抽象成一颗树,例如
document是根结点,在这个文档document指的就是<html />这个标签。
document下面有2个节点,一个<head/>, 一个是<body/>.
<head/>标签下还有<title/>,而<title/>下有一个节点——字符串“无标签页”。
标签类型的我们称作是Element类型。
字符串的就称为TextNode类型。
这样我们对文档的操作就是对一棵树进行操作。
先介绍几个定位的函数
假如我们要定位到<div>这个节点,只需要
这样我们就可以对<div>进行操作了。然后如果我们要div里面添加一行文本。
也就是希望文本变成
我们应该怎么做?第一,创建span节点,第二创建文本,第三把文本加到span里面,
第四,把span加到div里面。
介绍几个创建节点的函数。
之前已经谈过,<span/>这种标签是属于Element类型的。文本是TextNode类型的。i
这样就创建成功了。
下一步就是把文本加到span,span加到div。
这个很简单。用appendChild函数就可以。
假如我要设定div的大小。
也就是说,Element标签的属性(这里属性和特性我就不做区分了),是可以直接使
用的。
剩下最后一个重点就是如何为标签增加事件。
假如我要为div_dom添加一个onclick事件,可以用到attachEvent函数
这就是dom的一些内容。还有一些细节需要自己去了解。比如div_dom.parentNode
是寻找div_dom的父节点之类的。
js中的面向对象的关键要点在于function这个类型。在C语言中数据类型只有int、double、float、char等基本数据类型,而函数则不是。但在js中,函数也是一种类型
我们可以写出这样的语句:
在C语言中,是不可能把一个函数付给一个变量的。而js的变量实际就是一个指针,指向内存的某个单元。上述的变量b,实际就是在内存开辟了function这个函数对象,然后b作为指针,指向了这个单元
我们可以写出这样的语句:
var a = 2; var b = function() { alert(1); } b();
在C语言中,是不可能把一个函数付给一个变量的。而js的变量实际就是一个指针,指向内存的某个单元。上述的变量b,实际就是在内存开辟了function这个函数对象,然后b作为指针,指向了这个单元
二、js的Dom有几个重要的函数。
什么是DOM?
Dom其实就是将页面文档抽象成一颗树,例如
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title id = “title1”>无标题页</title> </head> <body style="text-align:center;" > <div id =”div1”> </div> </body> </html>
document是根结点,在这个文档document指的就是<html />这个标签。
document下面有2个节点,一个<head/>, 一个是<body/>.
<head/>标签下还有<title/>,而<title/>下有一个节点——字符串“无标签页”。
标签类型的我们称作是Element类型。
字符串的就称为TextNode类型。
这样我们对文档的操作就是对一棵树进行操作。
先介绍几个定位的函数
document.getElementById(); document.getElementsByTagName(); document.getElementsByName();//这个很少用了。
假如我们要定位到<div>这个节点,只需要
var div_dom = document.getElementById("div1");
这样我们就可以对<div>进行操作了。然后如果我们要div里面添加一行文本。
也就是希望文本变成
<div id =”div1”> <span>我是文本</span> </div>
我们应该怎么做?第一,创建span节点,第二创建文本,第三把文本加到span里面,
第四,把span加到div里面。
介绍几个创建节点的函数。
document.createElement();//创建Element document.createTextNode();//创建TextNode
之前已经谈过,<span/>这种标签是属于Element类型的。文本是TextNode类型的。i
var span = document.createElement("span"); var text = document.createTextNode("我是文本");
这样就创建成功了。
下一步就是把文本加到span,span加到div。
这个很简单。用appendChild函数就可以。
span.appendChild(text); div_dom.appendChild(span);
假如我要设定div的大小。
div_dom.height = "10px"; div_dom.widght = "10px";
也就是说,Element标签的属性(这里属性和特性我就不做区分了),是可以直接使
用的。
剩下最后一个重点就是如何为标签增加事件。
假如我要为div_dom添加一个onclick事件,可以用到attachEvent函数
div_dom.attachEvent('onclick',function(){alert(div_dom.id);});
这就是dom的一些内容。还有一些细节需要自己去了解。比如div_dom.parentNode
是寻找div_dom的父节点之类的。
相关文章推荐
- 浅谈vue项目重构技术要点和总结
- HBase学习、项目模块技术要点总结
- 2015级WCF项目设计优秀技术要点总结
- Android项目开发技术总结
- Objective C运行时(runtime)技术的几个要点总结
- webkit webApp 开发技术要点总结
- 超越之视频技术的核心要点总结
- .net项目技术选型总结
- 微信小程序技术分析:Mustache语法要点总结
- 总结一下现在这个项目用到的技术
- Android项目技术总结:网络连接总结
- JAVA面试题和项目面试核心要点精华总结(想进大公司必看)
- Android项目开发技术总结
- webkit webApp 开发技术要点总结
- wpf首次项目开发技术总结之app.xaml
- 外包项目管理技术要点
- 2012-10-15 → 2012-10-21 周总结:项目要试运行了(负责技术支持,要加油了)
- 项目(多国技术) 总结
- 项目经验之技术总结-2016
- webApp 开发技术要点总结