day8--js3
2018-08-22 本文已影响0人
旧时初_2e8d
1、DOM操作
children 子节点 儿子节点
parentNode 父节点
谷歌和火狐的方式
firstElementChild 一胎
lastElementChild 最后一胎
previousElementSibling 上一个兄弟节点
nextElementSibling 下一个兄弟节点
这是ie的方式
firstChild
lastChild
previousSibling
nextSibling
<title></title>
</head>
<body>
<div id="star">
<ul class="child1">
<li>库里</li>
<li>科比 </li>
<li>詹姆斯</li>
<li id="wan">杜兰特</li>
<li id="word">字母哥</li>
</ul>
<ol class="child2">
<li>后卫</li>
<li>前锋</li>
<li>分位</li>
<li>中锋</li>
</ol>
</div>
<div>
<ul>
<li>张若昀</li>
<li>张天爱</li>
<li>张益达</li>
<li>张无忌</li>
</ul>
<ol>
<li>武动乾坤</li>
<li>斗破苍穹</li>
<li>永恒圣帝</li>
<li>王道剑尊</li>
</ol>
</div>
</body>
</html>
<script type="text/javascript">
var odiv1 = document.getElementById('star')
//获取子节点
// console.log(odiv1.children)
var odu = document.getElementById('wan')
//获取父节点
// console.log(odu.parentNode)
var oword = document.getElementById('word')
//从字母哥开始找到王道剑尊
console.log(oword.parentNode.parentNode.nextElementSibling.lastElementChild.lastElementChild)
</script>
通过document可以动态的创建和删除节点
tagName 获取对象标签的名字 大写
createElement 创建节点
removeChild 父节点.removeChild(子节点)
appendChild 添加节点
添加存在的节点，本质是移动节点
insertBefore 添加节点 insertBefore(new, old)
setAttribute : 既可以设置官方属性，又可以设置自定义属性
getAttribute : 既可以获取官方属性，也可以获取自定义属性
<title></title>
</head>
<body>
<ul id="word1">
<li>张若昀</li>
<li>胡歌</li>
<li id="name2">霍建华</li>
<li>倪大红</li>
</ul>
<ul id="word2">
<li>杨紫</li>
<li>迪丽热巴</li>
<li>张天爱</li>
<li id="name1">程潇</li>
</ul>
<button id="word3" like = "足球">点我</button>
</body>
</html>
<script type="text/javascript">
var owd1 = document.getElementById('word1')
var owd2 = document.getElementById('word2')
var obtn = document.getElementById('word3')
obtn.onclick = function (){
//添加官方属性或者非官方属性
// obtn.watch = 'see'
// obtn.setAttribute('watch','see')
// 获取官方属性，也可以获取非官方属性
// console.log(obtn.getAttribute('watch'))
//创建节点
var oli = document.createElement('li')
oli.innerHTML = '柳岩'
//动态添加节点
owd1.appendChild(oli)
var oname1 = document.getElementById('name1')
var oname2 = document.getElementById('name2')
//添加在某个节点之前
owd1.insertBefore(oname1,oname2)
//删除谋个节点
owd1.removeChild(oname1)
}
</script>
留言板
<title></title>
</head>
<body>
<input type="text" name="" id="test1" value="" />
<input type="button" name="" id="test2" value="留言" />
<ul id="content"></ul>
</body>
</html>
<script type="text/javascript">
var otst1 = document.getElementById('test1')
var otst2 = document.getElementById('test2')
var oten = document.getElementById('content')
otst2.onclick = function(){
//获取属性
message = otst1.value
//创建一个li标签
var oli = document.createElement('li')
//把内容传给li标签，添加删除功能
oli.innerHTML = message+' <a href="javascript:;">删除</a>'
//得到删除节点
var oa = oli.getElementsByTagName('a')[0]
oa.onclick = function(){
oten.removeChild(oli)
}
//添加的时候放在最前面
if (oten.children){
oten.insertBefore(oli,oten.children[0])
}
else{
oten.appendChild(oli)
}
//清空输入框
otst1.value = ''
//让输入框获得焦点
otst1.focus()
}
//简易留言板
// otst2.onclick = function(){
// //获取输入框中的内容
// message = otst1.value
// //创建一个li标签
// var oli = document.createElement('li')
//// 把内容放进li标签里面
// oli.innerHTML = message
// //把li标签添加进oten中
// oten.appendChild(oli)
//
//
// }
</script>
2、事件绑定和事件冒泡
addEventListener 谷歌和火狐方式
removeEventListener
attachEvent ie方式
detachEvent
<title></title>
</head>
<body>
<div id="word" style="width: 200px;height: 200px;background-color: green"></div>
</body>
</html>
<script type="text/javascript">
var odiv = document.getElementById('word')
//绑定事件
odiv.addEventListener('click',function(){
alert('窗前明月光')
})
odiv.addEventListener('click',function(){
alert('飞流直下三千尺')
})
// odiv.attachEvent('onclick', function () {
// alert('君不见黄河之水天上来')
// })
// odiv.attachEvent('onclick', function () {
// alert('奔流到海不复回')
// })
// odiv.onclick = function () {
// alert('羌笛何须怨杨柳,春风不度玉门关')
// }
// odiv.onclick = function () {
// alert('劝君更尽一杯酒,西出阳关无故人')
// }
</script>
获取事件对象
事件ev 火狐、谷歌
window.event ie、谷歌
兼容性写法： var oevent = ev || event
获取事件的x和y坐标
oevent.clientX oevent.clientY
相对窗口左上角的坐标
<body>
<div id="word" style="width: 200px;height: 200px;background-color: green;">
</div>
</body>
</html>
<script type="text/javascript">
var odiv = document.getElementById('word')
odiv .onclick = function(ev){
var oevent = ev || event
//获取事件的x坐标和y坐标
console.log(oevent.clientX,oevent.clientY)
}
</script>
取消事件冒泡
事件的属性和方法
cancelBubble ie方式、谷歌、火狐都支持
stopPropagation() 谷歌、火狐方式
事件源对象
srcElement ie、谷歌
target 火狐、谷歌
<body>
<div id="word" style="width: 200px;height: 200px;background-color: green;">
<div id="word1" style="width: 100px;height: 100px;background-color: red;">
</div>
</div>
</body>
</html>
<script type="text/javascript">
var odiv = document.getElementById('word')
var odiv1 = document.getElementById('word1')
odiv.onclick = function(){
alert('日照香炉生紫烟')
}
odiv1.onclick = function(ev){
alert('礼拜后才能广州')
//取消事件冒泡
var oevent = ev || event
oevent.stopPropagation()
//获取事件源对象
console.log(oevent.target)
}
</script>
3、小知识
禁止鼠标右键
document.oncontextmenu = function () {
return false
}
超链接和事件同时触发
事件的属性和方法
returnValue ie、谷歌
preventDefault() 火狐、谷歌
return false ie、谷歌、火狐
键盘事件
document.onkeydown : 捕获用户点击的按钮
获取按钮的编号
oevent.keyCode
<body>
<a id="du" href="http://www.baidu.com/">百度一下</a>
</body>
</html>
<script>
// document.onkeydown = function (ev) {
// var oevent = ev || event
// console.log(oevent.keyCode)
// }
document.onkeypress = function (ev) {
var oevent = ev || event
console.log(oevent.keyCode)
}
// var oa = document.getElementById('du')
// oa.onclick = function (ev) {
// alert('这次第,怎一个愁字了得')
// var oevent = ev || event
// // oevent.returnValue = false
// // oevent.preventDefault()
// return false
// }
// document.oncontextmenu = function () {
// return false
// }
</script>
4、正则对象
规则是一样的。
单字符：. \w \d \W \s \S \D [aoe]
数量： {m} {m,} {m,n} {0,}==* {1,}==+ {0,1}==?
match : 正则匹配
replace : 正则替换
<script>
string = '我想我会一直孤单,就这么孤单一辈子'
ret = /幸福/
console.log(string.match(ret))
// console.log(string.replace(ret, '幸福'))
</script>
5、表单对象
三种查找方法
（1）根据id获取
（2）document.forms 得到文档中所有的form
（3）根据name获取
document.formname
获取该表单里面input框的值，假如该input框name=user
document.formname.user.value
submit()方法
document.formname.submit() 谁都能提交
js验证表单内容
<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>
