JavaScript DOM、BOM操作

猿blue發表於2020-12-14
JavaScript

js HTML DOM

簡介：

HTML DOM（文件物件模型）

當網頁被載入時，瀏覽器會建立頁面的文件物件模型（Document Object Model）。

HTML DOM 模型被結構化為物件樹：

物件的 HTML DOM 樹

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-66Z91IwX-1607906799173)(C:\Users\yijiu\AppData\Local\Temp\1606048383137.png)]

通過這個物件模型，JavaScript 獲得建立動態 HTML 的所有力量：

  • JavaScript 能改變頁面中的所有 HTML 元素
  • JavaScript 能改變頁面中的所有 HTML 屬性
  • JavaScript 能改變頁面中的所有 CSS 樣式
  • JavaScript 能刪除已有的 HTML 元素和屬性
  • JavaScript 能新增新的 HTML 元素和屬性
  • JavaScript 能對頁面中所有已有的 HTML 事件作出反應
  • JavaScript 能在頁面中建立新的 HTML 事件

方法：

<html>
<body>
<p id="p"></p>
<script>
document.getElementById("p").innerHTML = "Hello World!";//將p標籤內新增內容
</script>
</body>
</html>

getElementById 方法：

訪問 HTML 元素最常用的方法是使用元素的 id。

在上面的例子中，getElementById 方法使用 id=“demo” 來查詢元素。

innerHTML 屬性：

獲取元素內容最簡單的方法是使用 innerHTML 屬性。

innerHTML 屬性可用於獲取或替換 HTML 元素的內容。

innerHTML 屬性可用於獲取或改變任何 HTML 元素，包括 和 。

元素：

查詢 HTML 元素：

方法描述
document.getElementById(id)通過元素 id 來查詢元素
document.getElementsByTagName(name)通過標籤名來查詢元素
document.getElementsByClassName(name)通過類名來查詢元素

改變 HTML 元素：

方法描述
element.innerHTML = new html content改變元素的 inner HTML
element.attribute = new value改變 HTML 元素的屬性值
element.setAttribute(attribute, value)改變 HTML 元素的屬性值
element.style.property = new style改變 HTML 元素的樣式

改變 HTML 元素

方法描述
element.innerHTML = new html content改變元素的 inner HTML
element.attribute = new value改變 HTML 元素的屬性值
element.setAttribute(attribute, value)改變 HTML 元素的屬性值
element.style.property = new style改變 HTML 元素的樣式

新增和刪除元素

方法描述
document.createElement(element)建立 HTML 元素
document.removeChild(element)刪除 HTML 元素
document.appendChild(element)新增 HTML 元素
document.replaceChild(element)替換 HTML 元素
document.write(text)寫入 HTML 輸出流

新增事件處理程式

方法描述
document.getElementById(id).onclick = function(){code}向 onclick 事件新增事件處理程式

查詢 HTML 物件

首個 HTML DOM Level 1 (1998)，定義了 11 個 HTML 物件、物件集合和屬性。它們在 HTML5 中仍然有效。

後來，在 HTML DOM Level 3，加入了更多物件、集合和屬性。

屬性描述DOM
document.anchors返回擁有 name 屬性的所有 元素。1
document.applets返回所有 元素（HTML5 不建議使用）1
document.baseURI返回文件的絕對基準 URI3
document.body返回 元素1
document.cookie返回文件的 cookie1
document.doctype返回文件的 doctype3
document.documentElement返回 元素3
document.documentMode返回瀏覽器使用的模式3
document.documentURI返回文件的 URI3
document.domain返回文件伺服器的域名1
document.domConfig廢棄。返回 DOM 配置3
document.embeds返回所有 元素3
document.forms返回所有 元素1
document.head返回 元素3
document.images返回所有 元素1
document.implementation返回 DOM 實現3
document.inputEncoding返回文件的編碼（字符集）3
document.lastModified返回文件更新的日期和時間3
document.links返回擁有 href 屬性的所有 和 元素1
document.readyState返回文件的（載入）狀態3
document.referrer返回引用的 URI（連結文件）1
document.scripts返回所有

DOM流

<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());//輸出中國時間
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<img id="image" src="1.jpg">//設定圖片路徑
<script>
document.getElementById("image").src = "2.jpg";//改變圖片名稱（改變圖片）
</script>
</body>
</html>

CSS樣式：

<html>
<body>
<p id="p">Hello World!</p>
<script>
document.getElementById("p").style.color = "blue";//給文字改變顏色
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<h1 id="id1">Hello World!</h1>
<button type="button" onclick="document.getElementById('id1').style.color = 'red'">點選我！</button>//給button按鈕設定點選事件，在點選之後在改變文字顏色
</body>
</html>

CSS動畫：

<!DOCTYPE html>
<html>
<style>
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: blue;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}
</style>
<body>
<p><button onclick="move()">單擊我</button></p> //點選之後讓小盒子從左上角滑動到右下角
<div id ="container">
  <div id ="animate"></div>
</div>
<script>
//定義函式move
function move() {
  var elem = document.getElementById("animate");   //獲取小盒子
  var pos = 0;//定義pos為0
  var time = setInterval(frame, 5); //定時器 5s時間做完事件
  //定義函式 frame
  function frame() {
    if (pos == 350) {
      clearInterval(time);//如果pos==350時，清除定時器
    } else {
      pos++; 
      elem.style.top = pos + "px"; //設定與上方的距離
      elem.style.left = pos + "px"; //設定與左方的距離
    }
  }
}
</script>
</body>
</html>

