JS里的DOM操作注意点

最新推荐文章于 2021-12-03 10:04:11 发布

weixin_30254435

最新推荐文章于 2021-12-03 10:04:11 发布

阅读量129

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zuo72/p/7709985.html

版权

1.Windows对象：浏览器窗口。

2.document：页面文件

3.通用的事件：

onclick 单击；

onmousemove 鼠标移动；
onmouseout 鼠标移出；
onmouseover 鼠标移上；

4.window.open

第一部分：写要打开的页面地址
第二部分：打开的方式，_blank 是在新窗口打开 _self
第三部分：控制打开的窗口，可以写多个，用空格隔开
              toolbar=no新打开的窗口无工具条
              menubar=no无菜单栏 status=no无状态栏
              width=100 height=100 宽度高度
              left=100 打开的窗口距离左边多少距离
              resizable=no窗口大小不可调
              scrollbars=yes 出现滚动条
              location=yes 有地址栏

5.打开窗口，并保存在一个变量中

var w= window.open()；

如果只打开窗口一次，

if(w==null)
{
　　w=window.open("http://www.baidu.com","_blank","toolbar=no");
}

这里用一个if语句，判断w的值是否为空，打开一个窗口之后w的值就不为空了，之后再点击鼠标调用此函数则不执行打开新窗口。

<body>

        <input type="button"  value="打开窗口" οnclick="Y()"/>
        <input type="button"  value="关闭窗口" οnclick="G()"/>
  </body>

<script type="text/javascript">
　　　　　　　　　　var w = window.open();
		function Y()
		{
			if(w==null)
			{
				w = window.open("lizi.html","_blank","width=500 height=500");	
			}
		}
		
		function G()
		{
			w.close();
		}  

</script>

w.close：关闭保存在变量w中的那个窗口。

7.间隔与延迟

<body>
<input type="button" value="关闭间隔" οnclick="Close()" />


</body>

<script type="text/javascript">
　　　　　　　　　　function Yan()
		{
			alert("aa");	
		}
		var c = window.setInterval("Yan()",2000);
		function Close()
		{
			window.clearInterval(c);	
		}
	
</script>

取对象

1.根据id名找 var d1 = document.getElementById("d1"); 最多找一个；( )里面是名字，将找到的元素放在变量中。

　　　　　　 alert(d1);

2.根据class名找 var d2 = document.getElementsByClassName("d2"); 找出来的是数组

　　　　　　　　 alert(d2[0]);

3.根据标签名找 var d3 = document.getElementsByTagName("div"); 找出来的是数组

　　　　　　　　 alert(d3[1]);

4.表单元素 var d4 = document.getElementsByName("aa"); 找出来的是数组

　　　　　　 alert(d4[1]);

操作

1.操作内容

var d1 = document.getElementById("d1");

获取内容 alert(d1.innerText); （只取里面的文字） alert(d1.innerHTML); （代码和文字都获取）

修改内容 d1.innerText = "<b>这是修改</b>"; d1.innerHTML = "<b>这是修改</b>";

2.操作属性

var d1 = document.getElementById("d1");

获取属性

alert(d1.getAttribute("width"));

设置属性

d1.setAttribute("width","200");

移除属性

d1.removeAttribute("width");

3.操作样式

var d1 = document.getElementById("d1");

获取样式(只能获取内联，内嵌和外部都不能获取)

alert(d1.style.color); alert(d1.style.backgroundColor);

修改样式

d1.style.backgroundColor = "";

以上都是先获取，后应用。

例题：

　　1.鼠标放上一个栏，变红色，鼠标离开整个div，那个栏依旧是红色，可以确认当前是处于哪个栏的网页。

　　　　　　　　<style type="text/css">
        	#caidan{
				width:600px;
				height:35px;
				border:1px solid #F33;
				}
			.xiang{
				float:left;
				width:100px;
				height:35px;
				text-align:center;
				line-height:35px;
				vertical-align:middle;
				}
			
       　　 </style>

<body>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　<div id="caidan">
        	<div class="xiang" οnmοuseοver="Huan(this)">淄博</div>
            <div class="xiang" οnmοuseοver="Huan(this)">张店</div>
            <div class="xiang" οnmοuseοver="Huan(this)">周村</div>
            <div class="xiang" οnmοuseοver="Huan(this)">临淄</div>
            <div class="xiang" οnmοuseοver="Huan(this)">沂源</div>
       　　　　　　　　　　　　　　　　　　　　　　　　 </div>

