js基础知识4 - 爱码网

原文链接：https://book.apeland.cn/details/361/#3.getElementsByClassName()方法

DOM介绍

1.文档：DOM中的”D”

DOM是”Document Object Model“(文档对象模型)的首字母缩写。如果没有document，DOM也就无从谈起。当创建一个网页并把它加载到web浏览器中时，DOM就在幕后悄然而生。它将根据你编写的网页文档创建一个文档对象。

在我们自己的语言中，”对象“这个词的含义往往不那么明确和具体，它几乎可以称呼任何一种客观存在的事物。但在程序设计语言中，”对象“这个词的含义非常明确和具体。

2.对象：DOM中的”O“

对象是一种独立的数据集合。与某个特定对象相关联的变量被称为这个对象的属性；可以通过某个特定对象去调用的函数被称为这个对象的方法。

Javascript语言中的对象可以分为三种类型：

用户定义对象（user-defined object）：由程序员自行创建的对象。
内建对象（native object）:内建的Javascript语言中的对象，如Array、Math和Date等。
宿主对象（host object）:由浏览器提供的对象，比如window对象

3.模型：DOM中的“M”

DOM中的“M”代表着“Model”(模型)，但说它代表着“Map(地图)”也是可以的。模型也好，地图也罢，它们的含义都是某种事物的表现形式。就像一个模型火车代表着一列真正的火车、一张城市街道图代表着一个世纪存在的城市那样，DOM代表着被加载到浏览器窗口里的当前网页：浏览器由我们提供了当前的地图（或者说模型），而我们可以通过JavaScript去读取这张地图。

既然是地图，就必须有诸如方向、等高线和比例尺之类的记号。要想看懂和使用地图，就必须知道这个记号的含义和用途——这个道理同样适用于DOM。要想从DOM获取信息，我们必须先把各种用来表示和描述一份文档的记号弄明白。

DOM把一份文档表示为一颗树（这里所说的“树“是数学意义上的概念），这是我们理解和运用这一模型的关键。更具体的说，DOM把文档表示一颗家谱树。

家谱数本身又是一种模型。家谱树的典型用法是表示一个人类家族的谱系关系并使用parent(父)、child(子)、sibling(兄弟)等记号来表明家族成员之间的关系。家谱树可以把一些相当复杂的关系简明表示出来：一位特定的成员既是某些成员的父辈，又是另一位成员的子辈，同时还是另一位成员的兄弟。

类似于人类家族谱系的情况，家谱树模型也非常适用用来表示一份用HTML语言编写出来的文档。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class list</title>
</head>
<body>
    <h2>你要买什么课程？</h2>
    <p title='请您选择购买的课程'>本课程是web全栈课程，期待你的购买！</p>
    <ul id='classList'>
        <li class='item'>JavaScript</li>
        <li class='item'>css</li>
        <li>DOM</li>
    </ul>
</body>
</html>

js基础知识4

有此图可以看出来该家谱数以html为根元素的。毫无疑问，html元素完全可以代表整个文档。

我们会发现<head>和<body>两个分枝。他们存在于同一个层次且互不包含，所以他们是兄弟关系。他们有着共同的父元素<html>,但又各有各的子元素，所以它们本身又是其它一些元素的父元素。

<head>元素由两个子元素：<meta>和<title>（这两个元素是兄弟关系）。<body>元素由三个子元素：<h1>、、<ul>(这三个元素是兄弟关系)。如果继续深入下去，我们将发现<ul>也是一个父元素。他有三个子元素，他们都是<li>元素。

利用这种简单的家谱关系记号，我们可以把各元素之间的关系简明清晰地表达出来。

如果把各种文档元素都想象成一颗家谱树的各个节点的话，我们就可以用同样的记号来描述DOM。不过，与使用”家谱树“这个术语相比，把一份文档称为一颗“节点树”更准确。

节点

节点（node）这个名词来自网络理论，它代表着网络中的一个连接点。网络是有节点构成的集合。

在现实世界里，一切事物都是有原子构成。原子是现实世界的节点。但原子本身还可以进一步分解为更细小的亚原子微粒。这些亚原子微粒同样是节点。

DOM也是同样的情况。文档也是有节点构成的集合，只不过此时的节点是文档树上的树枝和树叶而已。

在DOM里存在着许多不同类型的节点。就像原子包含着亚原子微粒那样，有些DOM节点还包含着其他类型的节点。

1.元素节点

在刚才上述的“课程列表”的文档时，像<body>、、<ul>之类的元素这些我们都称为叫元素节点（element node）。如果把web上的文档比作一座楼，元素就是建造这座楼的砖块，这些元素在文档中的布局形成了文档的结构。

各种标签提供了元素的名字。文本段落元素的名字是”p”，无序列表元素的名字是“ul”,列表项元素的名字是“li”

2.文本节点

元素只是不同节点类型中的一种。如果一份文档完全由一些空白元素构成，它将有一个结构，但这份文档本身将不会包含什么内容。在网上，内容决定着一切，没有内容的文档是没有任何价值的，而绝大数内容都是有文本提供。

本课程是web全栈课程，期待你的购买！。由此可见，元素包含着文本"本课程是web全栈课程，期待你的购买！"。它是一个文本节点(text node)

3.属性节点

还存在着其他的一些节点类型。例如，注释就是另外一种节点类型。但这里我们介绍的是属性节点。

元素都或多或少的有一些属性，属性的作用是对元素做出更具体的描述。例如，几乎所有的元素都有一个title属性，而我们可以利用这个尚需经对包含在元素里的东西做出准确的描述：

本课程是web全栈课程，期待你的购买！

在DOM中，title='请您选择购买的课程'是一个属性节点（attribute node）。如图所示。因为属性总是被放在起始标签里，所以属性节点总是被包含在元素节点当中。并非所属地额元素都包含着属性，但所有的属性都会被包含在元素里。

js基础知识4

获取元素节点的方式

1.getElementById()方法

DOM提供了一个名为getElemntById()的方法，这个方法将返回一个与那个给定id属性值的元素节点相对应的对象。这个方法是与document对象相关联的函数。`getElemntById()方法只有一个参数：你想获得的那个元素的id属性值，这个id值必须是字符串类型。

语法：

document.getElementById(id)

例子：

    <div id="box">mcw</div>
    <script type="text/javascript">
        var box=document.getElementById('box')
        console.log(box);
    </script>

js基础知识4

这个调用之后返回一个对象，这个对象对应着和docuemnt对象里的一个独一无二的元素，那个元素的HTML id属性值是 classList。

console.log(typeof oUl);//object

js基础知识4

文档中的每一个元素都对应着一个对象。利用DOM提供的方法，我们可以把与这些元素怒相对应的任何一个对象筛选出来。

2.getElementsByTagName()方法

这个方法将返回一个元素对象集合。

语法：

document.getElementsByTagName(localName: DOMString)

例子：

var listItems = document.getElementsByTagName('li')

结果：

js基础知识4

这个元素集合中的每个元素都是一个对象。我们可以通过listItems.length来获取当前集合的长度，通过for循环来遍历出每一项的元素对象。

请注意：即使在整个文档里只有一个元素有给定的标签名，getElementsByTagName()方法也将返回一个元素集合。此时，它的长度为1。

<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="box">魔降风云变
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
    <script type="text/javascript">
        var box=document.getElementsByTagName('div')
        console.log(box);
        var lis=document.getElementsByTagName('li')
        console.log(lis);
    </script>
</body>
</html>

View Code