1. 程式人生 > 其它 >BOM--document物件

BOM--document物件

技術標籤:前端javascript

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>BOM--document物件</title>
		<script>
			/*
			 document物件:
			    常用物件集合:  forms:代表頁面中所有表單的集合   返回值是一個數組
			    常用物件方法:
			    white():文件中列印資訊
			    whiteln():文件列印資訊,自帶換行
			    getElementById():根據元素的id值獲取頁面元素
			    getElementsByName():根據元素的name獲取一組頁面元素,返回值是陣列
			    getElementsByTagName():根據元素的名稱獲取一組頁面元素,返回值是陣列
			    getElementsByClassName():根據元素的class值獲取一組頁面元素,返回值是陣列 
			    history:記錄訪問過的物件
			      go()
			      back()==go(-1)
			      forward()==go(1)
			    location物件
			    
			 */
			
			function sub(){
				document.forms[0].action="demo04.html";//想更改路徑時可以使用此語句
				document.forms[0].submit();//只有一個form,就獲取第一個     
			}
			
			document.writeln("aaaaa");
			document.writeln("bbbbb");
			
			
			
			function load(){
				var div1 = document.getElementById("div1");
			    console.log(div1);
			    var chks = document.getElementsByName("chk");
			    console.log(chks);
			    var lis = document.getElementsByTagName("li");
			    console.log(lis);
			    var liss = document.getElementsByClassName("d");
			    console.log(liss); 
			}
			
			//看位址列的相關屬性
			console.log(location.host);
			console.log(location.hostname);
			console.log(location.href);
			console.log(location.pathname);
			console.log(location.port);
			//實現頁面的重新載入
			location.reload();
			
			
		</script>
	</head>
	<body onload="load()"><!--頁面載入完成後再執行上邊load事件-->
		<form action="demo05.html" method="get" ><!--action:指定表單提交路徑,method:表單提交方式-->
			<button type="button" onclick="sub()">提交</button>
		</form>
		<div id="div1">
			<a href="">XXXX</a>
		</div>
		<div>
			<input type="checkbox" name="chk" value="1" />1
			<input type="checkbox" name="chk" value="2" />2
			<input type="checkbox" name="chk" value="3" />3
		</div>
		<div>
			<ul>
				<li class="d">aaaaaaa</li>
				<li class="d">bbbbbbb</li>
				<li class="d">ccccccc</li>
			</ul>
		</div>
	</body>
</html>

在這裡插入圖片描述