zoukankan      html  css  js  c++  java
  • 理解js的DOM操作

    1、DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
    document.documentElement     返回文档的根节点<html> 
    document.body     <body> 
    document.activeElement 返回当前文档中被击活的标签节点(ie) 
    event.fromElement        返回鼠标移出的源节点(ie) 
    event.toElement       返回鼠标移入的源节点(ie) 
    event.srcElement     返回激活事件的源节点(ie) 
    event.target         返回激活事件的源节点(firefox) 
    当前对象为node 
    返回父节点:node.parentNode, node.parendElement, 
    返回所有子节点:node.childNodes(包含文本节点及标签节点),node.children 
    返回第一个子节点:node.firstChild 
    返回最后一个子节点: node.lastChild 
    返回同属上一个子节点:node.nextSibling 
    返回同属下一个子节点:node.previousSibling 
    parentNode和parentElement功能一样,childNodes和children功能一样。但是parentNode和childNodes是符合W3C标准的,可以说比较通用。而另外两个只是IE支持,不是标准,Firefox就不支持 ,所以大家只要记得有parentElement和children就行了 

    2、DOM操作——怎样添加、移除、移动、复制、创建和查找节点。
    (1)创建新节点
          createDocumentFragment()    //创建一个DOM片段
          createElement()   //创建一个具体的元素
          createTextNode()   //创建一个文本节点
    (2)添加、移除、替换、插入
          appendChild()
          removeChild()
          replaceChild()
          insertBefore()
    (3)查找
          getElementsByTagName()    //通过标签名称
          getElementsByName()    //通过元素的Name属性的值
          getElementById()    //通过元素Id,唯一性

    3、事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别。
    (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
      IE 5.5: div -> body -> document
      IE 6.0: div -> body -> html -> document
      Mozilla 1.0: div -> body -> html -> document -> window
    (2)捕获型事件(event capturing):事件从最不精确的对象(document 对象)开始触发,然后到最精确(也可以在窗口级别捕获事件,不过必须由开发人员特别指定)。
    (3)DOM事件流:同时支持两种事件模型:捕获型事件和冒泡型事件,但是,捕获型事件先发生。两种事件流会触及DOM中的所有对象,从document对象开始,也在document对象结束。
      DOM事件模型最独特的性质是,文本节点也触发事件(在IE中不会)。

  • 相关阅读:
    SpringCloud
    SpringCloud
    一个表的字段更新另一个表的字段
    MYSQL5.7 sql_mode=only_full_group_by
    CentOS7 防火墙操作
    log4j DailyRollingFileAppender, DatePattern 配置
    Fiddler抓包-会话框添加查看get与post请求类型选项
    Fiddler抓包-工具介绍(request和response)
    Fiddler抓包-get与post请求
    Fiddler抓包-只抓APP的请求
  • 原文地址:https://www.cnblogs.com/wangshichuan/p/4205713.html
Copyright © 2011-2022 走看看