标签:名称 test 设置 view 可见 树状 rtb strong 垂直
DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口
一、节点和节点关系
DOM是以树状结构组织HTML文档的,HTML文档中的每个标签或元素都是一个节点,
01、整个文档是一个文档节点
02、每个HTML标签是一个元素节点
03、包含在HTML元素中的文本是文本节点
04、每一个HTML属性是一个属性节点
05、注释属于注释节点
访问节点
01、get系列 getElementById()、getElementByName()、getElementByTagName()
02、(下列方法会把注释和空格换行作为一个节点)
parentNode 返回节点的父节点
childNodes 返回子节点的集合
firstChild 返回节点的第一个子节点
lastChild 返回节点的最后一个子节点
nextSibling 返回下一个节点
previousSibling 返回上一个节点
03、(返回元素节点-不解析空格、注释、换行)
firstElementChild 第一个子节点
lastElementChild 最后一个子节点
nextElementSibling 下一个子节点
previousElementSibling 上一个子节点
节点信息
nodeName(节点名称)
元素的nodeName是标签名称,属性节点的nodeName是属性名称,文本节点的nodeName永远是#text,文档节点的nodeName永远是#document
nodeValue(节点值)
文本节点的nodeValue是所包含的文本,属性节点的nodeValue是对应的属性值,nodeValue对于文档节点和元素节点是不可用的
nodeType(节点类型)
元素节点:返回1
属性节点:返回2
文本节点:返回3
注释节点:返回8
文档节点:返回9
二、操作节点
操作节点属性
getAttribute("属性名"):用来获取属性的值(区别:getAttributeNode()-用来获得属性节点)
setAttribute("属性名","属性值"):用来设置属性值
创建和插入节点
createElement(tagName) 创建一个标签名为tagName的新元素节点
A.appendChild(B) 把B节点作为子节点,添加A节点的末尾
A.insertBefore(C,D) 把D节点作为子节点,添加到A节点的子节点D之前
cloneNode(deep) deep控制克隆深度,deep为true:则复制该节点及该节点的所有子节点。deep为false:只复制该节和属性
删除和替换节点(都要借助父节点parentNode来完成)
removeChild(node) 删除指定节点
replaceChild(newNode,oldNode) 替换节点
操作节点样式
style属性
语法:HTML元素.style.样式属性="值‘
ClassName
HTML元素.ClassName="样式名称"(前提要在css外部文件设置了相应的样式)
获取元素样式
获取内联样式:
语法:HTML元素.style.样式属性
获取外部样式:
01、IE:
语法:HTML元素.currentStyle.样式属性
02、Firefox、opera、Safari、Chrome
语法:document.defaultView.getComputeStyle(元素,null).属性
获取元素位置
offsetLeft 返回当前元素左边界到上级元素的左边界的距离(即左外边距),只读属性
offsetTop 返回当前元素上边界到上级元素的上边界的距离(即上外边距),只读属性
offsetHeight 返回元素的高度
offsetWidth 返回元素宽度
scrollTop 返回匹配元素的滚动条的垂直位置
scrollLeft 返回匹配元素的滚动天的水平位置
clientWidth 返回元素的可见宽度
clientHeight 返回元素的可见高度
获得滚动条位置有浏览器兼容问题
标准浏览器只认识:document.documentElement.scrollTop; document.documentElement.scrollLeft;
Chrome 只认识:document.body.scrollTop; document.body.scrollLeft;
解决办法:var sTop=document.documentElement.scrollTop || document.body.scrollTop;(用||逻辑关系符号)
标签:名称 test 设置 view 可见 树状 rtb strong 垂直
原文地址:http://www.cnblogs.com/vic-architect/p/7782353.html