DOM事件 ————onclick篇，小总结

创建事件，介绍三种方法：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>test DOM事件绑定</title>
</head>
<!-- 方法一 -->
<!-- <body>  
    <p id="p">点击按钮就执行displayDate()函数</p>  
    <button id="id" onclick="displayDate()">点击</button>//在此处onclick中只需要写出事件发生后对应处理的js代码即可  
    <script>  
     function displayDate(){  
        document.getElementById("p").innerHTML="已经被执行";  
    };  
    </script>  
</body>  
</html>    -->
<!-- 方法二 -->
<!-- <body>  
    <p id="p">点击按钮就执行displayDate()函数</p>  
    <button id="id">点击</button>  
    <script>
        document.getElementById("id").onclick=function(){displayDate()};
/*注意！此处必须将处理时所调用的函数嵌套在一个函数定义中，至于这样做的原因，经过翻查，还是没有找到*/  
         function displayDate(){  
            document.getElementById("p").innerHTML="fighting";  
        };  
        
    </script>  
</body>  
</html>   -->
<!-- 方法三 -->
<body>  
    <p id="p">点击按钮就执行displayDate()函数</p>  
    <button id="id">点击</button>  
    <script>
			var btns=document.getElementById("id");
        btns.onclick=function(){
            document.getElementById("p").innerHTML="fighting";  
			
			}
			 </script>  
</body>  
</html>

特别的：在创建点击事件时，某种事件发生用（被操作元素的）父元素来调用特定函数。

实例探究：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Node</title>
	<style>
		#content{
			overflow:hidden;
			border:1px solid red;
		}
		#content>div{
			width:100px;
			margin :20px;
			height:100px;
			float:left;
			background-color: teal;

		}
		#content .two{
			background-color: blue;
		}

		
		#content .three{
			background-color: pink;
		}
		
	</style>
	<script>
		window.onload=function(){
			var btns=document.getElementsByTagName('button');
			console.log(btns);
			var c=document.getElementById('content');//c替代content
			//克隆one
			var newDiv=document.getElementsByClassName('one')[0];
			//newDiv为元素类数组对象中的第一个元素，等价于类名为one的节点
			newDiv=newDiv.cloneNode(true);
			//创建节点
			var cj=document.createElement('div');//orange
			cj.style="background-color:orange;"
			//将它添加到content中， c.appendChild(cj);

			//插入节点,在第三个div前插入
			//下面为插入节点的参考节点
			var ck=document.getElementById('content').children[2];//'two,blue'
			console.log(ck.className);
			btns[0].onclick=function(){
				c.insertBefore(cj,ck);
			}
			//替换节点
			btns[1].onclick=function(){
				//报错node没有？？？？？？？？？？？
				c.replaceChild(cj,ck);//第一个参数替换第二个
			}
			btns[2].onclick=function(){
				c.removeChild(cj);//删除ck节点
			}
		}
	</script>
</head>
<body>
<button>插入</button>
<button>替换</button>
<button>删除</button>
	<div id ="content">
		<div class="one"></div>
		<div class="two"></div>
		<div class="three"></div>
	</div>
</body>
</html>

总结：

查找元素的方法

1）、getElementById() 返回元素/null

参数为要取得元素的ID，如果找到返回该元素，否则返回null。如果页面中多个元素的ID值相同，只返回文档中第一次出现的元素。如果某个表单元素的name值等于指定的ID，该元素也会被匹配。
2）、 getElementsByTagName() 返回类数组对象

       参数为要取得元素的标签名，返回包含另个或者多个元素的NodeList，在HTML文档中该方法返回的是HTMLCollection对象，与NodeList非常类似。可以通过[index/name],item(),namedItem(name)访问
   3）、 getElementsByName()            返回类数组对象
       参数为元素的name,返回符合条件的HTMLCollection
    4）、getElementsByClassName()        返回类数组对象
       参数为一个字符串，可以由多个空格隔开的标识符组成。当元素的class属性值包含所有指定的标识符时才匹配。HTML元素的class属性值是一个以空格隔开的列表，可以为空或包含多个标识符。

查找元素返回类数组的时候，注意以下情况：
   1）var btns=document.getElementsByTagName('button');//btns是一个类数组对象
   console.log(btns);如下图：

   2）var newDiv=document.getElementsByClassName('one')[0]；
   //newDiv为元素类数组对象中的第一个元素，等价于类名为one的节点

DOM事件 ————onclick篇，小总结

猜你喜欢