欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript DOM學(xué)習(xí)第一章 W3C DOM簡介

 更新時(shí)間：2010年02月19日 13:10:07   作者：  
文檔對象模式（Document Object Model DOM）用來描述HTML頁面中那些輸入框、圖片、段落等等元素與最頂級(jí)的結(jié)構(gòu)document之間的關(guān)系。用適當(dāng)?shù)姆椒▉磉x取這些元素，我們就可以改變他們。
在這一章我主要介紹已經(jīng)被新一代的瀏覽器所支持的W3C 第一級(jí)的DOM。對他的運(yùn)作做一個(gè)大概的了解并且讓你知道你可以對他們做什么。
首先是對于DOM的一些建議和DOM設(shè)計(jì)的目的，然后我會(huì)告訴你什么是節(jié)點(diǎn)（nodes）并且怎樣通過DOM樹來遍歷節(jié)點(diǎn)。接著是如何得到一個(gè)特定的節(jié)點(diǎn)，以及怎樣改變他的值和屬性。最后就是DOM的終極目標(biāo)：怎么創(chuàng)建一個(gè)自己的新節(jié)點(diǎn)。
建議
Level 1DOM是W3C制定的用來提供給任何程序語言來訪問XML文檔的。不管你用什么語言程序來處理XML文檔，只要是Level 1DOM里面的方法和屬性就可以。不管是Perl、VBScript還是JavaScript你都可以讀取任何你想讀取的值并且修改他們。
你們可能會(huì)猜到，這段描述的是一種理想情況，差異還是存在的（比如瀏覽器）。然后這部分內(nèi)容還是比較少，并且你在JavaScript里學(xué)習(xí)如何處理XML也對你在其它語言中的學(xué)習(xí)會(huì)有一定的幫助。
從某種程度上也可以講HTML看做是一種XML文檔。只要瀏覽器能夠處理相應(yīng)的腳本，那么Level 1 DOM也同樣在HTML里面可以運(yùn)行的很好。
你可以讀取每一個(gè)HTML的標(biāo)簽的文本和屬性，你可以刪除每一個(gè)標(biāo)簽和他們的內(nèi)容，你還可以實(shí)時(shí)的在現(xiàn)有的文檔里面插入一個(gè)新的標(biāo)簽而不用在服務(wù)器上修改。
因?yàn)樵O(shè)計(jì)之初要考慮到修改XML的方方面面，所以對于一般的網(wǎng)頁工程師來說有一些方法可能永遠(yuǎn)也用不上。比如，你可以用它來修改HTML的注釋，但是我沒有看出來問什么要這樣做。同樣的還有一些DOM處理DTD/Doctype的內(nèi)容，你在你的網(wǎng)頁設(shè)計(jì)中并不需要，所以忽略掉，集中注意力在你的日常所需上就好。
節(jié)點(diǎn)（Nodes）
文檔對象模型是一種文檔內(nèi)的多個(gè)元素之間怎樣相互聯(lián)系的一種模型。在Level 1 DOM中，每一個(gè)對象都是一個(gè)節(jié)點(diǎn)。所以如果你寫：
復(fù)制代碼 代碼如下:
<p>This is a paragraph</p>

那么你就創(chuàng)建了兩個(gè)節(jié)點(diǎn)：元素P和內(nèi)容是"This is a paragraph”的文本節(jié)點(diǎn)。這個(gè)文本節(jié)點(diǎn)包含在P元素內(nèi)，所以可以認(rèn)為是p節(jié)點(diǎn)的子節(jié)點(diǎn)。反過來說，p元素就是文本節(jié)點(diǎn)的父節(jié)點(diǎn)。
如果你寫成：
復(fù)制代碼 代碼如下:
<p>This is a <B>Paragraph</B></p>

