DOM：文档对象模型(Document Object Model)，实际上是以面向对象方式描述的文档模型。
概念：
表示和处理一个HTML或者XML文档的常用方法。DOM的设计是以对象 管理者组织的规约为基础的，因此可以用于任何编程语言。
D：文档可以理解为整个Web加载的网页文档；
O：对象调用属性和方法（document对象）；
M：模型可以理解为网页文档的树形结构。
DOM节点：DOM不仅可以查找节点，也可以创建节点、复制、插入删除和替换节点。加载HTML页面时，Web浏览器生成一个树形结构，用来表示页面内部结构。
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
常用元素节点方法：
1、getElementById():接受一个参数，获取特定ID元节点
例子：
if(document.getElementById){ //判断是否支持getElementById
alert("当前浏览器支持getElementId")；
}
2、getElementsTagName()获取相同元素节点列表
例子：
document.getElementByTagName('li' ) //获取所有li元素，返回数组
它们在传递参数的时候，并不是所有浏览器都必须区分大小写，为了防止不必要的错误和麻烦，我们要养成区分大小写的习惯。
3、getElementsByName():获取相同名称的节点列表
例子：
document.getElementByName('add') //获取input元素。
DOM定义了访问HTML和XML文档标准，W3C DOM标准被分为3个不同的部分，核心DOM，针对任何结构文档的标准模型。此外还有HTML DOM，和XML DOM。
HTML DOM：定义了所有HTML元素的对象和属性，以及访问它们的方法。
HTML DOM实例：比如考试系统，当学生们答完一道题，从获得焦点到失去焦点得到一次提交答题记录的功能，当我们有未完成的题，可以获得焦点，直接定位到没有答的题的位置。
以下就是使用HTML DOM编写的获得和失去焦点的Demo。
JavaScript代码：
function getfocus()
{document.getElementById('baidu').focus()}
function losefocus()
{document.getElementById('baidu').blur()}
html代码：
<!doctype html> <html> <title>获得/失去焦点</title> <script type="text/javascript" src='jiaodian.js'></script> </head> <body> <a id="baidu" href="http://baidu.com">欢迎访问百度首页</a> <br /><br/> <input type="button" onclick="getfocus()" value="获得焦点"> <input type="button" onclick="losefocus()" value="失去焦点"> </body> </html>
总结：DOM易用性比较强，遍历简单，但是效率低，解析速度慢，内存占用量高，对于大量对象的创建和销毁及其影响效率。
PS：简单做个总结，理解的还不是很好，真正的理解应该是会用吧。真正会用了才算是学会了。多多交流哈。O(∩_∩)O~
时间： 2024-12-08 09:34:29