Hed9eh0g

前进的路上总是孤独的

JavaScript DOM学习记录

本文共计有4397个字

前言

记录一下最近学习JavaScript DOM的笔记,内容出自《JavaScript DOM编程艺术》。

DOM

举例一段前端代码,及其运行界面:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Shopping list</title>
</head>
<body>
    <h1>What to buy</h1>
    <p title="a gentle reminder">Dont't forget to buy this stuff</p>
    <ul id="purchases">
        <li>A tin of beans</li>
        <li class="sale">Cheese</li>
        <li class="sale important">Milk</li>
    </ul>
</body>
</html>

《JavaScript DOM学习记录》这段代码可以用下图来表示:

《JavaScript DOM学习记录》

也就是说前端代码的结果可以用树来表示,这就是我们所说的DOM,很明显根元素就是html。

节点

节点的概念来自树,对于DOM来说,它一般包括三种节点:元素节点、文本节点、属性节点。

元素节点

在前文所举的例子中,诸如<body>、<p>、<ul>之类的元素都是元素节点,很明显元素节点可以包含其他的元素。

文本节点

元素节点只是节点类型的一种,如果一份文档完全由一些空白元素构成,它将有一个元素但这个文档将不包含什么内容,在内容为王的互联网上,绝大多数内容都是由文本提供的。

在前文的例子中,<p>元素包含着文本“Don’t forget to buy this stuff”,这段文本就是一个文本节点。

属性节点

属性节点用来对元素做出更具体的描述,例如,几乎所有的元素都有一个title属性,而我们可以利用这个属性对包含在元素里的东西做出准确的描述:

<p title="a gentle reminder">Don't forget to buy this stuff.</p>

在DOM中,title=”a gentle reminder”就是一个属性节点。

关系

文本节点和属性节点一定包含在元素节点中,但是并不是所有的元素节点都包含着文本节点和属性节点:

《JavaScript DOM学习记录》

对于属性节点的class属性和id属性,其实就是与CSS相关的属性,在此简述CSS对这些属性的使用。

CSS

CSS可以嵌在前端代码的<head>部分的<style>标签之间,继承是CSS技术中一个强大的功能,类似于DOM,CSS也把代码文档看做一棵节点树,节点树上的各个元素将继承其父元素的样式属性。

例如为body元素定义了一些颜色或字体,包含在body元素里的所有元素都将自动获得那些样式:

body{
  color:white;
  background-color:black;
}

显示效果:

《JavaScript DOM学习记录》

class属性

你可以在所有的元素上任意应用class属性:

<p class="special">This paragraph has the special class</p>
<h2 class="special">So does this headline</h2>

在样式表里,可以像下面这样为class属性值相同的所有元素定义同一种样式:

.special{
   font-style:italic;
}

还可以像下面这样利用class属性为一种特定类型的元素定义一种特定的样式:

h2.special{
   text-transform:uppercase;
}

id属性

id属性的用途是给网页里的某个元素加上一个独一无二的标识符,如下:

<ul id="purchases">

在样式表里,可以像下面这样为有特定id属性值的元素定义一种独享的样式:

#purchases{
    border:1px solid white;
    backgroup-color:#333;
    color:#ccc;
    padding:1em;
}

尽管id本身只能使用一次,样式表还是可以利用id属性为包含在该特定元素里的其他元素定义样式:

#purchases li{
    font-weight:bold;
}

利用id属性定义的样式,在之前的基础上得到效果:

《JavaScript DOM学习记录》

获取元素

有三种DOM方法可获取元素节点,分别是通过元素ID、通过标签名字和通过类名字来获取。

getElementById

该方法将返回一个与给定id值的元素节点对应的对象,格式类似如下的例子:

document.getElementById("purchases")

验证该方法:

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Shopping list</title>
</head>
<body>
    <h1>What to buy</h1>
    <p title="a gentle reminder">Dont't forget to buy this stuff</p>
    <ul id="purchases">
        <li>A tin of beans</li>
        <li class="sale">Cheese</li>
        <li class="sale important">Milk</li>
    </ul>
    <script>
        alert(typeof document.getElementById("purchases"));
    </script>
