DOM在js中充当着很重的角色,DOM是Document Object Model的缩写,即文档对象模型。下面将总结DOM学习要点:
一、DOM架构内容:
把文档表示为树:其中根节点就是Document对象;
1、常见节点类型:
接口:
Element:getAttribute()、setAttribute()、removeAttribute()
Text:
Document:
Comment:
DocumentFragment:
Attr:
2、在文档中查找元素:Document对象定义了几个获取文档元素的方法
(1)getElementsByTagName("标记名") ——标记名可以重复使用,故返回的是一个数组;
(2)getElementById("标记id属性") ——由于id是唯一的,所以返回的也是唯一元素;
(3)getElementsByName("标记name属性") ——name属性不唯一,故返回的也是一个数组;
document.documentElement属性引用了作为文档的根元素的<html>标志;
document.body属性引用<body>标记,如果body属性不存在,可以如下引用<body>标记:
document.getElementsByTagName("body")[0];
getElementsByTagName()方法其实返回的是一个数组,由于html文档只能有一个<body>元素,所以只对返回数组的第一个元素感兴趣;
可以通过getElementsByTagName()方法获取任何类型的html元素的列表,如:找到文档中所有的表:
var tables = document.getElementsByTagName("table");
注意:
(1)、html文档对大小写不敏感,所以这里的"table"也不分大小写;
(2)、返回元素的顺序就是他们出现在文档的顺序
如果想处理文档中的第四个段落,可以写成:
var myparagraph = document.getElementsByTagName("p")[3];
还有一种更有效的方法是给每个元素一个id,这样就可以通过getElementById()方法来获取:如:
在段落中表记id:
<p id="paragraph">
就可以通过以下获取:
var myparagraph = document.getElementById("paragraph");
3、修改文档:DOM核心API的真正威力在于它能用js动态修改文档的特性
(1)修改文档的内容:重新排序、把文档内容转换为大写等;
(2)修改属性:调用element.setAttribute()方法
如:修改元素的css样式
var headline = document.getElementById("headline");
headline.setAttribute("align","center");