zoukankan      html  css  js  c++  java
  • DOM与BOM相关操作

    一、DOM节点操作:文档对象模型

    (一)childNodes兼容性问题较多

    1、元素节点:1

    2、文本节点:3

    3、属性节点:2

    元素.childNodes:只读  属性  子节点列表集合

        标准下:包含了文本和元素类型的节点,并且也会包含非法嵌套的子节点

        非标准下:只包含元素类型的节点,IE7以下不会包含非法嵌套的子节点

        childNodes只包含一级子节点,不包含后辈节点

    DOM节点的类型有很多种  12种

    元素.nodeType:只读  属性  当前元素的节点类型

    元素.attributes:只读  属性 属性列表集合

    (二)children

    元素.children:只读  属性  子节点列表集合

        标准下:只包含元素类型的节点

        非标准下:只包含元素类型的节点

    元素.fristChild:只读  属性  第一个子节点

        标准下:firstChild会包含文本年类型的节点

        非标准下:只包含元素节点

    元素.firstElementChild:只读  属性  标准下获取第一个元素类型的子节点

    元素.lastChild||元素.lastElementChild 最后一个子节点

    元素.nextSibling||元素.nextElementSibling下一个兄弟节点

    元素.previousSibling||元素.previousElementSibling上一个兄弟节点

    (三)父节点操作

    元素.parentNode:只读 属性  当前节点的父级节点——没有兼容问题

    元素.offsetParent:只读  属性  离当前元素最近的有定位的父节点;

                   如果没有定位父级,默认是body

                   ie7以下,如果当前元素没有定位,默认是body;如果有定位,则是HTML

                   ie7以下,如果当前元素的某个父级触发了layout,那么offsetParent就会被指向到这个触发了layout特性的父节点

    元素.offsetLeft:只读  属性  当前元素到定位父级的距离(偏移值)/(到当前元素的offsetParent的距离)

                 如果没有定位父级,

                   offsetParent指向body

                   offsetLeft指向html

                                        如果有定位父级

                                       ie7下:如果自己没有定位,那么offsetLeft(Top)是到body的距离

                                              其他:到定位父级的距离

    (四)节点宽度操作

    1、style.样式宽               //100

    2、clientWidth:可视宽              //样式宽+padding

    3、offsetWidth:占位宽             //样式宽+padding+border

    (五)创建节点操作

    document.createElement(标签名称)                         //创建元素

    父级.appendChild(要添加的元素)方法                         //追加子元素:

    父级.insertBefore (新的元素,被插入的元素)                //在指定的某个元素前面插入一个新元素

        在IE下如果第二个参数的节点不存在,会报错

        在其他标准浏览器下如果第二个参数的节点不存在,则会以appendChild的形式替代

    父级.removerChild(要删除的元素);                           //删除元素

    父级.replaceChild(新节点,被替换节点)                         //替换元素

    (六)表格操作

    tHead:表格头

    tBodies:表格正文

    tFoot:表尾

      rows:行

      cells:列

    (七)表单操作

    onchange : 当值发生改变的时候触发

    text : 当光标离开元素的时候再去判断值是否发生了变化,如果发生了变化则触发onchange事件

    radio,checkbox:标准下点击的时候只要值变了那么久触发;非标准下焦点离开的时候如果值变了就触发

    onsubmit : 当表单被提交的时候触发

    submit():提交表单方法

    onreset: 当表单被提交的时候触发

    二、BOM操作:浏览器对象模型

    (一)window.open(页面的地址url,打开方式)方法,打开一个新的窗口(页面)

    1、如果url为空,则默认打开一个空白页面

    2、如果打开方式为空,默认为新窗口方式打开

    3、返回值:返回新打开的窗口的window对象

    (二)window.close()方法,关闭窗口,有兼容问题

    1、火狐:默认无法关闭,火狐禁止用代码关闭

    2、chrome:默认直接关闭

    3、IE:询问用户,弹出确认关闭窗口

    4、可以关闭在本窗口中通过js方法打开的新窗口

    (三)window.navigator.userAgent:浏览器信息,返回值为string

    (四)window.location:浏览器地址信息(对象类型object)

    1、window.location.href:地址栏地址

    2、window.location.search:url?后面的内容

    3、window.location.hash:url#后面的内容

    (五)窗口尺寸与大小

    1、可视区的尺寸:

    document.documentElement.clientWidth

    document.documentElement.clientHeight

    2、滚动距离:

    document.documentElement.scrollTop

    document.documentElement.scrollLeft

    兼容性处理:var scrollTop=document.documentElement.scrollTop||document.body.scrollTop

    3、内容高

    oDiv.scrollHeight

    4、文档高度

    document.documentElement.offsetHeight

    兼容性处理:document.body.offsetHeight

    5、onscroll:当滚动条滚动的时候触发

         onresize:当窗口大小改变的时候触发

  • 相关阅读:
    js秒换成天时分
    vuex
    匹配iPhoneX
    ASP 解析json
    WPF 实现多语言支持
    c# 用DotNetZip来解压/压缩文件
    WPF UI Close button
    VB 获取所有窗体菜单信息
    ASP/ASP.NET/VB6文件上传
    c# 上传图片到一个外链相册服务器
  • 原文地址:https://www.cnblogs.com/BetterMyself/p/5651012.html
Copyright © 2011-2022 走看看