JavaScript 个人笔记3(详细BOM&DOM)

最新推荐文章于 2022-07-06 23:52:07 发布

Tsk720

最新推荐文章于 2022-07-06 23:52:07 发布

阅读量296

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/Tsk720/article/details/103029307

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

BOM和DOM有什么区别？

BOM是浏览器对象模型，用来获取或设置浏览器的属性、行为，例如：新建窗口、获取屏幕分辨率、浏览器版本号等。

DOM是文档对象模型，用来获取或设置文档中标签的属性，例如获取或者设置input表单的value值。

BOM

1.Navigator 对象包含有关浏览器的信息。

<script type="text/javascript">
var ua=navigator.userAgent;
console.log(ua);
if(/firefox/i.test(ua)){
   alert("你是火狐")
}else if(/chrome/i.test(ua)){
   alert("你是chrome")
}else if(/msie/i.test(ua)){
  alert("你是IE浏览器")
}else if("ActiveXObject" in window){
  alert("你是IE11,枪毙你！")
}
/*if("ActiveXObject" in window){
  alert("IE就是垃圾东西")}
  else{alert("你不是IE")}
*/
//history.go(); history.back();  history.forward();
//location 获取地址栏信息 location.replace();转到新页面，但不能回退 ocation.reload(true); 刷新页面，无缓存
</script>

在这里插入图片描述

2.定时器

<script type="text/javascript">
//setInterval
//参数
//1.回调函数
//2.间隔时间，单位毫秒
//返回值：
//返回一个number类型的数据，这个数字用来作为定时器的唯一标识
var num=1;
var timer=setInterval(function(){
  count.innerHTML=num++;
     if(num==11)
    {clearInterval(timer);}
},100);
</script>

3.类的操作

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<style type="text/css">
	.b1{
		width:100px;
		height: 100px;
		background: red;
	}
	.b2{
		width:200px;
		height: 200px;
		background: yellow;
	}
</style>
</head>
<body>
<button id="btn01">点击按钮以后修改box的样式</button>
<br/><br/>
<div id="box" class="b1"></div>
</body>
<script type="text/javascript">
var btn01=document.getElementById("btn01");
var box=document.getElementById("box");
btn01.onclick=function(){
	//通过style属性修改元素的样式，每修改一个样式，浏览器就要重新渲染一次，这样的执行的性能是比较差的
    //box.className="b2";
    //box.className+=" b2";
    //addClass(box,"b2");
     toggleClass(box,"b3");
    }
    //定义一个函数，用来向一个元素添加指定的class属性值
    function addClass(obj,cn){          
                 if(!hasClass(obj,cn)){
                 	obj.className+=" "+cn;
                 }
    }
    function hasClass(obj,cn){
    	//判断obj中有没有cn class
    	//创建一个正则表达式
    	//var reg=/\b2\b/;
    	var reg=new RegExp("\\b"+cn+"\\b");
         return reg.test(obj.className);
    }
       function removeClass(obj,cn){
    	//创建一个正则表达式
    	var reg=new RegExp("\\b"+cn+"\\b");
         //删除class
         obj.className=obj.className.replace(reg,"");
    }
    function toggleClass(obj,cn){
    //如果元素中具有该类，则删除
    //如果元素中没有该类，则添加
    if(hasClass(obj,cn)){
    	removeClass(obj,cn);
    }else{
    	addClass(obj,cn);
    }
    }
</script>
</html>

4.延时调用

<script type="text/javascript">
var num=1;
//延时调用和定时调用实际上是可以互相代替，在开发中可以根据自己需要去选择
var timer=setTimeout(function(){
	console.log(num++);
},3000);
clearTimeout(timer);
</script>

DOM

