DOM
1.概念:文档对象模型。将标记语言文档的各个组成部分,封装为对象,对标记语言文档进行CRUD(增删改查)的动态操作2.W3C DOM 标准被分为3个不同的部分
1.核心DOM 针对任何结构化文档的标准模型
Document 文档对象
Element 元素对象
Attribute 属性对象
Text 文本对象
Comment 注释对象
Node 节点对象 其他5个的父对象
2.XML DOM 针对XML文档的标准模型
3. HTML DOM 针对HTML 文档的标准模型
核心DOM
Document 文档对象
1.创建(获取):
window.document/document
2.方法
a.获取Element对象
getElementById() 根据id属性值获取元素对象,id属性值一般唯一
gwtElementsByTagName() 根据元素名称获取元素对象们,返回值是一个数组
getElementsByClassName() 根据Class属性值获取元素对象们,返回值是一个数组
getELementsByName() 根据Name属性值获取元素对象们,返回值是一个数组
b.创建其他DOM对象
createAttribute(name)
createComment()
createElement()
createTextNode()
3.属性
Element 元素对象
1.创建
document.Element
2.方法
removeAttribute() 删除属性
setAttribute() 设置属性
Node 节点对象 其他5个的父对象
1.特点:所有DOM对象都可被认为是一个节点
2.方法
CRUD dom树
appendChild() 向节点的子节点列表的结尾添加新的子节点
removeChild() 删除(并返回)当前节点的指定子节点
replaceChild() 用新节点替换一个子节点
3.属性
parentNode 返回节点的父节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>信息填入删除系统</title>
</head>
<body>
<input type="text" placeholder="请输入学号" id="id">
<input type="text" placeholder="请输入名称" id="name">
<input type="text" placeholder="请输入性别" id="gender">
<input type="button" value="提交" id="submit">
<table border="1">
<tr>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="Del(this)">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="Del(this)">删除</a></td>
</tr>
</table>
<script>
var submit = document.getElementById("submit");
submit.onclick=function (){
var id=document.getElementById("id").value;
var name=document.getElementById("name").value;
var gender=document.getElementById("gender").value;
var a=document.createElement("a");
a.setAttribute("href","javascript:void(0);")
a.setAttribute("onclick","Del(this)")
var text_a=document.createTextNode("删除");
a.appendChild(text_a);
var td_a=document.createElement("td");
td_a.appendChild(a);
var td_id=document.createElement("td");
var text_id=document.createTextNode(id);
var td_name=document.createElement("td");
var text_name=document.createTextNode(name);
var td_gender=document.createElement("td");
var text_gender=document.createTextNode(gender);
td_id.appendChild(text_id)
td_name.appendChild(text_name);
td_gender.appendChild(text_gender);
var tr=document.createElement("tr");
tr.appendChild(td_id);
tr.appendChild(td_name);
tr.appendChild(td_gender);
tr.appendChild(td_a);
var table = document.getElementsByTagName("table")[0];
table.appendChild(tr);
}
function Del(obj){
var table = obj.parentNode.parentNode.parentNode;
var tr=obj.parentNode.parentNode;
table.removeChild(tr);
}
</script>
</body>
</html>
HTML DOM
1.标签题的设置和获取:innerHTML
2.使用html元素对象的属性
3.控制元素样式
1. 使用元素的style属性来设置
如:div1.style.border="1px solid blue";
div1.style.width="200px";
div1.style.fontSize="20px";
2.提前定义好类选择器的样式,通过元素的ClassName属性来设置器class属性值
如:<style>
.d2{
border: 1px solid black;
width: 200px;
font-size: 10px;
}
</style>
div2.onclick=function(){
div2.className="d2";
}
这是一个信息填入与删除的案例案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>信息填入删除系统</title>
</head>
<body>
<input type="text" placeholder="请输入学号" id="id">
<input type="text" placeholder="请输入名称" id="name">
<input type="text" placeholder="请输入性别" id="gender">
<input type="button" value="提交" id="submit">
<table border="1">
<tr>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="Del(this)">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="Del(this)">删除</a></td>
</tr>
</table>
<script>
var submit = document.getElementById("submit");
submit.onclick=function (){
var id=document.getElementById("id").value;
var name=document.getElementById("name").value;
var gender=document.getElementById("gender").value;
var table=document.getElementsByTagName("table")[0];
table.innerHTML+="<tr>\n" +
" <td>"+id+"</td>\n" +
" <td>"+name+"</td>\n" +
" <td>"+gender+"</td>\n" +
" <td><a href=\"javascript:void(0);\" οnclick=\"Del(this)\">删除</a></td>\n" +
" </tr>";
}//使用innerHTML的方法
function Del(obj){
var table = obj.parentNode.parentNode.parentNode;
var tr=obj.parentNode.parentNode;
table.removeChild(tr);
}
</script>
</body>
</html>
事件监听机制
1.概念:某些组件被执行了某些操作后,触发某些代码的执行
事件:某些操作,如单机、双击、键盘按下了、鼠标移动了
事件源:组件。如:按钮、文本输入框...
监听器:代码
注册监听:将事件、事件源、监听器结合在一起。当事件源上发生了某个事件,则触发执行某个监听器代码
2.常见的事件(Event)
1.点击事件
onclick 单击事件
ondblclick 双击事件
2.焦点事件
onblur 失去焦点(一般用于表单验证)
onfocus 元素获得焦点
3.加载事件
onload 一张页面或一幅图像完成加载
*window.onload=function(){}
4.鼠标事件
onmousedown 鼠标按钮被按下
*定义方法时,定义一个形参,接受event对象 event.button
onmouseup 鼠标按键被松开
onmousemove 鼠标被移动
onmouseover 鼠标移到某元素之上
onmouseout 鼠标从某元素移开
5.键盘事件
onkeydown 某个键盘按键被按下
*event.keyCode
onkeyup 某个键盘按键被松开
onkeypress 某个键盘按键被按下并松开
6.选中和改变
onchange 域的内容被改变
onselect 文本被选中
7.表单事件
onsubmit 确认按钮被点击
*可以阻止表单的提交,用return flag;
onreset 重置按钮被点击
两种不同的onsubmit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>submit</title>
</head>
<body>
<form action="#" id="form" onsubmit="return check()"><!--一定要有return-->
<input name="username" id="text" >
<input type="submit" id="submit" value="提交">
</form>
<script>
// var form=document.getElementById("form");
// form.οnsubmit=function(){
// var flag=true;
// return flag;
// }
function check(){
var flag=false;
return flag;
}
</script>
</body>
</html>