JavaScript Dom编程艺术（第二版）读书笔记第三章DOM

最新推荐文章于 2022-10-05 17:14:21 发布

孟岑生

最新推荐文章于 2022-10-05 17:14:21 发布

阅读量299

点赞数

分类专栏：读书笔记文章标签： javascript servlet 开发语言

本文链接：https://blog.csdn.net/m0_57713008/article/details/125858566

版权

读书笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

第三章DOM

3.1文档中的DOM的"D"

如果没有document（文档），DOM也就无从谈起。当创建了一个网页并把它加载到Web浏览器中时，Dom就在幕后悄然而生。它把你编写的网页文档转换为一个文档对象。

3.2对象：DOM中的"O"

对象是一种自给的数据集合。与某个特定对象相关联的变量被称为这个对象的属性，只能通过某个特地给对象去调用的函数被称为这个对象的方法。

JavaScript语言里的对象可以分为三种类型。

用户定义对象：由程序员自行创建的对象。
内建对象：内建在JavaScript语言里的对象，如Array、Math和Date等。
宿主对象：由浏览器提供的对象。

window对象对应的是浏览器窗口本身，这个对象的属性和方法通常称为Bom(浏览器对象模型)，但我觉得称为window Object Model（窗口对象模型）更为贴切。在本书的后续内容里，我们几乎只讨论docment对象的属性和方法。

3.3模型：DOM中的"M"

DOM中的"M"代表的是"Model"模型。

<!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">Don't forget to buy this stuff.</p>
        <ul id ="purchases">
            <li>A tin of beans</li>
            <li class = "sale">Chinese></li>
            <li class = "sale important">Milk</li>
        </ul>
    </body>
    </html>

（不必具体分析了，能看明白）

3.4节点

在DOM中，文档是由节点构成的集合，只不过此时的节点是文档树中上的树枝和树叶而已。

在DOM中有许多不同类型的节点，接下来让我么看看其中的三种：元素节点、文本节点和属性节点。

3.4.1元素节点

DOM的原子时元素节点。

标签的名字就是元素的名字。文本段落元素的名字是"P"，无需清单元素的名字是"ul"，元素中还可以包含其他的元素等等。

3.4.2文本节点

元素节点只是节点类型的一种。在上述例子中华，<P>元素包含着文本"Don't forget to buy this stuff"它就是个文本节点。

3.4.3 属性节点

属性节点用来对元素做出更具体的描述。

3.4.4 CSS

DOM并不是与网页结构打交道的唯一技术，CSS声明元素样式的语法与JavaScript函数的定义语法很相似：

selector {
    property: value;
}

在样式声明里，我们建议定义浏览器在现实元素时使用的颜色、字体和字号，如下所示：

p{
    color:yellow;
    font-family:"arial",sans-serif;
    font-size:1.2em;
}

继承是CSS技术中的一项强大功能。

例如，如果我们为body元素定义了一些颜色或字体，包含在body元素里的所有元素都将获得那些样式：

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

这些颜色不仅作用在那些包含在<body>标签里的内容，还将作用于嵌套在body元素里的全部元素。

1.class属性

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

子可以为class属性相同的所有元素定义同一种样式：

.special {
font-style:italic;
}

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

h2.special {
text-transform:uppercase；
}

2.ID属性

ID属性的用途是给网页里的某个元素加上一个独一无二的标识符。

<ul id = "purchases">

在样式表里，可以像下面这样为由特定ID属性值的元素定义一种独享的样式：

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

样式表可以利用

ID属性为包含在特定元素的其他元素定义样式。

#purchases li {
    font-weight:bold;
}

3.4.5获取元素

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

1.getElementById

这是一个方法，这个方法将返回一个与那个有着给定ID 属性值的元素节点对应的对象。

这个是docmeny对象特有的函数。ID值放在双引号或单引号里。

下面是一个例子：

docmeny.getElementById("purchases")

这个调用将返回一个对象，这个对象对应着docment对象里的一个独一无二的元素，那个元素的HTMLid属性值是purchases。你可以用typeof操作符来验证这一点。告诉我们是什么操作数。

<!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">Don't forget to buy this stuff.</p>
        <ul id ="purchases">
            <li>A tin of beans</li>
            <li class = "sale">Chinese></li>
            <li class = "sale important">Milk</li>
        </ul>
    </body>
        <script>
            alert(typeof document.getElementById("purchases")
        </script>
    </html>

What to buy

Don't forget to buy this stuff.

A tin of beans
Chinese>
Milk

上述代码保存为HTML的文件，会弹出一个报告是 alert(typeof document.getElementById("purchases")的类型——它是一个对象。

2.getElementByTagName

返回一个对象数组，这个方法只有一个参数的函数，它的参数是标签的名字。

3.getElementsByClassName

可以通过class属性中的类名来访问元素。

3.4.6盘点知识点

1.一份文档就是一颗节点树。

2.节点分为不用的类型：元素节点、属性节点和文本节点等。

3.getElementById将返回一个对象，该对象对应着文档里的一个特定元素节点。

4.getElementByTagName和getElementByClass将返回一个对象组，它们分别对应着文档里的一组特定的元素节点。

3.5获取和设置属性

至此，已经介绍了3种获取特定元素的方法：分别是getElementById,getElementByTagName和getElementByClassName。得到需要的元素一行，我我们就可以设法获取它的各个属性。getAttribute方法就是用来做这个事情的，相应地，setArribute方法则可以更改属性节点的值。

3.5.1getAttrubute

getAttribute是一个函数。它只有一个参数——你打算查询的属性的名字：

object.getAttribute（attribute）

getAttribute方法不属于docment对象，所以不能通过docment对象，所以不能通过docment对象调用。

3.5.2 setAttribute

它语序我们对属性节点值直接作出修改，与getAttribute一样，setAttribute也只能用于元素节点：

object.setAttribute（attribute,value）

3.6小结

本章介绍了DOM提供的五个方法：

getElementById

getElementByTagName

getElementByClassName

getAttribute

setAttribute

这五个方法是编写需要DOM脚本的基石。

孟岑生

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
JavaScript Dom编程艺术（第二版）读书笔记第三章DOM

如果没有document（文档），DOM也就无从谈起。当创建了一个网页并把它加载到Web浏览器中时，Dom就在幕后悄然而生。它把你编写的网页文档转换为一个文档对象。
复制链接

扫一扫