JavaScript DOM

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、其他还有很多方法没有列举。