浅谈DOM基础

最新推荐文章于 2022-11-03 14:04:47 发布

赵亚盟

最新推荐文章于 2022-11-03 14:04:47 发布

阅读量2.5k

点赞数 1

分类专栏：【B/S】文章标签： DOM

本文链接：https://blog.csdn.net/u010785685/article/details/43701069

版权

【B/S】专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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" οnclick="getfocus()" value="获得焦点">
<input type="button" οnclick="losefocus()" value="失去焦点">
 </body>
</html>

总结：DOM易用性比较强，遍历简单，但是效率低，解析速度慢，内存占用量高，对于大量对象的创建和销毁及其影响效率。

PS：简单做个总结，理解的还不是很好，真正的理解应该是会用吧。真正会用了才算是学会了。多多交流哈。O(∩_∩)O~

赵亚盟

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
13
评论
浅谈DOM基础

DOM：文档对象模型(Document Object Model)，实际上是以面向对象方式描述的文档模型。概念：表示和处理一个HTML或者XML文档的常用方法。DOM的设计是以对象管理者组织的规约为基础的，因此可以用于任何编程语言。 D：文档可以理解为整个Web加载的网页文档； O：对象调用属性和方法（do
复制链接

扫一扫