大致学习一下JavaScript HTML DOM(DOM参考手册)
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

1. 简要介绍

文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）如下图:

HTML DOM

什么是 DOM？
DOM 是 W3C（万维网联盟）的标准。
DOM 定义了访问 HTML 和 XML 文档的标准：
“W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分：

  • 核心 DOM - 针对任何结构化文档的标准模型
  • XML DOM - 针对 XML 文档的标准模型
  • HTML DOM - 针对 HTML 文档的标准模型

HTML文档可以说由节点构成的集合，DOM节点有：

  1. 元素节点，类似于<html>,<body>标签
  2. 文本节点 向用户展示的内容
  3. 属性节点 元素的属性值:
    1. nodeName 返回给定节点的名字
      • 元素节点的 nodeName 与标签名相同
      • 属性节点的 nodeName 是属性的名称
      • 文本节点的 nodeName 永远是 #text
      • 文档节点的 nodeName 永远是 #document
    2. nodeType 返回给定节点的类型
      • 元素类型为1
      • 属性类型为2
      • 文本类型为3
      • 注释类型为8
      • 文档类型为9
    3. nodeValue 返回给定节点的当前值
      • 元素节点的 nodeValue 是 undefined 或 null
      • 文本节点的 nodeValue 是文本自身
      • 属性节点的 nodeValue 是属性的值

那么其实HTML DOM 就是关于如何获取、修改、添加或删除 HTML 元素的标准。

对于DOM树来说，每个节点都拥有各自的层级关系。

在节点树中，顶端节点被称为根节点，每个节点都有父亲节点，除了root节点。

一个节点可拥有任意数量的子节点，兄弟节点是拥有相同父亲节点的节点。

下图描述了大致的节点之间的关系：

DOM节点关系

遍历节点树：

  1. childNodes 返回由给定节点的子节点组成的集合,如果选定的节点没有子节点，则返回不包含节点的 NodeList,用法:elementNode.childNodes
  2. firstChild 返回第一个子节点,如果选定的节点没有子节点，则该属性返回NULL,用法:node.firstChild
  3. lastChild 返回最后一个子节点,同firstChild
  4. parentNode 返回给定节点的父亲节点,用法:elementNode.parentNode 注意:父节点只能有一个。
  5. nextSibling 返回给定节点的下一个子节点,如果无此节点,则该属性返回 null,用法:node.nextSibling
  6. previousSibling 返回给定节点的上一个子节点,类似nextSibling

2. DOM对象

一些DOM对象方法

  1. getElementById() 返回带有ID的元素
  2. getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)
  3. getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表,在IE 5,6,7,8 中无效
  4. getElementsByName() 返回带有指定名称的节点对象的集合
  5. appendChild() 把新的子节点添加到指定节点。nodeobj.appendChild(newnode)
  6. removeChild() 删除子节点,如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL. nodeObject.removeChild(node)
  7. replaceChild() 替换子节点,node.replaceChild (newnode,oldnew)
  8. insertBefore() 在指定的子节点前面插入新的子节点，nodeobj.insertBefore(newnode,node);
  9. createAttribute() 创建属性节点
  10. createElement() 创建元素节点,document.createElement(节点名称);
  11. createTextNode() 创建文本节点,document.createTextNode(data)
  12. getAttribute() 返回指定的属性值,用法:nodeobj.getAttribute(属性名称)
  13. setAttribute() 把指定属性设置或修改为指定的值,用法:Node.setAttribute(name,value)

3.浏览器窗口可视区域大小

获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）的方法:
一、对于IE9+、Chrome、Firefox、Opera 以及 Safari：

  • window.innerHeight - 浏览器窗口的内部高度
  • window.innerWidth - 浏览器窗口的内部宽度

二、对于 Internet Explorer 8、7、6、5：

  • document.documentElement.clientHeight表示HTML文档所在窗口的当前高度。
  • document.documentElement.clientWidth表示HTML文档所在窗口的当前宽度。

或者Document对象的body属性对应HTML文档的<body>标签

  • document.body.clientHeight
  • document.body.clientWidth

在不同浏览器都实用的 JavaScript 方案：
var w= document.documentElement.clientWidth
|| document.body.clientWidth;
var h= document.documentElement.clientHeight
|| document.body.clientHeight;

类似的还有scrollHeight,scrollWidth,offsetHeight,offsetWidth