Dom元素查询以及结点查询

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOM查询练习</title>
<style type="text/css">
*{
	margin:0px;
	
}
.inner{
	width:600px;
	border:1px solid;/*外边框*/
	margin:20px auto;/*设置为居中*/
}
.inner1{
	width:600px;
	border:1px solid;/*外边框*/
	margin:20px auto;/*设置为居中*/
	padding:10px 0px;/*设置内边距*/
	padding-left:5px;
}
#city,#game{
	list-style:none;
	width:208px;
	overflow:hidden;/*解决高度塌陷*/
	
	
}
#city li,#game li{
	float:left;
	width:40px;/*设置宽度*/
	background-color:#0C0;/*设置背景颜色px*/
	margin-right:10px;/*设置右外边距为10px*/
	border:1px solid;/*加一个外边框*/
	text-align:center;/*字体居中*/

	
}
#phone{
	width:318px;
	list-style:none;
	overflow:hidden;/*解决高度塌陷*/
}
#phone li{
	width:60px;
	float:left;/*向左浮动*/
	background-color:#0C0;/*设置背景颜色px*/
	margin-right:10px;/*设置右外边距为10px*/
	border:1px solid;/*加一个外边框*/
	text-align:center;/*字体居中*/
}
#phone .li3{
	width:160px;
	margin-bottom:10px;
}
p{
	text-indent:2em;
	margin:10px 0px;
	
}
#btnlist
{
	width：300px;
    float:left;
	margin:5px 10px;
}
#total{
	float:left;
	margin-left:200px;
}
button{
	width:300px;
	margin-top:15px;
}
</style>
<script type="text/javascript">
window.onload=function()
{
	//1.查找#bj结点
	//获取01按钮
	var bt1=document.getElementById("btn01");
	//绑定单击响应事件
	bt1.onclick=function()
	{
		//获取北京结点
	     var bjjd=document.getElementById("bj");
		 //打印出结点文本
		alert(bjjd.innerHTML);
	};
	
	//2.查找所有li结点
	//获取02按钮
	var bt2=document.getElementById("btn02");
	//绑定单击响应事件
	bt2.onclick=function()
	{   // 获取所有的li结点（通过标签名获取一组元素结点）
		var allli=document.getElementsByTagName("li");
		//遍历所有的li结点（这个方法返回的是一个类数组对象，所有查询到的元素都会保存在这个数组中）
		for(var i=0;i<allli.length;i++)
		alert(allli[i].innerHTML);
	};
	//3.查找name=gender的所有结点
	//获取03按钮
	var bt3=document.getElementById("btn03");
	//绑定点击响应事件
	bt3.onclick=function()
	{
		//获取name=gender的结点
		var nameall=document.getElementsByName("gender");
		//遍历
		for(var i=0;i<nameall.length;i++)
		alert(nameall[i].value);//注意读取class属性时需要用到元素.className(其他都是元素.属性名例如元素.id,元素.value)
	};
	
	
	//4.查找#city下的的所有li结点
	//调用myclick函数
	myclick("btn04",function()
	{
		var cityz=document.getElementById("city");
		var allz=cityz.getElementsByTagName("li");//注意是#city下面的所有li并不是document下面的所有li
		//遍历
		for(var i=0;i<allz.length;i++)
		alert(allz[i].innerHTML);
	});
	//5.返回#city下的所有子结点
	//childNodes用返回所有结点包括文本结点（根本DOM标准标签间的空白算文本节点）在IE8及其以下版本中不会将标签间的空白算文本节点
	//调用myclick函数
	myclick("btn05",function()
	{
		var cityz=document.getElementById("city");
		//写法1 
		//var allz=cityz.childNodes;//注意是#city下面的所有li并不是document下面的所有li
		
		//写法2children，获取当前元素的所有子元素(所有浏览器都兼容)
		var allz=cityz.children;
		//遍历
		for(var i=0;i<allz.length;i++)
		alert(allz[i].innerHTML);
	});
	//6.返回#phone的第一个子结点
	//firstchild当前元素的第一个子节点（firstElementChild当前元素的第一个子元素,但是此方法不兼容IE8及其以下浏览器）
	//调用函数
	myclick("btn06",function()
	{
		var ph=document.getElementById("phone");
		var dy=ph.firstChild;
		alert(dy.innerHTML);
	});
	//7.返回#Android的前一个兄弟结点(previousSibling)
	//perviousElementSibling获取前一个兄弟元素不包括空白文本，但是此方法不兼容IE8及其以下浏览器
	myclick("btn07",function()
	{
		var ad=document.getElementById("android");
		var qx=ad.previousSibling;
		alert(qx.innerHTML);
		
	});
	//8.读取#username的value属性值
	//文本框的value属性值，就是文本框中填写的内容
	myclick("btn08",function()
	{
		//获取id为username的元素
		var us=document.getElementById("username");
		//读取#username的value属性值
		alert(us.value);
		
	});
	//9.设置#username的value属性值
	myclick("btn09",function()
	{
		var us=document.getElementById("username");
		us.value="dweblover";
	});
	//10.返回#bj的父结点(parentNode)
	myclick("btn10",function()
	{
		var bj=document.getElementById("bj");
		var fj=bj.parentNode;
		alert(fj.innerHTML);//alert(fj.innerText)
		
	});
	//11.返回#bj的文本值
	myclick("btn11",function()
	{//获取北京结点
		var bj=document.getElementById("bj");
		alert(bj.innerHTML);//alert(fj.innerText)
		
	});
	//12.补充,获取body标签
	//写法1
	//var bd=document.getElementsByTagName("body")[0];
	//写法2
	var bd=document.body;
	console.log(bd);
	//13.获取html标签
	var hl=document.documentElement;
	console.log(hl);
	//getElementByClassName()可以根据class属性值获取一组元素结点对象，但是此方法不支持IE8及其以下的浏览器
	
};
//idstr要绑定单击响应函数对象的id属性值
//fun为事件回调函数，单击时此函数会被触发
function myclick(idstr,fun)
{
	var btn=document.getElementById(idstr);
	btn.onclick=fun;
}
</script>
</head>

