2014年一码中特
JavaScript教程
教程
JavaScript 簡介
JavaScript 用法
JavaScript 輸出
JavaScript 語法
JavaScript 語句
JavaScript 注釋
JavaScript 變量
JavaScript 數據類型
JavaScript 對象
JavaScript 函數
JavaScript 作用域
JavaScript 事件
JavaScript 字符串
JavaScript 運算符
JavaScript 比較
JavaScript 條件語句
JavaScript switch 語句
JavaScript for 循環
JavaScript while 循環
JavaScript Break 和 Continue 語句
JavaScript typeof
JavaScript 類型轉換
JavaScript 正則表達式
JavaScript 錯誤
JavaScript 調試
JavaScript 表單驗證
JavaScript 保留關鍵字
JavaScript JSON
JavaScript void
JS函數
JavaScript 函數定義
JavaScript 函數參數
JavaScript 函數調用
JavaScript 閉包
JS HTML DOM
DOM 簡介
DOM CSS
DOM 事件
DOM EventListener
DOM 元素
JS高級教程
JavaScript 對象
JavaScript Number 對象
JavaScript String
JavaScript Date(日期)
JavaScript Array(數組)
JavaScript Boolean(布爾)
JavaScript Math(算數)
JavaScript RegExp 對象
JS瀏覽器BOM
JavaScript Window
JavaScript Window Screen
JavaScript Window Location
JavaScript Window History
JavaScript Navigator
JavaScript 彈窗
JavaScript 計時事件
JavaScript Cookies
JS庫
JavaScript 庫
JavaScript 測試 jQuery
JavaScript 測試 Prototype
JS參考手冊
JavaScript Array 對象
JavaScript Boolean 對象
JavaScript Date 對象
JavaScript Math 對象
JavaScript Number 對象
JavaScript String 對象
JavaScript RegExp 對象
JavaScript 全局屬性/函數
JavaScript 運算符
Window 對象
Navigator 對象
Screen 對象
History 對象
Location 對象
HTML DOM Document 對象
HTML DOM 元素對象
HTML DOM 屬性對象
HTML DOM 事件對象
 

DOM HTML

閱讀:742      收藏:0      [點我收藏+]

JavaScriptHTML DOM - 改變 HTML


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


改變 HTML 輸出流

JavaScript 能夠創建動態的 HTML 內容:

今天的日期是:

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

實例

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>


絕對不要在文檔加載完成之后使用 document.write()。這會覆蓋該文檔。

改變 HTML 內容

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

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

document.getElementById(id).innerHTML=new 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)


改變 HTML 屬性

如需改變 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>

實例講解:

  • 上面的 HTML 文檔含有 id="image" 的 <img> 元素
  • 我們使用 HTML DOM 來獲得 id="image" 的元素
  • JavaScript 更改此元素的屬性(把 "smiley.gif" 改為 "landscape.jpg")
? 2014 bubuko.com 版權所有 魯ICP備09046678號-4
打開技術之扣,分享程序人生!
             

魯公網安備 37021202000002號

2014年一码中特 3d基本走势图 双色球红球选号技巧 江西多乐彩开奖 吉林十一选五开奖果 杰克棋牌为什么倒闭了 股票融资还款技巧 福建十一选五基本走 下载南通棋牌 腾讯分分彩计划软件app 广东11选5追号