摩名

拿到这本《JavaScript DOM 编程艺术》的书已经快过去半年，之前读过一遍后，就丢掉一边了，内容很简单，当初很适合我这种初学都使用（现在也依然是初学者），前几天又重新翻了一遍，使本来有些模糊的概念重新又清晰了起来。看来还是很有必要“温故而知新”的。现在进入正题……

说白了，JavaScript 对于实现网页中的各种效果都是通过控制 DOM 来实现的，这应该是这本书要讲的核心内容。

所谓 DOM，是英文 Document Object Model 的首字母缩写，中文可以译作“文档对象模型”。

Document ( 文档 ) 是一切开始的基本，没有 Document 也就无从谈起 DOM。

Object ( 对象 ) 所指的是 JavaScript 的对象，本书大部分只讨论 document 对象的属性和方法。

Model ( 模型 ) 就是网站内容的表现形式，网页当前代码的结构。

DOM 代表着被加载到浏览器窗口里的当前网页，浏览器向我们提供了当前网页的地图（或者说模型），而我们可以通过 JavaScript 去读取这张地图。

如何通过 JavaScript  控制 DOM 呢？

其实讲起来理论很简单

1. 查找网页中要修改的元素节点。

2. 然后能过各种方法进行操作（包括添加，修改，删除）

现在来说上面提到的第一点

查找网页中的目标元素

方法有 getElementById , getElementsByTagName , 这也是 DOM 操作中很重要的两个方法。这两个方法的具体使用方法请在 google 中自己搜索。（请注意 JavaScript  语言是区分大小写的，所以写成 GetElementById 或者 getElementbyid 是不行的。 ）

现在来说上面提到的第二点

操作网页中的 DOM 的元素，这个地方还是用实例的方法比较好说

例一：在页面中添加元素

var example = document.getElementById( “example ” ); // 查找页面中 id 为 example 的元素节点。

var p = document.createElement(“p”); // 创建一个 p 元素。

var text = document.createTextNode(“这里是要添加的文本”); // 创建添加文本

p.appendChild( text  );  // 将 text 文本添加到 p 元素里

example.appendChild( p ); // 将 p 元素添加到 id 为 example 的元素中

然后执行此函数就可以了。

 

例二：通过获取页面中目标元素的属性值并把该值赋予其它元素的方法来实现页面元素的修改

var example = document.getElementById( “example ” );

var example_a = example.document.getElementsByTagName( “a” ); // 获取页面中 id 为 example 的元素节点里的链接元素。

var link = example_a.getAttribute(“href”); // 获取目标元素的 href 值，也就是链接地址。

var holder = document.getElementById( “holder” ); // 获取页面中 id 为 holder 的元素节点

holder.setAttribute( “href”,link );  // 将 link 通过 setAttribute 方法赋予 holder 的 href 属性

 

更多 DOM 操作，请 点击 这里。

---

[Translate]

kingabird JavaScript