</body>
</html>

《JavaScript DOM学习记录》

可以看见返回的类型是object类型。

事实上,文档中的每一个元素都是一个对象,利用DOM提供的方法能够得到任何一个对象,一般没有必要为每一个元素都定义一个id值,DOM提供了另一个方法来获取那些没有id属性的对象。

getElementsByTagName

该方法返回一个对象数组,每个对象分别对应着文档里有着给定标签的一个元素,格式类似如下:

document.getElementsByTagName("li")

验证该方法:

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Shopping list</title>
</head>
<body>
    <h1>What to buy</h1>
    <p title="a gentle reminder">Dont't forget to buy this stuff</p>
    <ul id="purchases">
        <li>A tin of beans</li>
        <li class="sale">Cheese</li>
        <li class="sale important">Milk</li>
    </ul>
    <script>
        var items=document.getElementsByTagName("li");
        for(var i=0;i<items.length;i++){
            alert(typeof items[i]);
        }
    </script>
</body>
</html>

《JavaScript DOM学习记录》

我们将会看到三个alert对话框,显示的消息都是object。

getElementsByClassName

该方法能够通过class属性中的类名来访问元素,返回一个具有相同类名的元素的对象数组,格式类似如下:

getElementsByClassName("sale")

使用这个方法还可以查找那些带有多个类名的元素,要指定多个类名,只要在字符串参数中用空格分隔类名即可,例如在<script>标签中添加下面代码:

alert(document.getElementsByClassName("important sale").length);

你将会看到对话框中显示1,表示只有一个元素匹配,因为只有一个元素同时带有“important”和“sale”类名,注意,即使在元素的class属性中,类名的顺序是“sale important”而非参数中指定的“important sale”,也照样会匹配该元素。

不仅类名的顺序不重要,就算元素还带有更多的类名也没有关系。

可以组合使用getElementsByClassName和getElementById,如果你想知道再id为“purchases”的元素中有多少个类名包含“sale”列表项,可以先找到那个特定的对象,然后再调用getElementsByClassName:

var shopping=document.getElementById("purchases");
var sales=shopping.getElementsByClassName("sale");

获取和设置属性

前面已经介绍了三种获取特定元素的方法,得到需要的元素后,我们就可以设法获取它的属性,getAttribute就是用来做这件事的,而setAttribute方法则可以更改属性节点的值。

getAttribute

该方法只有一个参数,就是你打算查询的属性的名字,格式类似如下:

object.getAttribute(attribute)

例如,可以结合getElementsByTagName方法,获取每个<p>元素的title属性:

var paras=doucunment.getElementsByTagName("p");
for(var i=0;i<paras.length;i++){
    alert(paras[i].getAttribute("title"));
}

把这段代码放到之前的代码中,结果将弹出显示文本消息“a gentle reminder”的对话框。

如果<p>元素中没有title属性,则结果将会是null值。

setAttribute

该方法可以对属性节点的值做出修改,格式类似如下:

object.setAttribute(attribute,value)

在下面的例子里,第一条语句得到id是purchases的元素,第二条语句把这个元素的title 值设置为“a list of goods”:

var shopping=document.getElementById("purchases");
shopping.setAttribute("title","a list of goods");

我们可以利用getAttribute来证明这个元素的title属性值确实发生了变化:

var shopping=document.getElementById("purchases");
alert(shopping.getAttribute("title"));
shopping.setAttribute("title","a list of goods");
alert(shopping.getAttribute("title"));

加载页面后将弹出两个对话框,第一个将显示null,第二个将显示“a list of goods”消息。

这表明,setAttribute实际上完成了两项操作:先创建这个属性,然后再设置这个属性的值,如果元素的该属性本身就存在,那么这个属性的值就会被覆盖掉。

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注