JavaScript基础学习报告：关于JavaScript文本对象模型DOM的学习心得

JavaScript基础学习报告：关于JavaScript文本对象模型DOM的学习心得

什么是JavaScript DOM
这一段时间在学习JavaScript有关的内容，JavaScript的文档对象模型，通俗的说就是一个接口，中立于平台和语言的接口，它允许程序和脚本动态的访问和更新文档的内容、结构和样式。

DOM定义了访问HTML文档的标准
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）
HTML DOM 定义了所有的HTML元素的对象和属性，以及访问他们的方法
HTML DOM 是关于如何获取、修改、添加或删除HTML元素的标准。
HTML DOM将HTML文档视作树结构，这种结构被称为结点树，如下所示：

通过可编程对象模型，JavaScript获得了足够的能力来创建动态的HTML：
①　JavaScript能够改变页面中的所有HTML元素
②　JavaScript能够改变页面中的所有HTML属性
③　JavaScript能够改变页面中的所有CSS样式
④ JavaScript能够对页面中的所有事件都作出反应

如何查找DOM元素和对象
在JavaScript中有三种常用的查找方法
① 通过id找到HTML元素
② 通过标签名找到HTML元素
③ 通过类名找到HTML元素
JavaScript怎样读取和改变HTML内容
JavaScript读取和改变HTML内容的常用方法有：
① 改变HTML输出流：document.write()
② 读取HTML内容：
document.getElementById(id).innerHTML
document.getElementById(id).outerHTML
③ 改变HTML内容：
document.getElementById(id).innerHTML = new HTML
document.getElementById(id).outerHTML = new HTML
④ 读取HTML元素内的文本：
document.getElementById(id).innerText
document.getElementById(id).outerText
⑤ 改变HTML元素内的文本：
document.getElementById(id).innerText = new text
document.getElementById(id).outerText= new text

其中，对于对于改变HTML元素内的文本：document.getElementById(id).innerText = new text/document.getElementById(id).outerText= new text，存在浏览器的兼容性问题，有些浏览器不支持该语句，使用时要注意。