初识JavaScript DOM

JavaScript DOM
D代表“Document”， 文档 ， 它将网页文档转换为文档对象。 由“文档”引入“对象”

O代表“Object” ， 对象 ， 即一种自足的数据集合。
对象分为三种类型

1. 用户定义对象：用户自行创建。
2. 内建对象：内嵌于JavaScript中的对象 ， 如Array，Math，Data等。
3. 宿主对象：浏览器提供的对象。

宿主对象提供了window.open和window.blur等方法 ， 以前的版本基本够用。现在需要深入了解的是document对象的属性和方法。

M代表“Model” ， 即模型 ， 浏览器提供了这个模型 ， 我们则要通过JavaScript来读取这个地图甚至改造这个地图。

---

文档对象可以看做一个“家谱树”
至少为一个父亲(parent)，和为它的子元素且互为兄弟。

这时则诞生出了“节点”的概念

1. 元素节点：文档对象中的各个元素，如body，p等等。
2. 文本节点：位于p标签中或其他形式存在的文本。
3. 属性节点：id，class赋予元素的属性。

属性声明
JavaScript中css样式表的声明及引用，class、id属性的构造。

获取元素

1. getElementById
   通过id返回一个对象，这个对象对应一个特定元素节点。（唯一元素）
2. getElementByTagName
   返回对应标签的一组元素。
3. getElementByClassName
   返回一个类中的一组元素。

获取和设置属性

得到需要的元素后，我们就可以对相应元素的属性进行设置

1. getAttribute
   object.getAttribute(attribute) 用于获取object的属性值
   eg:

var paras =document.getElementByTagName("p");//此前赋予p的name一个值
       for(var i=0 ; i < paras.length ; i++){
          alert(paras[i].getAttribute("title"));
}

此处可以获取到之前设置的name值，并通过alert对话框弹出

扫描二维码关注公众号，回复： 3999594 查看本文章