一、 节点层次
DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构
如果节点是元素节点，则 nodeType 属性将返回 1。
如果节点是属性节点，则 nodeType 属性将返回 2。
nodeName 保存的是元素的标签名，而nodeValue的值始终为null
parentNode,指向文档树中的父节点，childNode,是文档树中的子节点，nextSibiling指向下一个兄弟节点，previousSibling指向上一个兄弟节点，firstChild指第一个子节点，lastChild指最后一个子节点
1.1 操作节点
appendChild(),用于向childNode列表末尾添加一个节点
insertBefore(),用于插入到某个节点的前边
replaceChild(),要插入的节点和要替换的节点
removeChild(),移除的节点
cloneNode(),用于创建一个完全相同的副本
1.2 Document类型
在浏览器中，document对象是HTMLDocument的一个实例，表示整个html页面，而且Document对象是window对象的一个属，因此可以将其作为全局对象来访问
Document节点具有的特征
- nodeType的值为9
- nodename的值为#document
- nodeValue的值为null
- parentNode的值为null
- ownerDocument的值为null
1.3 文档的子节点
- documentElement,该属性指向<html>元素
- document.body直接指向<body>元素
- document.doctype访问<!DOCTYPE>,各浏览器对该属性的支持不一致
1.4 文档信息
- 获取文档标题，document.title
- 取得完整的URL，document.url
- 取得域名，document.domain
- 取得来源页面的urldocument.referrer
1.5 查找元素
- getElementById(),根据Id获取元素
- getElementsByTagName("img"),根据标签名称获取元素
- getElementsByName(),根据name属性获取元素
1.6 特殊集合
- document.anchors,包含文档中所有带name特性的 <a>元素
- document.applets,包含文档中所有<applet>元素，不再使用
- document.forms,包含文档中所有的form元素
- document.images，包含文档中所有的img元素
- document.links，包含文档中所有带href特性的a元素
1.7 特性
getAttribute(),取得特性
setAttribute(),设置属性
1.8 attributes 属性
- getNamedItem(name),返回nodeName属性等于name的节点
- removeNamedItem(name),从列表中移除nodeName属性等于name的节点
- setNameItem(node),向列表中添加节点，以节点的nodeName属性为索引
- item(pos),返回位于数字pos位置处的节点
1.9 创建元素
- document.createElement()方法可以创建新元素
- appendChild(),insertBefore(),replaceChild(),把创建的元素添加到文档中
1.10 text类型
- nodeType的值为3
- nodeName的值为#text
- nodeValue的值为节点所包含的文本
- parentNode是一个Element
- 没有子节点
文本节点： - 创建文本节点 document.createTextNode()
- 分割文本节点splitText()
1.11 DOM可以操作表格
可以为table添加以下属性和方法
- caption,保存着<caption>元素的指针
- tBodies,是一个<tbody>元素的HTMLCollection
- tFoot,保存着对<tfoot>元素的指针
- tHead，保存着对<thead>元素的指针
- rows,是一个表格中所有行的HTMLCollection
- createTHead(),创建<thead>元素，将其放到表格中，返回引用
- createTFoot(),创建<tfoot>元素
- createCaption(),创建<caption>元素，将其放到表格中，返回引用
- deleteTHead(),删除<thead>元素
- deleteTFoot(),删除<tfoot>元素
- deleteCaption(),删除<caption>元素
- deleteRow(pos),删除指定位置的行
- insertRow(pos),向row集合中的指定位置插入一行
- deleteRow(pos),删除指定位置的行
二、 DOM扩展
- querySelector()方法返回与该模式匹配的第一个元素
- querySelectorAll(),返回所有与该模式匹配的元素
- head属性，document.head
- 字符集属性，document.charset
- 自定义数据属性，html5规定可以为元素添加非标准的属性，但要添加前缀data-,目的是为元素提供与渲染无关的信息，或者提供语义信息
三、 元素大小
3.1 偏移量
- offsetHeight，元素在垂直方向上占用的空间大小，包括元素的高度，水平滚动条的高度，上边框高度和下边框高度
- offsetwidth，元素在水平方向上占用的空间大小
- offsetLeft，元素的左外边框至包含元素的左内边框之间的像素距离
- offsetTop，元素的上外边框至包含元素的上内边框之间的像素距离
3.2 客户区大小
- clientWidth属性是元素内容去宽度加上左右内边距宽度
- clientHeight属性是元素内容高度加上上下内边距高度
3.3 滚动大小
- scrollHeight，在没有滚动条的情况下，元素内容的总高度
- scrollWidth，在没有滚动条的情况下，元素内容的总宽度
- scrollLeft，被隐藏在内容区域左侧的像素数
- scrollTop，被隐藏在内容区域上方的像素数
网友评论