1.查询节点
1.根据节点的层级查询节点
1.childNodes
元素节点,文本节点,
2.children
元素节点
3.parentNode
获取父节点
4.nextSibling
获取下一个兄弟节点
有可能是文本节点
5.nextElementSibling
获取下一个兄弟元素节点
6.previousSibling
获取上一个兄弟节点
有可能是文本节点
7.previousElementSibling
获取上一个兄弟元素节点
2.通过标签名查询节点 - 返回数组
document|elem.getElementsByTagName("标签名");
document:整个文档内查找
elem:某个元素内查找
3.通过元素的name属性值查询节点
document.getElementsByName("name属性值");
返回值:包含指定name属性值的元素的数组
<input type="radio" checked >
4.通过元素的class值查询节点
document|elem.getElementsByClassName("class");
返回:返回包含指定class属性值的所有元素
2.增加节点
1.创建元素节点
语法:
var elem=document.createElement("元素名");
ex:
var div=document.createElement("div");
div.setAttribute("id","container");
div.innerHTML="动态创建的文本";
2.增加节点到网页上
1.document.body.appendChild(elem);
向body中追加elem的新元素
2.parentNode.appendChild(elem);
向parentNode内部追加elem新元素
3.parentNode.insertBefore(newElem,oldElem)
将newElem元素插入到parentNode中oldElem元素之前
3.删除节点
在DOM中,删除节点的行为只能由父元素发起
parentNode.removeChild(elem);
删除 parentNode 中的 elem 元素
4.事件
1.什么是事件
通常都是由用户的行为来激发的操作
2.触发事件的行为
所有的事件在绑定时,必须加 on
1.鼠标事件
1.click 事件
当鼠标单击元素时触发该事件
2.mouseover 事件
当鼠标移入进元素时的事件
3.mouseout 事件
当鼠标移出元素时的事件
4.mousemove 事件
当鼠标在元素内移动时的事件
2.键盘事件
1.keydown 事件
当键位按下时所激发的事件
2.keypress 事件
当键位按下时所激发的事件
3.keyup 事件
当键位抬起时所激发的事件
3.状态改变事件
1.load 事件
当元素加载完成时所触发的事件(body)
2.change 事件
当选项发生改变时所触发的事件(select)
3.focus 事件
当元素获取焦点时所触发的事件(文本框类)
4.blur 事件
当元素失去焦点时所触发的事件(文本框类)
5.submit 事件
当表单被提交时所触发的事件(表单)
3.绑定的方式
1.在元素中绑定事件
<元素 on事件名=""></元素>
2.在js中动态的为元素绑定事件
语法:
DOM对象.on事件名=function(){
}
ex:
var main = document.getElementById("main");
main.onclick = function(){
}
注意：在JS动态绑定事件中,允许使用 this 来表示触发当前事件的DOM元素
4.事件行为
1.状态改变事件
1.load 事件
通常为 body 绑定 load 事件,目的是为了在所有内容都加载完成之后再实现一些初始化的操作
1. <body onload="函数()">
2.JS中动态绑定
window.onload = function(){
网页加载完成后,要执行的操作
}
2.submit 事件
只有表单被提交时才会被触发
注意:该事件需要一个boolean返回值来通知表单是否要继续被提交.如果返回true,则可以提交表单.否则,阻止表单提交
JS中动态绑定:
表单对象.onsubmit = function(){
return true/false;
}
1.创建一个网页,包含多个单选按钮(name相同)
2.创建一个普通按钮
3.单击普通按钮的时候
验证多个单选按钮中必须有一个被选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>
<input type="radio" name="gender">男
<input type="radio" name="gender">女
</p>
<button onclick="checkRadio()">验证</button>
<p>
<input type="checkbox" id="chkAll" onclick="checkAll()">全选
<input type="checkbox" name="hobby">吃
<input type="checkbox" name="hobby">喝
<input type="checkbox" name="hobby">玩
<input type="checkbox" name="hobby">乐
</p>
<script src="common.js"></script>
<script>
function checkAll(){
//先获取 chkAll 的选中状态
var isChk = $("chkAll").checked;
//获取所有的 hobby 并循环,将所有的hobby的checked更改为isChk
var all = document.getElementsByName("hobby");
for(var i=0;i<all.length;i++){
all[i].checked = isChk;
}
}
function checkRadio(){
//得到页面中name=gender的所有的元素
var arr=document.getElementsByName("gender");
//声明变量用于记录 radio 的选中状态
var isChecked = false;
for(var i=0;i<arr.length;i++){
if(arr[i].checked){
isChecked = true;
break;
}
}
if(isChecked){
alert('通过');
}else{
alert('请选中一项');
}
}
</script>
</body>
</html>
点击按钮时
1.先获取三个文本框的值
2.创建两个按钮 - 删除按钮 , 修改按钮
3.先创建四个td
将三个文本框的值追加到前三个td
将两个按钮追加到第四个td中
4.创建一个tr
将四个td追加到tr中
5.将 tr 追加到 table 中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>
<input type="text" id="gname" placeholder="商品名称">
<input type="text" id="gprice" placeholder="商品价格">
<input type="text" id="gcount" placeholder="购买数量">
<button onclick="btnBuy()">购买</button>
</p>
<table border="1" width="600">
<thead>
<tr>
<td>商品名称</td>
<td>商品价格</td>
<td>购买数量</td>
<td>操作</td>
</tr>
</thead>
<tbody id="content"></tbody>
</table>
<script src="common.js"></script>
<script>
function btnBuy(){
//1.获取三个文本框的值
var gname = $("gname").value;
var gprice = $("gprice").value;
var gcount = $("gcount").value;
//2.创建两个按钮
var btnUpdate = document.createElement("button");
btnUpdate.innerHTML="修改";
var btnDelete = document.createElement("button");
btnDelete.innerHTML="删除";
//为 btnDelete 绑定 单击事件
btnDelete.onclick = function(){
$("content").removeChild(this.parentNode.parentNode);
}
//3.创建4个td,分别追加值
var tdName = document.createElement("td");
tdName.innerHTML = gname;
var tdPrice = document.createElement("td");
tdPrice.innerHTML = gprice;
var tdCount = document.createElement("td");
tdCount.innerHTML = gcount;
var tdOper = document.createElement("td");
tdOper.appendChild(btnUpdate);
tdOper.appendChild(btnDelete);
//4.创建1个tr,追加td
var tr = document.createElement("tr");
tr.appendChild(tdName);
tr.appendChild(tdPrice);
tr.appendChild(tdCount);
tr.appendChild(tdOper);
//5.将tr追加到tbody中
$("content").appendChild(tr);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="/login/" method="post" id="frm">
<p>
用户名称
<input type="text" id="uname">
<span id="uname-show">*</span>
</p>
<p>
用户密码
<input type="password" id="upwd">
<span id="upwd-show">*</span>
</p>
<p>
确认密码
<input type="password" id="cpwd">
<span id="cpwd-show">*</span>
</p>
<p>
<input type="submit" value="提交">
</p>
</form>
<script src="common.js"></script>
<script>
function checkUname(){
var len = $("uname").value.length;
if(len >= 6 && len <= 18){
$("uname-show").innerHTML = "通过";
return true;
}else{
$("uname-show").innerHTML = "用户名不符合规范";
return false;
}
}
function checkUpwd(){
var len = $("upwd").value.length;
if(len >= 6){
$("upwd-show").innerHTML="通过";
return true;
}else{
$("upwd-show").innerHTML="密码不符合规范";
return false;
}
}
function checkCpwd(){
if($("upwd").value == $("cpwd").value){
$("cpwd-show").innerHTML = "通过";
return true;
}else{
$("cpwd-show").innerHTML = "两次密码必须一致";
return false;
}
}
window.onload = function(){
$("uname").onblur = checkUname;
$("upwd").onblur = checkUpwd;
$("cpwd").onblur = function(){
checkCpwd();
}
$("frm").onsubmit = function(){
// if(checkUname() && checkUpwd() && checkCpwd()){
// return true;
// }
// return false;
return checkUname() && checkUpwd() && checkCpwd();
}
}
</script>
</body>
</html>