那么元素節(jié)點(diǎn)p就有兩個(gè)子節(jié)點(diǎn)，其中一個(gè)還有他自己的子節(jié)點(diǎn)。
最后就是參數(shù)節(jié)點(diǎn)。（令人困惑的是，他們不算做元素節(jié)點(diǎn)的子節(jié)點(diǎn)。事實(shí)上，在我寫這一章的過程中我做過一些測試，IE5根本就不把參數(shù)節(jié)點(diǎn)當(dāng)做元素的子節(jié)點(diǎn)。）所以：
復(fù)制代碼 代碼如下:

<P ALIGN="right">This is a <B>paragraph</B></P>

的結(jié)構(gòu)可能是這樣的：

       <P> ----------------

     --------------     ALIGN

  This is a     <B>     |
            |    right

          paragraph

這就是元素節(jié)點(diǎn)，文本節(jié)點(diǎn)和參數(shù)節(jié)點(diǎn)。99%的HTML頁面都是由他們組成，你的主要任務(wù)也就是如何放置他們。當(dāng)然還有很多的其他節(jié)點(diǎn)，暫且略過。

就像你所了解的，p元素也有他自己的父節(jié)點(diǎn)，通常就是document，有時(shí)候也可能是一個(gè)DIV。所以整個(gè)文檔都可以看做是一顆由很多的節(jié)點(diǎn)組成的樹，而且這些節(jié)點(diǎn)大多都有自己的子節(jié)點(diǎn)。

      <BODY>

        |-------------------------------------

       <P> ----------------      lots more nodes

     --------------     ALIGN

  This is a     <B>     |
            |    right

          paragraph

遍歷DOM樹
知道了DOM樹的結(jié)構(gòu)，你就可以遍歷他來找到你想要的元素。舉個(gè)例子，假設(shè)元素節(jié)點(diǎn)p已經(jīng)存儲(chǔ)在變量x中（等一會(huì)介紹這是怎么做到的）。這時(shí)候如果我們想訪問BODY那么：
復(fù)制代碼 代碼如下:
x.parentNode

我們就得到了x的父元素，然后就可以修改它了。這樣可以到達(dá)B節(jié)點(diǎn)：
復(fù)制代碼 代碼如下:
x.childNode[1]

childNode是一個(gè)包含所有x的子節(jié)點(diǎn)的數(shù)組。當(dāng)然，數(shù)組是從0開始編號(hào)的，所以childNode[0]就是文本節(jié)點(diǎn)"This is a " childNode[1]就是B節(jié)點(diǎn)。
兩個(gè)特別的：x.firstChild就表示x的第一個(gè)子節(jié)點(diǎn)；x.lastChild就表示x的最后一個(gè)子節(jié)點(diǎn)。
假設(shè)p是BODY的第一個(gè)子節(jié)點(diǎn)，BODY又是document的第一個(gè)子節(jié)點(diǎn)，所以為了到達(dá)B節(jié)點(diǎn)，你可以用下面的任意方法：
復(fù)制代碼 代碼如下:

document.firstChild.firstChild.lastChild;
document.firstChild.childNodes[0].lastChild;
document.firstChild.childNodes[0].childNodes[1];

甚至是下面這個(gè)比較笨的：
復(fù)制代碼 代碼如下:
document.firstChild.childNodes[0].parentNode.firstChild.childNodes[1];

得到一個(gè)元素
然而，這樣遍歷文檔實(shí)在是太麻煩了。因?yàn)長evel 1 DOM設(shè)計(jì)的目標(biāo)就是允許你修改整個(gè)DOM樹，所以你必須準(zhǔn)確的知道DOM樹的結(jié)構(gòu)，這會(huì)很快導(dǎo)致一些問題。
所以還有一些方法能夠很快的到達(dá)你想要的元素。只要你到達(dá)了這里，就可以遍歷整個(gè)DOM樹的每一個(gè)節(jié)點(diǎn)。
讓我們繼續(xù)前面的例子。你想要到達(dá)元素B。最簡單的辦法就是直接跳過去。通過document.getElementByTagName你就能很快的創(chuàng)建一個(gè)包含文檔內(nèi)的所有B標(biāo)簽的數(shù)組。假設(shè)我們的B是第一個(gè)，那么你就可以簡單的寫：
復(fù)制代碼 代碼如下:
var x = document.getElementsByTagName('B')[0]

