JavaScript 的 BOM对象与DOM对象

文章目录

  • BOM
  • DOM

BOM

(Browser Object Model),浏览器对象模型。

1.一次性定时器
setInterval()和setTimeout()的区别:setInterval(表达式,交互时间);是多次周期内延时;setTimeout(表达式,延迟时间);是延时一次。
方法1:使用setInterval()、clearInterval()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			var id;
			function run1() {
			alert("run1");
			//只要执行一次run1,清楚对应的定时器
			clearInterval(id);
			}				
			id = setInterval("run1()",2000);
		</script>
	<head>
	<body>
	</body>
</html>

方法2:使用setTimeout()、clearTimeout()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function run1() {
				alert( "run1");
			}
			//希望两秒执行一次run1方法
			id=setTimeout("run1()",2000);
//			clearTimeout(id);	//解除定时器,不会弹框
		</script>
	</head>
	<body>
	</body>
</html>

2.location:返回URL、跳转到指定URL

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			//var  str = location.href;	//获取地址信息
			//alert(str);
			location.href = "demo1.html";	//跳转到内部HTML
			//location.href = "https://www.baidu.com/"; //跳转到外部网络地址
		</script>
	</head>
	<body>
	</body>
</html>

JavaScript 的 BOM对象与DOM对象_第1张图片

DOM

Document Object Model,文档对象模型;
文档:标记型文档(html等);

DOM是吧文档中的所有内容(标签,文本,属性)都封装成对象,
通过操作对象的属性或方法来达到操作或改变HTML展示效果的目的。

一个html文档最终形成一个DOM对象…

1.getElementById();
——通过元素ID获取对应元素对象
2.getElementsByName();
——通过元素的那么属性获取符合要求的所有元素,若找到获取元素节点对象的数组,若找不到返回空数组
3.getElementByTagName();
——通过元素的元素名属性获取符合要求的所有元素
4.getElementsByClassName();
——通过元素的class属性获取符合要求的所有元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<head>
	<body>
		<input type="text" id="t1" />
		<input type="checkbox" name="hobby" value="read"/>
		<input type="checkbox" name="hobby" value="code"/>
		<input type="checkbox" name="hobby" value="run"/>	
		<ul>
			<li>javaee</li>
			<li>android</li>			
			<li>ios</li>
			<li>php</li>
		</ul>
		
		<input type="radio" name="sex" value="man" class="h1"/>
		<input type="radio" name="sex" value="woman" class="h1"/>
		<script>
			//!!	1.通过元素id获取对应的元素对象
			var t1=document.getElementById("t1");
			alert(t1);
			
			//!!	2.t通过name属性获取需要的元素,
			//若找到返回元素节点对象的数组,
			//若未找到,返回0
			var arr2=document.getElementsByName("hobby");
			alert("name属性长度为:" +arr2.length)
			
			//!!  3.通过标签名,获取所需要的的元素
			var arr3= document.getElementsByTagName("li");
			alert("标签元素长度为:" +arr3.length);
			
			//!!	4.通过class属性值,获取所有需要的元素
			var arr4 = document.getElementsByClassName("h1");
			alert("class元素长度为:" + arr4.length);
		</script>
	</body>
</html>

JavaScript 的 BOM对象与DOM对象_第2张图片

JavaScript 的 BOM对象与DOM对象_第3张图片
JavaScript 的 BOM对象与DOM对象_第4张图片

JavaScript 的 BOM对象与DOM对象_第5张图片

你可能感兴趣的:(#,JavaScript)