<body>
<div id="total">
<div class="inner">
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>深圳</li>
<li>南京</li>
</ul>
<br/></br/>
<p>你喜欢哪款单机游戏?</p>
<ul id="game">
<li id="hj">红警</li>
<li>实况</li>
<li>飞车</li>
<li>魔兽</li>
</ul>
<br/></br/>
<p>你手机操作系统是?</p>
<ul id="phone"><li>IOS</li><li id="android">android</li><li class="li3">windows phone</li>
</ul>
</div>
<div class="inner1">
gender:
<input type="radio" name="gender" value="male">male
<input type="radio" name="gender" value="female">female
<br/><br/>
name:
<input type="text" name="name" id="username">
</div>
</div>
<div id="btnlist">
<div><button  id="btn01">查找#bj结点</button></div>
<div><button  id="btn02">查找所有li结点</button></div>
<div><button  id="btn03">查找name=gender的所有结点</button></div>
<div><button  id="btn04">查找#city下的的所有li结点</button></div>
<div><button  id="btn05">返回#city下的所有子结点</button></div>
<div><button  id="btn06">返回#phone的第一个子结点</button></div>
<div><button  id="btn07">返回#Android的前一个兄弟结点</button></div>
<div><button  id="btn08">读取#username的value属性值</button></div>
<div><button  id="btn09">设置#username的value属性值</button></div>
<div><button  id="btn10">返回#bj的父结点</button></div>
<div><button  id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>

2.querySelector()和querySelectorAll()

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>dom查询剩余方法</title>

</head>
<body>
<div class="box1">
我是第一个box1
<div>我是box1中的div</div>
</div>
<div class="box1">
<div>我是box1中的div</div>
</div>
<div class="box1">
<div>我是box1中的div</div>
</div>
<div class="box1">
<div>我是box1中的div</div>
</div>
</body>
<script type="text/javascript">
	//获取所有的div
	var alldiv=document.getElementsByTagName("div");
	//获取class=box1中所有的div
	//document.querySelector()需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素结点对象,使用该方法总会返回唯一的一个元素
	//如果满足条件的元素有多个，那么它只会返回第一个
	var bdiv=document.querySelector(".box1 div");
	console.log(bdiv.innerHTML);
	//document.querySelectorAll()方法和querySelector()方法用法类似，不同的是他会将符合条件的元素封装到一个数组中返回,即使符合条件的只有一个也会返回一个数组
	var bx1=document.querySelectorAll(".box1");
	console.log(bx1.length);
	console.log(bx1);
</script>
</html>

3.Dom增删

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

</head>
<body>
<ul id="city">
	<li id="bj">北京</li>
</ul>
<button id="btn01">创建一个广州节点</button>
	
</body>
<script type="text/javascript">
//常用 删除节点
//bj.parentNode.removeChild(bj);
//替换replaceChild
//city.innerHTML +="<li>广州</li>";
//
   function myClikc(idstr,fun){
       var btn=document.getElementById(idstr);
       btn.onclick=fun;
   }
   
  myClikc("btn01",function(){
 var li=document.createElement("li");
li.innerHTML="广州";
city.appendChild(li);
   });
/*var city=document.getElementById("city");
var li=document.createElement("li");
li.innerHTML="广州";
city.appendChild(li);*/
</script>
</html>

4.操作内联

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<style type="text/css">
  #box1{
    width:200px;
    height: 200px;
    background-color: red;
  }
</style>
</head>
<body>
  <div align="center">
<div id="box1" ></div>
<div ></div>
<button id="btn01">按一下咯！</button>
	</div>
</body>
<script type="text/javascript">
var box1=document.getElementById("box1");
var btn01=document.getElementById("btn01");
btn01.onclick=function(){
 box1.style.width="300px";
  box1.style.height="300px";
  box1.style. backgroundColor="yellow";
}
</script>
</html>

5.获取元素样式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<style type="text/css">
  #box1{
    width:200px;
    height: 200px;
    background-color: red;
  }
</style>
</head>
<body>
  <div align="center">
<div id="box1" ></div>
<div ></div>
<button id="btn01">按一下咯！</button>
	</div>
</body>
<script type="text/javascript">
var box1=document.getElementById("box1");
var btn01=document.getElementById("btn01");
btn01.onclick=function(){
 /* box1.style.width="300px";
  box1.style.height="300px";
  box1.style. backgroundColor="yellow";*/
  alert(getStyle(box1,"width"));
}
  function getStyle(obj,name){
   return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name]
  }
