JavaScript DOM

页面导航:首页 > 网络编程 > JavaScript > JavaScript DOM

JavaScript DOM

来源: 作者: 时间:2016-02-04 09:15 【

JavaScript DOM 一:简介 前面已经提到过JavaScript与DOM之间的关系: DOM(document object model) 是一套对文档内容进行抽象和概念化的方法、是对外提供的操纵浏览器

JavaScript DOM

一:简介

前面已经提到过JavaScript与DOM之间的关系:

DOM(document object model) 是一套对文档内容进行抽象和概念化的方法、是对外提供的操纵内容的API。

Script对网页进行的所有操作都是通过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):用来对元素做出更具体的描述。

四:

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

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<