DOM对象

DOM(document)对象:文档对象模型

• 1.属性:
• document.title:返回当前文档的标题
• document.URL:返回文档完整的URL
• document.bgColor:背景色
• document.fgColor:前景色3.

- 2.方法:

(1)document.getElementById("id")
(2)document.getElementByTagName("标签名")
(3)document.getElementByName("name")   
 在IE中只能找到表单中含name属性的东西
(4)document.getElementByClassName("标签")
可以找到具备同一类型的标签

• 3.对象集合:

- (1)all:所有对象的集合(只针对IE有效),用来做判断兼容性

if(document.all){
alert("IE");
}  else {
alert("NOT IE");
}

- (2)forms:所有表单集合

donsole.log(document.forms.length);
获得表单个数

• 获取表单三种方法:

- (1)通过[]方式:

console.log(document.forms["表单name或第一个表单"])

- (2)根据form表单name属性值来获取:

console.log(document.name名)

- (3)直接document.name的值来获取

console.log(document.form1.name1["0"]).value;
获取form1中的name1里的第一个

• 4.操作元素内容:
• (1)innerHTML:获取元素中所有的内容,包括标签
• (2)innerText:获取文本内容,返回文本
• 5.属性操作

- 6.样式的操作方法:

var   div1 = cocument.getElemenById("div1");
div.style.样式(值为字符串)

-onmouseover:当鼠标移入时事件

-onmouseout:当鼠标移出时事件

var  btn = document.getElementById("btn");
btn  onmouseover = function(){
this.style.样式
this.style.样式

• 解决innerText以及textContent的兼容性问题
• 1.可以设置对象的内容

- 2.可以获取对象的内容

function getContent(obj,val){
if(document.all){
if(val){
obj.innerText = val;
}  else{
reture.obj.innerText;
}
}   else{
if(val){
obj.textContent = val;
}else{
reture.obj = textContent;
}

• 6.2CSS层叠样式：
• （1）通过className修改样式：（批量操作样式表，可通过修改class以及id的值来替换样式表，id不提倡使用）

- （2）获取或修改某个样式的值

document,styleSheets[选择哪个style].rules[选择器的第几个属性]；
style.样式（如宽，高等）

-

document.styleSheets[0].insertRule("选择器")

-

document.styleSheet[0].deleteRule()

-

- 获得最终样式：

laert(window.getConputedStyle(ondiv.null)width);
针对IE使用

- 获得元素尺寸：

console.log(oneDiv.clientWidth+  " "  + clien + Height);