webgl學習筆記3_javascript的HTML DOM

HTML DOM 方法

HTML DOM 方法是您能夠（在 HTML 元素上）執行的動作。
HTML DOM 屬性是您能夠設置或改變的 HTML 元素的值。

HTML DOM 能夠通過 JavaScript 進行訪問（也可以通過其他編程語言）。
在 DOM 中，所有 HTML 元素都被定義爲對象。
編程界面是每個對象的屬性和方法。
屬性是您能夠獲取或設置的值（就比如改變 HTML 元素的內容）。
方法是您能夠完成的動作（比如添加或刪除 HTML 元素）。

<html>
<body>
//改變p元素內容
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body>
</html>

getElementById 是方法

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

innerHTML 是屬性。

用於獲取或替換 HTML 元素的內容

HTML DOM Document 對象

查找 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 元素的樣式

添加和刪除元素

方法	描述
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 對象

屬性	描述	DOM
document.anchors	返回擁有 name 屬性的所有 `<a>` 元素	1
document.applets	返回所有 `<applet>` 元素（HTML5 不建議使用）	1
document.baseURI	返回文檔的絕對基準 URI	3
document.body	返回 `<body>` 元素	1
document.cookie	返回文檔的 cookie	1
document.doctype	返回文檔的 doctype	3
document.documentElement	返回 `<html>` 元素	3
document.documentMode	返回瀏覽器使用的模式	3
document.documentURI	返回文檔的 URI	3
document.domain	返回文檔服務器的域名	1
document.domConfig	廢棄。返回 DOM 配置	3
document.embeds	返回所有 `<embed>` 元素	3
document.forms	返回所有 `<form>` 元素	1
document.head	返回 `<head>` 元素	3
document.images	返回所有 `<img>` 元素	1
document.implementation	返回 DOM 實現	3
document.inputEncoding	返回文檔的編碼（字符集）	3
document.lastModified	返回文檔更新的日期和時間	3
document.links	返回擁有 href 屬性的所有 `<area>` 和 `<a>` 元素	1
document.readyState	返回文檔的（加載）狀態	3
document.referrer	返回引用的 URI（鏈接文檔）	1
document.scripts	返回所有 `<script>` 元素	3
document.strictErrorChecking	返回是否強制執行錯誤檢查	3
document.title	返回 `<title>` 元素	1
document.URL	返回文檔的完整 URL	1

JavaScript HTML DOM 動畫

JavaScript 動畫是通過對元素樣式進行漸進式變化編程完成的
案例

<!DOCTYPE html>
<html>
<style>
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}
</style>
<body>
<p><button onclick="myMove()">單擊我</button></p> 
<div id ="container">
  <div id ="animate"></div>
</div>
<script>
function myMove() {
  var elem = document.getElementById("animate");   
  var pos = 0;
  var id = setInterval(frame, 5);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++; //線性勻速沿對角線移動，先運動水平方向與垂直方向（力的分解）
      elem.style.top = pos + "px"; //水平方向
      elem.style.left = pos + "px"; //垂直方向
    }
  }
}
</script>
</body>
</html>

JavaScript HTML DOM 事件

向 button 元素分配 onclick 事件
onload 和 onunload 事件
當用戶進入後及離開頁面時，會觸發 onload 和 onunload 事件。
onload 和 onunload 事件可用於處理 cookie。
onchange 事件
onchange 事件經常與輸入字段驗證結合使用

<!DOCTYPE html>
<html>
<head>
<script>
//當用戶改變輸入字段內容時，會調用 upperCase() 函數
function myFunction() {
  var x = document.getElementById("fname");
  x.value = x.value.toUpperCase();
}
</script>
</head>
<body>
請輸入您的名字：<input type="text" id="fname" onchange="myFunction()">
<p>離開輸入字段時，會觸發一個函數，將輸入文本轉換爲大寫。</p>
</body>
</html>

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用於當用戶將鼠標移至 HTML 元素上或移出時觸發某個函數
onmousedown, onmouseup 以及 onclick 事件構成了完整的鼠標點擊事件

當鼠標按鈕被點擊時，onmousedown 事件被觸發；
當鼠標按鈕被釋放時，onmouseup 事件被觸發；
當鼠標點擊完成後，onclick 事件被觸發。

<!DOCTYPE html>
<html>
<body>
<div onmousedown="mDown(this)" onmouseup="mUp(this)"
style="background-color:#D94A38;width:90px;height:20px;padding:40px;">
點擊鼠標</div>
<script>
function mDown(obj) {
  obj.style.backgroundColor = "#1ec5e5";
  obj.innerHTML = "鬆開鼠標";
}
function mUp(obj) {
  obj.style.backgroundColor="#D94A38";
  obj.innerHTML="謝謝您";
}
</script>
</body>
</html>

JavaScript HTML DOM 事件監聽器

addEventListener() 方法爲指定元素指定事件處理程序。
addEventListener() 方法爲元素附加事件處理程序而不會覆蓋已有的事件處理程序。
您能夠通過使用 removeEventListener() 方法輕鬆地刪除事件監聽器。
語法

element.addEventListener(event, function, useCapture);
//第一個參數是事件的類型（比如 "click" 或 "mousedown"）。
//第二個參數是當事件發生時我們需要調用的函數。
//第三個參數是布爾值，指定使用事件冒泡還是事件捕獲。此參數是可選的。
element.removeEventListener("mousemove", myFunction);
//刪除已通過 addEventListener() 方法附加的事件處理程序

案例：

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
  background-color: coral;
  border: 1px solid;
  padding: 50px;
  color: white;
  font-size: 20px;
}
</style>
</head>
<body>

<h1>JavaScript removeEventListener()</h1>

<div id="myDIV">
  <p>這個 div 元素有一個 onmousemove 事件處理程序，每次在這個橙色字段中移動鼠標時都會顯示一個隨機數。</p>
  <p>單擊按鈕以刪除 div 的事件處理程序。</p>
  <button onclick="removeHandler()" id="myBtn">刪除</button>
</div>

<p id="demo"></p>

<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);

function myFunction() {
  document.getElementById("demo").innerHTML = Math.random();
}

function removeHandler() {
  document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>

</body>
</html>

飲水思源，點擊去W3school

webgl學習筆記3_javascript的HTML DOM

HTML DOM 方法

HTML DOM Document 對象

JavaScript HTML DOM 動畫

JavaScript HTML DOM 事件

onmouseover 和 onmouseout 事件

JavaScript HTML DOM 事件監聽器

AI 畫圖真刺激，手把手教你如何用 ComfyUI 來畫出刺激的圖

公司剛入職了一名 Java 中級開發，短短 4 行代碼居然湊齊了 3 個 bug！我哭了~~

智影AI故事轉視頻創作神器！快速開啓AI繪畫小說推文之旅

數據展示動態（跑分）顯示

公衆號5月C#/.NET熱文一覽

git 下載大陸鏡像地址

webgl學習筆記1_創建場景（站在巨人的肩膀）

學習筆記(01):WebGL 可視化3D繪圖框架：Three.js 零基礎上手實戰-WebGL、OpenGL ES規範及瀏覽器3D繪製...

THREE實戰1_代碼重構點、線、面

第十八次csp認證心得

C++矩陣的鞍點

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結