JavaScript学习7:DOM基础

        DOM的全称为DocumentObject Model,即文档对象模型,是针对HTML和XML文档的API。它描绘了一个具有层次结构的节点树,运行开发人员添加、移除和修改页面的某一部分。DOM是由Netscape及微软公司创始的DHTML发展而来的,但是现在它已经成为了表现和操作页面的真正跨平台的、语言中立的方式。

一.对DOM的理解

DOM中的三个字母,D可以理解为整个Web加载的网页文档;O可以理解为类似window

对象之类的东西,可以调用属性和方法,这里我们所说的是document对象;M可以看做是网页文档的树形结构。

        1节点

        加载HTML页面时,Web浏览器生成一个树型结构,用来表示页面内部结构,DOM将这种树型结构理解为由节点组成。如下图所示

        

        从上图的树型结构我们可以看到,html标签没有父辈,没有兄弟,所以html标签为根标签,head标签是html子标签,而meta和title标签之间是兄弟关系。如果把每个标签当作一个节点的话,那么这些节点组合成了一棵节点树。

        2节点种类

        DOM中的节点大概分为:元素节点、文本节点和属性节点

      

二.查找元素

W3提供了比较方便简单的定位节点的方法和属性,以便我们快速的对节点进行操作,

列举如下:

       

        我们通过getElementById()获取到特定元素节点时,这个节点对象就被我们获取到了,而通过这个节点对象,我们可以访问他的一系列属性。

        

    

    

        那么这些属性值如何取出来呢?

        我们来看一个简单的小例子:     

<span style="font-size:18px;"><body>
	<div id="box" title="测试页面" class="cla" style="color:blue;" >
		学好JS,前台都不怕!
	</div >
</body>
window.οnlοad=function(){
	var obj= document.getElementById('box');
	alert(obj.tagName);
	alert(obj.innerHTML);
	alert(obj.id);
	alert(obj.title);
	alert(obj.style.color);
	alert(obj.className);
};</span>

        至于其他方法就不再一一说明了,想了解的可以去查相关的资料。

三.DOM节点

1 node节点属性

节点可分为三种,上文提到了,而这些节点又有三个非常有用的属性,分别为:nodeName、

nodeType、和nodeValue。如下是他们的说明:

        

        2层次节点属性

        节点的层次结构可以划分为:父节点与子节点、兄弟节点这两种。当我们获取其中一个元素节点的时候,就可以使用层次节点属性来获取它相关层次的节点。

        

四.节点操作

DOM不单单可以查找节点,也可以创建节点、复制节点、插入节点、删除节点和替换节点。


  • 5
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 18
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 18
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值