技術分享 | Web測試方法與技術之JavaScript 講解

的現代瀏覽器執行。

javaScript 可以直接寫入 HTML 輸出流，也就是直接改變 HTML 的內容。也可以對事件做出反應，比如鼠標點擊之后彈出彈窗，或者改變樣式之類的。

位置

javaScript 腳本必須位于 HTML 文檔中??標簽之間。?之間的代碼行包含了 JavaScript。瀏覽器會解釋并執行位于??之間的 JavaScript 代碼。

如果想要查看外部 JavaScript 腳本的內容的話，可以在開發者工具的 Elements 界面，找到對應的標簽，然后右鍵選擇 Reveal in Sources Panel。

image1080×618 120 KB

就可以跳轉到 Source 界面，在這里可以查看 JavaScript 腳本的內容，并且可以進行調試。

image1080×503 128 KB

輸出

在 JavaScript 中，可用不同的方式顯示數據。可以在瀏覽器的開發者工具的 Console 面板中查看輸出內容。

頁面彈出警告框。

window.alert("hello world")

將內容寫到 HTML 文檔中，這種方式會覆蓋原來的 HTML 文件。

document.write("hello world")

寫入到瀏覽器的控制臺

console.log("hello world")

操作HTML DOM

HTML DOM 被稱作文檔對象模型（Document Object Model）。是專門適用于 HTML 的文檔對象模型。可以將 HTML DOM 類比為網頁的 API。它將網頁中的各個元素都看作一個個對象，從而使網頁中的元素也可以被計算機語言獲取或者編輯。JavaScript 就可以利用 HTML DOM 動態地修改網頁。

image1080×591 48.2 KB

通過可編程的對象模型，JavaScript 獲得了足夠的能力來創建動態的 HTML。通過這種方式，JavaScript 能夠改變頁面中的所有 HTML 元素、HTML 屬性、CSS 樣式，并且能對頁面中的所有事件做出反應。

既然可以通過操作 DOM 去修改 web 頁面上的元素，那么首先得先確定到底修改的是哪一個元素。這就涉及到了元素定位的問題。JavaScript 提供了三種定位元素的方式。通常可以通過 id 定位出某個元素。標簽名和 class 都是可以找到多個元素，返回元素的列表。所以，如果一個元素有 id 的話，推薦使用 id 定位。

通過 id 定位

document.getElementById("su")

通過標簽名定位

document.getElementsByTagName("span")

通過類名定位

document.getElementsByClassName("btn")

改變內容

document.getElementById("su").innerHTML="hogwart"

改變屬性

document.getElementById("su").value="hogwarts"

var x = document.cookie;

使用 JavaScript 腳本還可以配置一些操作，來實現對應的效果。

當用戶點擊鼠標時：onclick=JavaScript

HTML 中：

JavaScript 中:

object.onclick=function(){SomeJavaScriptCode};

更多技術文章： ?https://qrcode.ceba.ceshiren.com/link?name=article&project_id=qrcode&from=hwyun×tamp=1649821787

JavaScript web前端

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。