核心

瀏覽器網頁就是一個Dom樹形結構

??更新：更新Dom節點

??遍歷Dom節點：獲得Dom節點

??洗掉：洗掉一個Dom節點

??添加：添加一個新的節點

要操作一個Dom節點,就必須要先獲得這個Dom節點

doucument

代表當前的頁面,HTML　DOM檔案樹

document.title \\網頁獲取title
documet.cookie \\獲取客戶端Cookie

獲得Dom節點

	<body>
		 	<div id="div1">
			<h1 id="h"></h1>
			<p class="p1"></p>
			</div>
	</body>

		//通過標簽
			document.getElementsByTagName('h1');
		//通過id
			document.getElementById('div1');
		//通過class
			document.getElementsByClassName('p1');
		//獲取父節點
			h.parentElement
		//獲取父節點下所有子節點
			div1.children[index];
		//獲取當前節點下,第一個節點
			div1.firstElementChild;
		//獲取當前節點下,最后一個節點
			div1.lastElementChild;
		//獲取下一個節點
			h.nextElementSibling;

更新節點

			//更新文本的值
			div1.innerText='修改文本的值';	
			//更新超文本,可以決議html文本標簽
			div1.innerHTML='<strong>添加超文本</storng>';
			//更新css
			div1.style.color='red';
			div1.style.fontSize='20px';//駝峰命名
			div1.style.padding='2em';

實戰演練

獲取id
在這里插入圖片描述
沒改之前

操作input

在這里插入圖片描述

洗掉Dom節點

洗掉節點步驟：先獲取父節點,再通過父節點洗掉自己

let self=document.getElementById('p1');//獲取洗掉節點
let father=self.parentElement//獲取父節點
father.removeChild(self);//通過父節點洗掉節點

注意：洗掉節點的時候，子節點陣列是在不斷地變化,所以不能通過陣列靜態連續洗掉,只能多次通過動態洗掉

插入節點

我們獲得某個Dom節點,假設這個 Dom節點是空的,我們通過innerHtML就可以添加一個元素,但是這個Dom節點已經存在元素了,就會產生覆寫

	<body>
	
		<p id="p1">Java</p>
		<div id="div1">
		<p>JavaScript</p>
		<p>css</p>
		<p>C</p>
		</div>
	</body>

把已有的標簽進行插入

let a=document.getElementById('div1');
let b=document.getElementById('p1');
a.appendChild(b);//追加

效果
在這里插入圖片描述

創建一個新的標簽,實作插入

			let a=document.createElement('p');//創建節點 p標簽
			a.id='p2';
			a.innerText='hello,小沈';
			let list=document.getElementById('div1');//獲取div1 id
			list.appendChild(a);//追加子節點
			//創建標簽節點
			let a=document.createElement('script');
			a.setAttribute('type','text/javascript');

效果：

在這里插入圖片描述

	//創建style標簽節點
			let st=document.createElement('style');
			st.setAttribute('type','text/css');
			st.innerHTML='body{ background-color:pink;}';
			let hd=document.getElementsByTagName('head')[0];//注意點,head在第0個元素，
			hd.appendChild(st);

效果

在這里插入圖片描述

在子節點前插入(insertBefore)

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	
		<p id="p1">Java</p>
		<div id="div1">
		<p id="px">JavaScript</p>
		<p id='p2'>css</p>
		<p id="p3">C</p>
		</div>
		<script type="text/javascript">
		//擁有子節點的父節點
		let list=document.getElementById('div1');
		let self=document.getElementById('p2');
		let befoe=document.getElementById('p1');
		list.insertBefore(befoe,self);

		</script>
	</body>
</html>

效果
在這里插入圖片描述

操作表單

、 //對于單選框，多選框固定的值， id.value只能取到當前的值
id.checked;//查看回傳值結果,true選中,false 沒選中
id.checked=true;//賦值

獲取表單，MD5密碼攔截

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js" ></script>
	<body>
	  <!-- 
	  表單系結提交時事件
	  onsubmit=系結一個提交檢測的函式，true，false
	  將這個結果回傳給表單,使用onsubmit接收
	  onsubmit="return a()"
	  -->
<form action="https://www.baidu.com/" method="post" onsubmit="return a()">
	
<p>
	<span >用戶名:</span> <input type="text" name="username" id="username"/>
</p>
<p>
	<span >密碼:</span> <input type="password" id="input-password"/>
</p>
<input type="hidden" id="md5-password" name="passsword"/>

<button type="submit"> 提交</button>
</form>
<script type="text/javascript">
	function a(){
		var uname=document.getElementById('username');
		var pwd=document.getElementById('input-password');
		var md5pwd=document.getElementById('md5-password');
		md5pwd.value=md5(pwd.value);
		//可以校驗判斷表單內容,true就是通過提交,false,阻止提交
		return true;
	}
</script>
	</body>
</html>