文档章节

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

查封炉台
 查封炉台
发布于 2014/06/29 12:44
字数 1711
阅读 26
收藏 0
点赞 0
评论 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样式.很多详情细微之处,就没有列举出来。我一不懂时,就直接翻阅文档。文档中介绍和概括的比较全面。







© 著作权归作者所有

共有 人打赏支持
查封炉台
粉丝 49
博文 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
第一章--JavaScript简介

1. JavaScript的构成 1.1. ECMAScript ECMAScript规定了核心语言的组成部分分别为:语法、类型、语句、关键字、保留字、操作符、对象。 宿主环境:Web浏览器、Node、Adobe Flash。 1.2. DOM...

lovewt
06/05
0
0
DOM系列:浏览器与DOM 主标签

最近回过头来在学习JavaScript中的DOM知识,随着学习进度的向前推移,越发感觉DOM知识点较多。为了能更好的系统了解清楚DOM相关的知识,我打算重新将DOM的学习划入到DOM系列当中。那么今天将...

一个敲代码的前端妹子
05/28
0
0
WEB前端学习JS灵魂之问:JS为什么是单线程的?

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰
05/27
0
0
javascript学习资料分享

有志于web前端工作的话,javascript的知识是必不可少的。越学,我越觉得自己所欠缺的越多。路漫漫其修远兮,吾将上下而求索。下面将一些好的资料分享给大家。 JavaScript学习资料: (1)遇见...

小微
2012/04/06
0
5
前端学习之路(从入门到入坑...)

学习前端两年多了,拿了阿里巴巴实现offer,想结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限,不能保证面面俱到,只是作为入门参考...

阿小庆
06/14
0
0
WEB前端学习javascript学习笔记

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰
05/25
0
0
零基础的网站开发初学者如何系统的学习?

A.学习背景 开始网站开发,起先是从手机网站的UBB语法开始的,也因此有了深入学习的兴趣。为了让学习的热情膨胀,我有意的培养这一爱好 ,定位了自己要成为一名优秀的网站开发员的目标。 作为...

李佳顺
2012/12/25
0
3

没有更多内容

加载失败,请刷新页面

加载更多

下一页

istio源码分析之pilot-discovery模块分析

本文分析的istio代码版本为0.8.0,commit为0cd8d67,commit时间为2018年6月18日。 本文为Service Mesh深度学习系列之一: Service Mesh深度学习系列part1—istio源码分析之pilot-agent模块分...

xiaomin0322
3分钟前
0
0
数据库基本操作:增删改查及联表操作

所用软件:SQL Server Management Studio 首先第一步,建立一个表。在这里命名为T1。并在里面填入几条数据。如图: T1 一.查询 查询所有:select * from T1; 按条件查询:select * from T1 ...

小_橙_子
7分钟前
0
0
Crontab作业时间设置

今天,遇到这么一个题目,周一到周五的9:00-16:59之间,每隔两分钟将某个命令运行一次。给的答案是: */2 9-16 * * 1-5 /usr/sbin/somecommand dosomething 乍一看,这个答案不对,应...

大别阿郎
11分钟前
0
0
ES17-JAVA API文档管理

1.保存文档 可以通过json工具把java对象转换成json字符串进行保存,也可以通过内置的帮助类直接构建json格式 /** * 获取客户端 * * @return */public static TransportClie...

贾峰uk
12分钟前
0
0
Python代码规范和命名规范

前言 Python 学习之旅,先来看看 Python 的代码规范,让自己先有个意识,而且在往后的学习中慢慢养成习惯 一、简明概述 1、编码 如无特殊情况, 文件一律使用 UTF-8 编码 如无特殊情况, 文件头...

blackfoxya
15分钟前
0
0
联动滑动之一:NestScrollChild和NestedScrollingParent

NestScrollChild和NestedScrollingParent 吐槽一下开源中国竟然标题字数有限制 由于项目中使用了CoordinateLayout来解决联动以及实现炫酷的UI效果,那么必须就要研究一波源码了,毕竟知其然知...

JerryLin123
32分钟前
1
0
cloudera spark2.2 读写hbase

cloudera spark2.2 读写hbase 例子 host = 'bigdata-03,bigdata-05,bigdata-04'conf = { "hbase.zookeeper.quorum": host, "hbase.mapreduce.inputtable": "student1"}k......

osenlin
37分钟前
0
0
数据库规范化

转载自 一个小时学会MySQL数据库 地址:http://www.cnblogs.com/best/p/6517755.html 截取其中 1.4 部分 用于自己学习使用 感谢作者:张果 1.4、数据库规范化 经过一系列的步骤,我们现在终于...

十万猛虎下画山
38分钟前
0
0
ios逆向之工具篇

Reveal:查看任意app的UI结构 注:1.不越狱的手机,可以用Reveal来查看自己app的UI结构,不能查看其它app的结构。 2.越狱手机上可以查看任意app的UI结构。 IDA:反编译工具 从App Store下载的...

HeroHY
38分钟前
0
0
EOS区块链平台智能合约示例HelloWorld

我们将介绍一个使用EOS智能合约构建hello World的例子。 一般环境设置通过上一篇文章已经说明,这方面的问题大家可以看本博客上一篇文章,本文引用了官方EOS在Git上的示例。 运行nodeos 要通...

笔阁
40分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部