• javascript教程系列-10.DOM(下)


    欢迎加入前端交流群交流知识获取视频资料:749539640

    1.node节点(更详细的获取(设置)页面中所有的内容)
     
    根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:
     
    元素是节点的别称,节点包含元素当然节点还有好多细化的种类;
     
    有元素节点、属性节点、文本节点.......
     
    节点的关系从这里真正的体现出来
     
    根节点:root>>>>HTML没有父节点;
     
    节点操作:(通过父子系关系)
     
    childNodes:获取当前元素的所有子节点;
     
    nodeType:节点种类,返回值是数字;
     
    nodeValue: 获取(文字)节点的文本内容;
     
    nodeName:返回node节点名称(#text,注释, 标签....);
     
    一个可以找出元素节点的方法;
     
     
    常见的节点类型:
     
    1            元素(div、body、li、span ....... ) 
     
    2*           属性代表属性节点 (class,src,href)
     
    3            文本节点(text节点)
     
    8            代表注释节点
     
    9            代表document节点;
     
    2.innerHTML和nodeValue;(当innerHTML和nodeValue分别作为左值的时候)
     
     box.innerHTML = '<strong>abc</strong>';
     
     box.childNodes[0].nodeValue = '<strong>abc</strong>';
    

      

     
    innerHTML会将标签解析;
     
    nodeValue不会进行解析,会将标签名转译成字符串,直接输出;
     
    3.attribute属性
     
        document.getElementById('box').attributes    //  获取所有,该节点的属性信息;
     
        document.getElementById('box').attributes.length;//返回属性节点个数
     
        document.getElementById('box').attributes[0]; //返回第一个属性节点
     
        document.getElementById('box').attributes[0].nodeType; //2,属性
     
        document.getElementById('box').attributes[0].nodeValue; //属性值
     
        document.getElementById('box').attributes['id']; //返回属性为 id 的节点
     
        document.getElementById('box').attributes.getNamedItem('id'); // 获取 id 的节点;
         一般只用作获取;
     
    4.节点操作
     
         DOM不仅仅可以获取设置节点,还可以创建,删除,复制、插入、替换节点;
     
         write()方法,是写入,和innerHTML类似;
     
         node三剑客
     
    createElement()创建一个节点;
     
    var oDiv=document.createElement('div')
     
    createTextNode()创建一个文字节点;
     
    var oText=document.createTextNode('dddd');
     
    oDiv.appendChild(oText)  将一个节点插入到另一个节点上;
     
    box.insertBefore(newNode, existNode) 把new node插入到existNode之前;
     
    oDiv.insertBefore(document.createTextNode('eeeeee'),oDiv.childNodes[0]) ;
     
    box.removeChild(oText) 删除节点
     
    ++定位
     
         offsetParent 这个属性的返回值是它根据谁定位的,如果它的所有父元素都没有定位,那么返回body
     
         offsetLeft          这个属性返回元素的左侧偏移值;
     
         offsetTop        这个属性返回元素的右侧偏移值;
         
         获取元素相对于窗口的绝对定位;
     
     
    5.替换操作
     
     var p=document.createElement('p')
     
     oDiv.parentNode.replaceChild(p,oDiv);
     
    6.复制节点
     var oDiv=document.getElementById('box');
     
     var clone=oDiv.cloneNode(true);
     
    oDiv.appendChild(clone)
     
     console.log(clone)
     
    7.遍历节点(根据某一个节点位置找到它的父子、兄弟节点)
     
     父子节点:
     
     
    兄弟节点:
     
    父(parent)、子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称      为同胞(兄弟或姐妹)。
         childNodes 获取当前元素节点的所有子节点
       
        firstChild 获取当前元素节点的第一个子节点
     
        lastChild | lastElementChild 获取当前元素节点的最后一个子节点
     
        ownerDocument 获取该节点的文档根节点,相当与 document
     
        parentNode 获取当前节点的父节点
     
        previousSibling 获取当前节点的前一个同级节点
     
        nextSibling 获取当前节点的后一个同级节点
     
    案例
    1.Table图片切换;
     
     2.聊天对话;
     
     3.隔行变色之鼠标移入变色
     
     
     

  • 相关阅读:
    AS400一些有用的命令
    Publish的时候某些需要用到的文件没deploy上去
    DB2一些SQL的用法
    根据PostgreSQL 系统表查出字段描述
    linux memcached 安装
    CentOS下XEN虚拟服务器安装配置
    Apache the requested operation has failed
    PHP配置兼容ZendDebugger和Optimizer
    虚拟机比较
    memcache 运行情况,内存使用
  • 原文地址:https://www.cnblogs.com/wangzhichao/p/9335612.html
Copyright © 2020-2023  润新知