• <ruby id="5koa6"></ruby>
    <ruby id="5koa6"><option id="5koa6"><thead id="5koa6"></thead></option></ruby>

    <progress id="5koa6"></progress>

  • <strong id="5koa6"></strong>
  • JavaScript技術講座-使用內部對象系統

    發表于:2007-06-21來源:作者:點擊數: 標簽:
    使用瀏覽器的內部對象系統, 可實現與HTML文檔進行交互。它的作用是將相關元素組織包裝起來,提供給程序設計人員使用,從而減輕編程人的勞動,提高設計Web頁面的能力。 一、瀏覽器對象層次及其主要作用 除了前面提到過的文檔document對象外,Navigator瀏覽器

       

    使用瀏覽器的內部對象系統, 可實現與HTML文檔進行交互。它的作用是將相關元素組織包裝起來,提供給程序設計人員使用,從而減輕編程人的勞動,提高設計Web頁面的能力。

    一、瀏覽器對象層次及其主要作用

    除了前面提到過的文檔document對象外,Navigator瀏覽器中還提供了窗口(Window)對象以及歷史(History)和位置(Location)對象。

    瀏覽器對象(Navigator)

    提供有關瀏覽器的信息

    窗口對象(Windows)

    Window對象處于對象層次的最頂端,它提供了處理Navigator窗口的方法和屬性。

    位置對象(Location)

    Location對象提供了與當前打開的URL一起工作的方法和屬性,它是一個靜態的對象。

    歷史對象(History)

    History對象提供了與歷史清單有關的信息。

    文檔對象(Document)

    document對象包含了與文檔元素(elements)一起工作的對象,它將這些元素封裝起來供編程人員使用。

    編程人員利用這些對象,可以對WWW瀏覽器環境中的事件進行控制并作出處理。在JavaScript中提供了非常豐富的內部方法和屬性,從而減輕了編程人員的工作,提高編程效率。這正是基于對象與面向對象的根本區別所在。在這些對象系統中,文檔對象屬于非常重要的,它位于最低層,但對于我們實現Web頁面信息交互起作關鍵作用。因而它是對象系統的核心部分。

    二、文檔對象功能及其作用

    在Navigator瀏覽器中,document文檔對象是核心是,同時也是最重要的。見圖6-1所示。

    Links Anchor Form Method Prop
    鏈接對象 錨對象 窗體對象 方法 對象

    圖6-1 document對象

    從圖6-1中可以看出,document對象的主要作用就是把這些基本的元素(如links,anchor等)包裝起來,提供給編程人員使用。從另一個角度看,document對象中又是由屬性和方法組成。

    1、document中三個主要的對象

    在document中主要有:links,anchor,form等三個最重要的對象:

    (1)anchor錨對象:

    anchor對象指的是<A Name=...> </A>標識在HTML源碼中存在時產生的對象。它包含著文檔中所有的anchors信息。

    (2)鏈接links對象

    link對象指的是用<A Href=...> </A>標記的連接一個超文本或超媒體的元素作為一個特定的URL。

    (3)窗體(Form)對象

    窗體對象是文檔對象的一個元素,它含有多種格式的對象儲存信息,使用它可以在JavaScript腳本中編寫程序進行文字輸入,并可以用來動態改變文檔的行為。通過document. Forms[]數組來使得在同一個頁面上可以有多個相同的窗體,使用forms[]數組要比使用窗體名字要方便得多。

    例:下面就是一個使用窗體數組和窗體名字的例子。該程序使得兩個窗體中的字段內容保持一致。

    Test6_1.htm

    <Html>

    <head>

    </head>

    <body>

    <form >

    <input type=text onChange="document.my.elements[0].value=this.value;" >

    </form>

    <form NAME="my">

    <input type=text onChange="document.forms[0].elements[0].value=this.value;">

    </form>

    </body>

    </html>

    其中用了OnChnge事件(當窗體內容改變時激發)。第一個使用窗體名字標識my,第二個使用窗體數組Forms[]。其效果是一致。

    2、文檔對象中的attribute屬性

    document對象中的attribute屬性,主要用于在引用Href標識時,控制著有關顏色的格式和有關文檔標題、文檔原文件的URL以及文檔最后更新的日期。這部分元素的主要含義如下:

    (1)鏈接顏色:alinkcolor

    這個元素主要用于,當選取一個鏈接時,鏈接對象本身的顏色就按alinkcolo r指定改變。

    (2)鏈接顏色:linkcolor

    當用戶使用<A Href=...> Text string </A>鏈接后,Textstring的顏色就會按Linkcolor所指定的顏色更新。

    (3)瀏覽過后的顏色:VlinkColor

    該屬性表示的是已被瀏覽存儲為已瀏覽過的鏈接顏色。

    (4)背景顏色:bgcolor

    該元素包含文檔背景的顏色。

    (5)前景顏色:Fgcolor

    該元素包含HTML文檔中文本的前景顏色。

    3、文檔對象的基本元素

    (1)窗體屬性:

    窗體屬性是與HTML文檔中<Form>...</Form>相對應的一組對象在HTML文檔所創建的窗體數,由length指定。通過document.forms.length反映該文檔中所創建的窗體數目。

    (2)錨屬性:anchors

    該屬性中,包含了HTML文檔的所有<A> </A>標記為Name=...的語句標識。所有“錨”的數目保存在document.anchors.length中。

    (3)鏈接屬性:links

    鏈接屬性是指在文檔中<A>...</A>的由Href=...指定的數目,其鏈接數目保存在document.links.length中。

    三、范例

    例1:下面我們通過一個例子來說明文檔對象的綜合應用。輸出結果見圖6-2所示。

    Test6_2.htm

    <html>

    <head>

    </HEAD>

    <BOdy>

    <Form Name="mytable">

    請輸入數據:

    <Input Type="text" Name="text1" Value="">

    </Form>

    <A name="Link1" href="test31.htm">鏈接到第一個文本</a><br>

    <A name="Link2" href="test32.htm">鏈接到第二個文本</a><br>

    <A name="Link2" href="test33.htm">鏈接到第三個文本</a><br>

    <A href="#Link1">第一錨點</a>

    <A href="#Link2">第二錨點</a>

    <A Href="#Link3">第三錨點</a>

    <BR>

    <Script Language="JavaScript">

    document.write("文檔有"+document.links.length+"個鏈接"+"<br>");

    document.write("文檔有"+document.anchors.length+"個錨點"+"<br>");

    document.write("文檔有"+document.forms.length+"個窗體");

    </script>

    </body>

    </HTML>

    JavaScript技術講座-使用內部對象系統(圖一)

    圖6-2

    例子2:下列程序隨機產生每日一語。

    test6_3.html

    <HTML>

    <HEAD>

    <script Language="JavaScript">

    <!--

    tips = new Array(6);

    tips[0]="每日一語(1)";

    tips[1]="每日一語(2)";

    tips[2]="每日一語(3)";

    tips[3]="每日一語(4)";

    tips[4]="每日一語(5)";

    tips[5]="每日一語(6)";

    index = Math.floor(Math.random() * tips.length);

    document.write("<FONT SIZE=8 COLOR=DARKBLUE>" + tips[index]+"</FONT>");

    </Script>

    </HEAD>

    </BODY>

    </HTML>

    輸出結果見圖6-3所示。

    JavaScript技術講座-使用內部對象系統(圖二)

    圖6-3

    本講主要介紹了JavaScript對象系統的使用方法,其中重點介紹了文檔對象及使用。

    原文轉自:http://www.kjueaiud.com

    老湿亚洲永久精品ww47香蕉图片_日韩欧美中文字幕北美法律_国产AV永久无码天堂影院_久久婷婷综合色丁香五月

  • <ruby id="5koa6"></ruby>
    <ruby id="5koa6"><option id="5koa6"><thead id="5koa6"></thead></option></ruby>

    <progress id="5koa6"></progress>

  • <strong id="5koa6"></strong>