【JavaScript】HTML文档对象(DOM)

基本概念

  • 每个载入浏览器的 HTML 文档都会成为 Document 对象。
  • Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
  • Document 对象是 Window 对象的一部分
  • 当浏览器打开一个HTML文档时,浏览器解析HTML文档的标记,并创建表示这些标记的对象,这些对象就是HTML文档对象。
  • 文档对象即Document 对象,指的是一回事。

DOM常用方法

    获取HTML文档对象的方法

    • document.getElementById() 返回对拥有指定 id 的第一个对象的引用。
    • document.getElementsByName() 返回带有指定名称的对象集合。
    • document.getElementsByTagName() 返回带有指定标签名的对象集合。

    其他方法

    • write() 向文档写 HTML 表达式 或 JavaScript 代码。
    • 温馨提示:文档加载之后使用docunment.write()会覆盖原文档.

改变 HTML 元素的样式

    在 HTML DOM 中,Element 对象表示 HTML 元素。

    HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

    • 获取元素的内容和标签名称
      • element.innerHTML 设置或获取元素的内容。
      • element.tagName 获取元素的标签名。
    • HTML属性的获取
      • element.id 设置或获取元素的 id。
      • element.className 设置或获取元素的 class 属性。
      • element.title 设置或获取元素的 title 属性。
      • ......
    • 改变CSS样式

      • 通过style属性操作内联式

        需要将下划线去掉并将第二个单词首字母大写,比如:
        backgroundColor/backgroundImage/borderColormarginLeft......

      • 通过className

        先在样式表里class的样式,然后通过JS修改元素class

    • 操作HTML文档对象的属性
      • element.getAttribute() 返回元素节点的指定属性值。
      • element.setAttribute() 把指定属性设置或更改为指定值。
      • element.removeAttribute() 从元素中移除指定属性。

创建HTML文档对象

    javascript中可以通过createElement()方法创建一个元素(节点)。

  • document.createElement() 创建元素节点。
  • element.appendChild() 向元素添加新的子节点,作为最后一个子节点。
  • element.removeChild() 从元素中移除子节点。

DOM节点

    将文档结构相像成一棵树,每一个部分(元素,属性,内容)都可以看做一个节点。
    根据一个节点可以通过关系找到其他节点

  • 节点的属性:(名称、类型、值)

    1. element.nodeName 返回元素的名称。与element.tagName作用相同
      文本节点的名称为:#text;文档节点的名称为:#document.
    2. element.nodeType 返回元素的节点类型。

      如果节点是元素节点,则 nodeType 属性将返回 1。

      如果节点是属性节点,则 nodeType 属性将返回 2。

      如果节点是文本节点,则 nodeType 属性将返回 3。

    3. element.nodeValue 设置或获取元素值。
      • 文本节点的nodeValue为文本内容
      • 属性节点的nodeValue为属性值
      • 元素节点无nodeValue
  • 子元素相关(可以类别CSS中的虚拟类别选择器)

    1. element.parentNode 返回元素的父节点。
    2. element.childNodes 返回元素子节点的 NodeList。类似CSS中的子选择器
    3. element.children 返回元素的子元素,该属性只返回元素节点。
    4. element.firstChild和element.firstElementChild 返回元素的首个子元素。类似CSS中的:e:first-child
    5. element.lastChild 和element.lastElementChild 返回元素的最后一个子元素。类似CSS中的: e:last-child
  • 同级兄弟元素相关(可以类别CSS中的兄弟选择器)

    1. element.previousSibling element.previousElementSibling 返回位于相同节点树层级的前一个元素。
    2. element.nextSibling element.nextElementSibling 返回位于相同节点树层级的下一个节点。类似CSS中的直接相邻选择器: h1+h2
  • 属性节点
    element.attributes 返回元素属性的 NamedNodeMap。
  • element.insertBefore() 在指定的已有的子节点之前插入新节点。
  • element.replaceChild() 替换元素中的子节点。
  • .......
点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注