码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript操作-DOM对象

时间:2017-11-04 11:36:02      阅读:207      评论:0      收藏:0      [点我收藏+]

标签:名称   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;(用||逻辑关系符号)

 

JavaScript操作-DOM对象

标签:名称   test   设置   view   可见   树状   rtb   strong   垂直   

原文地址:http://www.cnblogs.com/vic-architect/p/7782353.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!