2014-06-29 Web-Front的学习(5)-----DOM学习及JavaScript的扩展
1.DOM基本概述
Document Object Model,文档对象模型,是W3C织制订的一套用于访问XML和HTML文档的标准.允许脚本动态地访问和更新文档的内容、结构和样式.总共分为三类:
DOM Core
XML DOM
HTML DOM
DOM总体知识点图:
2.HTML DOM和XML DOM的关系
XML DOM 定义了访问和处理 XML 文档的标准方法
HTML文档格式 符合XML语法标准，所以可以使用XML DOM API
在XML DOM每个元素 都会被解析为一个节点Node，而常用的节点类型又分为
元素节点 Element
属性节点 Attr
文本节点 Text
文档节点 Document
HTML DOM 定义了针对 HTML文档的对象，可以说是一套 更加适用于 JavaScript 技术开发 的API
HTML DOM是对XML DOM的扩展
进行 JavaScript DOM开发 可以同时使用 XML DOM和 HTML DOM
3.BOM和HTML DOM的关系
4.DOM中Node对象的介绍
Node对象是整个 DOM 的主要数据类型。 节点对象代表文档树中的一个单独的节点。 节点可以是元素节点、属性节点、文本节点，或者也可以是“节点类型”那一节中所介绍的任何一种节点。 请注意，虽然所有的对象均能继承用于处理父节点和子节点的属性和方法，但是并不是所有的对象都拥有父节点或子节点。例如，文本节点不能拥有子节点，所以向类似的节点添加子节点就会导致DOM错误。
参考到文档API可得:
5.DOM中有关于节点的操作
DOM获取节点
1.getElementById()返回对拥有指定 id 的第一个对象的引用 2.getElementsByName()返回带有指定名称的对象集合 3.getElementsByTagName()返回带有指定标签名的对象集合 获取节点之后:nodeValue 属性用于获取节点的文本值。 getAttribute() 方法返回属性的值。
DOM删除节点
DOM改变节点
DOM替换节点
DOM创建节点
DOM克隆节点
DOM HttpRequest
6.JavaScript模拟类
定义类并创建类的实例对象
定义公有属性和私有属性
定义公有方法和私有方法
静态属性和静态方法
构造函数（无参，有参）
原型方式声明属性与方法
直接用Object或函数对象加属性与方法
<script type="text/javascript">
//1.定义类并创建类的实例对象
/* function Person(){
//定义私有属性
var name="itheima";
//定义公有属性
this.age="6";
//定义私有方法
var showInfo = function showInfo(){
// alert(name+","+this.age); //!!私有方法不能调用类的公有属性
alert(name);
}
//在类中调用私有方法
//showInfo();
// --------------------------------
//定义公有方法
this.showInfo = function showInfo(){
alert(name+","+this.age); //访问类中的私有属性和公有属性
//this.showInfo();//会产生递归,无限循环.调用的是公有的showInfo()方法
}
}*/
// var person = new Person();
// alert(person.age); //可以直接访问公有属性 6
//alert(person.name); //不能直接访问私有属性 undefined
//调用类的方法的相关概念:
// person.showInfo(); //网页错误详细信息: 对象不支持此属性或方法 1.类的对象实例不能直接调用类的私有方法
// person.showInfo(); //2.在类的外面可以直接调用类的公有方法
//------------------静态属性与静态方法----------------------------------------------------------
/* function Person(){
this.name="itcast";
}
//定义静态属性
Person.age=6;
var person = new Person();*/
//alert(person.age); //undefined.类的实例对象不能直接访问类的静态属性.
//alert(Person.age); //6.直接使用类名访问类的静态属性.
//定义类的静态方法
// Person.showInfo = function showInfo(){
// alert(this.name+","+Person.age); //undefined,6 在类的静态方法中不能访问类的公有属性.
// alert(Person.age);
//}
//Person.showInfo();
//alert(person.name+","+Person.age);
// ------------------构造方法------------------------------------------------------------
/*
function Person(){
this.name="itcast";
this.age=6;
}
function Person(name,age){
this.name=name;
this.age=age;
}
//var person = new Person();
//alert(person.name+","+person.age); //undefined,undefined.
var person = new Person("itcast",5);
alert(person.name+","+person.age); //itcast,5
*/
//------------------原型方式声明属性与方法------------------------------------
/*
function Car(){
}
Car.prototype.color="blue";
Car.prototype.doors = 4;
Car.prototype.showColor = function showColor(){
alert(this.color);
}
var car = new Car();
car.showColor();*/
//----------------直接用Object对象或函数对象加属性与方法-----------------------
/*
var oCar = new Object();
oCar.color = "blue";
oCar.doors = 4;
oCar.mpg = 25;
oCar.showColor = function() {
alert(this.color);
};
oCar.showColor();*/
//---------------定义一个类常用的格式---------------------------------------
/*
function Person(name,age){
this.name = name;
this.age = age;
this.showInfo= function (){
}
}
*/
//----------------JSON数据---------------------------------------------
//json主要作用是一种当前最流行的数据交换格式 1.解析方便 2.数据量比较小
//json对象
/*var jsonObj = {
name:"itcast",
age:6,
description:"very good",
showInfo:function(){
alert(this.description+","+this.name+","+this.age);
}
};
jsonObj.showInfo();*/
//json数组对象
/*
var jsonObjs = [
{name:"itcast",
age:6,
description:"very good",
showInfo:function(){
alert(this.description+","+this.name+","+this.age);
}},
{name:"itcast2",
age:7,
description:"very good2",
showInfo:function(){
alert(this.description+","+this.name+","+this.age);
}},
{name:"itcast3",
age:8,
description:"very good3",
showInfo:function(){
alert(this.description+","+this.name+","+this.age);
}}
];
jsonObjs[1].showInfo();*/
//---------------------------继承-------------------------------------------
//要使用类的原型来进行模拟面向对象的继承
/*function Person(){
this.name="itheima";
this.age=4545;
this.showInfo = function showInfo(){
alert("hello");
}
}
function Student(){
this.sex = "male"
}
var person = new Person();
Student.prototype = person;
var student = new Student();
//alert(student.name+","+student.age+","+student.sex);
student.showInfo();
//重写父类方法
Student.prototype.showInfo = function showInfo(){
alert(this.name+","+this.age+","+this.sex)
}
student.showInfo();*/
//------------------实现javascript中的重载--------------------------
/*
function add1(x){
return x;
}
function add2(x,y){
return x+y;
}
function add3(x,y,z){
return x+y+z;
}
function add4(x,y,z,p){
return x+y+z+p;
}
function add(){
if(arguments.length==0){
alert("不支持无参的操作");
}else if(arguments.length==1){
return add1(arguments[0]);
}else if(arguments.length==2){
return add2(arguments[0],arguments[1]);
}else if(arguments.length==3){
return add3(arguments[0],arguments[1],arguments[2]);
}else if(arguments.length==4){
return add4(arguments[0],arguments[1],arguments[2],arguments[3]);
}else{
alert("不支持4个以上的参数重载");
}
}
//alert(add(45,86));
//alert(add(45,86,1));
//alert(add(45,86,1,1));
//alert(add());
//alert(add(4));
alert(add(45,86,1,1,5));*/
//------------------with语句与for..in语句-----------------------------------------
/*with语句
with(对象)
{
//直接写属性或方法
}*/
/*
function Person(){
this.name="itcast";
this.age=19;
this.showInfo = function showInfo(){
alert(this.name+","+this.age);
}
}
var person = new Person();
with(person){
alert(name);
alert(age);
showInfo();
}*/
//---------------------for....in-------------------------
/*
for...in语句
用于遍历对象属性。
*/
function Person(){
this.name="itcast";
this.age=19;
this.showInfo = function showInfo(){
alert(this.name+","+this.age);
}
}
var person = new Person();
for(var i in person){
if(person[i] instanceof Function){
person[i]();
}else{
alert(person[i]);
}
}
</script>
至此,网页前端的基础知识部分总结完毕..以后将学习JQuery,Ajax等前端技术.总结：关于网页前端技术开发,基础上主要是JavaScript操作HTML节点与CSS样式.很多详情细微之处,就没有列举出来。我一不懂时,就直接翻阅文档。文档中介绍和概括的比较全面。