DOM
DOM对象
**1.属性**
docment.title 返回当前文档的标题
docment.URL 返回文档完整的URL
document.bgColor 背景色
document.fgColor 前景色
**2.方法**
2.1 document.getElementById(“elementID”);
返回带有指定标签名的对象的集合
参数值 “*” 返回文档的所有元素
返回的集合对象拥有 length 属性 , 并且可以通过 ****Index 来访问集合中的元素
2.2 document.getElementsByTagName(“tagname”);
返回带有指定标签名的对象的集合
参数值 “*” 返回文档的所有元素
返回的集合对象拥有 length 属性 , 并且可以通过 Index 来访问集合中的元素
2.3 document.getElementsByName(“name”);
返回带有指定名称的对象的集合
返回的集合对象拥有 length 属性 , 并且可以通过 Index 来访问集合中的元素
存在兼容性问题 ( 该方法适用于表单操作 )IE浏览器中, 如果 name 存在于 form 表单中,可以正常使用,但是如果出现在例如 div 元素中,则不能正常返回值,原因是name并不是div的标准属性
2.4 document.getElementsByClassName(“classname”);
返回文档中所有指定类名的元素集合
返回的集合对象拥有 length 属性 , 并且可以通过 Index 来访问集合中的元素
小结：除了ID都是返回的对象的集合，可以用Index来访问集合中的元素。
**3.对象的集合**
3.1 all
所有对象的集合 , 常用来做兼容性判断
3.2 forms
所有 form 表单集合
console.log(document.forms.length);
通过 index 来访问表单对象
document.forms[0];
通过表单的 name 属性来访问表单对象
document.forms["name"];
**4.操作元素的内容**
4.1 innerHTML:
设置或获取标签对中的内容 ( 识别 HTML )
4.2 innerText:
获取文字内容 ( IE ) textContent: 获取文字内容 (FF,chrom)
**5.属性操作**
5.1 直接操作
object.attr = value ( 获取和设置 )
5.2 方法
获取 : object.getAttribute(“attr”)
设置 : 对象 .setAttribute(“attr”, “value”)
**6.样式操作**
6.1 行内样式
设置和获取 : object.style.attr
类似hover效果。
html:
<a id="one" href="#" style="color: red;background-color: blue; padding: 3px;"> 跳转 </a>
javascript:
(function() {
var one = document.getElementById("one");
one.onmouseover = function() {
this.style.color = "blue";
this.style.backgroundColor = "red";
};
one.onmouseout = function() {
this.style.color = "red";
this.style.backgroundColor = "blue";
};
}());
**6.2 css 层叠样式**
通过 className 修改样式
获取或修改某个属性的值 ( 兼容性问题 )
document.styleSheets 返回样式表的集合
document.styleSheets[index].rules / document.styleSheets[index].cssRules 返回样式表中选择器的集合
document.styleSheets[index].rules[index].style.attr 查找样式表中的样式属性 (ie chrom)
document.styleSheets[index].cssRules[index].style.attr 查找样式表中的样式属性 (firefox)
动态添加或删除
document.styleSheets[index].insertRule(“selector{attr:value}”, index);
document.styleSheets[index].deleteRule(index);
document.styleSheets[index].addRule(“selector”,”attr:value”, index);
document.styleSheets[index].removeRule(index);
6.3 获取最终样式 ( 只能获取 , 不能操作 )
object.currentStyle.attr ( IE )
window.getComputedStyle(object,null).attr ( W3C )
6.4 获得元素尺寸 ( 可直接运算 )
clientWidth/clientHeight: 元素可视部分的高度和宽度 (width + padding)
offsetWidth/offsetHeight: 元素实际的高度和宽度 (width+padding+border)
