文档章节

2014-06-29 Web-Front的学习(5)-----DOM学习及JavaScript的扩展

查封炉台
 查封炉台
发布于 2014/06/29 12:44
字数 1711
阅读 28
收藏 0

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







© 著作权归作者所有

共有 人打赏支持
查封炉台
粉丝 50
博文 56
码字总数 138491
作品 0
景德镇
程序员
私信 提问
为什么JavaScript是你应当学习的下一个(或第一个)编程语言

原文出处:dentedreality 译文出处:腊八粥 本文是翻译,版权归原作者所有 我已经被多次问到,如果我刚刚开始,我应当学习什么编程语言,答案一定是JavaScript,下面是为什么: 最简单的开发...

dentedreality
2014/12/02
0
0
从零开始学 Web 之 jQuery(一)jQuery的概念,页面加载事件

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

fengdaoting
07/04
0
0
Web、移动开发资源、开源工具整理

整理了一些Web、移动开发资料,开源工具,供需要的朋友们查阅: Web移动开发各类网站学习资源: 成为优秀的Web移动开发者:编程资源大全 成为优秀的Web移动开发者:前端开发学习资源集合 成为...

咲晚杍
2014/03/13
0
1
Ukulelejs 发布——羽量级JS Framework

什么是Ukulelejs 第一个Hello World Ukulelejs 目前提供的主要功能 为何起名叫Ukulelejs 不足之处,以及后续版本将要加入的功能 How to use 关于作者 更新日志 source code 什么是Ukulelejs...

熊丸子
2015/06/15
0
4
WebView动态注入JavaScript脚本

Demo地址:https://gitee.com/chenyangqi/YouMeDai 背景介绍 在Android与JavaScript交互一文中学习了原生和JS交互,但是如果我们想和别人开发好的web页面交互呢,很明显这个web端并没有为我们...

木头同学
08/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

开关电源拓扑图一览

colinux
13分钟前
0
0
Apache日志不记录访问静态文件,访问日志切割,静态元素过期时间设置

Apache配置不记录访问静态文件的日志 网站大多元素为静态文件,如图片、css、js等,这些元素可以不用记录 vhost原始配置 <VirtualHost *:80> ServerAdmin test@163.com DocumentRoo...

野雪球
今天
3
0
聊聊storm的ICommitterTridentSpout

序 本文主要研究一下storm的ICommitterTridentSpout ICommitterTridentSpout storm-core-1.2.2-sources.jar!/org/apache/storm/trident/spout/ICommitterTridentSpout.java public interface......

go4it
今天
4
0
Ubuntu常用操作

查看端口号 netstat -anp |grep 端口号 查看已使用端口情况 netstat -nultp(此处不用加端口号) netstat -anp |grep 82查看82端口的使用情况 查找被占用的端口: netstat -tln netstat -tl...

hc321
昨天
3
0
网站cdn的静态资源突然访问变的缓慢,问题排查流程

1.首先我查看了一下是否自己的网络问题,通过对比其他资源的访问速度和下载速度,确认不是 2.通过ping 和 tracert 判断cdn域名能否正常访问,(最后回想感觉这一步可以省略,因为每次最终能访...

小海bug
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部