愤怒的WebAPI（一）——元素获取&操作

我可去你的小饼干吧！

一、获取元素

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');