JavaScript.DOM核心对象
JavaScript-document对象
document(DOM核心对象)
作用:内容innerHTML
属性
样式
document对象
一、属性
title返回或设置当前文档的标题
URL返回当前文档的url
bgcolor设置文档的背景颜色
fgcolor设置文档的前景色(设置文字颜色)
二、方法
getElementById(idname)返回拥有指定id的(第一个)对象的引用
innerHTML 属性设置或返回表格行的开始和结束标签之间的HTML
getElementsByTagName(tagname) 返回带有指定标签签名的对象的集合
getElementsByName(name) 返回带有指定name标签签名的对象的集合
getElementsByName(name)在IE中不兼容的,在IE表单中是可以兼容的
如果是IE:
如果该对象的标准属性包含有name,那么可以正确使用,否则不可以使用
如果是FF:
该方法可以使用于任何方法
结论:
主要适用于表单
getElementsByclassName()返回带有指定classname指定名称的对象集合
三、document对象的集合
all 所以元素的集合,不兼容
forms 返回对文档中所以form对象的引用
通过集合来访问所有的对象
1.通过下标的形式,弹出表单的name
2.通过name的形式
anchors 返回对文档中所有anchors对象的引用(即所有a链接)
images 返回对文档中所有image对象的引用
links 返回文档中所有area对象和link对象的引用
JavaScript——DOM对document对象的内容、属性、样式的操作
一、操作内容
1.innerHTML 用来设置或获取对象起始和结束标签内的内容(识别html标签)
2.innertext 用来设置或获取对象起始和结束标签的内容(兼容ie,获取文本)
textcontent 用来设置或获取对象起始和结束标签的内容(兼容FF,获取文本)
注意区别innerHTML和innertext,第一个会识别样式,第二个只会识别文本,但是在FF中不兼容,要使用textcontent。支持document.all的是IE
3.outerHTML 用来设置或获取包括本对象在内起始和结束标签内的内容(识别HTML标签)
outertext 用来设置或获取包括本对象在内起始和结束标签内的内容
二、操作属性
1.直接操作
对象.属性
对象.属性=值(设置、获取、添加属性(属性值))
2.获取和设置
getAttribute(“属性”)获取给定的属性值
setAttribute(“属性”,“值”)设置或添加属性
三、操作样式
1.行内样式
对象.style.属性
对象.style.属性=值(设置、获取、添加属性)
遇到属性是“-”链接的,要将“-”去掉,后面的单词的首字母大写
2.css层叠样式
通过更改id改变样式(一般不用,不更改ID)
通过ClassName更改样式
更改或者获取或者设置某个属性的值
document.styleSheets[下标].rules[下标].style.属性
document.styleSheets[下标].rules[下标].style.属性=值
document.styleSheets 样式表的集合,即是<style></style>的数量
document.styleSheets[0].rules 样式规则的列表,即其中的<div>等的个数
document.styleSheets[0].rules.style 样式规则的集合
document.styleSheets[下标].rules[下标].style.属性 (适用于ie)
document.styleSheets[下标].cssRules[下标].style.属性
document.styleSheets[下标].cssRules[下标].style.属性=值 (适应于FF)
动态的添加删除css样式规则
document.styleSheets[下标].insertRule("选择器{属性:值}",位置) FF w3c
deleteRule(位置) FF w3c
document.styleSheets[下标].addRule("选择器","属性:值",位置) IE removeRule(位置) IE
3.行内样式和css层叠样式通过的方式
对象.currentStyle.属性 IE 用来获得实际的样式属性
getComputedStyle(对象,null) FF 用来获得实际的样式属性
(只能获取不能设置)