zoukankan      html  css  js  c++  java
  • JavaScript操作-DOM对象

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

  • 相关阅读:
    【背包九讲专题】完全背包
    【指数降幂】费马小定理降幂&欧拉降幂
    【背包九讲专题】01背包
    2016ACM-ICPC亚洲区域赛(大连)
    Codeforces Round #697 (Div. 3)题解报告(A-G)
    pywifi 网卡反复断开连接
    webdriver xpath frame alert window
    windows pexpect ssh
    python3 串口读写 pyserial
    python3 unittest addTest 与addtests
  • 原文地址:https://www.cnblogs.com/vic_/p/7782353.html
Copyright © 2011-2022 走看看