DOM基本操作

什么是DOM

1.DOM----Document Object Model

1.DOM定义了表示和修改文档所需的方法。DOM对象即为宿主对象，由浏览器厂商定义，用来操作html和xml功能的一类对象的集合。也有人成DOM是对html以及xml的标准编程接口

	var div=document.getElementsByTagName('div')[0];
	div.style.width="100px";
	div.style.height="100px";
	div.style.backgroundColor="red";

	var count=0;
	div.onclick=function(){
		count++;
		if(count % 2==1){
		this.style.backgroundColor="green";
		}else{
		this.style.backgroundColor="red";
		}
	}

DOM基本操作

查

查看元素节点

1：document代表整个文档

2：document.getElementById();//元素id在ie8以下的浏览器，不区分id大小写，而且匹配name属性的元素**（做项目中一般不使用）**

<div id="only">123</div>
<script>
	var div=document.getElementById('only');
</script>

3：.getElementsByTagName();//标签名（最主流的用法）

<div name="only">123</div>
<script>
	var div=document.getElementById('div')[0];

</script>

4：.getElementsByName();

//需注意，只有部分标签name可生效（表单，表单元素，img，iframe）

<input name="fruit">
<script>
	var div=document.getElementsByName('fruit')[0];

</script>

5：.getElementsByClassName();

//类名-ie8和ie8以下的ie版本没有

<div id="only" class="demo">123</div>
<script>
	var div=document.getElementsByClassName('demo')[0];

</script>

6：.querySelector()//css选择器，在ie7和ie7以下版本没有
//静态更改，不是实时更改，不常用

 	<div>
 		<strong></strong>
 	</div>
	<div>
		<span>
			<strong class="demo">123</strong>
		</span>
	</div>
<script>
	var div=document.querySelector('div>span strong.demo');

</script>
//选出来的是一个，不是类数组。

7：querySelectorAll()//css选择器，在ie7和ie7以下的版本中没有
// 静态更改，不是实时更改，不常用
与querySelector的区别，就是这个选出来的是类数组，不是一个