目录
6.1 getComputedStyle() 这个方法接收两个参数,需要获取样式的属性值
6.2 currentStyle对象,它包含了所有元素的style对象的特征和任何未被覆盖的CSS规则的style特征
1.DOM
Document Object Model(文档对象模型)
1.1 DOM core(DOM核心操作)
DOM core定义了一套标准的针对任何结构化文档的对象,包括HTML、XHTML和XML。XML DOM定义了一套标准的针对XML文档的对象。HTML DOM定义了一套标准的针对HTML文档的对象。
1.2 HTML-DOM
使用JavaScript和DOM为HTML文档写脚本时,有许专属的HTML-DOM属性。
1.3 CSS-DOM
CSS-DOM是针对CSS的操作
2.节点和节点关系
- 整个文档是一个文档节点。
- 每个HTML标签是一个元素节点。
- 包含在HTML元素中的文本是文本节点。
- 每个HTML属性是一个属性节点。
- 注释属于注释节点。
3.节点信息
每个节点都拥有包含节点某些信息的属性。这些属性是:
-
nodeName(节点名称)
- nodeName属性含有某个节点的名称,元素 节点的nodeName是标签名称。属性节点的nodeName是属性名称。文本节点的nodeName永远是#text。文档节点的nodeName永远是#document
-
noneValue(节点值)
- 对于文本节点,nodeValue属性包含文本,对属性节点,nodeValue属性包含属性值。nodeValue属性对于文档节点和元素节点是不可用的。
-
noneType(节点类型)
- nodeType属性可返回节点的类型
元素类型 | 节点类型 |
元素element | 1 |
属性attr | 2 |
文本text | 3 |
注释comments | 8 |
文档document | 9 |
4.访问节点
4.1 通过getElement系列方法访问指定节点
- getElementById()方法: 返回按属性查找到的第一个对象的引用。
- getElementsByName()方法: 按指定名称name查找对象的集合。由于一个文档中可能对有多个同名节点(如复选框丶单选按钮),所以返回的是元素数组。
- getElementsByTagName()方法 返回指定标签名称TagName查找对象集合。由于一个文档中可能对有多个同类型的标签节点(如图片丶文本输入框),所以返回的是元素数组。
4.2 通过节点的层次关系访问节点
节点属性
属性类型 | 描述 |
parentNode | 返回当前节点的父节点 |
childNodes | 返回子节点集合 |
firstChild | 返回节点的第一个子节点,通常用于访问文本节点 |
lastChild | 返回节点的最后一个节点 |
nextSibling | 返回下一个节点 |
previousSibling | 返回上一个节点 |
注意:在JavaScript中提供了一组可以兼容不同浏览器的element属性,可以消除因为换行或者空行无法准确访问到节点的情况。所以尽量使用带elemen关键字的属性。
4.3 element属性
属性类型 | 描述 |
firstElementChild | 返回节点的第一个子节点,通常用于访问文本节点 |
lastElementChild | 返回节点的最后一个子节点 |
nextElementSibling | 返回指定节点的下一个兄弟节点 |
previousElementSibling | 返回指定节点的上一个兄弟节点 |
5.设置元素样式
5.1 style属性设置样式
在HTML DOM中,style是一个对象,代表一个单独的样式声明,可通应用样式的文档或者元素访问style对象,语法如下:
//在页面中有一点id为main的div,要改变div中的字体颜色为红色,字体大小为13px,代码如下所示。
HTML 元素.style.样式属性='值';
document.getElementById("main").style.color="red";
document.getElementById("main").style.fontSize="13px";
5.2 样式属性
text(文本)
属性 | 描述 |
fontSize | 设置元素的字体大小 |
fontWeight | 设置字体的粗细 |
textAlign | 排列文本 |
color | 设置文本的颜色 |
textDecoration | 设置文本的修饰 |
background(背景)
属性 | 描述 |
backgroundColor | 设置元素的背景颜色 |
backgroundImage | 设置元素背景图像 |
backgroundRepeat | 设置图和重复背景图片 |
padding(边距)
属性 | 描述 |
padding | 设置元素的填充 |
paddingTop | 设置元素上填充 |
paddingBottom | 设置元素下填充 |
paddingLeft | 设置元素左填充 |
paddingRight | 设置元素右填充 |
border(边框)
属性 | 描述 |
border | 设置四个边框的属性 |
borderTop | 设置上边框的属性 |
borderBottom | 设置下边框的属性 |
borderLeft | 设置组左边框的属性 |
borderRight | 设置右边框的属性 |
5.3 ClassName属性设置样式
在HTML DOM中 ,ClassName属性可设置或返回元素中的class样式
HTML 元素.className='样式名称';
function aaa (book) {
var node=document.getElementById(book);
node.className="c";
}
6.获取元素的样式
6.1 getComputedStyle() 这个方法接收两个参数,需要获取样式的属性值
注:IE浏览器不支持此属性
document.defaultView.getComputedStyle(元素,null).属性
6.2 currentStyle对象,它包含了所有元素的style对象的特征和任何未被覆盖的CSS规则的style特征
HTML 元素.currentStyle.样式属性
本章总结
- DOM操作分为DOMCore丶HTML-DOM和CSS-DOM三个方面。
- 在HTML DOM中查找节点的标准方法是getElement系列方法,也可以使用parentNode丶firstChild丶lastChild丶nextSibling丶previousSibling按层次关系查找节点。
- 为解决浏览器兼容性问题,也使用firstElementChild丶lastElementChild丶nextElementSibling丶previousElementSibling按层次关系查找节点。
- 使用JavaScript改变样式的两种方法是使用style属性和className属性。
- 使用style对象获取内联样式属性值,使用currentStyle对象在IE浏览器中获取样式中的属性值,DOM提供了getComputedStyle()方法以获取样式中的属性值。
- 在IE6~IE8浏览器下需要使用currentStyle对象获取样式的属性值。
练习小作业:
- 画一颗DOM树
- 访问手机页面内容
- 实现Tab切换效果
- 获取手机列表页面信息