JavaScript操作-DOM对象

Posted 2020-10-13

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;(用||逻辑关系符号)