文档章节

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

查封炉台
 查封炉台
发布于 2014/06/29 12:44
字数 1711
阅读 29
收藏 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
2018/07/04
0
0
Web、移动开发资源、开源工具整理

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

咲晚杍
2014/03/13
0
1
10 个你需要了解的最佳 javascript 开发实践

原文:Top 10 “Must Follow” JavaScript Best Practices Javascript 的很多扩展的特性是的它变得更加的犀利, 同时也给予程序员机会创建更漂亮并且更让用户喜欢的网站。 尽管很多的开发人员...

justjavac
2013/10/15
679
1
Ukulelejs 发布——羽量级JS Framework

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

熊丸子
2015/06/15
0
4

没有更多内容

加载失败,请刷新页面

加载更多

tac 与cat

tac从后往前看文件,结合grep使用

writeademo
51分钟前
2
0
表单中readonly和dsabled的区别

这两种写法都会使显示出来的文本框不能输入文字, 但disabled会使文本框变灰,而且通过通过表单提交时,获取不到文本框中的value值(如果有的话), 而readonly只是使文本框不能输入,外观没...

少年已不再年少
今天
2
0
SpringBoot上传图片操作

首先有个上传文件的工具类 /** * 文件上传 * @param file * @param filePath * @param fileName * @throws Exception */public static void uploadFile(byte[] file, String ...

_liucui_
今天
6
0
DrawerLayout

public class MainActivity extends BaseActivity implements NavigationView.OnNavigationItemSelectedListener,OnFragmentInteractionListener{ public NavigationView navView; ......

安卓工程师王恒
今天
2
0
python精简笔记

python精简笔记-字符串基本用法 字符串常见用法: * encode() # 编码成bytes类型 * find() # 查找子串 * index() # 获取下标 * replace() # 替换子串 * len(string) # 返回字符串长度,...

平头哥-Enjoystudy
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部