我可去你的小餅乾吧！

一、獲取元素

1、根據id名獲取元素

	<div id="box"></div>
	<script>
		var box = document.getElementById('box');
		console.log(box, '這是body底部獲取的box');
	</script>

2、根據標籤名獲取元素

	<div></div>
	<script>
		var divs = document.getElementsByTagName('div');
	</script>

3、根據類名獲取元素

	<div class="box"></div>
	<script>
		var box = document.getElementsClassName('box');
	</script>

以上幾種都是通過DOM的方式獲取的標籤，它們實際上是物件結構，這個物件可以使用DOM中的屬性和方法。這種物件稱為DOM物件。

二、DOM物件操作

1、內容操作

① innerText 用於對某個標籤進行純文字操作

//	注意：使用innerText屬性進行賦值後，原始內容會被覆蓋，由於是純文字操作，設定時儘管書寫了結構內容，但是無法生成。
	<div id = "ps">
		<p>12345<span>23456</span></p>
	</div>
	<script>
		var divs = document.getElementById ('ps');
		console.log (ps.innerText);
		ps.innerText = '<p>12345<span>23456</span></p>';
	</script>
 

② innerHTML 用於對某個標籤進行文字和結構的操作

//	注意：使用innerHTML屬性進行賦值後，原始內容會被覆蓋，使用innerHTML設定的結構會被生成為真正的標籤。
	<div id = "ps">
		<p>12345<span>23456</span></p>
	</div>
	<script>
		var divs = document.getElementById ('ps');
		console.log (ps.innerHTML);
		ps.innerHTML = '<p>12345<span>23456</span></p>';
	</script>
 

2、樣式操作

① 要操作樣式需要先訪問style屬性
② 如果需要訪問某個具體樣式，要再訪問某個樣式名稱
③ 設定為對應的值即可，字串形式，如果有單位必須加。

box.style.width = '100px';

④ 使用style方式設定的樣式在標籤的行內生效。行內樣式權重高。
⑤ 在css中加-的樣式名稱，例如background-color，在js中需要設定為駝峰命名法

box.style.backgroundColor = 'red';

3、類名操作

<div id="box" class="colorRed"></div>
	<script>
		// 類名操作使用className的屬性
		var box = document.getElementById('box');
		box.className = 'colorBlue fl clearfix';
		console.log(box.className);
		// 賦值後，會將原始的內容替換
	</script>

4、行內屬性操作

	<div id="box" class="box2" hehe="abc"  data-index="3"></div>
	<script>
		var box = document.getElementById('box');
	</script>

① 自帶行內屬性操作方式

console.log(box.id);
box.id = 'box6';
console.log(box.id);

② 自定義行內屬性操作方式

獲取行內屬性
console.log(box.getAttribute('hehe'));
設定行內屬性
box.setAttribute('data-hehe',"aasdas");
console.log(box.getAttribute("data-hehe"));
移除行內屬性
box.removeAttribute('hehe');