首页 > 编程知识 正文

javascript文档对象的简单介绍

时间:2023-12-09 14:12:25 阅读:313463 作者:KDWB

本文目录一览:

  • 1、Javascript 怎么创建File对象
  • 2、在javascript里document的作用
  • 3、javascript基础部分三大核心是什么意思
  • 4、JavaScript是什么类型语言?
  • 5、JS中document对象和window对象的区别
  • 6、JavaScript入门教程(9) Document文档对象

Javascript 怎么创建File对象

1、对已有对象进行扩充方法和属性

 var object = new Object();

    object.name = "zhangsan";//每个对象需要写这些语句

    object.sayName = function(name){//每个对象需要写这些语句

        this.name = name;

    };

    object.sayName("lisi");

    alert(object.name);

2、工厂方式创建对象

 function createObject() {

        var object = new Object();

        object.username = "zhangsan";

        object.password = "123456";

        object.get = function(){

            alert(this.username + "," + this.password);

        }

        return object;

    }

    var object1 = createObject();

    var object2 = createObject();

    object1.get();

    object2.get();

    // 带参数的构造方法

    function createObject(username, password){

        var object = new Object();

        object.username = username;

        object.password = password;

        object.get = function(){//缺点是,多少个对象则方法就有多少个

            alert(this.username + ", " + this.password);

        }

        return object;

    }

    var object1 = createObject("zhangsan",123456);

    object1.get();

    // 最佳改进方式

    function get(){//使该函数被多个对象共享

        alert(this.username + ", " + this.password);

    }

    function createObject(username, password){//创建对象

        var object = new Object();

        object.username = username;

        object.password = password;

        object.get = get;

        return object;

    }

    var object1 = createObject("zhangsan", "123456");

    var object2 = createObject("wangwu", "654321");

    object1.get();

    object2.get();

3、构造函数方式创建对象

 function Person(){

        //在执行第一行代码欠,js引擎会为我们生成一个对象

        this.username = "zhangsan";

        this.password = "123";

        this.getInfo = function(){

            alert(this.username + ", " + this.password);

        }

        //此处有一个隐藏的return语句,用于将之前生成对象返回。

    }

    var p1 = new Person();

    p1.getInfo();

    //带参数

    function Person(username, password){

        this.username = username;

        this.password = password;

        this.getInfo = function(){

            alert(this.username + ", " + this.password);

        }

    }

    var p1 = new Person("zhangsan","1234546");

    p1.getInfo();

4、原型(“prototype”)方式

function Person(){}

    Person.prototype.username = "zhangsan";

    Person.prototype.password = "123456";

    Person.prototype.getInfo = function(){

        alert(this.username + ", " + this.password);

    }

    var person = new Person();

    var person2 = new Person();

    person.username = "haha";

    person.getInfo();

    person2.getInfo();

    //单纯使用原型方式定义对象无法在构造函数中为属性赋值,只能在对象生成后再去改变属性值

    function Person(){}

    Person.prototype.username = new Array();

    Person.prototype.password = "123456";

    Person.prototype.getInfo = function(){

        alert(this.username + ", " + this.password);

    }

    var person = new Person();

    var person2 = new Person();

    person.username.push("zhangsan");

    person.username.push("lisi");

    person.password = "321";

    person.getInfo();

    person2.getInfo();

5、综合方式(原型+构造函数方式搭配)

  function Person(){

        this.username = new Array();//不被多个对象共享

        this.password = "123";

    }

    Person.prototype.getInfo = function()//被多个对象共享

    {

        alert(this.username + "," + this.password);

    }

    var p1 = new Person();

    var p2 = new Person();

    p1.username.push("zhangsan");

    p2.username.push("lisi");

    p1.getInfo();

    p2.getInfo();

6、动态原型方式

    function Person(){

        this.username = "zhangsan";

        this.password = "123";

        //通过标志量让所有的对象共享方法

        if(typeof Person.flag == "undefined"){

            alert("prototype");

            Person.prototype.getInfo = function() {

                alert(this.username + ", " + this.password);

            }

            Person.flag = true;

        }

    }

    var p = new Person();

    var p2 = new Person();

    p.getInfo();

    p2.getInfo();

在javascript里document的作用

document 是一个文档对象,使用 document 对象可以对 HTML 文档进行检查、修改或添加内容,并处理该文档内部的事件。浏览器打开一个 HTML 文档时,该文档就成了一个 document 对象,Document 对象使我们可以对 HTML 页面中的所有元素进行访问。它是window对象的一部分,可用window.document,往往省略window。

