Javascript HTML DOM

來源:互聯網
上載者:User

標籤:ext   btn   講解   尋找   pre   最簡   儲存   head   dom   

JavaScript HTML DOM

通過 HTML DOM,可訪問 JavaScript HTML 文檔的所有元素。

HTML DOM (文件物件模型)

當網頁被載入時,瀏覽器會建立頁面的文件物件模型(Document Object Model)。文件物件模型DOM(Document Object Model)定義訪問和處理HTML文檔的標準方法。DOM 將HTML文檔呈現為帶有元素、屬性和文本的樹結構(節點樹)。

HTML DOM 模型被構造為對象的樹:

通過可程式化的物件模型,JavaScript 獲得了足夠的能力來建立動態 HTML。

  • JavaScript 能夠改變頁面中的所有 HTML 元素
  • JavaScript 能夠改變頁面中的所有 HTML 屬性
  • JavaScript 能夠改變頁面中的所有 CSS 樣式
  • JavaScript 能夠對頁面中的所有事件做出反應
  • 尋找 HTML 元素

    通常,通過 JavaScript,您需要操作 HTML 元素。

    為了做到這件事情,您必須首先找到該元素。有三種方法來做這件事:

    • 通過 id 找到 HTML 元素
    • 通過標籤名找到 HTML 元素
    • 通過類名找到 HTML 元素
    • 通過 id 尋找 HTML 元素

      在 DOM 中尋找 HTML 元素的最簡單的方法,是通過使用元素的 id。

      本例尋找 id="intro" 元素:

      執行個體var x=document.getElementById("intro");
      嘗試一下 ?

      如果找到該元素,則該方法將以對象(在 x 中)的形式返回該元素。

      如果未找到該元素,則 x 將包含 null。

    • 通過標籤名尋找 HTML 元素

      本例尋找 id="main" 的元素,然後尋找 id="main" 元素中的所有 <p> 元素:

      執行個體
      <body>
      <p>你好,世界!</p>
      <div id="main">
      <p>DOM是非常有用的</p>
      <p>該執行個體展示了<b>getElementsByTagName</b>方法</p>
      </div>
      <script>
      var x=document.getElementById("main");
      var y=x.getElementsByTagName("p");
      document.write(‘id="main"元素中的第一個段落為:‘+y[1].innerHTML);
      </script>
      </body>
      顯示結果為:

      解析此例:想找到div中的第二個p元素,並修改其裡面的內容。我們先通過id找到其父類元素div:var x=

      document.getElementById("main").然後再根據標籤在父類元素中尋找:var y=x.getelementbytagname("p");此時,y裡面儲存著div裡面的所有p標籤,從下表0開始,也相當於一個數組。我們要找第二個p標籤,也就是y[1];。想修改第二個p標籤裡面的內容,那就是y[1].innerHTML.

      當然上述執行個體,我們還可以同一下代碼來實現:
      body>
      <p>你好,世界!</p>
      <div id="main">
      <p>DOM是非常有用的</p>
      <p>該執行個體展示了<b>getElementsByTagName</b>方法</p>
      </div>
      <script>
      var x=document.getElementsByTagName("p");
      document.write(‘id="main"元素中的第一個段落為:‘+x[2].innerHTML);
      </script>
      </body>

      這段代碼和上面的唯一區別就是找到p元素的範圍不一樣。這個例子我們是以docunment(整個頁面文檔)為範圍尋找p,找到頁面中所有的p元素,儲存在x中。我們要得到第三個p標籤,因此為x[2].上面的例子是以其id=main的div中尋找p標籤,因此找到兩個p,第二個p當然是y[1].

      ***仔細觀察,我們發現通過id尋找就是在document中尋找唯一的某個元素,因此getelementbyid中的是element。而,通過標籤尋找,getelementsbytagname中的是elements。

      通過類名找到 HTML 元素

      本例通過 getElementsByClassName 函數來尋找 class="intro" 的元素:

      執行個體var x=document.getElementsByClassName("intro");

       

      通過上面3種方式,我們找到了我們想要找的標籤等等(當然,上面例子中也進行了改變HTML內容,我們為了表現出找到,只有顯示出來才能看到效果。)。那麼接下來,我們將展現找到都進行的操作。

      JavaScript HTML DOM - 改變 HTML

      HTML DOM 允許 JavaScript 改變 HTML 元素的內容。

      (一)改變 HTML 輸出資料流(document.write)

      JavaScript 能夠建立動態 HTML 內容:

      在 JavaScript 中,document.write() 可用於直接向 HTML 輸出資料流寫內容。

      執行個體<!DOCTYPE html>
      <html>
      <body>

      <script>
      document.write(Date());
      </script>

      </body>
      </html>絕對不要在文檔載入完成之後使用 document.write()。這會覆蓋該文檔。 (二)1.改變 HTML 內容(text)

      修改 HTML 內容的最簡單的方法時使用 innerHTML 屬性。

      如需改變 HTML 元素的內容,請使用這個文法:

      本例改變了 <p>元素的內容:

      執行個體<html>
      <body>

      <p id="p1">Hello World!</p>

      <script>
      document.getElementById("p1").innerHTML="New text!";
      </script>

      </body>
      </html>  

      本例改變了 <h1> 元素的內容:

      執行個體<!DOCTYPE html>
      <html>
      <body>

      <h1 id="header">Old Header</h1>

      <script>
      var element=document.getElementById("header");
      element.innerHTML="New Header";
      </script>

      </body>
      </html>

      執行個體講解:

        • 上面的 HTML 文檔含有 id="header" 的 <h1> 元素


        • 我們使用 HTML DOM 來獲得 id="header" 的元素


        • JavaScript 更改此元素的內容 (innerHTML)

        •  

      2.改變 HTML 屬性(attribute)

      如需改變 HTML 元素的屬性,請使用這個文法:

      document.getElementById(id).attribute=new value

      本例改變了 <img> 元素的 src 屬性:

      執行個體<!DOCTYPE html>
      <html>
      <body>

      <img id="image" src="smiley.gif">

      <script>
      document.getElementById("image").src="landscape.jpg";
      </script>

      </body>
      </html>

       

      (三)

      JavaScript HTML DOM - 改變CSS

      HTML DOM 允許 JavaScript 改變 HTML 元素的樣式。

      改變 HTML 樣式

      如需改變 HTML 元素的樣式,請使用這個文法:

      document.getElementById(id).style.property=new style

      下面的例子會改變 <p> 元素的樣式:

      html>
      <body>

      <p id="p2">Hello World!</p>

      <script>
      document.getElementById("p2").style.color="blue";
      </script>

      <p>The paragraph above was changed by a script.</p>

      </body>
      </html>

       顯示和隱藏文本

       

Javascript HTML DOM

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.