HTML文档对象(DOM)

基本概念

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

DOM常用方法

获取HTML文档对象的方法

• getElementById() 返回对拥有指定 id 的第一个对象的引用。
• getElementsByName() 返回带有指定名称的对象集合。
• 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()方法创建一个元素(节点)。

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

节点

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

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

    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.childNodes 返回元素子节点的 NodeList。类似CSS中的子选择器
    2. element.children 返回元素的子元素,该属性只返回元素节点。
    3. element.firstChild 返回元素的首个子元素。类似CSS中的：e:first-child
    4. element.lastChild 返回元素的最后一个子元素。类似CSS中的： e:last-child
    5. element.removeChild() 从元素中移除子节点。
    6. element.replaceChild() 替换元素中的子节点。
    7. element.parentNode 返回元素的父节点。

  • 同级兄弟元素相关(可以类别CSS中的兄弟选择器)

    1. element.previousSibling 返回位于相同节点树层级的前一个元素。
    2. element.nextSibling 返回位于相同节点树层级的下一个节点。类似CSS中的直接相邻选择器: h1+h2

  • 属性节点(了解即可)

    • element.attributes 返回元素属性的 NamedNodeMap。
  • element.insertBefore() 在指定的已有的子节点之前插入新节点。
  • element.replaceChild() 替换元素中的子节点。