x就包含了元素節(jié)點(diǎn)B。首先你命令瀏覽器得到整個(gè)文檔的所有元素B(document.getElementByTagName(‘B')) ,然后你選擇了第一個(gè)文檔的第一個(gè)元素B([0])，就得到了你想要的。
你也可以寫：
復(fù)制代碼 代碼如下:
var x = document.getElementsByTagName('P')[0].lastChild;

現(xiàn)在你先到了文檔的第一個(gè)段落P（假設(shè)我們的P是第一個(gè)元素），然后到達(dá)p的最后一個(gè)子元素。
最好的能準(zhǔn)確到達(dá)元素并且不需要DOM結(jié)構(gòu)的辦法就是給B一個(gè)ID：
<P ALIGN="right">This is a <B ID="hereweare">paragraph</B></P>現(xiàn)在你就可以簡單的寫：
復(fù)制代碼 代碼如下:
var x = document.getElementById('hereweare');

元素B就存儲(chǔ)在了x里。
修改一個(gè)節(jié)點(diǎn)
現(xiàn)在我們已經(jīng)到達(dá)了節(jié)點(diǎn)，就可以做一些修改了。假設(shè)我們想把加粗的文字部分修改為'bold bit of text'。我們需要訪問正確的元素然后修改它的nodeValue?，F(xiàn)在正確的元素不是元素B而是他的子元素text node：我們想改變的是文字，不是元素。所以可以寫：
復(fù)制代碼 代碼如下:
document.getElementById('hereweare').firstChild.nodeValue='bold bit of text';

元素就改變了。
你可以通過nodeValue來修改任何文本節(jié)點(diǎn)或者參數(shù)。比如你可以修改段落的ALIGN參數(shù)。這也是非常的簡單，先找到需要的元素（在這個(gè)例子中是B元素的父元素），然后使用setAttribute()方法來設(shè)置你想要的值：
復(fù)制代碼 代碼如下:
function test2(val) {
if (document.getElementById && document.createElement)
{
node = document.getElementById('hereweare').parentNode;
node.setAttribute('align',val);
}
else alert('Your browser doesn\'t support the Level 1 DOM');
}

創(chuàng)建和刪除元素
修改元素固然有用，但是還是不如創(chuàng)建你需要的元素然后插入到現(xiàn)有的文檔中。我可以很簡單的在這個(gè)段落后面添加一個(gè)HR元素然后很簡單的刪除它。
創(chuàng)建元素使用下面的方法:
var x=document.createElemnt(‘HR')
這樣HR就創(chuàng)建并且存儲(chǔ)在x中。第二步就是把x插入到文檔之中。我寫了一個(gè)ID是inserthere的SPAN，我們就把它插入到這。所以我們使用appendChild()方法：
復(fù)制代碼 代碼如下:
document.getElementById('inserthrhere').appendChild(x);

刪除它稍稍有點(diǎn)麻煩。我先創(chuàng)建一個(gè)臨時(shí)變量node來存儲(chǔ)SPAN，然后我告訴他移除他的第一個(gè)子元素：
復(fù)制代碼 代碼如下:

var node=document.getElementById(‘inserthere');
node.removeChild(node.childNode[0]);


同樣的方法我們也可以創(chuàng)建一個(gè)新的元素然后添加在ID是hereweare的B元素上。
復(fù)制代碼 代碼如下:

var x = document.createTextNode(' A new text node has been appended!');
document.getElementById('hereweare').appendChild(x);

你可以試一試，你會(huì)注意到用老的辦法可能不會(huì)移除新加的文本，那是因?yàn)樗麄円呀?jīng)成為分離的兩部分了： 
 <B>

 ------------

 paragraph A new text node
 has been appended!

(可以通過normalize()來把他們合并，但是IE5不支持）

我不打算告訴你怎么移除它，自己練習(xí)會(huì)比較有收獲

翻譯地址：http://www.quirksmode.org/dom/intro.html

轉(zhuǎn)載請保留以下信息
作者：北玉(tw:@rehawk)

相關(guān)文章

  • JSON的語法與規(guī)則詳解

    JSON的語法與規(guī)則詳解

    這篇文章主要介紹了JSON的語法與規(guī)則詳解,Web?API可以接收J(rèn)SON格式的數(shù)據(jù)，也可以返回JSON格式的數(shù)據(jù)。在接收J(rèn)SON?數(shù)據(jù)時(shí)，需要使用相應(yīng)的庫或框架來解析JSON數(shù)據(jù)，在返回JSON數(shù)據(jù)時(shí)，可以使用相應(yīng)的庫或框架將數(shù)據(jù)轉(zhuǎn)換為JSON格式
    2023-07-07
  • JavaScript中的getMilliseconds()方法使用詳解

    JavaScript中的getMilliseconds()方法使用詳解

    這篇文章主要介紹了JavaScript中的getMilliseconds()方法使用詳解,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下
    2015-06-06
  • php中and 和 &&出坑指南

    php中and 和 &&出坑指南

    在邏輯運(yùn)算符中，提到與和或，我們可能立刻想到的是&&、||，在php中還有and、or.然而and和or中有一個(gè)小小的坑,今天我們就來探討下php中and 和 &&
    2018-07-07
  • javascript如何創(chuàng)建表格(javascript繪制表格的二種方法)

    javascript如何創(chuàng)建表格(javascript繪制表格的二種方法)

    利用js來動(dòng)態(tài)創(chuàng)建表格有兩種格式，appendChild()和insertRow、insertCell()。兩種方式其實(shí)差不多，但第一種有可能在IE上有問題，所以推薦大家使用第二種方法，看下面的解決和使用方法
    2013-12-12
  • JavaScript入門教程(12) js對象化編程

    JavaScript入門教程(12) js對象化編程

    關(guān)于對象化編程的語句 現(xiàn)在我們有實(shí)力學(xué)習(xí)以下關(guān)于對象化編程，但其實(shí)屬于上一章的內(nèi)容了。
    2009-01-01
  • js函數(shù)在frame中的相互調(diào)用詳解

    js函數(shù)在frame中的相互調(diào)用詳解

    一個(gè)HTML頁面可以有一個(gè)或多個(gè)子框架，這些子框架以<iframe>來標(biāo)記，用來顯示一個(gè)獨(dú)立的HTML頁面。這里所講的框架編程包括框架的自我控制以及框架之間的互相訪問，例如從一個(gè)框架中引用另一個(gè)框架中的JavaScript變量、調(diào)用其他框架內(nèi)的函數(shù)、控制另一個(gè)框架中表單的行為等
    2014-03-03
  • JavaScript進(jìn)階教程(第二課)

    JavaScript進(jìn)階教程(第二課)

    JavaScript進(jìn)階教程(第二課)...
    2007-04-04
  • 使用Math.floor與Math.random取隨機(jī)整數(shù)的方法詳解

    使用Math.floor與Math.random取隨機(jī)整數(shù)的方法詳解

    本篇文章對使用Math.floor與Math.random取隨機(jī)整數(shù)的方法進(jìn)行了詳細(xì)的分析介紹。需要的朋友參考下
    2013-05-05
  • 詳解javascript void(0)

    詳解javascript void(0)

    這篇文章主要介紹了javascript void關(guān)鍵字的相關(guān)資料，文中講解非常細(xì)致，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下
    2020-07-07
  • 深入剖析JavaScript編程中的對象概念

    深入剖析JavaScript編程中的對象概念

    這篇文章主要介紹JavaScript編程中的對象概念,也是JS面向?qū)ο缶幊痰幕A(chǔ)知識(shí),需要的朋友可以參考下
    2015-10-10

最新評(píng)論