DOM概念
DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。
这些对象又称为节点： 整个文档是一个文档节点（document）(document.documentElement:根节点HTML标签)
每个 HTML 标签是一个元素节点
包含在 HTML 元素中的文本是文本节点
每一个 HTML 属性是一个属性节点
注释属于注释节点
对象之间的关系叫做Node 层次
HTML标签是根（root）节点。节点之间都存在着父子（parent \child）、同胞（sibling）的关系
查询元素节点
getElementById() //获取特定 ID 元素的节点
getElementsByTagName() //获取相同标签名的元素节点，返回数组，使用[0]来获取
getElementsByName() //获取相同name属性的元素节点，不是所有标签都有name属性，某些低版本浏览器会有兼容性问题
getElementsByClassName() //获取相同class属性的节点列表 IE8及以下不支持
parentNode 父节点。
childNodes 当前节点包含的所有子节点(文本和元素节点都有)。
firstChild 当前节点的第一个子节点。
lastChild 当前节点的最后一个子节点
previousSibling 访问前一个同胞节点。
nextSibling 访问后一个同胞节点。
注：列表中第一个节点的 previousSibling 属性值为 null ，
而列表中最后一个节点的 nextSibling 属性的值同样也为 null
节点的增删改
document.creatElement(HTML标签名) //创建一个元素节点
document.creatTextNode(文字) //创建一个文本节点
node.removeChild(oldChild) //删除oldChild子节点
node.replaceChild(newChild,oldChild) //用newChild节点替换oldChild
node.appendChild(newChild) //newChild将被添加到子列表的末端
node.insertBefore(newChild,referenceNode) // 将 newChild 节点插入到 referenceNode 之前
注：子节点中包含文本节点、注释节点和元素节点。
通过nodeType属性来判断节点类型，1代表元素节点，2代表属性节点，3代表文本节点
表格的增删改
表上的行、列集合
tab.cells[index]; //取得行中的某一列
插入
tab.insertRow(index); //插入新行并返回新行，index为插入位置，不写插入到表末
tab.insertCell(index); //插入新列并返回新列，index为插入位置，不写插入到行末
删除
tab.deleteRow(index);
tab.deleteCell(index);
window.onscroll事件
取得滚动条位置
document.body.scrollTop //谷歌(设为0页面回到顶部)
document.documentElement.scrollTop //标准
兼容写法
document.documentElement.scrollTop||document.body.scrollTop
页面可见区域高度
document.body.clientHeight (如果出现问题用document.documentElementclientHeight)
HTML元素上常用的属性和方法
element.appendChild() 向元素添加新的子节点，作为最后一个子节点
element.attributes 返回元素属性的NamedNodeMap
element.childNodes 返回元素子节点的NodeList
element.className 设置或返回元素的class属性
element.clientHeight 返回元素的可见高度
element.clientWidth 返回元素的可见宽度
element.cloneNode 克隆元素
element.firstChild 返回元素的首个子元素
element.getElementsByTagNames 返回拥有指定标签名的所有子元素的集合
-------------------------------------------------------------------
- element.getAttribute() 获取元素拥有的自定义属性
- element.setAttributes() 设置元素自定义属性
- element.id 设置或返回元素的id
- element.innerHTML 设置或返回元素的内容
- element.insertBefore() 在指定的已有的子节点之前加入新结点
- element.lastChild() 返回元素的最后一个子元素
- element.nextSibling 返回位于相同节点树层级的下一个节点
- element.nodeName 返回元素的名称
- element.nodeType 返回元素的节点类型
- element.nodeValue 设置或返回元素值
- element.offsetHeight 返回元素的高度
- element.offsetWidth 返回元素的宽度
- element.offsetLeft 返回元素的水平偏移位置
- element.offsetTop 返回元素的垂直偏移位置
- element.offsetParent 返回元素的偏移容器```
-------------------------------------------------------------------
- element.parentNode 返回元素的父节点
- element.previousSibling 返回位于相同节点树层级的前一个元素
- element.removeAttribute() 从元素中移除指定属性
- element.removeAttributeNode() 移除指定的属性节点，并返回被移除的节点
- element.removeChild() 从元素中移除子节点
- element.replaceChild() 替换元素中的子节点
- element.scrollHeight 返回元素的整体高度
- element.scrollWidth 返回元素的整体宽度
- element.scrollLeft 返回元素左边缘与视图之间的距离
- element.scrollTop 返回元素上边缘与视图之间的距离
- element.style 设置或返回元素的styles属性
- element.tagName 返回元素的标签名
- element.title 设置或返回元素的title属性
- element.toString() 把元素转换为字符串
- nodelist.length 返回NodeList中的节点数
访问节点的自定义属性
attributes
-
getAttribute()获取特定元素节点属性的值 -
setAttribute()设置特点元素节点属性的值 -
removeAttribute()移除特定元素节点属性 -
node.setAttribute("属性名","值")的方式设置常规属性和自定义属性 -
node.getAttribute("属性名")的方式访问常规属性和自定义属性
innerHTML，innerText，outerHTML的用法及区别
-
innerHTML:
从对象的起始位置到终止位置的全部内容，包括html标签 -
innerText
从起始位置到终止位置的内容，但它除去html标签 -
outerHTML
除了包含innerHTML的全部内容外，还包含对象标签本身
- 注明：innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText
获取style属性的值
1. 针对内联的写法（也就是说，把样式写在HTML标签里面）
` DOM对象.style.样式属性 `
2. 由于样式属性并没写在HTML标签里，所以，没法用style直接获取。
①针对IE,使用currentStyle属性
②针对其它主流浏览器，要使用window对象的getComputedStyle函数。
对于样式获取尽量使用currentStyle和getComputedStyle 兼容性问题，我们可以封装一个函数：
function getStyle(obj, attr) {
if (obj.currentStyle) { //IE浏览器
return obj.currentStyle[attr];
} else { //Chrome 和 Firefox浏览器
return getComputedStyle(obj, false)[attr];
}
}
或者
if(document.all) { //是IE浏览器
return obj.currentStyle[attr];
} else{
return getComputedStyle(obj, false)[attr];
}
JavaScript获取屏幕大小的常用方法列举
- 网页可见区域宽/高
document.body.clientWidth || document.documentElement.clientWidth
document.body.clientheight || document.documentElement.clientHeight
- 网页正文全文宽/高
document.body.scrollWidth
document.body.scrollHeight(可见+不可见)
同样适用于DIV
element.scrollHeight 元素的整体高度
element.scrollWidth 元素的整体宽度
- 元素可见区域宽(包括边框)
element.offsetWidth 通过计算得到的某个元素的高(元素必须出现在页面上)
element.offsetHeight 通过计算得到的某个元素的宽(元素必须出现在页面上)
- 定位父级
-
element.Parent返回元素的偏移容器(最近的有定位的父元素)
定位父级offsetParent的定义是： 与当前元素最近的经过定位(position不等于static)的父级元素.
- 元素距离父元素的顶部(左侧)的距离
-
element.offsetLeft返回元素的水平偏移位置(基于最近的有定位的父元素，如果没有，就是body) -
element.offsetTop返回元素的垂直偏移位置(基于最近的有定位的父元素，如果没有，就是body)
- 网页被卷去的左
document.body.scrollLeft
网页被卷去的上
document.body.scrollTop
兼容性写法
-
document.documentElement.scrollTop获取当前页面的滚动条纵坐标位置
- 页面距离屏幕的左边距
window.scrollLeft
页面距离屏幕的上边距
window.scrollTop
- 屏幕分辨率的宽
window.screen.width
屏幕分辨率的高
window.screen.height
event事件
常见DOM0事件
-
onchange域的内容被改变 -
ondbclick鼠标双击 -
onfocus元素获取焦点 -
onblur元素失去焦点 -
onkeydown键盘上某个按键被按下 -
onkeyup键盘上某个按键被松开 -
onkeypress键盘上某个按键被按下并松开 -
onmousedown鼠标被按下 -
onmouseup鼠标被松开 -
onmouseover鼠标移到某元素之上 -
onmouseout鼠标从某元素移开 -
onmousemove鼠标被移动 -
onreset重置按钮被点击，引发Form重置事件 -
onresize窗口(body)或框架被重新调整大小 -
onsubmit确认/提交 按钮被点击，引发Form提交事件 -
onload(body)用户退出(刷新)页面
网友评论