-
JavaScript DOM
-
DOM的作用：对网页中的HTML元素进行查看和修改；
-
查看HTML元素（CSS选择器类型：id，类，标签）
方法 描述 举例 document.getElementById("id")通过 id 查找元素 document.getElementById("id2");document.getElementByClassName("name")通过类名查找元素 document.getElementsByClassName("te");document.getElementByTagName("name")通过标签名查找元素 <p>你好，世界!</p>document.getElementsByTagName("p"); -
改变HTML元素
方法 描述 举例 元素.innerHTML=新HTML值；完全改变HTML元素内部的内容 document.getElementById("id2").innerHTML=Date();
（接收输入信息用value；获取标签元素用 innerHTML）
理解：重修整个房间元素.属性=值；（了解）改变HTML元素的属性值(也可以是自定义的属性) document.getElementById("image").width="360";
理解：改变局部的装饰元素.setAttribute(属性，值)；（了解）改变和添加HTML元素的属性值(也可以是自定义的属性) document.getElementById("image").setAttribute("width","500");
理解：改变局部的装饰 或 添加新的装饰元素.style.属性=值；（了解）改变HTML元素的CSS属性样式 document.getElementById("image").style.backgroundColor="blue";
理解：改变装修风格
-
HTML 事件
// 在 HTML 中，带有"on"前缀的事件（如onclick、ondblclick等）是HTML事件//1. <!--onblur--> 元素失去焦点
<input type="text" id="id3" onblur="upperCase()">
<script>
function upperCase(){document.getElementById("id3").value=document.getElementById("id3").value.toUpperCase();
}
</script>//2. <!--onclick事件--> 当用户单击时执行函数
Field1: <input type="text" id="field1" value="Hello World!">
Field2: <input type="text" id="field2">
<button onclick="document.getElementById('field2').value=document.getElementById('field1').value">单击复制按钮</button>//3. <!--ondbclick事件--> 当用户双击时执行函数
<button ondblclick="document.getElementById('field2').value=document.getElementById('field1').value">双击复制按钮</button>//4. <!--onerror事件--> 加载文档或图像时发生错误
<img src="image.gif" onerror="alert('图像加载失败')">//5. <!--onfocus事件--> 元素获得焦点
First:<input type="text" onfocus="setStyle(this.id)" id="id4">
<script>
function setStyle(x){document.getElementById(x).style.background="blue";
}
</script>//6. <!--onmousedown事件--> 鼠标被按下
<script>
function load(){alert("你按下了鼠标");
}
</script>
<button onmousedown="load()">按钮</button>//7. <!--onmousemove事件--> 鼠标移动
<script>
function mouseMove(){alert("鼠标经过了标题")
}
</script>
<h1 onmousemove="mouseMove()">经过标题</h1>//8. <!--onmouseout事件--> 鼠标从某元素上移开
<script>
function mouseOut(){alert("鼠标离开了标题")
}
</script>
<h1 onmousemove="mouseOut()">离开标题</h1>//9. <!--onmouseover事件--> 鼠标移动到某元素上
<script>
function mouseOver(){alert("鼠标移动到了标题上")
}
</script>
<h1 onmousemove="mouseOver()">标题上方</h1>//10. <!--onmouseup 事件--> 鼠标按键被松开
<div onmouseup="mUp(this)" style="background-color: aquamarine;width:220px;height:200px;">"点击鼠标"</div>//11. <!--onreset事件--> 重置按钮被点击
<form onreset="alert('重置按钮被点击')">
<input type="reset" value="Reset" >-
HTML 事件归纳（12）
| 说明 | 函数 | ||||||
| 点击 | onclick，ondbclick | ||||||
| 焦点 | onblur，onfocus | ||||||
| 鼠标 |
| ||||||
| 其他 | onchange，onerror，onreset |
-
DOM 事件
// 在 JavaScript 中，通过 addEventListener 处理的事件（如 click、dblclick等[去除 on ]）是 DOM 事件
1. //<!--onclick应用--> 点击时触发函数
//改变文字函数
function changeText(id){id.innerHTML="Text做出了改变";
}
<h1 onclick="changeText(this)">changeText</h1>2. //<!--onchange应用--> 当用户改变input输入框内容时执行一段Javascript代码
//改变输入函数
function changeScan(){document.getElementById("id3").value.toUpperCase();
}
<input type="text" id="id3" onchange="changeScan()">3. //<!--onmouseover和onmouseout--> 当用户将鼠标移至 HTML 元素上或移出时触发某个函数//放上鼠标进行的操作
function mOver(obj){obj.innerHTML="谢谢您";
}//移开鼠标进行的操作
function mOut(obj) {obj.innerHTML = "请把鼠标移上来"
}
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:skyblue;width:120px;height:200px;">"移动鼠标"</div>4. //<!--onmousedown, onmouseup 事件--> 当鼠标按钮被点击时，onmousedown 事件被触发；然后当鼠标按钮被释放时，onmouseup 事件被触发//点击鼠标操作
function mDown(obj){obj.style.backgroundColor="blue";obj.innerHTML="松开鼠标";
}//松开鼠标操作
function mUp(obj) {obj.style.backgroundColor="red";obj.innerHTML="谢谢您";
}
<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color: aquamarine;width:220px;height:200px;">"点击鼠标</div>5. // <!--DOM事件监听器(了解)--> 语法：element.addEventListener(事件,函数);
function listen(){alert("Hello");
}
document.getElementById("id4").addEventListener("click",listen);6. // <--了解 禁用内容(了解)--> //禁止选中文字//function(e){e.preventDefault();} 取消事件的默认动作
document.addEventListener('contextmenu',function(e){e.preventDefault();});//禁止右键
document.addEventListener('selectstart',function(e){e.preventDefault();});-
BOM 事件
JavaScript Window |
| ||||||||||||||||||||||||
JavaScript Window Location |
| ||||||||||||||||||||||||
JavaScript Window History |
|
-
BOM 和 DOM 的区别
- BOM 是浏览器对象模型，DOM 是文档对象模型；
- BOM 用于浏览器窗口交互，如
window.location.href； - DOM 用于网页内容交互，如
document.getElementById();
-
结语
亲爱的网络安全同行和爱好者们，
在我分享的网络安全自学笔记中，我深感自己的知识和经验有限。为了更好地服务于这个领域，我真诚地希望各位能够指出我的错误和不足，以便我们共同进步，提升网络安全防护能力。
我深知，网络安全是一个不断发展的领域，需要我们持续学习和实践。我的笔记可能存在理解偏差、技术更新不及时或实践应用上的疏漏。因此，我非常欢迎各位专家和同好们提出宝贵意见，帮助我完善内容，确保信息的准确性和实用性。
请您在阅读过程中，如果发现任何问题，无论是小的笔误还是大的概念性错误，都能及时反馈给我。您的每一次指正都是我进步的阶梯，也是我们共同守护网络安全的责任所在。
感谢您的理解和支持，让我们一起努力，为网络安全领域的发展贡献力量！