[读书笔记]javascript编程艺术——CH3 DOM
2014-09-06 11:40
645 查看
这章主要介绍了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">,也可以放在单独的样式表文件里。
(1)class属性。可以将相同class属性值的节点,同样不同的元素可以设置为同一个class,这里使用元素节点的class属性。
(2)id属性。引用元素的id属性,使用“#”引导。
如果该元素有子元素,也可以通过这种方式
2、4个DOM方法
(1)getElementById(),非常常用的js的方法,通过id取得元素节点。
(2)getElementsByTagName(),通过元素的标签名获得元素节点,注意返回值是一个数组。常用用法:
*typeof 的用法可参照 http://blog.163.com/liguiqin_500/blog/static/763064201041395742250/
(3)getAttribute()和setAttribute(),对object的属性进行读取和设置。常用用法:
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)
相关文章推荐
- JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
- 《JavaScript DOM 编程艺术》(第二版)读书笔记(二)
- 《JavaScript DOM 编程艺术》(第二版)读书笔记(三)
- JavaScript DOM 编程艺术(第2版)读书笔记(1)
- Javascript DOM 编程艺术(second edition) 读书笔记(2)
- 读书笔记:JavaScript DOM 编程艺术(第二版)
- 《JavaScript DOM 编程艺术(第2版)》读书笔记
- 【读书笔记】读《JavaScript DOM 编程艺术-第2版》
- JavaScript DOM 编程艺术读书笔记
- JS/Javascript DOM 编程艺术(第2版)读书笔记 第3章 DOM
- 《Javascript_Dom 编程艺术》(第2版)读书笔记
- JavaScript DOM 编程艺术(第二版)--读书笔记
- 【我的JS第三本】JavaScript_DOM编程艺术第二版读书笔记
- 《JavaScript DOM 编程艺术》(第二版)读书笔记(一)
- 读书笔记--javascript DOM 编程艺术
- JavaScript DOM 编程艺术(第2版)读书笔记(2)
- [读书笔记]javascript编程艺术——CH5 javascript编程原则和良好习惯
- DHTML (JavaScript Dom 编程艺术)
- DHTML (JavaScript Dom 编程艺术)
- 《javascript+dom 编程艺术 》学习笔记