您的位置：首页 > 其它

DOM基础----DOM（一）

2015-08-23 19:32 369 查看

DOM（Document Object Model），中文名称为文档对象模型，是处理可扩展标识语言的标准编程接口，主要针对HTML和XML。DOM描绘了一个层次化的节点树，开发人员可以添加、修改和移除页面的某一部分，也就说改变文编的内容和呈现方式。

D（Document）：可以理解为整个Web加载的网页文档。

O（Object）：对象，可以调用属性和方法。

M（Model）：可以理解为网页文档的树型结构，一个节点有分支。

先对DOM有一个简单的介绍，在从基础来学习一下DOM,DOM有自己的节点和元素。DOM的树型就是由节点组成的，W3C提供了比较方便的定位节点的方法和属性，这样我们就可以对节点进行操作，找到所需要的值。

查找元素节点的方法：

getElementById() :获取特定ID元素的节点

getElementsByTagName():获取相同元素的节点列表

getElementsByName():获取相同名称的节点列表

getAttribute():获取特定元素节点属性的值

setAttribute():设置特点元素节点属性的值

removeAttribute():移除特定元素节点属性

查找元素节点的方法有很多，我就以getElementById()为例，来说明一下获取元素节点的方法：

window.onload=function (){

varbox =document.getElementById('box');

alert(box);

};

显示效果：

节点：

节点（node）：了解什么是节点（JavaScript节点）相当于树分叉的地方，通过下面的图我们就能很清晰的了解节点。

节点分这么多种，我们如何来划分元素节点、属性节点、文本节点呢？这是一个小例子，能说明各个的区别：

<HTML>
<HEAD>
<TITLE>生活</TITLE>
</HEAD>
<BODY>
<table>
<tr>
<td id="john" name="myname">John</td>
<td>Doe</td>
<td id="jack">Jack</td>
</tr>
</table>
<script>
var d = document.getElementById("john");
alert(d.nodeType)
alert(d.nodeName)
alert(d.nodeValue)
</script>
</BODY>
</HTML>

输出结果：其三个属性的值分别为：

nodeType:ELEMENT_NODE

nodType值:1

nodeName（元素标记）：td

nodeValue:null

经过这个过程，对于DOM有一个初步的了解，DOM的发展，基本组成，以及元素、节点的属性，在其中有大量是讲的方法，元素方法、节点操作方法，这些方法的学习为以后做基础，期待有更一步的提高。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： DOM 节点元素属性

相关文章推荐

新的分享

章节导航