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];
}
上一篇: 虾皮炒蕨菜,想吃美味就得看一看