Dom对象方法的理解

原创 2016年08月30日 21:01:05

Dom—文档对象模型(Document Object Model),组织页面(或文档)的对象被组织在一个树形结构中,也就是所谓的Dom树,比如下面的模型:

Dom树模型

我所理解的dom就是js语言与html代码之间的交流枢纽,也就是用dom可以控制页面的元素 ,可能理解的比较肤浅吧,但是我觉得初学者这样理解挺好的。今天我主要讲一下Dom的对象方法:getElementById(),
getElementsByTagName(),getElementsByClassName()。

1.getElementById()
根据id值获取页面元素,返回对拥有指定id 的第一个对象的引用,即返回的是一个对象,是一个!!!比如下面的代码:

<body>
    <div id="Div">123</div>
    <script type="text/javascript">
       var div = document.getElementById('Div');
       console.log(div.innerHTML);//123
    </script>
</body>

这一切都没有问题啊,但是看看下面这个代码:

<body>
    <div id="Div_1">
        <div id="Div_2">123</div>
    </div>
    <script type="text/javascript">
    var div_1 = document.getElementById('Div_1');
    var div_2 = div_1.getElementById('Div_2');
    console.log(div_2.innerHTML);
    </script>
</body>

结果显示的是什么?

根据id从父元素获取子元素

对于这个问题我看了很多网上的资料,发现问题的很多,但是解决的很少,我来解释一下原理吧。是因为获取的这个div_1也可以称作dom节点不具有这个方法(getElementById()),这个方法只针对document,而且id在全页面是唯一的只能用document调用。

2.getElementsByName()
根据name值查找元素,可返回带有指定名称的对象的集合,即返回值不唯一,是一个对象数组。来看看代码吧:

<body>
    <div name="Div">123</div>
    <script type="text/javascript">
       var div = document.getElementsByName('Div')[0];
       console.log(div.innerHTML);//123
    </script>
</body>

因为返回的是一个数组,所以要在结尾加上查询元素的序号。但是对于上面id存在的问题name也存在,看看代码:

<body>
    <div name="Div_1">
        <div name="Div_2">123</div>
    </div>
    <script type="text/javascript">
    var div_1 = document.getElementsByName('Div_1')[0];
    var div_2 = div_1.getElementsByName('Div_2')[0];
    console.log(div_2.innerHTML);
    </script>
</body>

根据name从父元素获取子元素
同样也是这个原因:getElementsByName是document的方法,所以获取的对象不具有这个方法。
3.getElementsByTagName()
根据标签名查找元素,返回带有指定标签名的对象的集合,也是一个数组。

<body>
    <div>123</div>
    <script type="text/javascript">
       var div = document.getElementsByTagName('div')[0];
       console.log(div.innerHTML);//123
    </script>
</body>

这里也应该加查询的序号,因为返回的是一个数组。

<body>
    <div>
        <div>123</div>
    </div>
    <script type="text/javascript">
    var div_1 = document.getElementsByTagName('div')[0];
    var div_2 = div_1.getElementsByTagName('div')[0];
    console.log(div_2.innerHTML);//123
    </script>
</body>

这里并没有报错,为什么呢,在网上看语法也是:document.getElementsByTagName(tagname),也是document的方法啊,看看官方的规定:getElementsByTagName() 方法会使用指定的标签名返回所有的元素(作为一个节点列表),这些元素是您在使用此方法时所处的元素的后代。getElementsByTagName() 可被用于任何的 HTML 元素。所以,这个用起来就相对随意一点了,它不限制于document对象。

4.getElementsByClassName()
根据class获取对象,获取的结果也是一个数组,返回包含带有指定类名的所有元素的节点列表。

<body>
    <div class="Div">123</div>
    <script type="text/javascript">
       var div = document.getElementsByClassName('Div')[0];
       console.log(div.innerHTML);//123
    </script>