Document对象是文档数的根节点,documentElement属性是文档的根元素。

Document节点可以有其他子节点(比如Comment及DocumentType节点),不过它只有一个保存文档所有内容的Element子节点。

大多数情况下获取一个Document对象的方法是通过窗口的document属性。Document对象也可以通过IFrame元素的contentDocument属性或任意节点的ownerDocument属性获取。

Document对象的大多数属性提供了对文档元素或其他与文档相关的重要对象的访问,一些Document方法做同样的事:提供一个方法在文档书中查找元素。许多其他Document方法是创建元素及相关对象的“工厂方法”。

可以使用DOMImplementation的createDocument()和createHTMLDocument()方法来生成一个新的Document对象:

docment.implementation.createHTMLDocumen("New Doc");

javascript基础部分三大核心是什么意思

ECMAScript、DOM、BOM

JavaScript的三大组成部分是:

1、ECMAScript:JavaScript的核心,描述了语言的基本语法(var、for、if、array等)和数据类型(数字、字符串、布尔、函数、对象(obj、[]、{}、null)、未定义),ECMAScript是一套标准,定义了一种语言(比如JS)是什么样子。

2、文档对象模型(DOM):DOM(文档对象模型)是 HTML 和 XML 的应用程序接口(API)。DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生物。请考虑下面的 HTML 页面:

html

head

titleSample Page/title

/head

body

phello world!/p

/body

/html

这段代码可以用 DOM 绘制成一个节点层次图:DOM 通过创建树来表示文档,从而使开发者对文档的内容和结构具有空前的控制力。用 DOM API 可以轻松地删除、添加和替换节点(getElementById、childNodes、appendChild、 innerHTML)。

3、浏览器对象模型(BOM)对浏览器窗口进行访问和操作。例如弹出新的浏览器窗口,移动、改变和关闭浏览器窗口,提供详细的网络浏览器信息(navigator object),详细的页面信息(location object),详细的用户屏幕分辨率的信息(screen object),对cookies的支持等等。

JavaScript是什么类型语言?

javascrip

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

在1995年时,由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

为了取得技术优势,微软推出了JScript,CEnvi推出ScriptEase,与JavaScript同样可在浏览器上运行。为了统一规格,因为JavaScript兼容于ECMA标准,因此也称为ECMAScript。

组成部分

ECMAScript,描述了该语 javascript组成 ,言的语法和基本对象。

文档对象模型(DOM),描述处理网页内容的方法和接口。

浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口。

基本特点

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

是一种解释性脚本语言(代码不进行预编译)。

主要用来向HTML(标准通用标记语言下的一个应用)页面添加交互行为。

可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。

跨平台特性,在绝大多数浏览器的支持下,可以在多种平台下运行(如Windows、Linux、Mac、Android、iOS等)。

Javascript脚本语言同其他语言一样,有它自身的基本数据类型,表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方,表达式则可以完成较复杂的信息处理。

日常用途

1.嵌入动态文本于HTML页面。

2.对浏览器事件做出响应。

3.读写HTML元素。

4.在数据被提交到服务器之前验证数据。

5.检测访客的浏览器信息。

6.控制cookies,包括创建和修改等。

7.基于Node.js技术进行服务器端编程。

历史

它最初由Netscape的Brendan Eich设计。JavaScript是甲骨文公司的注册商标。Ecma国际以JavaScript为基础制定了ECMAScript标准。JavaScript也可以用于其他场合,如服务器端编程。完整的JavaScript实现包含三个部分:ECMAScript,文档对象模型,浏览器对象模型。

Netscape在最初将其脚本语言命名为LiveScript,后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的,目的之一就是“看上去像Java”,因此语法上有类似之处,一些名称和命名规范也借自Java。但JavaScript的主要设计原则源自Self和Scheme。JavaScript与Java名称上的近似,是当时Netscape为了营销考虑与Sun微系统达成协议的结果。为了取得技术优势,微软推出了JScript来迎战JavaScript的脚本语言。为了互用性,Ecma国际(前身为欧洲计算机制造商协会)创建了ECMA-262标准(ECMAScript)。两者都属于ECMAScript的实现。尽管JavaScript作为给非程序人员的脚本语言,而非作为给程序人员的脚本语言来推广和宣传,但是JavaScript具有非常丰富的特性。

