冯娜_20210115冯娜
知识点总结
一、DOM：文档对象模型，用于操作网页中的元素
1、在每个HTML页面被浏览器解析的时候会在内存中创建一棵DOM树，通过DOM模型，可以访问所有的HTML元素，可以对其内容进行修改和删除，也可以创建新的元素，创建新的元素需要挂到DOM树上才可以在网页中显示出来。
2、查找节点
document.getElementById();//根据id获取一个元素，所以id值不可以有相同的
document.getElementsByClassName();//根据class获取一（多）个元素，得到的数据类型是数组，具体的某一个元素可以用数组下标来寻找
document.getElementsByName();//根据name获取一（多）个元素，得到的数据类型是数组，具体的某一个元素可以用数组下标来寻找
document.getElementsByTagName();//根据标签名获取元素
document.querySelector();//根据选择器获取元素 （与css选择器的规则一样）
document.querySelectorAll();//根据选择器选择一（多）个元素，返回的是数组
3、案例：复选框的全选反选
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="checkbox" name="item" value="99" " />a
<input type="checkbox" name="item" value="9.9" "/>b
<input type="checkbox" name="item" value="199" " />c
<input type="checkbox" name="item" value="299" "/>d
<input type="checkbox" name="item" value="399" "/>e
<br>
<input type="checkbox" id="all" onclick="quan()" />全选/全不选
<button type="button" onclick="fan()">反选</button>
<button type="button" onclick="sum()">结算</button>
<p>总计：<span id="price">0</span>元</p>
<script type="text/javascript">
var it=document.querySelectorAll("[name=item]");
//全选、全不选 事件
function quan(){
//获取全选框
var all = document.querySelector("#all");
//遍历每一个input元素
for(var i=0;i<it.length;i++){
//当前循环被遍历的元素
var cur=it[i];
//设置全选
cur.checked = all.checked;
}
}
//反选事假
function fan(){
for(var i=0;i<it.length;i++){
var cur =it[i];
//设置反选
cur.checked=!cur.checked;
}
}
//求合计事假
function sum(){
var sum=0;
for(var i=0;i<it.length;i++){
var cur=it[i];
//若被选中
if(cur.checked){
//parseFloat解析一个字符串，返回一个浮点数
sum=sum+parseFloat(cur.value);
}
}
//将价格写入sum
document.querySelector("#price").innerText=sum;
}
</script>
</body>
</html>
4、DOM操作
document.createElment()；//创建元素节点
document.createTextNode()；//创建文本节点
元素对象.appendChild()；//向节点的子节点列表末尾添加新的子节点
元素对象.removeChild()；//删除子节点
元素对象.hasChildNodes()；//返回元素是否拥有子节点
5、js操作css样式
//方式一
.style.样式名="样式值";
.className="类名";
案例：鼠标点击效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//获取html元素
var html=document.querySelector("html");
//给html添加监听事件
html.addEventListener("click",heart,false);
//写heart函数方法
function heart(e){
var fontsize=16;
//鼠标位置 clientX,clientY 鼠标位置的坐标 -fontsize/2是为了让箭头居中显示
var left=e.clientX-fontsize/2;
var top=e.clientY-fontsize/2;
//创建一个b元素
var b=document.createElement("b");
//b元素的内容
b.innerText="❤";
//设置b元素的属性
b.style="font-size: " + fontsize + "px;color:" + randomColor() + ";position:absolute;left:"+ left + "px;top:" + top + "px;opacity:1;";
//将b元素添加到body中，显示在页面上
document.body.appendChild(b);
// 定义一个 定时任务, 修改他的 style 属性
var timer = setInterval(function(){
// 去掉 top 值的 单位 px
var top = b.style.top.replace("px", "");
// 调整位置
b.style.top = top - 1 + "px" ;
// 隐藏
b.style.opacity -= 0.05;
// 看不见时
if(b.style.opacity < 0){
// 移除元素
document.body.removeChild(b);
// 清除定时器
clearInterval(timer);
}
}, 100);
}
//随机颜色
function randomColor(){
//~~的作用是去掉小数部分
return "rgb(" + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + ")";
}
</script>
</body>
</html>
6、表单校验
web网页的安全问题，表单数据验证通过后提交给服务器（客户端），并且发送请求给服务端，服务端再次验证数据，不合法的数据响应给客户端。
二、web常见的安全问题
web攻击动机：
1、恶作剧；
2、关闭Web站点，拒绝正常服务；
3、篡改Web网页，损害企业名誉;
4、免费浏览收费内容;
5、盗窃用户隐私信息，例如手机号、Email等个人信息;
6、以用户身份登执行非法操作，从而获得暴利;
7、以此为跳板攻击企业内网其他系统;
8、网页挂木马，攻击访问网页的特定用户群;
9、仿冒系统发布方，诱骗用户执行危险操作，例如用木马替换正常下载文件，要求用户汇款等
三、JavaScript
1、作用：与用户进行交互
2、历史：ECMA：es1~es10，现在主要 使用es6
3、JavaScript是脚本语言，是可插入HTML页面的编程代码，轻巧灵活，兼顾函数式编程和面向对象编程，解释型语言，不会生成中间文件，解释一行，执行一行；弱类型语言，不同类型的数据可以赋值给同一个变量
4、JavaScript语法组成：ECMASript（核心部分）、BOM、DOM
5、JavaScript的编写方式
//1、在head中书写
<head>
<script type="text/javascript">
// JavaScript 代码
</script>
</head>
//2、在body中书写
<body>
<script type="text/javascript">
// JavaScript 代码
</script>
</body>
//3、通过script标签的src属性导入
<script src="xxx.js" type="text/javascript"></script>
6、可以使用中文命名变量
7、JavaScript区分大小写
心得体会
今天做的练习相对之前几天难度有所增加，昨天理解错了一个问题，就是document是DOM中的查找DOM节点的操作，昨天错把document理解为了BOM中的操作。之前被问道过web网站前端页面是否安全的问题，当时从来没有想过这个问题，原来这里的安全问题还是很明显的。
近期评论