JS_DOM

来源：互联网发布：linux apache ab 安装编辑：程序博客网时间：2024/06/05 23:47

一什么是DOM

Dom是document object model 文档对象模型

是W3C组织制定的一套用于访问XML和HTML文档的标准。允许脚本动态地访问和更新文档内容、结构和样式。

二 DOM有什么作用

它的作用是将一个xml/html转化成文档对象。从而可以用对象的属性或方法操作html/xml标签。

三 DOM的种类

DOM CORE - 针对任何结构化文档的标准模型

XML DOM - 针对 XML 文档的标准模型

HTML DOM - 针对 HTML 文档的标准模型

什么是 XML DOM？

XML DOM 是：

用于 XML 的标准对象模型和标准编程接口可跨平台和语言。XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法（接口）。

换句话说：XML DOM 是用于获取、更改、添加或删除 XML 元素的标准。

什么是 HTML DOM？

HTML DOM 是：

HTML 的标准对象模型和标准编程接口。HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

四 XML介绍

XML：eXtensible Markup Language 可扩展标记语言

它用来标记数据、定义数据类型，允许用户自己定义标签结构的源语言，非常适合万维网传输，提供统一的方法来描述和交换独立于应用程序或供应商的结构化数据。

五 DOM详解(HTML和XML)

1 DOM树概念

Dom是将一个文档(HTML/XML)解析成一个document对象，该document是一个倒置的树形结构。

2 DOM树节点分类

元素节点=============1

文本节点=============2

属性节点=============3

节点的信息：

nodeName 标签名，属性名 #text # document

nodeType 节点类型

nodeValue 属性值，文本值，元素不可用

3 DOM树节点属性

取当前节点的父节点：parentNode

取所有子节点：childNodes

取第一个子节点：firstChild

取下一个子节点：nextSibling

取上一个子节点：previousSibling

取最后一个子节点：lastChild

4 DOM树的CRUD操作

1）添加节点

//创建元素节点，并给元素节点添加属性

Var ele = document.createElement(“”);

ele.setAttribute(“type”,”file”);

//创建文本节点

Var textnode = document.createTextNode(“”);

//为元素节点添加文本内容

Ele.appendChild(textnode);

2）更新节点

oldNode.replaceNode(newNode);

parentNode.replaceChild(newNode,oldNode);

3）删除节点

parentNode.removeChild(childNode);

4）查找节点

document.getElementById(“id”);

-------返回的是对象

document.getElementsByName(“name”);

----------返回的是对象数组

document.getElementsByTagName(“tagname”);

-----------返回的是对象数组

六 JavaScript扩展

1私有属性

用var声明，私有属性不能通过对象名来实现输出。

Function Person(){

Var name=”user”;

Var age = 33;

}

Var p = new Persoon();

Alert(p.name);//无法输出想要的内容，输出为undefined

2公有属性

公有属性用this来声明

Function Person(){

This.name = “user”;

This.age = 33;

}

Var p = new Person();

Alert(p.name+”,”+p.age);//可以正常打印

3私有及公有方法

私有方法用var声明

Function Person(){

Var name = “user”;

Var age = 33;

Var show = function(){

Alert(name+”,”+age);

}

Var p = new Person();

p.show();//无法输出

公有方法用this声明

Function Person(){

this name = “user”;

This age = 33;

this show = function(){

Alert(name+”,”+age);

}

Var p = new Person();

p.show();//可以打印

/*另外一种情况*/

Function Person(){

Var name = “user”;

Var age = 33;

Var show = function(){

Alert(name+”,”+age);

}

This.show = function(){

Show();//这时候调用的是私有方法

}

Var p = new Person();

p.show();//可以正常输出

4静态属性与静态方法

1类名.属性名或方法名定义

2访问也是类名.属性名或方法名

3不能用对象调用

VarPerson = function(){

}

Person.name = “user”;

Person.age=20;

Person.show = function(){

Alert(“static method is invoked”);

}

5构造方法

1 无参构造

Function Person(){

This.show = function(){

//code

Alert(“实现功能”);

}

2 有参构造

Function Person(name,age){

This.name = name;

This.age = age;

This.show = function(){

//code

Alert(this.name+”,”+this.age);

}

6原型方式声明属性方法

1直接原型声明属性和方法

//相当于给Array添加了一个查找最大元素的方法

Array.prototype.getMax = function(){

Var max = this[0];

For(vari=1;i<thi.length,i++){

If(this[i]>max){

max = this[i];

}

Return max;

}

//调用时直接用array.getMax()即可。

/**

* prototype适合做扩展，不适合在自己定义的类中使用

*例如扩展类库，Js内置对象等。只适合扩展方法。

**/

2为引用类型赋值出问题

当第一个引用对象对该类属性进行操作之后，以后再声明的对象引用中涉及的值全部发生变化。例：

Function Person(){}//定义一个空类，然后使用prototype扩展

Person.protype.arr = [“aa”,”bb”,”cc”];

Var p1 = new Person();

P1.arr.push(“dd”);//使用p1对Person的arr属性进行push操作。

Alert(p1.arr);//输出结果是aa,bb,cc,dd

Var p2 = new Person();

Alert(p2.arr);//输出结果也是aa,bb,cc,dd

//如果要解决这个问题，请将属性放到类内部

Function Person(){

This..arr = [“aa”,”bb”,”cc”];

}

3有参构造与原型结合一起用

Function Person(){

This.name=”aa”;

This.age=31;

}

Person.prototype.showInfo = function(x){

//方法体内容

}

7 Javascript的继承/重载/重写

1重载

Arguments.length实现重载

Varargs = Arguments.length;

If(args == 3){

Add(x,y,z);

}else{

Add(x,y);

}

2继承

Prototype实现继承

Function Person (name,age){

This.name = name;

This.age = age;

}

Function Student(score){

This.score=score();

}

Var p = new Person(“aa”,31);

Student.prototype = p;//实现了student继承了preson

8 Javascript中的Json数据格式

Var score = [

{name:”aa”,subject:”语文”,score:90},

{name:”bb”,subject:”语文”,score:75}

];

_______________________________________________________________________________

加强for循环：1

使用for( varcityname in citylist){

//cityname就是citylist的下标

}

0 0