第三章 JavaScript操作DOM对象

DOM操作

简介

全称：Document Object Model（文档对象模型）
是基于文档编程的一套API接口，大部分主流浏览器都执行了W3C发布的第一级的DOM规范，因此解决了浏览器兼容性问题

DOM操作分类

• 三类
  • DOM Core（核心）
    • 提供方法
      • getElementById()
      • getElementsByTagName()
    • 任何一种支持DOM编程的语言都可以使用它，比如HTML
  • HTML-DOM
    • 使用JS与DOM为HTML编写脚本的时候，有许多专属的HTML-DOM属性
    • 出现的比DOM-Core要早
    • 提供了一些更简单的标记来描述HTML属性
    • 使用HTML-DOM获取对象、属性时，代码较为简洁，但没有DOM-Core实用性广泛
  • CSS-DOM
    • 主要用于设置CSS属性
    • 如element.style.color=“red”设置文本为红色

节点

• DOM是以树状结构组织的HTML文档，在DOM中，如下规定节点
  • 整个文档是一个文档节点
  • 每个HTML标签是一个元素节点
  • 包含在HTML标签中的文本是文本节点
  • 每个HTML属性是一个属性节点
  • 注释属于注释节点
  • 如图
    

  访问节点

  • getElement系列
    • getElementById()；
      • 返回按id属性查找的一个对象的引用
    • getElementsByName()
      • 返回带有指定名称name查找的对象的集合
    • getElementsByTagName()
      • 返回带有指定标签名TagName查找的对象的集合
  • 根据层次访问
    • 节点属性
      • parentNode
        • 返回节点的父节点
      • childNodes
        • 返回子节点的集合，childNodes[i]
      • firstChild
        • 返回节点的第一个子节点
      • lastChild
        • 返回节点的最后一个子节点
      • nextSibling
        • 下一个节点
      • previousSibling
        • 上一个节点
    • element属性(用于兼容浏览器)
      • firstElementChild
        • 返回节点的第一个子节点
      • lastElementChild
        • 返回节点的最后一个字节点
      • nextElementSibling
        • 下一个节点
      • previousElementSibling
        • 上一个节点

节点信息

• nodeName(节点名称)
• nodeValue(节点值)
• nodeType(节点类型)
• 节点类型
  
• 操作节点的属性
  • getAttribute(“属性名”)
    • 用来获取属性的值
  • getAttribute(“属性名”，“属性值”)；
    • 用来获取设置属性的值

创建和插入节点

• createElement(TagName)
  • 创建一个标签名为TagName的新元素节点
• A.appendChild(B)
  • 把B节点追加至A节点的末尾
• insertBefore(A，B)
  • 把A节点插入B节点之前
  • 其中A是必选项，标书新插入的节点，B是可选项，表示新节点插入B节点的前面
• cloneNode(deep)
  • 复制某个指定的节点
  • 其中的参数deep是bool值，若deep值为true，则复制该节点及该节点的所有子节点，若deep值为false，则只复制该节点和其属性

删除和替换节点

• removeChild(node)
  • 删除指定的节点
• replacechild(newNode，oldNode)
  • 用其他节点替换指定的节点
  • newNode表示替换的新节点，oldNode表示要被替换的节点

操作节点样式

• style属性
  • 是一个课通过应用样式的文档或元素访问的对象
  • 语法
    • HTML元素.style.样式属性=“值”；
  • 常用的属性
    • background（背景）类别
    • backgroundColor
      • 设置元素的背景颜色
    • backgroundImage
      • 设置元素的背景图像
    • backgroundRepeat
      • 设置是否及如何重置背景图像
    • text（文本）类别
      • fontSize
        • 设置元素的字体大小
      • fontWeight
        • 设置字体的粗细
      • textAlign
        • 排列文本
      • textDecoration
        • 设置文本的修饰
      • font
        • 设置同一行字体的属性
      • color
        • 设置文本的颜色
    • padding（边距）类别
      • padding
        • 设置元素的填充
      • paddingTop
        • 设置元素的上填充
      • paddingBottom
        • 设置元素的下填充
      • paddingLeft
        • 设置元素的左填充
      • paddingRight
        • 设置元素的右填充
    • border（边框）类别
      • border
        • 设置四个边框的属性
      • borderTop
        • 设置上边框的属性
      • borderBottom
        • 设置下边框的属性
      • borderLeft
        • 设置左边框的属性
      • borderRight
        • 设置右边框的属性
    • 常用事件
      • onclick
        • 当用户单击某个对象调用事件
      • onmouseover
        • 鼠标移到某元素之上
      • onmouseout
        • 鼠标从某元素移开
      • onmousedown
        • 鼠标按钮被按下
• className属性
  • 可设置或返回元素的class属性
  • 语法
    • HTML元素.className=“样式名称”；

获取元素的样式

• style获取样式
  • 在JavaScript中可以使用style属性获取样式的属性值
  • 语法
    • HTML元素.style.样式属性
    • 此对象只获得内联样式的属性值
• currentStyle获取样式
  • 微软为每个元素提供了一个currentStyle对象
  • 语法
    • HTML元素.currentStyle.样式
    • 此对象获取的样式是只读的，如需赋值，请使用style对象

  元素属性应用

  • offsetLeft
    • 返回当前元素左边界到它上级元素的左边界的距离，返回只读属性
  • offsetTop
    • 返回当前元素上边界到它上级元素的上边界的距离，返回只读属性
  • offsetHeight
    • 返回元素的高度
  • offsetWidth
    • 返回元素的宽度
  • offsetParent
    • 返回元素的偏移容器，即对最近的动态定位的包含元素的引用
  • scrollTop
    -返回匹配元素的滚动条的垂直位置
  • scrollLeft
    • 返回匹配元素的滚动条的水平位置
  • clientWidth
    • 返回元素的可见宽度
  • clientHeight
    • 返回元素的可见高度
  • 语法
    • var sTop = document.documentElement.scrollTop || document.body.scrollTop；
    • 其中Chrom浏览器不支持document.documentElement.scrollTop
    • 所以要在后面加上 || document.body.scrollTop完善浏览器兼容性

北大青鸟_信狮