JavaScript 05
目录
一、核心DOM
(接上篇)
3. Node:节点对象
3.1 Node对象:代表文档树中的一个节点,是其他五个对象的父对象;
3.2 特点:所以DOM对象都可以被认为是一个节点;
3.2 方法:CRUD(增删查改)DOM树
① appendChild():向节点的子节点列表的结尾添加新的子节点;
② removeChild():删除并返回当前节点的指定子节点;
③ replaceChild():用新节点替换一个子节点;
<input type="button" id="add" value="增加">
<div id="div1"></div>
<div id="div2"></div>
<script>
var add = document.getElementById("add");
add.onclick = function () {
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div1.appendChild(div2);
}
</script>
<input type="button" id="del" value="删除">
<div id="div1"></div>
<div id="div2"></div>
<script>
var del = document.getElementById("del");
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div1.appendChild(div2);
del.onclick = function () {
div1.removeChild(div2);
}
</script>
<input type="button" id="rep" value="替代">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<script>
var rep = document.getElementById("rep");
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");
div1.appendChild(div2);
rep.onclick = function () {
div1.replaceChild(div3, div2);
}
</script>
3.3 属性:
parentNode:返回 当前元素的 parentNode(父节点);
<script>
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div1.appendChild(div2);
var div3 = div2.parentNode;
alert(div3);
</script>
二、HTML DOM、事件监听机制
1. HTML DOM
1.1 标签体的设置和获取;
1.2 使用HTML元素对象的属性;
<div id="div1">人间失格 太宰治</div>
<script>
var div1 = document.getElementById("div1");
var innerHTML = div1.innerHTML;
// alert(innerHTML);
// div1 标签中替换一个文本框
// div1.innerHTML = "<input type = 'text'>";
// div1 标签中追加一个文本框
div1.innerHTML += "<input type = 'button' value = '死亡'>";
</script>
1.3 控制样式:
① 使用元素的 style 属性来设置:
<script>
var div1 = document.getElementById("div1");
div1.onclick = function() {
div1.style.border = "1px solid black";
div1.style.width = "400px";
div1.style.color = "red";
div1.style.fontSize = "22px";
}
</script>
② 提前定义好类选择器的样式,通过元素的className属性来设置其class属性值;
<script>
var div = document.getElementById("div");
div.onclick = function() {
div.className = "box";
}
</script>
<style>
.box {
font-size: 22px;
color: skyblue;
border: 1px solid #000;
width: 400px;
}
</style>
2. 事件监听机制
2.1 概念:某些组件被执行了某些操作后,触发某些代码的执行;
2.2 解释:
① 事件:某些操作;
② 事件源:组件;
③ 监听器:代码;
④ 注册监听:将事件、事件源、监听器结合在一起,当事件源上发生了某个事件,则触发执行某个监听器代码;
3. 常见事件
3.1 点击事件:
① onclick:单击事件;
② ondblclick:双击事件;
3.2 焦点事件:
① onblur:失去焦点;(一般用于表单验证)
② onfocus:元素获得焦点;
<script>
document.getElementById("user").onblur = function() {
alert("失去焦点了");
}
</script>
3.3 加载事件:
① onload:一个页面或一幅图像完成加载;
当Script写于代码之前时,运用onload可以使页面加载完成后再进行执行Script;
<script>
window.onload = function() {
document.getElementById("user").onblur = function() {
alert("失去焦点了");
}
}
</script>
3.4 鼠标事件:
① onmousedown:鼠标按钮被按下;
- 定义方法时,定义一个形参,接受event对象;
- event对象的button属性可以获取鼠标按钮键被点击了;
(0为鼠标左键,1为鼠标中键,2为鼠标右键)
② onmouseup:鼠标按键被松开;
③ onmousemove:鼠标被移开;
④ onmouseover:鼠标移到某元素之上;
⑤ onmouseout:鼠标从某元素移开;
<script>
document.getElementById("user").onmouseover = function () {
alert("鼠标移动到了文本框上");
}
document.getElementById("user").onmousedown = function (event) {
alert(event.button);
}
</script>
3.5 键盘事件:
① onkeydown:某个键盘按键被按下;
② onkeyup:某个键盘按键被松开;
③ onkeypress:某个键盘按键被按下并松开;
3.6 选择和改变:
① onchange:域的内容被改变;
② onselect:文本被选中;
<script>
document.getElementById("user").onchange = function (event) {
alert("改变了");
}
</script>
3.7 表单事件:
① onsubmit:确认按钮被点击;
(可以阻止表单的提交,方法返回值为false则表单被阻止)
② onreset:重置按钮被点击;
<script>
document.getElementById("user").onsubmit = function () { // 形式1
var flag = false;
return flag;
}
function checkForm() { // 形式2
return false;
}
</script>
<form action="\" id="form" onclick="return checkForm();">