javascript中DOM

阿新 • • 發佈：2021-05-06

DOM全稱：Document Object Model文件物件模型 JS通過DOM來對HTML文件進行操作。
文件：文件表示的就是整個HTML網頁文件。物件：物件表示將網頁中的每一個部分都轉換位一個物件。
模型：使用模型來表示物件之間的關係，這樣方便我們獲取物件。
2.節點
節點：Node-----構成HTML文件最基本的單元。
常用節點分為四類：
文件節點：整個HTML文件
元素節點：HTML文件中的HTML標籤
屬性節點：元素的屬性
文字節點：HTML標籤中的文字內容

例子：使用JavaScript修改按鈕的名稱
程式碼：

<body>
		<button id="mybtn" 
>我是一個按鈕</button>
		<script type="text/javascript">
			// 獲取到button物件
			var btn = document.getElementById("mybtn");
			// 修改按鈕文字
			btn.innerHTML="I'm Button"
		</script>
	</body>

圖片如下：
在這裡插入圖片描述
修改後:

事件:就是文件或瀏覽器視窗中發生的一些特性的互動瞬間.
JavaScript與HTML之間的互動是通過事件來實現的,對於Web應用來說,有下面這些代表性的事件:點選某個元素,.將滑鼠移動至某個元素上方. 按下鍵盤上某個鍵等等.

可以在事件對應的屬性中設定一些js程式碼
當事件被觸發時，這些程式碼將會執行(不推薦使用,結構和行為耦合)不方便維護

 <button id="btn" onclick="alert('點選按鈕')">我是一個按鈕</button>

使結構和行為分離:

<body>
		<!-- 可以在事件對應的屬性中設定一些js程式碼
		 當事件被觸發時，這些程式碼將會執行-->
		 <button id="btn">我是一個按鈕</button>
		 <script type= 
"text/javascript">
			 // 事件：就是使用者和瀏覽器之間的互動行為
			 // 比如：點選按鈕、滑鼠移動、關閉視窗等等
			 
			 
			 // 獲取按鈕物件
			 var btn = document.getElementById("btn");
			 // 可以為按鈕的對應事件繫結處理函式的形式來響應事件
			 //當事件被觸發時，對應的行數將會被呼叫
			 
			 // 繫結一個單擊事件
			 btn.onclick = function(){
				 alert("單擊按鈕");
			 };
		 </script>
	</body>

圖片如下:
在這裡插入圖片描述

javascript中DOM獲取和設定元素的內容、樣式及效果

getElementById() 根據id獲取dom元素沒有找到則返會Null <!DOCTYPE html> <html lang=\"en\">

javascript中DOM

DOM全稱：Document Object Model文件物件模型 JS通過DOM來對HTML文件進行操作。文件：文件表示的就是整個HTML網頁文件。物件：物件表示將網頁中的每一個部分都轉換位一個物件。模型：使用模型來表示物件之間的關

JavaScript中DOM查詢封裝函式

在JavaScript中可以通過BOM查詢html文件中的元素，也就是所謂的在html中獲取物件然後對它新增一個函式。

javascript中contains是否包含功能實現程式碼(擴充套件字元、陣列、dom)

一個小誤區 JS中的contains 今天想要用JS判斷集合中是否包含另一個集合。發現，Contains並不能達到所要的效果，查詢之後發現了問題

【JavaScript】原生js中DOM操作之元素建立、插入和移除

技術標籤：JS例項javascriptjs 建立元素 <body> <input type="text" id="txt1">

JavaScript中BOM和DOM詳解

目錄BOM（瀏覽器物件模型）1. window 獲取瀏覽器c視窗尺寸2. screen 獲取電腦螢幕大小3. window 開啟關閉視窗4. 瀏覽器事件5. location6. history7. navigator 獲取瀏覽器相關資訊8. 彈窗DOM (文件物件模型)DOM 分類

JavaScript 中的文件物件模型 DOM

目錄1、什麼是DOM2、選擇元素3、getElementById()4、querySelector()5、querySelectorAll()6、新增新元素7、更改樣式8、如何監聽事件

JavaScript中MutationObServer監聽DOM元素詳情

一、基本使用可以通過MutationObserver建構函式例項化，引數是一個回撥函式。 let observer = new MutationObserver(() => console.log(\"change\"));

一文解讀JavaScript中的文件物件（DOM）

大家好，我是IT共享者，人稱皮皮。前言相信做網站對JavaScript再熟悉不過了，它是一門指令碼語言，不同於Python的是，它是一門瀏覽器指令碼語言，而Python則是伺服器指令碼語言，我們不光要會Python，還要會JavaS

JavaScript中準確判斷資料型別的方法

js中準確判斷資料型別的方法強烈推薦的Markdown編寫工具Markdown Nice，點選該連結詳細琢磨

詳解javascript中var與ES6規範中let、const區別與用法

隨著ES6規範的到來，Js中定義變數的方法已經由單一的 var 方式發展到了 var、let、const 三種之多。var 眾所周知，可那倆新來的貨到底有啥新特性呢？到底該啥時候用呢？下面就是小編總結出的關於javascript中var與ES

JavaScript中的型別檢查

JS 的動態型別有好有壞。好的一面，不必指明變數的型別。不好的是，咱們永遠無法確定變數的型別。

詳解JavaScript中精度失準問題及解決方法

首先來看一下JavaScript中的數字型別的儲存情況 ①JS中所有的數字（小數、整型）都是浮點型

JavaScript 中的無窮數(Infinity)詳解

為了保證的可讀性，本文采用意譯而非直譯。 Infinity(無窮大)在 JS 中是一個特殊的數字，它的特性是：它比任何有限的數字都大，如果不知道 Infinity，我們在一些運算操作遇到時，就會覺得很有意思。

JavaScript中的this原理及6種常見使用場景詳解

一、this原理 this是JavaScript的一個關鍵字，函式呼叫時才會出現；因為函式是在一定的環境中執行的，呼叫函式時肯定需要知道是[誰呼叫的]？就用到了this進行指向；

JavaScript中this的學習筆記及用法整理

很多人可能會有疑問,this到底是什麼?為什麼this的值變化多端? 首先我們來概括下this.

javascript中的with語句學習筆記及用法

在JS中，with 語句的作用是將程式碼的作用域設定到一個特定的物件中。其語法如下：with (expression) statement;

JavaScript中的惰性載入函式及優勢

定義惰性載入函式表示函式執行的分支僅會發生一次，有兩種實現惰性載入函式的方式，第一種是在函式被呼叫時再處理，在第一次呼叫中，該函式會覆蓋為另外一個按合適方式執行的函式，這樣任何對函式的呼叫都不用再經過

JavaScript中this函式使用例項解析

這篇文章主要介紹了JavaScript中this函式使用例項解析,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

原生javascript中this幾種常見用法總結

本文例項講述了原生javascript中this幾種常見用法。分享給大家供大家參考，具體如下：

javascript中DOM

相關推薦