首页 > 代码库 > javascript中的数据结构
javascript中的数据结构
Javascript中的关键字
Javascript的数据结构
Javascript的数据类型有以下几种
摘自一段话:
JavaScript中的数据很简洁的。简单数据只有 undefined, null, boolean, number和string这五种,而复杂数据只有一种,即object。这就好比中国古典的朴素唯物思想,把世界最基本的元素归为金木水火土,其他复杂的物质都是由这五种基本元素组成。
JavaScript中的代码只体现为一种形式,就是function。
注意:不要和Number, String, Object, Function等JavaScript内置函数混淆
任何一个JavaScript的标识、常量、变量和参数都只是unfined, null, bool, number, string, object 和 function类型中的一种,也就typeof返回值表明的类型。除此之外没有其他类型了。
1、undefined
typeof(undefined) 返回也是 undefined。
可以将undefined赋值给任何变量或属性,但并不意味了清除了该变量,反而会因此多了一个属性。
2、null
ypeof(null)返回object,但null并非object,具有null值的变量也并非object
3、bollean
4、number
typeof(NaN)和typeof(Infinity)都返回number
NaN参与任何数值计算的结构都是NaN,而且 NaN != NaN 。
Infinity / Infinity = NaN 。
5、string
6、function
JavaScript的代码就只有function一种形式,function就是函数的类型。请看下面的程序:
1 2 3 4 5 6 7 8 9 | function myfunc() { alert(”hello”); }; alert( typeof (myfunc)); |
这个代码运行之后可以看到typeof(myfunc)返回的是function。以上的函数写法我们称之为“定义式”的,如果我们将其改写成下面的“变量式”的,就更容易理解了:
1 2 3 4 5 6 7 8 9 | var myfunc = function () { alert(”hello”); }; alert( typeof (myfunc)); |
这里明确定义了一个变量myfunc,它的初始值被赋予了一个function的实体。因此,typeof(myfunc)返回的也是function。其实,这两种函数的写法是等价的,除了一点细微差别,其内部实现完全相同。也就是说,我们写的这些JavaScript函数只是一个命了名的变量而已,其变量类型即为function,变量的值就是我们编写的函数代码体。
7、Object
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | 创建一个没有任何属性的对象: var o = {}; 创建一个对象并设置属性及初始值: var person = {name: “Angel”, age: 18, married: false }; 创建一个对象并设置属性和方法: var speaker = {text: “Hello World”, say: function(){alert( this .text)}}; 创建一个更复杂的对象,嵌套其他对象和对象数组等: var company = { name: “Microsoft”, product: “softwares”, chairman: {name: “Bill Gates”, age: 53, Married: true }, employees: [{name: “Angel”, age: 26, Married: false }, {name: “Hanson”, age: 32, Marred: true }], readme: function() {document.write( this .name + ” product ” + this .product);} }; |
再看下面的一段代码
1 2 3 4 5 6 | <script> function MyFunc(){}; var anObj = function(){ alert( "123" )}; MyFunc.call(anObj()); </script> |
Javascript中的DOM树
HTML元素为根元素,HEAD 和 BODY为兄弟元素,他们有自己的子元素。HEAD元素有两个子元素,分别为META 和 TITLE,其中前者比较重要,负责着HTML页面的编码方式等信息
BODY下面又包含很多子元素...... 为了更形象的描述这个现象,我们称之为节点树!节点的概念来自于网络理论,自然界中的任何事物都是有原子构成的,原子就是自然界的节点,
当然,原子又可以细分为原子核和核外电子,于是,原子核和核外电子也成为节点,只是更小的节点。
1 2 3 4 5 | <html> <div id= "myclass" > "hello,world" </div> </html> |
元素节点
构成DOM树的所有< ++ >元素都是元素节点。例如上面的h1,p,ul等
文本节点
嵌套在元素节点之内的被称为文本节点。例如<div>hello,world</div>中的"hello,world"被成为文本节点
属性节点
上面代码中的"id=myclass"被称为属性节点
并非所有的元素都会有属性,但是所有的属性都会被包含在元素内
下面介绍几个DOM树中几个比较重要的属性对象
childNodes
childNodes可以把一个元素下的所有的元素都给检索出来
nodeType:
元素节点的属性值——1
文本节点的属性值——3
属性节点的属性值——2
nodeValue
文本节点的值,注意我们不能通过搜索到文本节点后调用该属性,而必须通过包含该文本节点的元素节点来进行调用
动态创建HTML
(1) 使用document.write()进行写
(2) innerHtml进行读写
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" > <html> <head> <meta http-equiv= "content-type" content= "text/html;charset=utf-8" /> </head> <script> function test(){ var html= "<p>tell me?</p>" ; //插入文本 document.body.getElementsByTagName( ‘div‘ )[0].innerHTML=html; } </script> <body onl oad= "test()" > <div> hello </div> <div> world </div> </body> </html> |
(3)DOM提供方法
(3.1) createElement