JavaScript之HTML DOM操作

Date： 2020-05-13

Lecturer： 辣母羊

OUTLINE

  • 什麼是內建物件？

  • What is DOM？

  • 基本操作

  • 測驗: 選單開合操作

在ＤＯＭ之前

什麼是內建物件？

  • 瀏覽器所提供的一系列的內建物件
  • 表示瀏覽器視窗、視窗內目前的頁面等
  • 一組工具，以供建立更具互動性的網頁

分為：

  1. 瀏覽器物件模型

  2. 文件物件模型

  3. 全域物件

瀏覽器物件模型

WINDOW

DOCUMENT

WINDOW

HISTORY

LOCATION

NAVIGATOR

SCREEN

parent

Child

目前的瀏覽器視窗

裝置的顯示器相關資訊

瀏覽器相關資訊

目前網頁頁面的URL位址

瀏覽紀錄中的頁面

瀏覽器物件模型

window.alert() //建立包含訊息文字的對話框
window.open(“要加的ＵＲＬ”)  //開啟新的瀏覽器視窗

方法

今天會用到的特性

window.screen.height  //視窗的高度
window.screen.width   //視窗的寬度

更多特性

瀏覽器物件模型

實作

  • 做出可以顯示使用者視窗高度及寬度的alert視窗

瀏覽器物件模型

 解答 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #a3d5d3;
            font-size:50px;
            }
    </style>
    <script>
        function show(){
        window.alert(window.screen.width+"x"+window.screen.height);
		}
    </script>
</head>
<body>
    <button onclick="show()">show</button>
</body>
</html>

What is DOM?

  • JavaScript HTML Document Object Model

  • 將 Javascript 程式與畫面結合的關鍵概念

文件物件模型(DOM)

document

<html>

<head>

<title>

<body>

<div>

<p>

text

attribute

文件物件模型(DOM)

對HTML事件作出反應

  • 按下按鈕後會對網頁進行修改
    • 首先，先架設一個html的網頁，並新增一個按鈕
    • 用JavaScript寫一個函式，修改網頁

文件物件模型(DOM)

對HTML事件作出反應​

解答

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #a3d5d3;
            font-size:50px;
            }
    </style>
    <script>
        function change(){
        window.document.body.innerHTML="Hello";
		}
    </script>
</head>
<body>
    <button onclick="change()">Change</button>
</body>
</html>

文件物件模型(DOM)

​取得、修改標籤物件

按下按鈕後修改網頁上顯示的句子中的一個字

  • 首先，新增div標籤並寫下句子，在想改的字詞前後加入span標籤並賦予id
  • 用JavaScript寫一個函式，利用document.getElementById()取得span標籤物件並修改

文件物件模型(DOM)

​取得、修改標籤物件 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #a3d5d3;
            font-size:50px;
            }
    </style>
    <script>
        function change(){
            var divObject = window.document.getElementById("aa");
			divObject.innerHTML = " Iron Man";
		}
    </script>
</head>
<body>
    <div id="demo">I am<span id ="aa"> Tony Stark</span>.</div>
    <button onclick="change()">Change</button>
</body>
</html>

解答

文件物件模型(DOM)

​取得、修改標籤物件

按下按鈕後修改網頁上顯示的句子中的一個字(css)

  • 用style屬性在JavaScript寫的函式中，取得span標籤物件並修改

文件物件模型(DOM)

​取得、修改標籤物件 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>HTML DOM</title>
	<script type="text/javascript">
		function change(){
			var divObject=document.getElementById("endgame");
			divObject.innerHTML = "Iron Man";
			divObject.style.fontWeight = "bold";
			divObject.style.color = "red";
		}
	</script>
</head>
<body>
	<div>I am <span  id="endgame">Tony Stark</span>.</div>
	<button onclick="change()">Change</button>
</body>
</html>

解答

文件物件模型(DOM)

新增、刪除標籤物件

按下按鈕後建立新的標籤物件

  • 首先，利用 createElement 方法建立新的標籤物件
  • 利用 appendChild 將物件加入其他標籤物件的內部，此時，我們稱 div 標籤是 body 標籤的孩子(child)

文件物件模型(DOM)

新增、刪除標籤物件

解答

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>HTML DOM</title>
	<script type="text/javascript">
		function change(){
			var obj=document.createElement("div");
			obj.innerHTML="這是新的 div 標籤物件";
			document.body.appendChild(obj);
		}
	</script>
</head>
<body>
	<div id="target">Hello World</div>
	<button onclick="change()">Change</button>
</body>
</html>

文件物件模型(DOM)

新增、刪除標籤物件

按下按鈕後刪除指定標籤物件

  • 首先利用document.getElementById()取得刪除目標
  • 利用 parentNode 屬性取得刪除目標的父親，呼叫 removeChild 方法，並利用參數指定刪除對象

文件物件模型(DOM)

新增、刪除標籤物件

解答

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>HTML DOM</title>
	<script type="text/javascript">
		function change(){
			var obj=document.getElementById("target");
			obj.parentNode.removeChild(obj);
		}
	</script>
</head>
<body>
	<div id="target">Hello World</div>
	<button onclick="change()">Change</button>
</body>
</html>

測驗： 選單開合操作

建立選單，使點擊選單標題後可以隱藏和顯示選項

 

  1. 讓選單標題的 css display 屬性顯示 none

  2. 結合if...else...和 display 屬性顯示 block

測驗： 選單開合操作

 

解答

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>HTML DOM 選單開合操作</title>
	<script type="text/javascript">
		function toggleMenu(){
			var menu=document.getElementById("menu");
			if(menu.style.display=="none"){ 
				menu.style.display="block";
			}else{
				menu.style.display="none";
			}
		}
	</script>
</head>
<body>
	<div onclick="toggleMenu()">Marvel</div>
	<ul id="menu">
		<li>Iron Man</li>
		<li>Thor</li>
		<li>Captain America</li>
	</ul>
</body>
</html>

參考資源

Thanks for listening

Made with Slides.com