DOM操作--续集
Posted 542684416-qq
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DOM操作--续集相关的知识，希望对你有一定的参考价值。
创建与删除
1.创建元素：createElement
2.添加元素：div.appendChild（）
3.删除元素：grand.removeChild(parent)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>创建与删除</title> </head> <body> <input type="file"/ ><button>添加</button> </body> <script> var btn = document.getElementsByTagName(‘button‘)[0] btn.onclick = function(){ //创建一个div var div = document.createElement(‘div‘) //创建一个input var input = document.createElement(‘input‘) input.type = ‘file‘ //将input添加到div中 div.appendChild(input) //创建一个按钮 var button = document.createElement(‘button‘) button.innerText = ‘删除‘ button.onclick = function(){ //找到父级元素 var parent = this.parentNode //找到祖父级元素 var grand = parent.parentNode //删除父级元素 grand.removeChild(parent) } //将按钮添加到div div.appendChild(button) //将div添加到文档中 btn.parentNode.appendChild(div) } </script> </html>
事件冒泡
1.说明：当下层元素和上层元素支持同一事件，上层事件触发时，下层事件也触发，这就叫事件冒泡
2.取消事件冒泡：ev.cancelBubble = true
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>事件冒泡</title>
<style>
body{
background:red;
}
div{
width:300px;
height:200px;
background:blue;
}
</style>
</head>
<body onclick="bottomLevel();">
<div onclick="topLevel();"></div>
</body>
<script>
function bottomLevel(){
alert(‘我是来自社会最底层的呼声‘)
}
function topLevel(e){
//获取事件
var ev = e || event
//取消事件冒泡
ev.cancelBubble = true
alert(‘我是来自社会最高层的呼声‘)
}
</script>
</html>
事件绑定
1.说明：当同一个事件触发时，先要同时调用多个处理函数，直接设置后面的覆盖前面的，可以通过事件绑定解决
2.示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>事件绑定</title>
<style>
div{
width:200px;
height:200px;
background:red;
}
</style>
</head>
<body>
<div></div>
</body>
<script>
var div = document.getElementsByTagName(‘div‘)[0]
//传统方式不行（后面的设置会覆盖前面的）
//div.onclick =giveRed
//div.onclick =giveGreen
//添加事件绑定
//div.addEventListener(‘click‘,giveRed,false)
//div.addEventListener(‘click‘,giveGreen,false)
addBind(div,‘click‘,giveRed)
addBind(div,‘click‘,giveGreen)
//移除事件绑定
//div.removeEventListener(‘click‘,giveGreen,false)
delBind(div,‘click‘,giveRed)
function giveRed(){
alert(‘红色‘)
}
function giveGreen(){
alert(‘绿色‘)
}
//兼容绑定事件
function addBind(obj,ev,func){
if(obj.addEventListener){
//高级浏览器
obj.addEventListener(ev,func,false)
}else{
//低级浏览器
obj.attachEvent(‘on‘ + ev,func)
}
}
//兼容取消绑定
function delBind(obj,ev,func){
if(obj.removeEventListener){
//高级浏览器
obj.removeEventListener(ev,func,false)
}else{
//低级浏览器
obj.detachEvent(‘on‘ + ev,func)
}
}
</script>
</html>
以上是关于DOM操作--续集的主要内容，如果未能解决你的问题，请参考以下文章
jquery 对象的 heightinnerHeightouterHeight 的区别以及DOM 元素的 clientHeightoffsetHeightscrollHeightoffset(代码片段