DOM（一）

ゝ一纸荒年。 2021-11-26 08:10 148阅读 0赞

## 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.样式属性名称=”值”; 例如：

**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);
    		};