2014-06-29 Web-Front的学习(5)-----DOM学习及JavaScript的扩展
2014-06-29 Web-Front的学习(5)-----DOM学习及JavaScript的扩展
查封炉台 发表于3年前
2014-06-29 Web-Front的学习(5)-----DOM学习及JavaScript的扩展
  • 发表于 3年前
  • 阅读 17
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云实验室 1小时搭建人工智能应用,让技术更容易入门 免费体验 >>>   

摘要: 文件对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”,双方为了在JavaScript与JScript一决生死,于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物,计有VBScript、ActiveX、以及微软自家的DHTML格式等,使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。

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样式.很多详情细微之处,就没有列举出来。我一不懂时,就直接翻阅文档。文档中介绍和概括的比较全面。







共有 人打赏支持
粉丝 49
博文 56
码字总数 138491
×
查封炉台
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: