1、DOM操作
children 子節(jié)點(diǎn) 兒子節(jié)點(diǎn)
parentNode 父節(jié)點(diǎn)
谷歌和火狐的方式
firstElementChild 一胎
lastElementChild 最后一胎
previousElementSibling 上一個(gè)兄弟節(jié)點(diǎn)
nextElementSibling 下一個(gè)兄弟節(jié)點(diǎn)
這是ie的方式
firstChild
lastChild
previousSibling
nextSibling
// 通過(guò)document可以動(dòng)態(tài)的創(chuàng)建和刪除節(jié)點(diǎn)
tagName 獲取對(duì)象標(biāo)簽的名字 大寫(xiě)
createElement 創(chuàng)建節(jié)點(diǎn)
removeChild 父節(jié)點(diǎn).removeChild(子節(jié)點(diǎn))
appendChild 添加節(jié)點(diǎn)
添加存在的節(jié)點(diǎn)妖胀，本質(zhì)是移動(dòng)節(jié)點(diǎn)
insertBefore 添加節(jié)點(diǎn) insertBefore(new, old)
setAttribute : 既可以設(shè)置官方屬性欠痴，又可以設(shè)置自定義屬性
getAttribute : 既可以獲取官方屬性，也可以獲取自定義屬性
<!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>dom</title>
</head>
<body>
<div class="hero">
<ul id="girl">
<li>王昭君</li>
<li>楊玉環(huán)</li>
<li>妲己</li>
<li id="can">貂蟬</li>
<li id="qiao">大喬</li>
</ul>
<ol>
<li>李白</li>
<li>趙云</li>
<li>狄仁杰</li>
<li>諸葛亮</li>
</ol>
</div>
<div class="san">
<ul>
<li>關(guān)羽</li>
<li>張飛</li>
<li>趙云</li>
<li>馬超</li>
<li>黃忠</li>
</ul>
<ol>
<li>典韋</li>
<li>許褚</li>
<li>徐晃</li>
<li>張遼</li>
<li>夏侯?lèi)?lt;/li>
</ol>
</div>
</body>
</html>
<script>
// var odiv = document.getElementsByClassName('hero')[0]
// console.log(odiv.children)
// var oqiao = document.getElementById('qiao')
// console.log(oqiao.parentNode)
var ocan = document.getElementById('can')
console.log(ocan.parentNode.parentNode.nextElementSibling.firstElementChild.lastElementChild.tagName)
</script>
DOM操作
<!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>
<ul id="girlstar">
<li>柳巖</li>
<li>高圓圓</li>
<li id="rong">馬蓉蓉</li>
</ul>
<ul id="women">
<li>韓紅</li>
<li id="feng">鳳姐</li>
<li>芙蓉姐</li>
</ul>
<button id="btn" like="籃球">點(diǎn)我</button>
</body>
</html>
<script>
var obtn = document.getElementById('btn')
var oul = document.getElementById('girlstar')
var owu = document.getElementById('women')
obtn.onclick = function () {
// obtn.look = 'goudan'
obtn.setAttribute('look', 'goudan')
// console.log(obtn.like)
// console.log(obtn.getAttribute('like'))
// var oli = document.createElement('li')
// oli.innerHTML = '柳巖'
// oli.className = 'yan'
// 動(dòng)態(tài)添加節(jié)點(diǎn)
// oul.appendChild(oli)
// var ofeng = document.getElementById('feng')
// var orong = document.getElementById('rong')
// oul.appendChild(ofeng)
// owu.removeChild(ofeng)
// oul.insertBefore(ofeng, orong)
}
</script>
留言
<!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>
<input id="ip" type="text">
<input id="btn" type="button" value="留言">
<ul id="content"></ul>
</body>
</html>
<script>
var oinput = document.getElementById('ip')
var obtn = document.getElementById('btn')
var oul = document.getElementById('content')
// console.log(oul.children)
obtn.onclick = function () {
// 獲取input框的值
content = oinput.value
// 創(chuàng)建一個(gè)li標(biāo)簽
var oli = document.createElement('li')
// 不僅添加內(nèi)容恃鞋，還添加刪除功能
oli.innerHTML = content + ' <a href="javascript:;">刪除</a>'
// 實(shí)現(xiàn)點(diǎn)擊刪除巩趁，刪除li的功能
var oa = oli.getElementsByTagName('a')[0]
oa.onclick = function () {
oul.removeChild(oli)
}
// 添加的時(shí)候栈幸，放到最前面
// 獲取ul的第一個(gè)子標(biāo)簽,通過(guò)判斷ul的子標(biāo)簽是否為空
if (oul.children) {
// 非空
oul.insertBefore(oli, oul.children[0])
} else {
// 空
oul.appendChild(oli)
}
// 將input框清空
oinput.value = ''
// 讓input框獲得焦點(diǎn)
oinput.focus()
}
// 普通留言板
/*
obtn.onclick = function () {
// 獲取input框的值
content = oinput.value
// 創(chuàng)建一個(gè)li標(biāo)簽
var oli = document.createElement('li')
oli.innerHTML = content
// 將li標(biāo)簽添加到ul里面
// oul.appendChild(oli)
} */
</script>
2、事件綁定和事件冒泡
addEventListener 谷歌和火狐方式
removeEventListener
attachEvent ie方式
detachEvent
獲取事件對(duì)象
事件ev 火狐嵌牺、谷歌
window.event ie打洼、谷歌
兼容性寫(xiě)法： var oevent = ev || event
獲取事件的x和y坐標(biāo)
oevent.clientX oevent.clientY
相對(duì)窗口左上角的坐標(biāo)
取消事件冒泡
事件的屬性和方法
cancelBubble ie方式、谷歌逆粹、火狐都支持
stopPropagation() 谷歌募疮、火狐方式
事件源對(duì)象
srcElement ie、谷歌
target 火狐僻弹、谷歌
事件綁定
<!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>
<div id="lala" style="width:300px; height:300px; background-color:#c90"></div>
</body>
</html>
<script>
var odiv = document.getElementById('lala')
// odiv.addEventListener('click', function () {
// alert('羌笛何須怨楊柳,春風(fēng)不度玉門(mén)關(guān)')
// })
// odiv.addEventListener('click', function () {
// alert('勸君更盡一杯酒,西出陽(yáng)關(guān)無(wú)故人')
// })
// odiv.attachEvent('onclick', function () {
// alert('君不見(jiàn)黃河之水天上來(lái)')
// })
// odiv.attachEvent('onclick', function () {
// alert('奔流到海不復(fù)回')
// })
// odiv.onclick = function () {
// alert('羌笛何須怨楊柳,春風(fēng)不度玉門(mén)關(guān)')
// }
// odiv.onclick = function () {
// alert('勸君更盡一杯酒,西出陽(yáng)關(guān)無(wú)故人')
// }
</script>
獲取事件對(duì)象
<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>獲取事件對(duì)象</title>
</head>
<body>
<div id="dudu" style="width:400px; height:400px; background-color:firebrick"></div>
</body>
</html>
<script>
var odiv = document.getElementById('dudu')
odiv.onclick = function (ev) {
// console.log(ev)
// alert(ev)
var oevent = ev || event
// alert(oevent)
console.log(oevent.clientX, oevent.clientY)
}
// function test(ev) {
// alert(ev)
// }
// odiv.onclick = test
// a = 10
// b = 200
// var c = a && b
// console.log(c)
</script>
事件冒泡
<!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>
<div id="wai" style="width:400px; height:400px; background-color:pink;">
<div id="nei" style="width:200px; height:200px; background-color:black;"></div>
</div>
</body>
</html>
<script>
var owai = document.getElementById('wai')
var onei = document.getElementById('nei')
owai.onclick = function () {
alert('尋尋覓覓,冷冷清清,凄凄慘慘戚戚')
}
onei.onclick = function (ev) {
alert('乍暖還寒時(shí)候,最難將息,三杯兩盞淡酒')
var oevent = ev || event
// oevent.cancelBubble = true
oevent.stopPropagation()
console.log(oevent.target)
}
</script>
3阿浓、小知識(shí)
禁止鼠標(biāo)右鍵
document.oncontextmenu = function () {
return false
}
超鏈接和事件同時(shí)觸發(fā)
事件的屬性和方法
returnValue ie、谷歌
preventDefault() 火狐蹋绽、谷歌
return false ie芭毙、谷歌、火狐
鍵盤(pán)事件
document.onkeydown : 捕獲用戶(hù)點(diǎn)擊的按鈕
獲取按鈕的編號(hào)
oevent.keyCode
小知識(shí)
<!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>小知識(shí)</title>
</head>
<body>
<a id="du" >百度一下</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('這次第,怎一個(gè)愁字了得')
// var oevent = ev || event
// // oevent.returnValue = false
// // oevent.preventDefault()
// return false
// }
// document.oncontextmenu = function () {
// return false
// }
</script>
3卸耘、正則對(duì)象
規(guī)則是一樣的退敦。
單字符：. \w \d \W \s \S \D [aoe]
數(shù)量： {m} {m,} {m,n} {0,}==* {1,}==+ {0,1}==?
match : 正則匹配
replace : 正則替換
<script>
string = '我想我會(huì)一直孤單,就這么孤單一輩子'
ret = /幸福/
console.log(string.match(ret))
// console.log(string.replace(ret, '幸福'))
</script>
4、表單對(duì)象
三種查找方法
（1）根據(jù)id獲取
（2）document.forms 得到文檔中所有的form
（3）根據(jù)name獲取
document.formname
獲取該表單里面input框的值蚣抗，假如該input框name=user
document.formname.user.value
submit()方法
document.formname.submit() 誰(shuí)都能提交
js驗(yàn)證表單內(nèi)容
<!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>
JS驗(yàn)證
<!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>js驗(yàn)證</title>
</head>
<body>
<form action="" name="form">
<input type="text" name="user" placeholder="請(qǐng)輸入用戶(hù)名">
<span class="user"></span>
<br><br>
<input type="text" name="password" placeholder="請(qǐng)輸入密碼">
<span class="pwd"></span>
<br><br>
<input type="text" name="email" placeholder="請(qǐng)輸入郵箱">
<span class="email"></span>
<br><br>
<input type="submit" value="提交">
</form>
</body>
</html>
<script>
// 找到3個(gè)input
oname = document.form.user
opwd = document.form.password
oemail = document.form.email
oname.onblur = function () {
var spanname = document.getElementsByClassName('user')[0]
// 得到自己的值
content = this.value
// 用戶(hù)名長(zhǎng)度必須大于等于3位
if (content.length < 3) {
spanname.innerHTML = '用戶(hù)名不合法'
spanname.style.color = 'red'
} else {
spanname.innerHTML = '√'
spanname.style.color = 'green'
}
}
opwd.onblur = function () {
var spanpwd = document.getElementsByClassName('pwd')[0]
// 得到自己的值
content = this.value
// 用戶(hù)名長(zhǎng)度必須大于等于3位
if (content.length < 6) {
spanpwd.innerHTML = '密碼長(zhǎng)度不夠'
spanpwd.style.color = 'red'
} else {
spanpwd.innerHTML = '√'
spanpwd.style.color = 'green'
}
}
oemail.onblur = function () {
var spanemail = document.getElementsByClassName('email')[0]
content = this.value
// test@163.com lala@sina.cn 1090@qq.com
re = /^\w+@\w+\.(com|cn)$/
if (!content.match(re)) {
spanemail.innerHTML = '郵箱格式不正確'
spanemail.style.color = 'red'
} else {
spanemail.innerHTML = '√'
spanemail.style.color = 'green'
}
}
</script>
