ThinkPHP5.x注入漏洞學習
阿新 • • 發佈：2021-08-03
操作DOM物件
通過 HTML DOM，可訪問 JavaScript HTML 文件的所有元素
當網頁被載入時，瀏覽器會建立頁面的文件物件模型（Document Object Model）
JavaScript操作DOM能幹什麼
- 改變頁面中的所有 HTML 元素
- 改變頁面中的所有 HTML 屬性
- 改變頁面中的所有 CSS 樣式
- 對頁面中的所有事件做出反應
DOM節點的獲取
<body> <div id = 'div'> <p id = 'p1'>hello world</p> <p id = 'p2'>hello world</p> <p class = 'p3'>hello world</p> </div> </body> <script> // 獲取DOM節點的三種方式 var p1 = document.getElementById('p1'); var p2 = document.getElementsByTagName('p2'); var p3 = document.getElementsByClassName('p3'); var div = document.getElementById('div'); // 獲取父節點的所有子節點 var father = div.children; </script>
DOM節點的更新
// 更新DOM節點
p1.innerText = '你好世界';
p1.style.color = 'red'; //屬性使用字串
p1.style.fontSize = '20px'; // 使用駝峰命名法
DOM節點的刪除
先通過當前節點找到父節點，再通過父節點的方法刪除自己，刪除多個節點的時候，一定要注意節點的刪除的動態更新的
var p1 = document.getElementById('p1');
var father = p1.parentElement;
father.removeChild(p1)
DOM節點的插入
當我們獲得某個dom節點時，
如果這個dom節點的元素是空的，那麼我們可以直接通過innerText和innerHTML方法來修改元素，
如果元素不為空，那麼就不能這麼做，因為會覆蓋掉原來的元素，這個時候就要使用追加操作
<body> <p id='insert'>即將插入的文字</p> <div id='div'> <p id='p1'>hello world</p> <p id='p2'>hello world</p> <p class='p3'>hello world</p> </div> </body> <script> // 新增新的dom節點 var insert = document.getElementById('insert'); var div = document.getElementById('div'); div.appendChild(insert); </script>
建立一個新的標籤,實現節點的插入
<script>
// 建立一個新的標籤
var newP = document.createElement('p');
newP.id = 'newP';
newP.innerText = "新建立的文字";
div.appendChild(newP);
// 建立一個標籤節點
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript');
div.appendChild(myScript);
</script>
Demo案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id='insert'>即將插入的文字</p>
<div id='div'>
<p id='p1'>hello world</p>
<p id='p2'>hello world</p>
<p class='p3'>hello world</p>
</div>
</body>
</html>
<script>
// 獲取DOM節點的三種方式
var p1 = document.getElementById('p1');
var p2 = document.getElementsByTagName('p2');
var p3 = document.getElementsByClassName('p3');
var div = document.getElementById('div');
// 獲取父節點的所有子節點
var father = div.children;
// 更新DOM節點
p1.innerText = '你好世界';
p1.style.color = 'red';
p1.style.fontSize = '20px';
// 新增新的dom節點
var insert = document.getElementById('insert');
var div = document.getElementById('div');
div.appendChild(insert);
// 建立一個新的標籤
var newP = document.createElement('p');
newP.id = 'newP';
newP.innerText = "新建立的文字";
div.appendChild(newP);
// 建立一個標籤節點
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript');
div.appendChild(myScript);
</script>