DOM事件：

HTML 事件的例子：

  • 當使用者點選滑鼠時
  • 當網頁載入後
  • 當影像載入後
  • 當滑鼠移至元素上時
  • 當輸入欄位被改變時
  • 當 HTML 表單被提交時
  • 當使用者敲擊按鍵時
//點選事件
一：
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">點我一下</h1>//點我改變文字
<script>
function changeText(id) {
  id.innerHTML = "我改變了，哈哈哈哈哈！";
}
</script>
</body>
</html>
二：
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='我改變了，哈哈哈哈哈！'">點我一下</h1>
</body>
</html>

//移入移出事件
<!DOCTYPE html>
<html>
<style>
	div{
     	width:120px;
        height:20px;
        padding:40px;
    	background-color:red;
        color:#fff;
    }
</style>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)">請移入</div>
<script>
function mOver(obj) {
  obj.innerHTML = "請移出"
}
function mOut(obj) {
  obj.innerHTML = "請移入"
}
</script>
</body>
</html>

節點：

//新增節點
<!DOCTYPE html>
<html>
<body>
<div id="div1">
<p id="p1">這是一段文字。</p>
<p id="p2">這是另一段文字。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("這是新的文字。");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>
</body>
</html>

//刪除節點
<!DOCTYPE html>
<html>
<body>
<div id="div1">
<p id="p1">這是一段文字。</p>
<p id="p2">這是另一段文字。</p>
</div>
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>
</body>
</html>

//替換節點
<!DOCTYPE html>
<html>
<body>

<div id="div1">
<p id="p1">這是一段文字。</p>
<p id="p2">這是另一段文字。</p>
</div>

<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
var para = document.createElement("p");
var node = document.createTextNode("這是新的文字。");
para.appendChild(node);
parent.replaceChild(para,child);
</script>

</body>
</html>

事件監聽：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-zoPp0t46-1607906799174)(C:\Users\yijiu\AppData\Local\Temp\1606049678813.png)]

js HTML BOM

js window

Window 物件:

所有瀏覽器都支援 window 物件。它代表瀏覽器的視窗。

所有全域性 JavaScript 物件，函式和變數自動成為 window 物件的成員。

全域性變數是 window 物件的屬性。

全域性函式是 window 物件的方法。

甚至（HTML DOM 的）document 物件也是 window 物件屬性：

window.document.getElementById("box");

等同於：

document.getElementById("box");

視窗尺寸:

兩個屬性可用用於確定瀏覽器視窗的尺寸。

這兩個屬性都以畫素返回尺寸：

  • window.innerHeight - 瀏覽器視窗的內高度（以畫素計）
  • window.innerWidth - 瀏覽器視窗的內寬度（以畫素計）

瀏覽器視窗（瀏覽器視口）不包括工具欄和滾動條。

對於 Internet Explorer 8, 7, 6, 5：

  • document.documentElement.clientHeight
  • document.documentElement.clientWidth

或

  • document.body.clientHeight
  • document.body.clientWidth

其他視窗方法：

  • window.open() - 開啟新視窗
  • window.close() - 關閉當前視窗
  • window.moveTo() -移動當前視窗
  • window.resizeTo() -重新調整當前視窗

js window location

window.location 物件可不帶 window 字首書寫。

  • window.location.href 返回當前頁面的 href (URL)
  • window.location.hostname 返回 web 主機的域名
  • window.location.pathname 返回當前頁面的路徑或檔名
  • window.location.protocol 返回使用的 web 協議（http: 或 https:）
  • window.location.assign 載入新文件

js 彈出框

JavaScript 有三種型別的彈出框：警告框、確認框和提示框。

警告框

如果要確保資訊傳遞給使用者，通常會使用警告框。

當警告框彈出時，使用者將需要單擊“確定”來繼續。

語法：

window.alert("sometext");

window.alert() 方法可以不帶 window 字首來寫。

例項：

alert("一個警告框！");

確認框

如果您希望使用者驗證或接受某個東西，則通常使用“確認”框。

當確認框彈出時，使用者將不得不單擊“確定”或“取消”來繼續進行。

如果使用者單擊“確定”，該框返回 true。如果使用者單擊“取消”，該框返回 false。

語法：

window.confirm("sometext");

window.confirm() 方法可以不帶 window 字首來編寫。

例項：

var r = confirm("取消還是確認？");
if (r == true) {
    x = "確認！";
} else {
    x = "取消！";
}

提示框

如果您希望使用者在進入頁面前輸入值，通常會使用提示框。

當提示框彈出時，使用者將不得不輸入值後單擊“確定”或點選“取消”來繼續進行。

如果使用者單擊“確定”，該框返回輸入值。如果使用者單擊“取消”，該框返回 NULL。

語法

window.prompt("sometext","defaultText");

window.prompt() 方法可以不帶 window 字首來編寫。

例項

var person = prompt("請輸入您的排名", "第一名");
if (person != null) {
    document.getElementById("demo").innerHTML = "你好 " + person + "！今天天氣很好！";
}

折行

如需在彈出框中顯示折行，請在反斜槓後面加一個字元 n（\n）

例項

alert("Hello\nHow are you?");

相關文章