现在很多小伙伴喜欢在互联网上找视频资料学习javascript,但是光看视频你是不可能学会javascript的,没有人指导你,而且很多视频已经过时了 并没有什么用!  如果你真的想学习javascript这门技术,你可以来这个群,前面是5柒3,中间是82〇,最后是49〇, 在这里有最新的javascript课程 免费学习 也有很多人指导你 进步 不需要你付出什么 只要你有一颗学习的心就可以了 不是愿意学习或者自认不需要学习的就不要加了。

发展初期,JavaScript的标准并未确定,同期有Netscape的JavaScript,微软的JScript和CEnvi的ScriptEase三足鼎立。1997年,在ECMA(欧洲计算机制造商协会)的协调下,由Netscape、Sun、微软、Borland组成的工作组确定统一标准:ECMA-262。

特性

JavaScript脚本语言具有以下特点:

(1)脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。

(2)基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。

(3)简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。

(4)动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。

(5)跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支 持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。[3]

不同于服务器端脚本语言,例如PHP与ASP,JavaScript主要被作为客户端脚本语言在用户的浏览器上运行,不需要服务器的支持。所以在早期程序员比较青睐于JavaScript以减少对服务器的负担,而与此同时也带来另一个问题:安全性。

而随着服务器的强壮,虽然程序员更喜欢运行于服务端的脚本以保证安全,但JavaScript仍然以其跨平台、容易上手等优势大行其道。同时,有些特殊功能(如AJAX)必须依赖Javascript在客户端进行支持。随着引擎如V8和框架如Node.js的发展,及其事件驱动及异步IO等特性,JavaScript逐渐被用来编写服务器端程序。

JS中document对象和window对象的区别

简单来说,document是window的一个对象属性。

Window 对象表示浏览器中打开的窗口。

如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。

所有的全局函数和对象都属于Window 对象的属性和方法。

document 对 Document 对象的只读引用。

[window对象]

它是一个顶层对象,而不是另一个对象的属性,即浏览器的窗口。

属性

defaultStatus 缺省的状态条消息

document 当前显示的文档(该属性本身也是一个对象)

