javascript基础、DOM

来源：互联网发布：图片橡皮擦软件编辑：程序博客网时间：2024/05/16 11:36

Javascript和java的不同之处:

1 javascript是Netscape公司语言，基于对象和事件驱动，java是sun公司，现在是Orcacle公司

2 js是基于对象，java是面向对象

3 js是由浏览器解释并执行，java是由jvm解释并执行

4 js是弱类型的语言，java是强类型

5 js是非严谨的，java是严谨的，javascript运行在客户端

javascript基本语法：

1、变量

i. 通过var关键字定义变量，该变量可以赋予不同类型的常量

ii. var x=3;

iii. x=”abc”;

iv. 特殊的常量-àundefined

2、语句

i. If、switch、while、do、while、for

ii. 使用逻辑运算符进行布尔表达式连接的时候，需要是短路与和短路或&&、||

iii. 因为在js中，非0即为true，0为false，非null为true，null为false

iv. Js特有的语句：

v. with(对象){}：可以确定对象所使用的范围，在范围内，可以直接使用指定对象的属性和行为，而不需要用对象 .的形式调用。简化了对象的操作；

vi. for（变量 in对象）：可以对对象的属性及行为进行遍历；

3、数组

对于js的数组特点在于：该数组的长度是可变的，相对与java中的集合；

该数组中可以存放的元素类型是可以不同的

定义格式：

Var arr=[3,true,”abc”];

Var arr=new Array( );

Var arr=[[3,1,9],[3,4]];

操作形式和java一样，都是通过for进行遍历，同时也使用了指针思想

4、函数:通过function关键字定义函数

DOM:document object model----à文档对象模型

Dom三层模型：

Dom1:将html文档封装成对象

Dom2：将xml文档封装成对象

Dom3：将xml文档封装成对象

Dhtml：动态html

Html：将数据进行封装

Dom：将标签封装成对象

Css：负责标签中数据的样式

Javascript：将三个进行融合，通过程序设计方式来完成动态效果的操作；

xmlHttpRequest----àAJAX

dom其实就是将一些标记型的文档以及文档中的内容当成对象，因为可以在对象中定义其属性和行为，可以方便操作这些对象；

html、xhtml、xml：这些都是标记型文档；

DHTML：是多个技术的综合体，叫做动态的html；

标签之间存在着层次关系：

Html

|--head

|--title

|--base

|--link

|--meta

|--style

|--script

|--body

|--div

|--form

|--input

|--select

|--span

|--a

|--table

|--tbody

|--tr

|--td

|--th

|--dl

|--dt

|--dd

通过这个标签层次，可以形象的看做是一个树形结构，加载进内存的是一棵DOM树，这些标签以及标签的数据都是这棵树上的节点；

DOM对已标记型文档的解析有一个弊端就是文档过大，相对消耗资源；对于大型文档可以使用SAX方式解析；

节点之间的关系：父节点、子节点、兄弟节点（上一个兄弟节点--previousSibling、下一个兄弟节点--nextSibling）

获取可以通过节点的层次关系完成，也可以通过document对象完成

getElementById:通过id属性值获取对应的节点对象，如果有多个id值相同，获取到的是第一个id所属对象；

getElementsByName：通过标签的name属性值获取对象，返回的是一堆对象，其实是一个对象数组；

getElementByTagname：

实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

var str="";

function listNode(node,level)

{

printInfo(node,level);

level++;

var nodes=node.childNodes;

for(var x=0;x<nodes.length;x++)

{

if(nodes[x].hasChildNodes())

listNode(nodes[x],level);

else

printInfo(nodes[x],level);

}

function printInfo(node,level)

{

str+=getSpace(level)+"name:"+node.nodeName+"..type:"+node.nodeType+"..value:"+node.nodeValue+"<br/>"

document.write(str);

}

function getSpace(level)

{

var s="";

for(var x=0;x<level;x++)

{

s+="|--";

}

return s;

}

function getNodes()

{

listNode(document,0);

}

</script>

</head>

<body>

滚滚长江东逝水

</div>

<table>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>