第三章 JavaScript操作DOM对象
DOM操作
简介
全称:Document Object Model(文档对象模型)
是基于文档编程的一套API接口,大部分主流浏览器都执行了W3C发布的第一级的DOM规范,因此解决了浏览器兼容性问题
DOM操作分类
- 三类
- DOM Core(核心)
- 提供方法
- getElementById()
- getElementsByTagName()
- 任何一种支持DOM编程的语言都可以使用它,比如HTML
- 提供方法
- HTML-DOM
- 使用JS与DOM为HTML编写脚本的时候,有许多专属的HTML-DOM属性
- 出现的比DOM-Core要早
- 提供了一些更简单的标记来描述HTML属性
- 使用HTML-DOM获取对象、属性时,代码较为简洁,但没有DOM-Core实用性广泛
- CSS-DOM
- 主要用于设置CSS属性
- 如element.style.color=“red”设置文本为红色
- DOM Core(核心)
节点
- DOM是以树状结构组织的HTML文档,在DOM中,如下规定节点
- 整个文档是一个文档节点
- 每个HTML标签是一个元素节点
- 包含在HTML标签中的文本是文本节点
- 每个HTML属性是一个属性节点
- 注释属于注释节点
- 如图
访问节点
- getElement系列
- getElementById();
- 返回按id属性查找的一个对象的引用
- getElementsByName()
- 返回带有指定名称name查找的对象的集合
- getElementsByTagName()
- 返回带有指定标签名TagName查找的对象的集合
- getElementById();
- 根据层次访问
- 节点属性
- parentNode
- 返回节点的父节点
- childNodes
- 返回子节点的集合,childNodes[i]
- firstChild
- 返回节点的第一个子节点
- lastChild
- 返回节点的最后一个子节点
- nextSibling
- 下一个节点
- previousSibling
- 上一个节点
- parentNode
- element属性(用于兼容浏览器)
- firstElementChild
- 返回节点的第一个子节点
- lastElementChild
- 返回节点的最后一个字节点
- nextElementSibling
- 下一个节点
- previousElementSibling
- 上一个节点
- firstElementChild
- 节点属性
节点信息
- nodeName(节点名称)
- nodeValue(节点值)
- nodeType(节点类型)
- 节点类型
- 操作节点的属性
- getAttribute(“属性名”)
- 用来获取属性的值
- getAttribute(“属性名”,“属性值”);
- 用来获取设置属性的值
- getAttribute(“属性名”)
创建和插入节点
- createElement(TagName)
- 创建一个标签名为TagName的新元素节点
- A.appendChild(B)
- 把B节点追加至A节点的末尾
- insertBefore(A,B)
- 把A节点插入B节点之前
- 其中A是必选项,标书新插入的节点,B是可选项,表示新节点插入B节点的前面
- cloneNode(deep)
- 复制某个指定的节点
- 其中的参数deep是bool值,若deep值为true,则复制该节点及该节点的所有子节点,若deep值为false,则只复制该节点和其属性
删除和替换节点
- removeChild(node)
- 删除指定的节点
- replacechild(newNode,oldNode)
- 用其他节点替换指定的节点
- newNode表示替换的新节点,oldNode表示要被替换的节点
操作节点样式
- style属性
- 是一个课通过应用样式的文档或元素访问的对象
- 语法
- HTML元素.style.样式属性=“值”;
- 常用的属性
- background(背景)类别
- backgroundColor
- 设置元素的背景颜色
- backgroundImage
- 设置元素的背景图像
- backgroundRepeat
- 设置是否及如何重置背景图像
- text(文本)类别
- fontSize
- 设置元素的字体大小
- fontWeight
- 设置字体的粗细
- textAlign
- 排列文本
- textDecoration
- 设置文本的修饰
- font
- 设置同一行字体的属性
- color
- 设置文本的颜色
- fontSize
- padding(边距)类别
- padding
- 设置元素的填充
- paddingTop
- 设置元素的上填充
- paddingBottom
- 设置元素的下填充
- paddingLeft
- 设置元素的左填充
- paddingRight
- 设置元素的右填充
- padding
- border(边框)类别
- border
- 设置四个边框的属性
- borderTop
- 设置上边框的属性
- borderBottom
- 设置下边框的属性
- borderLeft
- 设置左边框的属性
- borderRight
- 设置右边框的属性
- border
- 常用事件
- onclick
- 当用户单击某个对象调用事件
- onmouseover
- 鼠标移到某元素之上
- onmouseout
- 鼠标从某元素移开
- onmousedown
- 鼠标按钮被按下
- onclick
- className属性
- 可设置或返回元素的class属性
- 语法
- HTML元素.className=“样式名称”;
获取元素的样式
- style获取样式
- 在JavaScript中可以使用style属性获取样式的属性值
- 语法
- HTML元素.style.样式属性
- 此对象只获得内联样式的属性值
- currentStyle获取样式
- 微软为每个元素提供了一个currentStyle对象
- 语法
- HTML元素.currentStyle.样式
- 此对象获取的样式是只读的,如需赋值,请使用style对象
元素属性应用
- offsetLeft
- 返回当前元素左边界到它上级元素的左边界的距离,返回只读属性
- offsetTop
- 返回当前元素上边界到它上级元素的上边界的距离,返回只读属性
- offsetHeight
- 返回元素的高度
- offsetWidth
- 返回元素的宽度
- offsetParent
- 返回元素的偏移容器,即对最近的动态定位的包含元素的引用
- scrollTop
-返回匹配元素的滚动条的垂直位置 - scrollLeft
- 返回匹配元素的滚动条的水平位置
- clientWidth
- 返回元素的可见宽度
- clientHeight
- 返回元素的可见高度
- 语法
- var sTop = document.documentElement.scrollTop || document.body.scrollTop;
- 其中Chrom浏览器不支持document.documentElement.scrollTop
- 所以要在后面加上 || document.body.scrollTop完善浏览器兼容性