JS-DOM

DOM 文档对象模型

• 文档

  • 一个网页就是一个文档

• 对象

  • 每一个节点都转换为对象

• 模型

  • 表示节点和节点之间的关系，方便操作页面

• 节点的分类

  • 文档节点 Document，整个网页，是window对象的属性，不用获取即可直接使用
  • 元素节点 Element 网页中的标签
  • 属性节点 Attribute 标签中的属性 是元素节点的一部分
  • 文本节点 Text 网页中的文本内容，一般来说是元素节点的子节点

• DOM的操作

  • 查询
    • 利用document查询，
      • 获取页面中的所有元素：document.all；
      • 获取页面中html根元素：document.documentElement
      • 获取页面中的body元素：document.body
      • 根据元素的class属性值查询一组元素节点对象：document.getElementsByClassName()
        • 不支持IE8及以下的浏览器
      • 根据id属性查询1个元素节点对象：
        document.getElementById("id属性值");
      • 根据name属性查询1组元素节点对象：document.getElementByName("name属性值");
      • 根据标签名来查询一组元素节点对象：document.getElementsByTagName("标签名");
      • 根据CSS选择器去页面中查询一个元素：
        document.querySelector(CSS选择器)
        • 返回查询到的第一个元素
      • 根据CSS选择器去页面中查询一组元素：document.querySelectorAll(CSS选择器)
        • 返回数组
    • 利用具体元素查询前后代元素：
      • 元素.getElementsByTagName() 查询当前元素的指定标签后代元素
      • 元素.childNodes 获取当前元素的所有子节点
        • 会获取到空白的文本子节点
        • 在IE8及以下的浏览器中，不会将空白文本当成子节点
      • 元素.children 获取当前元素的所有子元素
      • 元素.firstChild 获取当前元素的第一个子节点
      • 元素.firstElementChild 获取当前元素的第一个子元素
        • 不支持IE8及以下的浏览器
      • 元素.lastChild 获取当前元素的最后一个子节点
      • 元素.lastElementChild 获取当前元素的最后一个子元素
        • 不支持IE8及以下的浏览器
      • 元素.parentNode 获取当前元素的父元素
      • 元素.previousSibling 获取当前元素的前一个兄弟节点
      • 元素.previousElementSibling 获取当前元素的前一个兄弟元素
        • IE8及以下不支持
      • 元素.nextSibling 获取当前元素的后一个兄弟节点
  • 增删
    • 创建一个节点对象：document.createElement()
    • 创建一个文本节点对象：document.createTextNode()
    • 向父节点中添加指定的子节点：父节点.appendChild(子节点)
    • 将一个新的节点插入到旧节点的前边：父节点.insertBefore(新节点,旧节点)
    • 使用一个新的节点去替换旧节点：父节点.replaceChild(新节点,旧节点)
    • 删除指定的子节点：父节点.removeChild(子节点)
      • 推荐：子节点.parentNode.removeChild(子节点)
  • 改：操作元素节点
    • 读取属性：元素.属性名
    • 修改属性：元素.属性名=属性值
    • 获取元素内部内容：
      • 元素.innerHTML 获取或设置元素内部的HTML代码
      • 元素.innerText 获取元素内部除了标签的内容
    • 获取元素内的文本内容
      • 元素.firstChild.nodeValue

• tip:使用innerHTML也可以完成DOM的增删改的相关操作
  - 例子1 直接加入：city.innerHTML += "<li>广州</li>";
  - 例子2 结合createElement()、innelHtml 和 appendChild()添加元素：
  - var li = document.createElement("li");
  - li.innerHTML = "广州";
  - city.appendChild(li);

• 读取/修改内联样式

  • 读取：元素.style.样式名
    • 即读取之前需通过查询获得元素节点
    • 例子：元素.style.width
    • 如果样式名中带有-，将-去掉，然后-后的字母改大写
  • 修改：元素.style.样式名 = 样式值
    • 通过style修改的样式都是内联样式，由于内联样式的优先级比较高
    • 但是如果样式中设置了!important，则内联样式将不会生效。

• 读取元素的当前样式

  • 除了IE8 的浏览器
    • getComputedStyle() window对象的方法
      • 参数：1、要获取样式的元素 2、可以传递一个伪元素，一般传null
      • 返回值：返回一个对象，保存着当前元素生效样式
      • 获取的样式没有设置，则会获取到真实的值，而不是默认值
      • 只读不能修改
      • 例子：getComputedStyle(box1,null).width getComputedStyle(box , null)["width"];

• IE8 浏览器
  - currentStyle 元素的属性
  - 元素.currentStyle.样式名
  - box.currentStyle["width"]
  - 如果当前元素没有设置该样式，则获取它的默认值

• 元素其他样式的相关属性：

  • 元素.clientHeight 元素的可见高度，指元素的内容区和内边距的高度
  • 元素.clientWidth 元素的可见宽度，指元素的内容区和内边距的宽度
  • 元素.offsetHeight 整个元素的高度，包括内容区、内边距、边框
  • 元素.offsetWidth 整个元素的宽度，包括内容区、内边距、边框
  • 元素.offsetParent 定位父元素
    • 离他最近的开启了定位的祖先元素，如果所有的元素都没有开启定位，则返回body
  • 元素.offsetLeft 元素.offsetTop
    • 当前元素和定位父元素之间的偏移量
  • 元素.scrollHeight 元素.scrollWidth
    • 获取元素滚动区域的高度和宽度
  • 元素.scrollTop 元素.scrollLeft
    • 获取元素垂直和水平滚动条滚动的距离
  • 判断滚动条是否滚动到底
    • 垂直滚动条 scrollHeight - scrollTop = clientHeight
    • 水平滚动 scrollWidth - scrollLeft = clientWidth