WEB安全基础-Javascrp相关知识点之DOM
生活随笔
收集整理的這篇文章主要介紹了
WEB安全基础-Javascrp相关知识点之DOM
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
JavaScript
問題1：在哪些地方可以運(yùn)行JavaScript？
1.HTML的<script></script>之間； 如： <script> function changetext(id) { id.innerHTML="謝謝"; }
問題2：JavaScript語法是否很復(fù)雜？
1.JavaScript遵循ECMAScript標(biāo)準(zhǔn)（ECMAScript包含了語法規(guī)范等） 2.語法很容易掌握，借用了C、Java的語法；
問題3：除了做網(wǎng)頁的動(dòng)態(tài)效果外，JavaScript還經(jīng)常用來做什么？
1.JavaScript DOM
1.獲取元素內(nèi)容；
1.獲取元素：getElementById():通過ID獲取元素； 2.獲取元素內(nèi)容：.innerHTML:獲取元素類容 如下： <p id="intro">Hello World!</p> <script> x=document.getElementByID("intro"); alert("id為intro元素的文本是："+x.innerHTML); </script> PS:alert()方法在JavaScript中表示彈出一個(gè)警告框，可以用來展示信息；
栗子1：獲取元素內(nèi)容
使用瀏覽器打開百度 調(diào)出JavaScript控制臺(tái) 展示通過ID獲取HTML內(nèi)容 登錄框架 如下圖所示：
console輸入：document.getElementById("TANGRAM__PSP_10__form")后：
輸入：document.getElementById("TANGRAM__PSP_10__form").innerHTML后
輸入：alert(document.getElementById("TANGRAM__PSP_10__form").innerHTML)后：
2：修改元素內(nèi)容
1.獲取元素：getElementById():通過ID獲取元素； 2.用“=”直接賦值（用.innerHTML通過ID獲取元素）； 如下： <p id="intro">Hello World!</p> <script> x=document.getElementById("intro"); x.innerHTML="Javascript改變HTML內(nèi)容!"; </script>
栗子2：修改元素內(nèi)容
如下圖所示：
栗子3：修改一個(gè)HTML form元素內(nèi)容
1.選定登錄框元素，找到id； 2.獲取此id內(nèi)容，并修改為一個(gè)html的iframe框架（使用Console） 如：document.getElementById("XXXX").innerHTML="<iframe src='http://XXX.ZZZ.ZZZ'></iframe>" "<iframe src="http://XX.XXX.XXX"></iframe>" 如下圖所示：
3.如何創(chuàng)建動(dòng)態(tài)的HTML元素內(nèi)容
用document.write(); 如： <p id="intro">Hello World!</p> <script> x=document.getElementById("intro"); document.write(Date()); </script> 代碼如下：
<html><head> <title>第二個(gè)網(wǎng)頁</title> </head><p id="intro">Hello World!</p> <script> x=document.getElementById("intro"); document.write(Date()); </script><body> </body></html>運(yùn)行結(jié)果如下：
栗子：
1.瀏覽器打開網(wǎng)站； 2.展示通過document.write方法動(dòng)態(tài)寫入HTML； 3.寫入當(dāng)前時(shí)間； document.write(Date()) 4.寫入iframe； document.write("<iframe src='XXX.XXX.XXX'></iframe>")
如下圖所示：
4.如何讓頁面增加互動(dòng)
當(dāng)我們點(diǎn)擊時(shí)，頁面內(nèi)容改變；點(diǎn)擊事件onclick 如下： <script> function changetext(id) { id.innerHTML="謝謝!"; } </script> <h1 οnclick="changetext(this)">請(qǐng)點(diǎn)擊該文件</h1> 代碼如下： <html><head> <title>第三個(gè)網(wǎng)站</title> </head><body> <p id="infro">Hello World!</p><script> function changetext(id) { id.innerHTML="謝謝！"; } </script> <h1 οnclick="changetext(this)">請(qǐng)點(diǎn)擊該文本</h1></body></html>運(yùn)行結(jié)果如下：
栗子：
1.使用瀏覽器打開網(wǎng)站； 2.展示登錄onclick事件； 3.修改為alert(1); 如下圖所示：
問題1：在哪些地方可以運(yùn)行JavaScript？
1.HTML的<script></script>之間； 如： <script> function changetext(id) { id.innerHTML="謝謝"; }
</script>
<h1 οnclick="changetext(this)">請(qǐng)點(diǎn)擊該文本</h1>
問題2：JavaScript語法是否很復(fù)雜？
1.JavaScript遵循ECMAScript標(biāo)準(zhǔn)（ECMAScript包含了語法規(guī)范等） 2.語法很容易掌握，借用了C、Java的語法；
問題3：除了做網(wǎng)頁的動(dòng)態(tài)效果外，JavaScript還經(jīng)常用來做什么？
1.JavaScript DOM
HTML源碼已經(jīng)完成，用JavaScript HTML DOM操作HTML；
1.獲取元素內(nèi)容；
1.獲取元素：getElementById():通過ID獲取元素； 2.獲取元素內(nèi)容：.innerHTML:獲取元素類容 如下： <p id="intro">Hello World!</p> <script> x=document.getElementByID("intro"); alert("id為intro元素的文本是："+x.innerHTML); </script> PS:alert()方法在JavaScript中表示彈出一個(gè)警告框，可以用來展示信息；
栗子1：獲取元素內(nèi)容
使用瀏覽器打開百度 調(diào)出JavaScript控制臺(tái) 展示通過ID獲取HTML內(nèi)容 登錄框架 如下圖所示：
console輸入：document.getElementById("TANGRAM__PSP_10__form")后：
輸入：document.getElementById("TANGRAM__PSP_10__form").innerHTML后
輸入：alert(document.getElementById("TANGRAM__PSP_10__form").innerHTML)后：
2：修改元素內(nèi)容
1.獲取元素：getElementById():通過ID獲取元素； 2.用“=”直接賦值（用.innerHTML通過ID獲取元素）； 如下： <p id="intro">Hello World!</p> <script> x=document.getElementById("intro"); x.innerHTML="Javascript改變HTML內(nèi)容!"; </script>
栗子2：修改元素內(nèi)容
如下圖所示：
栗子3：修改一個(gè)HTML form元素內(nèi)容
1.選定登錄框元素，找到id； 2.獲取此id內(nèi)容，并修改為一個(gè)html的iframe框架（使用Console） 如：document.getElementById("XXXX").innerHTML="<iframe src='http://XXX.ZZZ.ZZZ'></iframe>" "<iframe src="http://XX.XXX.XXX"></iframe>" 如下圖所示：
3.如何創(chuàng)建動(dòng)態(tài)的HTML元素內(nèi)容
用document.write(); 如： <p id="intro">Hello World!</p> <script> x=document.getElementById("intro"); document.write(Date()); </script> 代碼如下：
<html><head> <title>第二個(gè)網(wǎng)頁</title> </head><p id="intro">Hello World!</p> <script> x=document.getElementById("intro"); document.write(Date()); </script><body> </body></html>運(yùn)行結(jié)果如下：
栗子：
1.瀏覽器打開網(wǎng)站； 2.展示通過document.write方法動(dòng)態(tài)寫入HTML； 3.寫入當(dāng)前時(shí)間； document.write(Date()) 4.寫入iframe； document.write("<iframe src='XXX.XXX.XXX'></iframe>")
如下圖所示：
4.如何讓頁面增加互動(dòng)
當(dāng)我們點(diǎn)擊時(shí)，頁面內(nèi)容改變；點(diǎn)擊事件onclick 如下： <script> function changetext(id) { id.innerHTML="謝謝!"; } </script> <h1 οnclick="changetext(this)">請(qǐng)點(diǎn)擊該文件</h1> 代碼如下： <html><head> <title>第三個(gè)網(wǎng)站</title> </head><body> <p id="infro">Hello World!</p><script> function changetext(id) { id.innerHTML="謝謝！"; } </script> <h1 οnclick="changetext(this)">請(qǐng)點(diǎn)擊該文本</h1></body></html>運(yùn)行結(jié)果如下：
栗子：
1.使用瀏覽器打開網(wǎng)站； 2.展示登錄onclick事件； 3.修改為alert(1); 如下圖所示：
總結(jié)
以上是生活随笔為你收集整理的WEB安全基础-Javascrp相关知识点之DOM的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Qt creator5.7 OpenCV
- 下一篇： java 保留html_好程序员Java