[读书笔记]javascript编程艺术——CH3 DOM
来源:互联网 发布:淘宝运营策划书 编辑:程序博客网 时间:2024/06/16 16:42
这章主要介绍了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").lengthdocument.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编程艺术——CH3 DOM
- javascript DOM编程艺术笔记——CH3 DOM
- 《JavaScript DOM编程艺术》读书笔记
- 读书笔记--javascript DOM 编程艺术
- 《JavaScript DOM 编程艺术》 读书笔记
- 《JavaScript DOM 编程艺术》读书笔记
- JavaScript Dom编程艺术 读书笔记
- 《JavaScript DOM 编程艺术》读书笔记
- 《JavaScript DOM 编程艺术》读书笔记
- 《JavaScript DOM 编程艺术》读书笔记
- 《JavaScript DOM 编程艺术》读书笔记
- 《JavaScript DOM 编程艺术》读书笔记
- 《JavaScript DOM 编程艺术》读书笔记
- 《JavaScript DOM 编程艺术》读书笔记
- JavaScript DOM编程艺术 读书笔记
- 《JavaScript DOM 编程艺术》读书笔记
- JavaScript DOM 编程艺术读书笔记
- JavaScript DOM编程艺术读书笔记
- DIY手机建站系统
- Spring整合出现的错误,那位大神帮一下!!!!!!!!!
- 因子和阶乘
- Java-WebSocket 项目的研究(三) WebSocketClient 类 详解
- linux 内核poll/select/epoll实现剖析
- [读书笔记]javascript编程艺术——CH3 DOM
- MySQL查询所有数据库表出错
- jsp struts2 学习(三) ----- 用户登录验证
- LeetCode-First Missing Positive
- android sdk manager 无法更新解决方法
- sort函数妙用举例
- 谁知道现在学习JAVA好还是IOS好?
- Java集合框架-2.【Set】【HashSet】【TreeSet】
- C++中组合类的使用