DOM（一）

DOM==》Document Object Model【文档对象模型】

什么是DOM：
他是一种文档对象模型，是一个可以让程序和脚本动态访问和更新文档内容，结构和样式的语言平台，提供了一个标准的HTML和xml对象集，并有一个标准的接口来访问并操作他们，最后，web开发人员可以很快捷的安全的创建各种多样化也功能强大的web应用程序
文档对象 的方法
getElementById----------返回对拥有指定id的第一个页面元素对象的引用
getElementsByTagName------------返回带有指定标签的页面元素对象集合
getElementsByClassName---------返回带有指定class的第一个页面元素对象集合
以上三个是常用的，还有一些不常用的，就不一一列举了
1. 获取元素
获取元素的方法：
1.1 通过id来获取元素对象，返回值为 1个对象
Var变量名称=document.getElementById(“id值”);
var obj1= document.getElementById(“div1”);

1.2 通过标签名来获取元素，返回的是一个数组
Var变量=document.getElementsByTagName(“标签名”);

var obj2=document.getElementsByTagName("span");
		for(vari=0;i<obj2.length;i++){
			
			obj2[i].style.backgroundColor="red";
		}

1.3 通过元素的属性 name 的值，来获取元素；返回值是一个数组
Var变量 = document.getElementsByName(“name属性的值”);

var obj3= document.getElementsByName("dd");
		for(vari=0;i<obj3.length;i++){
			obj3[i].style.backgroundColor="red";
			
		}
		
		obj3[2].style.backgroundColor="orange";

1.4 通过元素的calss属性值，来获取元素
Var变量 = document.getElementsByName(“calss属性的值”);

var obj4 = document.getElementsByClassName("test");
		for(vari=0;i<obj4.length;i++){
			obj4[i].style.color="blue";
			obj4[i].style.fontSize="30px";
		}

2. 添加事件
2.1 在标签内部添加：
语法：
<标签事件名=”响应事件的函数”></标签>

div1

2.2 在javascript中添加事件 步骤：1.先获取到元素 varobj=document.getElementById("div2"); 2.元素.事件名称=function(){ //执行代码； }; obj.οnclick=function(){ alert("我是div2"); }; 注意： this关键字，谁调用，就指代谁 使用场景：通过一个循环，添加事件是，在处理事件的方法中，使用this 来代替当前操作的元素。 **3. 设置样式** 步骤： 1. 获取元素 2. 元素对象.style.样式属性名称=”值”; 例如：

<script type="text/javascript">
	varobj=document.getElementById("div1");
		obj.style.width="500px";
		obj.style.height="500px";
		obj.style.backgroundColor="pink";
		obj.style.border="1px solid green";
	</script>

4. 操作内容
步骤：

1. 获取元素
2. 元素对象.innerHTML=”值”;

varobj= document.getElementById("div1");
obj.innerHTML+="<u><i>下午好，我是一个层</i></u>";

5. 获取当前样式的值【兼容性问题】

	varobj = document.getElementById("div1");
		obj.onclick=function(){
			this.style.backgroundColor="orange";
			var w= this.style.width;
			//var h = this.style.height;
			//Chrome/firefox/IE9+
			//var h= getComputedStyle(obj).height;
			
			//IE支持;Chrome/firefox不支持
			
			//var h=obj.currentStyle.width;
			
			var h="";
			if(obj.currentStyle!=undefined){
				h=obj.currentStyle.width;
			}
			else{
				h= getComputedStyle(obj).height;
			}
			alert(h);
		};