JavaScript DOM基础

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树：

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

• JavaScript 能够改变页面中的所有 HTML 元素
• JavaScript 能够改变页面中的所有 HTML 属性
• JavaScript 能够改变页面中的所有 CSS 样式
• JavaScript 能够对页面中的所有事件做出反应

节点

节点类型

• 文档节点：整个html文档
• 元素节点：html文档中的html标签
• 属性节点：元素属性
• 文本节点：html中的文本内容

	nodeName	nodeType	nodeValue
文档节点	#document	9	null
元素节点	标签名	1	null
属性节点	属性名	2	属性值
文本节点	#text	3	文本内容

查找 HTML 元素

• 通过 id 找到 HTML 元素
  • ar x=document.getElementById("intro");
  • 如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。
  • 如果未找到该元素，则 x 将包含 null。
• 通过标签名找到 HTML 元素
  • var y=x.getElementsByTagName("p");
• 通过类名找到 HTML 元素
  • var x=document.getElementsByClassName("intro");
  • getElementsByTagName 和 getElementsByClassName 这两个方法查找多个 dom 元素，返回的是 htmlcollection 类型，是伪数组而不是真数组，故不能使用数组的方法。
  • 可以使用数组原型配合 slice 方法，利用 Array.prototype.slice.call，apply，bind 后者Array.from(result)将伪数组转为真数组。Array.prototype.slice.call()

修改节点

修改html

• 改变 HTML 输出流：document.write() 可用于直接向 HTML 输出流写内容。
• 改变 HTML 内容：document.getElementById(_id_).innerHTML=_新的 HTML_
• 改变 HTML 属性：document.getElementById(_id_)._attribute=新属性值_``document.getElementById("image").src="landscape.jpg";

修改css

document.getElementById(_id_).style._property_=_新样式_
document.getElementById("p2").style.color="blue";