|
WEB渗透测试工程师系统班250303期 第23节课作业 1. 什么是DOM DOM将整个文档表示为一个由节点和对象组成的树状结构，允许程序和脚本动态访问和更新文档的内容、结构和样式 2. 自己编写一遍本节课程内讲解的所有dom案例相关代码（逐行注释） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>创建添加标签</title> </head> <body> <input type="button" value="add">
<div id="div1"> <p><input type="text"/></p> </div> <script> function add() { var tag = "<p><input type='text'/></p>" document.getElementById("div1").insertAdjacentHTML('beforebegin', tag); //标签开始 } </script> </body> </html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>操作表单</title> </head> <body> <form id="1" action="https://www.baidu.com"> <input type="submit" value="提交"> <input type="button" value="button"> <a>提交</a> </form> <script> function Sub() { document.getElementById('1').submit(); } </script>
</body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定时器</title> </head> <body> <input id="1" type="text"> <input type="button" value="stop">
<div id="2"></div> <input type="button" value="del"> <script> //间隔执行 function time() { var tag = new Date(); document.getElementById("1").value = tag; } var i1 = setInterval('time()', 500);//定时器
function stop(){ clearInterval(i1); }
//执行一次 function del() { document.getElementById('2').innerText = '已删除！'; setTimeout(function () {document.getElementById('2').innerText = '';}, 4000); } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件</title> </head> <body> 标签绑定事件:<input type="button" value="点我"></input> <img src="baidu.png"></img> <input type="button" value="别点我！！" id="alert"></input> <script>
//标签绑定事件函数 function demo() { alert("你好！！！"); }
//dom对象绑定事件函数 document.getElementById('alert').addEventListener('click', xss); function xss() { alert("哈哈！"); }
</script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>获取对应标签（对象）</title> </head> <body> <h1 id="myHeader" class="header">一级标题</h1> <script> function getValue() { const a1 = document.querySelector('h1'); //通过标签获取对象 console.log(a1);
const a2 = document.querySelector('.header'); //通过 class 获取对象 加上点号 console.log(a2);
const a3 = document.querySelector('#myHeader'); //通过 id 获取对象 加上#号 console.log(a3);
const a4 = document.getElementById('myHeader'); console.log(a4);
const a5 = document.getElementsByClassName('header') console.log(a5);
} </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>操作元素数据</title> </head> <body> <h1 id="myHeader" class="header">一级标题</h1> <script> function getValue() { //document.querySelector('#myHeader').innerHTML = "这是更新后的一级标题"; const a1 = document.querySelector('#myHeader');
a1.innerHTML = "这是更新后的一级标题"; } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>操作元素属性</title> </head> <body> <img src="baidu.png" width="504" height="186" id="image" > <button>更新图片</button> <script> function demo(){ const a2 = document.querySelector('#image'); //修改元素属性值 a2.src = "mn.png"; a2.onclick=function(){alert(2);}; } </script> </body> </html>
一、笔记标题：WEB渗透系统班-JavaScript 基础（五）&JavaScript 基础（六）
二、文章内容：
1. 课程内容概要
主要知识点1：创建(插⼊)标签：inserAdjacentHTML() "afterbegin" ：标签结束标记前 "afterend" ：标签结束标记后 "beforebegin" ：标签开始前 "beforeend：标签开始标记之后
主要知识点2：操作表单
主要知识点3：定时器
主要知识点4：事件
主要知识点5：获取对应标签（对象）
主要知识点6：操作元素数据
主要知识点7：操作元素属性
2.重点知识与细节
概念1： 没有 概念2： 关键步骤 步骤1：暂无 步骤2： 步骤3： 相关代码
3.实操练习 和 解析
见作业
4.个人总结
本节课最大的收获是：学习了JS的一些操作 仍然存在疑问的地方：onclick是否可以操作 需要课后深入学习的内容：这章应该结束了，暂时莫得
| 
