當前位置：首頁 > 编程语言 > java >内容正文

java

WEB安全基础-Javascrp相关知识点之DOM

發布時間：2025/3/15 java 37 豆豆

生活随笔收集整理的這篇文章主要介紹了 WEB安全基础-Javascrp相关知识点之DOM 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

JavaScript

問題1：在哪些地方可以運行JavaScript？
1.HTML的<script></script>之間；如： <script> function changetext(id) { id.innerHTML="謝謝"; }

</script>

2.HTML的事件屬性中；如onclick:

<h1 οnclick="changetext(this)">請點擊該文本</h1>

3.瀏覽器的JavaScript控制臺中；

問題2：JavaScript語法是否很復雜？
1.JavaScript遵循ECMAScript標準（ECMAScript包含了語法規范等） 2.語法很容易掌握，借用了C、Java的語法；
問題3：除了做網頁的動態效果外，JavaScript還經常用來做什么？
1.JavaScript DOM

HTML源碼已經完成，用JavaScript HTML DOM操作HTML；

用JS操作元素：
1.獲取元素內容；
1.獲取元素：getElementById():通過ID獲取元素； 2.獲取元素內容：.innerHTML:獲取元素類容如下： <p id="intro">Hello World!</p> <script> x=document.getElementByID("intro"); alert("id為intro元素的文本是："+x.innerHTML); </script> PS:alert()方法在JavaScript中表示彈出一個警告框，可以用來展示信息；

栗子1：獲取元素內容
使用瀏覽器打開百度調出JavaScript控制臺展示通過ID獲取HTML內容登錄框架如下圖所示：

console輸入：document.getElementById("TANGRAM__PSP_10__form")后：
輸入：document.getElementById("TANGRAM__PSP_10__form").innerHTML后

輸入：alert(document.getElementById("TANGRAM__PSP_10__form").innerHTML)后：

2：修改元素內容
1.獲取元素：getElementById():通過ID獲取元素； 2.用“=”直接賦值（用.innerHTML通過ID獲取元素）；如下： <p id="intro">Hello World!</p> <script> x=document.getElementById("intro"); x.innerHTML="Javascript改變HTML內容!"; </script>
栗子2：修改元素內容
如下圖所示：

栗子3：修改一個HTML form元素內容
1.選定登錄框元素，找到id； 2.獲取此id內容，并修改為一個html的iframe框架（使用Console）如：document.getElementById("XXXX").innerHTML="<iframe src='http://XXX.ZZZ.ZZZ'></iframe>" "<iframe src="http://XX.XXX.XXX"></iframe>" 如下圖所示：

3.如何創建動態的HTML元素內容
用document.write(); 如： <p id="intro">Hello World!</p> <script> x=document.getElementById("intro"); document.write(Date()); </script> 代碼如下：
<html><head> <title>第二個網頁</title> </head><p id="intro">Hello World!</p> <script> x=document.getElementById("intro"); document.write(Date()); </script><body> </body></html>運行結果如下：

栗子：
1.瀏覽器打開網站； 2.展示通過document.write方法動態寫入HTML； 3.寫入當前時間； document.write(Date()) 4.寫入iframe； document.write("<iframe src='XXX.XXX.XXX'></iframe>")
如下圖所示：

4.如何讓頁面增加互動
當我們點擊時，頁面內容改變；點擊事件onclick 如下： <script> function changetext(id) { id.innerHTML="謝謝!"; } </script> <h1 οnclick="changetext(this)">請點擊該文件</h1> 代碼如下： <html><head> <title>第三個網站</title> </head><body> <p id="infro">Hello World!</p><script> function changetext(id) { id.innerHTML="謝謝！"; } </script> <h1 οnclick="changetext(this)">請點擊該文本</h1></body></html>運行結果如下：

栗子：
1.使用瀏覽器打開網站； 2.展示登錄onclick事件； 3.修改為alert(1); 如下圖所示：

總結

以上是生活随笔為你收集整理的WEB安全基础-Javascrp相关知识点之DOM的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Qt creator5.7 OpenCV
下一篇：阿里云服务器CentOS6.8安装JDK