frame 窗口里的一个框架((FRAME)(该属性本身也是一个对象)

frames array 列举窗口的框架对象的数组,按照这些对象在文档中出现的顺序列出(该属性本身也是一个

对象)

history 窗口的历史列表(该属性本身也是一个对象)

length 窗口内的框架数

location 窗口所显示文档的完整(绝对)URL(该属性本身也是一个对象)不要把它与如document.location

混淆,后者是当前显示文档的URL。用户可以改变window.location(用另一个文档取代当前文档),但却不能改变

document.location (因为这是当前显示文档的位置)

name 窗口打开时,赋予该窗口的名字

opener 代表使用window.open打开当前窗口的脚本所在的窗口(这是Netscape Navigator 3.0beta 3所引

入的一个新属性)

parent 包含当前框架的窗口的同义词。frame和window对象的一个属性

self 当前窗口或框架的同义词

status 状态条中的消息

top 包含当前框架的最顶层浏览器窗口的同义词

window 当前窗口或框架的同义词,与self相同

方法

alert() 打开一个Alert消息框

clearTimeout() 用来终止setTimeout方法的工作

close() 关闭窗口

confirm() 打开一个Confirm消息框,用户可以选择OK或Cancel,如果用户单击OK,该方法返回true,单击

Cancel返回false

blur() 把焦点从指定窗口移开(这是Netscape Navigator 3.0 beta 3引入的新方法)

focus() 把指定的窗口带到前台(另一个新方法)

open() 打开一个新窗口

prompt() 打开一个Prompt对话框,用户可向该框键入文本,并把键入的文本返回到脚本

setTimeout() 等待一段指定的毫秒数时间,然后运行指令事件处理程序事件处理程序

Onload() 页面载入时触发

Onunload() 页面关闭时触发

[document 对象]

该对象是window和frames对象的一个属性,是显示于窗口或框架内的一个文档。

属性

alinkColor 活动链接的颜色(ALINK)

anchor 一个HTMI锚点,使用A NAME=标记创建(该属性本身也是一个对象)

anchors array 列出文档锚点对象的数组(A NAME=)(该属性本身也是一个对象)

bgColor 文档的背景颜色(BGCOLOR)

cookie 存储于cookie.txt文件内的一段信息,它是该文档对象的一个属性

fgColor 文档的文本颜色(BODY标记里的TEXT特性)

form 文档中的一个窗体(FORM)(该属性本身也是一个对象)

forms anay 按照其出现在文档中的顺序列出窗体对象的一个数组(该属性本身也是一个对象)

lastModified 文档最后的修改日期

linkColor 文档的链接的颜色,即BODY标记中的LINK特性(链接到用户没有观察到的文档)

link 文档中的一个A HREF=标记(该属性本身也是一个对象)

links array 文档中link对象的一个数组,按照它们出现在文档中的顺序排列(该属性本身也是一个对象)

location 当前显示文档的URL。用户不能改变document.location(因为这是当前显示文档的位置)。但是,

可以改变 window.location (用其它文档取代当前文档)window.location本身也是一个对象,而

document.location不是对象

referrer 包含链接的文档的URL,用户单击该链接可到达当前文档

title 文档的标题((TITLE)

vlinkColor 指向用户已观察过的文档的链接文本颜色,即BODY标记的VLINK特性

方法

clear 清除指定文档的内容

close 关闭文档流

open 打开文档流

write 把文本写入文档

writeln 把文本写入文档,并以换行符结尾

区别:1、window 指窗体。document指页面。document是window的一个子对象。

2、用户不能改变 document.location(因为这是当前显示文档的位置)。但是,可以改变window.location (用其它文档取代当前文档)window.location本身也是一个对象,而document.location不是对象

JavaScript入门教程(9) Document文档对象

描述当前窗口或指定窗口对象的文档。它包含了文档从head到/body的内容。

用法:document

(当前窗口)

窗口对象.document

(指定窗口)

属性:

document.title

//设置文档标题等价于HTML的title标签

document.bgColor

//设置页面背景色

document.fgColor

//设置前景色(文本颜色)

document.linkColor

//未点击过的链接颜色

document.alinkColor

//激活链接(焦点在此链接上)的颜色

document.vlinkColor

//已点击过的链接颜色

document.URL

//设置URL属性从而在同一窗口打开另一网页

document.fileCreatedDate

//文件建立日期,只读属性

document.fileModifiedDate

//文件修改日期,只读属性

document.fileSize

//文件大小,只读属性

document.cookie

//设置和读出cookie

document.charset

//设置字符集

简体中文:gb2312

cookie

关于

cookie

请参看“使用框架和

Cookies”一章。

lastModified

当前文档的最后修改日期,是一个

Date

对象。

referrer

如果当前文档是通过点击连接打开的,则

referrer

返回原来的

URL。

title

指head标记里用title.../title定义的文字。在

Netscape

里本属性不接受赋值。

fgColor

指body标记的

text

属性所表示的文本颜色。

bgColor

指body标记的

bgcolor

属性所表示的背景颜色。

linkColor

指body标记的

link

属性所表示的连接颜色。

alinkColor

指body标记的

alink

属性所表示的活动连接颜色。

vlinkColor

指body标记的

vlink

属性所表示的已访问连接颜色。

方法:

open()

打开文档以便

JavaScript

能向文档的当前位置(指插入

JavaScript

的位置)写入数据。通常不需要用这个方法,在需要的时候

JavaScript

自动调用。

write();

writeln()

向文档写入数据,所写入的会当成标准文档

HTML

来处理。writeln()

write()

的不同点在于,writeln()

在写入数据以后会加一个换行。这个换行只是在

HTML

中换行,具体情况能不能够是显示出来的文字换行,要看插入

JavaScript

的位置而定。如在pre标记中插入,这个换行也会体现在文档中。

clear()

清空当前文档。

close()

关闭文档,停止写入数据。如果用了

write[ln]()

clear()

方法,就一定要用

close()

方法来保证所做的更改能够显示出来。如果文档还没有完全读取,也就是说,JavaScript

是插在文档中的,那就不必使用该方法。

现在我们已经拥有足够的知识来做以下这个很多网站都有的弹出式更新通知了。

复制代码

代码如下:

script

language="JavaScript"

var

whatsNew

=

open('','_blank','top=50,left=50,width=200,height=300,'

+

'menubar=no,toolbar=no,directories=no,location=no,'

+

'status=no,resizable=no,scrollbars=yes');

whatsNew.document.write('centerb更新通知/b/center');

whatsNew.document.write('p最后更新日期:00.08.01');

whatsNew.document.write('p00.08.01:增加了“我的最爱”栏目。');

whatsNew.document.write('p

align="right"'

+

'a

href="javascript:self.close()"关闭窗口/a');

whatsNew.document.close();

/script

当然也可以先写好一个

HTML

文件,在

open()

方法中直接

load

这个文件。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。