JavaScript DOM
一:简介
前面已经提到过JavaScript与DOM之间的关系:
DOM(document object model) 是一套对文档内容进行抽象和概念化的方法、是对外提供的操纵浏览器内容的API。
JavaScript对网页进行的所有操作都是通过DOM进行的、用于改变浏览器呈现的内容与方式。DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容。
此篇重点在于DOM。
二:DOM
D——Document:当创建一个网页并把他加载到web浏览器中时、DOM自动生成。把编写的网页文档转换为一个文档对象。
O——Object:对象。比如上面提到的把网页文档转换成的document对象。JavaScript中对象分为三类(前文有详细说明):用户定义对象(user-defined object)、内建对象(nativeobject)、宿主对象(host object)。
M——Model or Map:某种事物的表现形式。
三:节点
元素节点(elementnode):是DOM的原子、对应文档中元素、如div、p、li等、可以包含其他元素节点。
文本节点(textnode):总是被包含于元素节点。
属性节点(attributenode):用来对元素做出更具体的描述。
四:CSS
Cascading StyleSheet:改变文档呈现形式、具有继承(inheritance)特性、即加于某元素的样式同样作用与此元素包含的所有元素、但是可以被覆盖。
五:DOM常用方法
1. 获取元素--用于document对象!
/**
* Get element
*/
// reture one element
var element = document.getElementById('id');
//reture an array.
var elements = document.getElementsByTagName('tag');
//reture an array.
var elements = document.getElementsByClassName('class');
假如getElementsByClassName不起作用、可通过如下方式实现:
function getElementsByClassName (node, className) {
if (ndoe.getElementsByClassName) {
return node.getElementsByClassName(className);
} else {
var result = new Array();
var elems = node.getElementsByTagName('*');
for (var i = elems.length - 1; i >= 0; i--) {
if (elems[i].className.indexOf(className) != -1){
result[i] = elems[i];
}
}
return result;
}
}
2. 操作元素属性
/**
* Attribute operation
*/
document.getAttribute('attr');
document.setAttribute('attr', value);
六:补充
这里提到的只是很少一部分DOM方法、不是DOM的API、其他还有很多方法没有列举。