JavaScript.DOM核心对象

Posted 2021-02-07 jacky912

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 用来获得实际的样式属性

　　　　　　　　　　（只能获取不能设置）