javascript基础、DOM
2012-07-27 10:31
253 查看
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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
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>
<input type="button"value="演示" onclick="getNodes()"/>
<div id="divid">
滚滚长江东逝水
</div>
<table>
<tr>
<td>单元格一</td>
<td>单元格二</td>
</tr>
<tr>
<td>单元格一</td>
<td>单元格二</td>
</tr>
</table>
<a href="http://www.sina.com">新浪</a>
<span>石板区域</span>
</body>
</html>
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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
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>
<input type="button"value="演示" onclick="getNodes()"/>
<div id="divid">
滚滚长江东逝水
</div>
<table>
<tr>
<td>单元格一</td>
<td>单元格二</td>
</tr>
<tr>
<td>单元格一</td>
<td>单元格二</td>
</tr>
</table>
<a href="http://www.sina.com">新浪</a>
<span>石板区域</span>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Javascript DOM基础
- 【JavaScript】DOM基础
- 由浅入深JavaScript8基础-Dom表格基础
- javascript中Dom的一些基础应用
- 前端连载~：javascript基础已经学好，下一个阶段是dom
- JavaScript基础篇(三)— — DOM事件揭秘
- javascript学习笔记(七)－－DOM基础
- 黑马程序员_java基础笔记(09)...HTML基本知识、CSS、JavaScript、DOM
- JavaScript基础语法、dom操作树及document对象
- JavaScript DOM基础
- JavaScript学习笔记之DOM基础 2.4
- JavaScript基础（DOM）-Document对象、Element 对象、Attribute 对象 -JavaScript的内置对象（Array 对象、Date 对象、String 对象）
- Javascript基础（4）事件的监听 及 传递、DOM添加元素
- JavaScript基础—dom,事件
- javascript基础部分（四）DOM和内置对象
- javascript实现DOM（基础）
- javascript基础（Dom查询练习）（二十七）
- JavaScript学习7：DOM基础
- javascript基础二JavaScript DOM编程
- 你不知道的JavaScript--Item32 DOM基础详解2