zoukankan      html  css  js  c++  java
  • Dom学习笔记

    DOM

    document object model  文档 对象  模型

    文档:html页面

    文档对象:页面中的元素

    文档对象模型: 文档对象模型是w3c

    为了能够让js去操作页面中的元素,定义的一套标准

    DOM会把当前文档看作一棵树 树种的每一个元素就是文档树 的一个节点

    同时定义了很多方法 来操作每一个元素

    每个方法又有各自的属性

    DOM基础

    childNodes 【兼容性问题不推荐使用用children代替】

    是属性不加括号  他前面有一个对象调用要加上他的对象

    只包含子级一级节点 不包含孙级一下

    非法嵌套也会 包含在总数里

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

    dom节点 有十二种

    元素节点 nodeType  1

    文本节点 nodeType 3

    属性节点 nodeType 2

    有兼容性问题  

    标准浏览器  有文本+元素节点 换行符是文本节点

    非标准 只是元素节点 

    nodeType属性

    当前元素的节点类型

    获取元素属性列表集合 【只读】

    元素.attributes  获取  style  id class等
    oUl.attributes[0].name

    oUl.attributes[0].value

    oUl.attributes[0].nodeType

    children跟 children区别是

    标准浏览器下 只包含 元素类型节点+识别非法嵌套的标签

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

    ======================================================================

    firstChild firstElementChild
    获取子元素里的第一个
    lastChild lastElementChild

    firstChild 同样的兼容性问题会识别 文本节点

    firstElementChild【只读】/IE6不支持/不会识别文本/

    兼容方案:

    var oFirst=oUl.firstElementChild ||oUl.firstChild

    oFirst.style.background=’red’

    image

    标准浏览器会返回空  空就是flase  就是第二种方法 给文本节点 设计样式就报错

    所以用子元素的第0个比较靠谱点

    上面的 都有这个兼容性问题

    ======================================================================

    image

    获取子元素里的最后一个nextSibling nextElementSibling
    获取指定元素的下一个兄弟节点
    previousSibling previousElementSibling
    获取指定元素的上一个兄弟节点

    没有节点的话也会出兼容性问题

    ======================================================================



    parentNode【只读】 就是当前节点父级节点
    获取父节点,点击链接隐藏整个li

    parentNode&offsetParent区别

    元素.offsetparent 只读 属性 父节点

    offsetparent 会变  有定位的父节点  多个就是  离着当前元素有定位属性的的父节点

    bug: ie6。7如果没定位父级。默认body。如果有定位则html  如果当前元素的某个父级元素

    触发 了hashlouyt  则offsetparent会把父级元素指向触发元素

    元素位宽高

    只读 属性 当前元素到父级(offsetparent)的距离  偏移值

    offsetLeft offsetTop

    bug:ie7以下

    如果自己没有定位

    offsetLeft offsetTop 是body的距离

    当前元素有定位

    就正常获取

    -------------

    当前元素有定位

    但是没有定位父级

    offsetparent – >body

    offsetparent –>html 

    offsetLeft  默认margin是10像素  标准是8

    offsetTop 是15像素 

    offsetWidth clientWidth

    image

    操作元素属性的第三种方式

    有兼容性问题,标准下不能获取两层
    获取:getAttribute(名称)
    设置:setAttribute(名称, 值)
    删除:removeAttribute(名称)
    第三种方式的好处:自定义属性、相对网址

    创建和插入元素

    创建DOM元素
    createElement(标签名)        创建一个节点
    appendChild(节点)            追加一个节点
    例子:留言板插入内容
    插入元素
    insertBefore(节点, 原有节点)    在已有元素前插入
    例子:倒序留言板插入内容

    删除和替换元素

    删除DOM元素
    removeChild(节点)        删除一个节点
    例子:删除留言
    替换DOM元素
    replaceChild(节点, 已有节点)    替换节点

  • 相关阅读:
    ORACLE中seq$表更新频繁的分析
    VmWare平台Windows Server 2012 无响应宕机
    SQL Challenge ——快速找到1-100之间缺失的数
    ORACLE推导参数Derived Parameter介绍
    SQL SERVER 数据库各版本功能对比
    Jsp中格式化时间戳的常用标签
    SQL Server 2014 Database Mail重复发送邮件特殊案例
    采用HTML5之“data
    多线程之策略模式
    docker attach卡住,和exec的选择
  • 原文地址:https://www.cnblogs.com/aix1314/p/3932660.html
Copyright © 2011-2022 走看看