</script>
</html>

6.事件对象

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<style type="text/css">
  #areaDiv{
    width: 500px;
    height:500px;
    background-color: #bfa;
  }
    #showMsg{
    width: 500px;
    height:200px;
    background-color: red; 
  }
</style>
</head>
<body>
	<div align="center">
  <div id="areaDiv"></div>
  <div id="showMsg"></div>
</div> 
</body>
<script type="text/javascript">
 var areaDiv=document.getElementById("areaDiv");
 var showMsg=document.getElementById("showMsg");
 areaDiv.onmousemove=function(event){
 	event=event||window.event;//解决事件对象兼容性
 	var x=event.clientX;
 	var y=event.clientY;
 	showMsg.innerHTML="x = "+x+" , y = "+y;
 }
</script>
</html>

7.获取节点

    获取元素节点的子节点
    1.getElementById()
  	通过id属性获取一个元素节点对象
  	2.getElementsByTagName()
  	通过标签名获取一组元素节点对象
  	3.getElementsByName()
  	通过name属性获取一组元素节点对象
    
    获取元素节点的子节点
    1.getElementsByTagName()
    2.childNodes 表示当前节点的所有子节点  children表示当前节点(不要空格)
    3.firstChild 
    4.lastChild

    获取父节点和兄弟节点
    1.parentNode 表示当前节点的父节点
    2.previousSibling 表示当前节点的前一个兄弟节点
    3.nextSibling 表示当前节点的后一个兄弟节点

8.封装点击函数

原始：
  	var btn=document.getElementById("btn");
  	btn.onclick=function(){
  		alert("hello");
封装：
   function myClikc(idstr,fun){
       var btn=document.getElementById(idstr);
       btn.onclick=fun;
   }
   myClikc("button01",function(){
   	alert("hello");
   });

9.注册滚动条

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<style type="text/css">
  #info{
    width: 300px;
    height:500px;
    background-color: #bfa;
    overflow: auto;
  }
</style>
</head>
<body>
<h3>欢迎亲爱的用户注册</h3>
<p id="info">
  亲爱的用户请阅读以下亲爱的用户请阅读以下<br>
  亲爱的用户请阅读以下亲爱的用户请阅读以下<br>
  亲爱的用户请阅读以下亲爱的用户请阅读以下<br>
  亲爱的用户请阅读以下亲爱的用户请阅读以下<br>
  亲爱的用户请阅读以下亲爱的用户请阅读以下<br>
  亲爱的用户请阅读以下亲爱的用户请阅读以下<br>
  亲爱的用户请阅读以下亲爱的用户请阅读以下<br>
  亲爱的用户请阅读以下亲爱的用户请阅读以下<br>
  亲爱的用户请阅读以下亲爱的用户请阅读以下<br>
  亲爱的用户请阅读以下亲爱的用户请阅读以下<br>
  亲爱的用户请阅读以下亲爱的用户请阅读以下<br>
  亲爱的用户请阅读以下亲爱的用户请阅读以下<br>
  亲爱的用户请阅读以下亲爱的用户请阅读以下<br>
  亲爱的用户请阅读以下亲爱的用户请阅读以下<br>
  亲爱的用户请阅读以下亲爱的用户请阅读以下<br>
  亲爱的用户请阅读以下亲爱的用户请阅读以下<br>
  亲爱的用户请阅读以下亲爱的用户请阅读以下<br>
  亲爱的用户请阅读以下亲爱的用户请阅读以下<br>
  亲爱的用户请阅读以下亲爱的用户请阅读以下<br>
  亲爱的用户请阅读以下亲爱的用户请阅读以下<br>
  亲爱的用户请阅读以下亲爱的用户请阅读以下<br>
  亲爱的用户请阅读以下亲爱的用户请阅读以下<br>
  亲爱的用户请阅读以下亲爱的用户请阅读以下<br>
  亲爱的用户请阅读以下亲爱的用户请阅读以下<br>
</p>
<input type="checkbox" disabled="disabled">我已仔细阅读协议，一定遵守
<input type="submit" disabled="disabled" value="注册"> 
</body>
<script type="text/javascript">
var info=document.getElementById("info");
var inputs=document.getElementsByTagName("input");
info.onscroll=function(){
  if(info.scrollHeight-info.scrollTop==info.clientHeight){
  inputs[0].disabled=false;
     inputs[1].disabled=false;
}
}
</script>
</html>

Tsk720

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 个人笔记3(详细BOM&DOM)

BOM1.Navigator 对象包含有关浏览器的信息。<script type="text/javascript">var ua=navigator.userAgent;console.log(ua);if(/firefox/i.test(ua)){ alert("你是火狐")}else if(/chrome/i.test(ua)){ alert("你是chr...
复制链接

扫一扫