欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

DOM 文档对象模型

程序员文章站 2022-05-28 21:04:27
...

Document Object Model 文档对象模型 符合w3c标准

1、DOM节点类型有两种

元素:标签
文本

2、DOM的基本操作

  查询 		 document.getElementById("box")		//ID获取    表示的是一个对象
        	 document.getElementsByClassName()[0]  //类名获取
           	 document.getElementsByName()[0]       //name属性
       		 document.getElementsByTagName() [0]  //标签名
			 除了通过Id获取的得到的是对象,其他得到的都是数组,需要通过加索引找到对象。
			 通过Id、TagName获取在ie浏览器中不会出现兼容性问题。其他的在ie8一下会出现兼容问题

			 document.querySelector()
			 document.querySelectorAll()
			 通常使用querySelector() 通过Id取值推荐这个
			 querySelectorAll() 通过class 标签名 属性或者推荐这个
创建节点: 	 document.createElement("")
创建文本节点:document.createTextNode("hello")
添加 		 document.appendChild();
修改		 c.replaceChild("a","b")  注意c是 a和b共同的父节点时a标签才可以替换b标签。
删除		 document.removeChild()

3、获取非行内样式

1、getComputedStyle()函数 
  <style>
       #box{
           width: 100px;
           height: 100px;
           border: 1px solid black;
       }
    </style>
<div id="box" style="background:red">1111</div>
var box =document.getElementById("box")
var width=getComputedStyle(box,null)["width"];   // 100px
var width=getComputedStyle(box,null)["background:red"];  //red

**Ie8需要使用如下的方法**
var width=box.currentStyle["width"]

4封装一个获取一个非行样式的函数

1、function getStyle(obj,attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }
      return  getComputedStyle(obj,null)[attr] 
}
currentStyle在非Ie中返回值是undefined  在Ie中返回的是一个对象


2、function getStyle(obj,attr){
      if(window.getComputedStyle){
        return  getComputedStyle(obj,null)[attr] 
      }
      return obj.currentStyle[attr];
}


相关标签: DOM