1.DOM操作
children 子节点 儿子节点
parentNode 父节点
谷歌和火狐的方式
firstElementChild 一胎
lastElementChild 最后一胎
previousElementSibling 上一个兄弟节点
nextElementSibling 下一个兄弟节点
这是ie的方式
firstChild
lastChild
previousSibling
nextSibling
// 通过document可以动态的创建和删除节点
tagName 获取对象标签的名字 大写
createElement 创建节点
appendChild 添加节点，添加存在的节点，本质是移动节点
insertBefore 添加节点 insertBefore(new, old)
removeChild 父节点.removeChild(子节点)
setAttribute : 既可以设置官方属性，又可以设置自定义属性
getAttribute : 既可以获取官方属性，也可以获取自定义属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DOM操作</title>
</head>
<body>
<div id="div_parent1">
<ul>
<li>青龙1</li>
<li>青龙2</li>
<li>青龙3</li>
</ul>
<ol>
<li>白虎1</li>
<li>白虎2</li>
<li>白虎3</li>
</ol>
</div>
<div>
<ul>
<li>朱雀1</li>
<li>朱雀2</li>
<li>朱雀3</li>
</ul>
<ol>
<li>玄武1</li>
<li>玄武2</li>
<li>玄武3</li>
</ol>
</div>
<button id='but1'>青龙1到朱雀</button>
<button id='but2'>添加青龙4</button>
<button id='but3'>白虎搬家到玄武之后</button>
<button id='but4'>青龙到白虎之前</button>
<button id='but5'>删除玄武2</button>
</body>
</html>
<script type="text/javascript">
var obutton1=document.getElementById('but1')
var obutton2=document.getElementById('but2')
var obutton3=document.getElementById('but3')
var obutton4=document.getElementById('but4')
var obutton5=document.getElementById('but5')
obutton1.onclick=function(){
var ochildren=document.getElementById('div_parent1').firstElementChild.firstElementChild
var ozhu=document.getElementById('div_parent1').nextElementSibling.firstElementChild
ozhu.appendChild(ochildren)
}
obutton2.onclick=function(){
var ali=document.createElement('li')
ali.innerHTML='青龙4'
var oparent=document.getElementById('div_parent1').firstElementChild
oparent.insertBefore(ali,oparent.firstElementChild.nextElementSibling)
}
obutton3.onclick=function(){
var omain=document.getElementById('div_parent1').lastElementChild
var oparent=document.getElementById('div_parent1').nextElementSibling
oparent.appendChild(omain)
}
obutton4.onclick=function(){
var qing=document.getElementById('div_parent1').firstElementChild
var oparent=document.getElementById('div_parent1').nextElementSibling
oparent.insertBefore(qing,oparent.lastElementChild)
}
obutton5.onclick=function(){
var xuan=document.getElementById('div_parent1').nextElementSibling.lastElementChild.lastElementChild.previousElementSibling
var oparent=document.getElementById('div_parent1').nextElementSibling.lastElementChild
xuan2=xuan.previousElementSibling
oparent.removeChild(xuan)
xuan2.setAttribute('look','laji')
console.log(xuan2)
console.log(xuan2.getAttribute('look'))
}
</script>
1.JPG
2.JPG
3.JPG
4.JPG
5.JPG
6.JPG
7.JPG
2.事件绑定和冒泡事件
addEventListener 谷歌和火狐方式
removeEventListener
attachEvent ie方式
detachEvent
获取事件对象
事件ev 火狐、谷歌
window.event ie、谷歌
兼容性写法： var oevent = ev || event
获取事件的x和y坐标
oevent.clientX oevent.clientY
相对窗口左上角的坐标
取消事件冒泡
事件的属性和方法
cancelBubble ie方式、谷歌、火狐都支持
stopPropagation() 谷歌、火狐方式
事件源对象
srcElement ie、谷歌
target 火狐、谷歌
3、小知识
禁止鼠标右键
document.oncontextmenu = function () {
return false
}
超链接和事件同时触发
事件的属性和方法
returnValue ie、谷歌
preventDefault() 火狐、谷歌
return false ie、谷歌、火狐
键盘事件
document.onkeydown : 捕获用户点击的按钮
获取按钮的编号
oevent.keyCode
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件绑定和冒泡</title>
</head>
<body>
<div id="div1" style="width: 200px;height: 200px;background-color: pink;">
<div id="div2"style="width: 100px;height: 100px;background-color:darkgray ; ">
</div>
</div>
</body>
</html>
<script type="text/javascript">
var odiv1=document.getElementById('div1')
var odiv2=document.getElementById('div2')
// odiv1.removeEventListener()
odiv1.addEventListener('click',function(){
alert('我绑定了div1')
})
// odiv1.removeEventListener()
odiv1.addEventListener('click',function(){
alert('我也绑定了div1，你别骄傲')
})
odiv2.onclick=function(ev){
var oevent=ev||event
//取消冒泡
oevent.cancelBubble=true
// oevent.stopPropagation()
//获取事件
odiv2.style.lineHeight=odiv2.style.height
this.innerHTML='('+oevent.clientX+','+oevent.clientY+')'
console.log(oevent.target)
}
document.oncontextmenu = function ()
{
return false
}
</script>
1.JPG
3.表单对象
三种查找方法
（1）根据id获取
（2）document.forms 得到文档中所有的form
（3）根据name获取
document.formname
获取该表单里面input框的值，假如该input框name=user
document.formname.user.value
submit()方法
document.formname.submit() 谁都能提交
js验证表单内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表单</title>
</head>
<body>
<form action="xxx" method="get" name="goudan">
<input type="text" name="user" value="王狗蛋">
<!-- <input type="submit" value="提交"> -->
<a href="javascript:;" id="aa">登录</a>
</form>
<form action="" method="post"></form>
</body>
</html>
<script>
var oa = document.getElementById('aa')
oa.onclick = function () {
document.goudan.submit()
}
// 第二种方式
// console.log(document.forms[1].method)
// console.log(document.goudan)
// console.log(document.goudan.user.value)
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js表单验证</title>
</head>
<body>
<form action="xxx" method="get" name="song1">
<input type="text" name="user" placeholder="请输入用户名，不得少于3字">
<span class="user"></span><br />
<a href="javascript:;" id='aa'>提交</a>
</form>
</body>
</html>
<script >
oinp=document.song1.user
oinp.onblur=function(){
var ospan=document.getElementsByClassName('user')[0]
message=this.value
if (message.length<3){
ospan.innerHTML='用户名不合法'
ospan.style.color='red'
}
else{
ospan.innerHTML='√'
ospan.style.color='green'
}
}
var oa=document.getElementById('aa')
oa.onclick=function(){
document.song1.submit()
}
</script>
1.JPG
2.JPG
网友评论