</body>
<body>
    <div class="Div_1">
        <div class="Div_2">123</div>
    </div>
    <script type="text/javascript">
    var div_1 = document.getElementsByClassName('Div_1')[0];
    var div_2 = div_1.getElementsByClassName('Div_2')[0];
    console.log(div_2.innerHTML);//123
    </script>
</body>

这个的道理应该和name一样的,这里就不解释啦。

5.四个方法的区别。
个人理解:class用于css样式,id用于js寻找html前端元素,name一般在后台需要中在表单元素中使用,tagname的话就看情况吧。

版权声明:本文为博主原创文章,未经博主允许不得转载。

什么是DOM(个人理解)

了解DOM需要清楚几个问题: 什么是DOM? DOM可以用来干什么? DOM是怎么来的? 怎么使用DOM?什么是DOM? DOM(document Object Model),是针对HTML和XM...
  • makel12
  • makel12
  • 2016年04月19日 20:06
  • 1983

怎么理解js中的 dom 对象

什么是DOM?文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我们最为关心...
  • bbzz100
  • bbzz100
  • 2009年10月16日 09:31
  • 3324

简单通俗讲解DOM

在开始之前先说一点,DOM是非常容易理解的,但是大家说的太官方,让人很是难于理解,我们就用非常简单的语言翻译一遍。加深对DOM的理解,从而对它有一个全面的认识。 什么是DOM        DOM的全...
  • jiuqiyuliang
  • jiuqiyuliang
  • 2013年10月31日 09:44
  • 4160

如何理解前端中的DOM、BOM

题注:此篇为博主的学习感悟,可能有理解不妥之处,还望观者不吝赐教,有其他间接也希望能留言交流(づ ̄ 3 ̄)づ DOM 全称是 Document Object Model,也就是文档对象模型。 ...
  • zixiaomuwu
  • zixiaomuwu
  • 2017年03月06日 19:28
  • 1669

SAX解析,DOM解析以及XML HTML JSON之间区别

XML 定义  可扩展性标记语言 (Extensible Markup Language, XML) ,用于标记电子文件使其具有结构性的标记语言,可以用来标记数据、定义数据类型,是一种允许用户对自...
  • shangandeyu_kun
  • shangandeyu_kun
  • 2016年03月30日 08:07
  • 1910

Dom对象的常用方法

Dom对象的常用方法: (1)getElementById() 查询给定ID属性值的元素,返回该元素的元素节点 1、  查询给定ID属性值的元素,返回该元素的元素节点。也称为元素对象。       ...
  • u011225629
  • u011225629
  • 2016年03月18日 10:51
  • 2706

深入理解DOM中的事件对象

在触发DOM上的某个事件时,会在事件处理程序函数中会产生一个事件对象event,这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。先看个例子:var b...
  • code_ja
  • code_ja
  • 2016年07月15日 21:23
  • 962

DOM简述

DOM:Document Object Model(文档对象模型) 用来将标记型文档封装成对象,并将标记型文档中的所有的内容(标签,文本,属性等)都封装成对象。封装成对象的目的是为了更为方便的操作这...
  • xdd_lmd
  • xdd_lmd
  • 2015年07月25日 16:13
  • 347

Webkit之理解HTML解析和DOM树

## 概述 前面介绍了很多眼花缭乱的新技术,关于渲染,关于硬件加速,关于布局,关于其他很多,同大家一样,我也花了很多时间来消化它们。本章介绍稍微基础些的话题(本系列的写作顺序完全是随心所欲地),...
  • sauphy
  • sauphy
  • 2015年11月19日 01:34
  • 1204

一起理解 Virtual DOM

前言 React 好像已经火了很久很久,以致于我们对于 Virtual DOM 这个词都已经很熟悉了,网上也有非常多的介绍 React、Virtual DOM 的文章。但是直到前不久我专门花时间...
  • fengyinchao
  • fengyinchao
  • 2016年12月08日 15:13
  • 2457
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Dom对象方法的理解
举报原因:
原因补充:

(最多只允许输入30个字)