</body>

<script type="text/javascript">
   　　　　　　　　　　　　 function Huan(a)
		
		　　　　{
			var x = document.getElementsByClassName("xiang");	
			for(var i=0;i<x.length;i++)
			{
				x[i].style.backgroundColor = "white";
			}
			a.style.backgroundColor = "red";
		　　　　}

</script>

另一种做法：

　　　　<style type="text/css">
        	　　　　#caidan{
				width:600px;
				height:35px;
				border:1px solid #F33;
				}
			.xiang{
				float:left;
				width:100px;
				height:35px;
				text-align:center;
				line-height:35px;
				vertical-align:middle;
				}
			
        </style>

<body>
　　　　<div id="caidan">
        	<div class="xiang" οnmοuseοver="Huan(this)" οnmοuseοut="Hui(this)">淄博</div>
            <div class="xiang" οnmοuseοver="Huan(this)" οnmοuseοut="Hui(this)">张店</div>
            <div class="xiang" οnmοuseοver="Huan(this)" οnmοuseοut="Hui(this)">周村</div>
            <div class="xiang" οnmοuseοver="Huan(this)" οnmοuseοut="Hui(this)">临淄</div>
            <div class="xiang" οnmοuseοver="Huan(this)" οnmοuseοut="Hui(this)">沂源</div>
        </div>

</body>


<script type="text/javascript">
                function Huan(a)
		{
			var x = document.getElementsByClassName("xiang");	
			
			a.style.backgroundColor = "red";
		}
		
		
		function Hui(a)
		{
			var y = document.getElementsByClassName("xiang");	
			a.style.backgroundColor = "white";	
		}

 </script>

总结：在div里面加上onmouseout（鼠标移出）这个点击事件，放上一个栏，变红色，离开了，这个div整个还是白色背景，其实现的效果与:hover实现的功能类似。

　　2.题目：倒计时从10开始，一直到0，然后同意按钮变成可以提交的。这里用到了间隔，用了操作属性：disabled,来改变按钮的状态，当disabled="disabled"时按钮不可用。用if，else的判断。如下图所示：

<body>
          <input type="button" value="同意" disabled="disabled" id="ty" /> 
        　　<span id="shu">10</span>
</body>


<script type="text/javascript">

　　　　window.setInterval("Tiao()",1000)
	
	
	function 	Tiao()
	{ 
		var shu = document.getElementById("shu");
		var ty = document.getElementById("ty");
		
		if(parseInt(shu.innerHTML)==0)
		{ 
			ty.removeAttribute("disabled")
		}
		else
		{ 
			var x = parseInt(shu.innerHTML)-1;
			shu.innerHTML=x;
		}
	} 

 </script>

　　　　3.有一组数，让其重复的数字去掉，只显示一次，效果如图：

<script type="text/javascript">	
	var atrr = [301, 504,8, 1, 7, 3, 2, 4, 6, 1,66,0,14,100,0,45,100,78,100];
	var atrr2 = [];            /* 重新定义一个数组，把attr里筛选出来的数放在里面*/
	Qu();      /*调用函数*/
	function Qu()
	{
		for(var i = 0; i < atrr.length; i++) 
		{ 
			var s = 0;   /*重新定义了一个变量，用来显示 是否有重复的值出现*/
			for(var j = 0; j < atrr2.length; j++) 
			{
				if(atrr[i] == atrr2[j]) /* 判断如果attr里的值与新添加进去的值相等，说明是有重复的*/
				{
					s = 1;   /*去掉那个重复的数，不让其再添加到attr2中去了*/
				}
			}
			if(s == 0)    /*重复的数去掉了，可以把剩下的数放到attr2中去了*/
			{
				atrr2.push(atrr[i]);
			}
		}
	}
	alert(atrr2);   /* 显示出一个框。*/

</script>

总结：定义一个新的变量，代表的含义是还有没有重复的数，这样才可以把数放在那个新定义的数组里

转载于:https://www.cnblogs.com/zuo72/p/7709985.html

weixin_30254435

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS里的DOM操作注意点

1.Windows对象：浏览器窗口。2.document：页面文件3.通用的事件：onclick 单击；onmousemove 鼠标移动；onmouseout 鼠标移出； onmouseover 鼠标移上；4.window.open第一部分：写要打开的页面地址第二部分：打开的方式，_blank 是在新窗口打开 _self第三部分：控制打开的窗口，可以写多个，用空格隔开...
复制链接

扫一扫