[读书笔记]javascript编程艺术——CH3 DOM

最新推荐文章于 2024-05-02 18:12:22 发布

pengpengrose0406

最新推荐文章于 2024-05-02 18:12:22 发布

阅读量435

点赞数

分类专栏： [读书笔记]javascript编程艺术文章标签：读书笔记 javascript

本文链接：https://blog.csdn.net/pengpengrose0406/article/details/39099885

版权

[读书笔记]javascript编程艺术专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这章主要介绍了DOM和几个简单的DOM方法。

1、DOM&CSS

DOM是“Document Object Model”（文档对象模型）的缩写，作用在于操作document，Web浏览器在加载一个网页的时候，会自动为该网页创建DOM。DOM把一份文档表示为一棵树，表示网页中HTML元素之间的层次关系。DOM实际是用户通过浏览器操作网页的媒介。

DOM中包括许多种类的节点，常用的包括元素节点、文本节点和属性节点。例如熟悉的<p title="a gentle reminder">Don't forget to buy this stuff.</p>，这句语句中<p></p>是元素节点，而“p”是文本段落元素的名称；“Don't forget to buy this stuff.”则是一个本文节点，文本节点一定包含在元素节点的内部，但并非所有元素节点都包含文本节点；“title="a gentle reminder"”则是一个属性节点，属性节点总是包含在元素节点的内部。总之，元素节点总是最外层的东西，元素节点不一定包含文本节点和属性节点。

除了DOM，CSS是另一种浏览器显示网页的媒介，CSS也需要在html中声明，可以在<head>中声明，使用<script type="text/css">，也可以放在单独的样式表文件里。

selector {
  property: value;
}

CSS也把document当作一棵节点树，子节点可以继承父节点的样式，这是CSS的一大强大功能。如果需要单独定义某个元素或者某种元素的样式，可以通过以下方法：

（1）class属性。可以将相同class属性值的节点，同样不同的元素可以设置为同一个class，这里使用元素节点的class属性。

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

在CSS中，我们使用"."来引导一个class，为class相同的元素定义样式。

    .special {
    	font-size: italic;
    }

（2）id属性。引用元素的id属性，使用“#”引导。

<pre name="code" class="html">    #purchases{
        border : 1px solid white;
        color: #ccc;
    }

如果该元素有子元素，也可以通过这种方式

    #purchases li{
        border : 1px solid white;
        color: #ccc;
    }

该段表示对"id = purchases"的元素的所有<li>元素的样式进行定义。

2、4个DOM方法

（1）getElementById（），非常常用的js的方法，通过id取得元素节点。

（2）getElementsByTagName（），通过元素的标签名获得元素节点，注意返回值是一个数组。常用用法：

	document.getElementsByTagName("p");
	document.getElementsByTagName("p").length
	document.getElementsByTagName("p").item(n)

通过typeof 可以检测出getElemnentsByTagName（）返回的是一个object数组。

*typeof 的用法可参照 http://blog.163.com/liguiqin_500/blog/static/763064201041395742250/

（3）getAttribute（）和setAttribute（），对object的属性进行读取和设置。常用用法：

object.getAttribute(attribute)
object.setAttribute(attribute,value)

pengpengrose0406

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[读书笔记]javascript编程艺术——CH3 DOM

这章主要介绍了DOM和几个简单的DOM方法。DOM是“Document Objec”
复制链接

扫一扫

专栏目录

[读书笔记]javascript编程艺术——CH3 DOM

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