首页 > WEB开发 > 前端开发 > JavaScript(核心、BOM、DOM)
2014
08-05

JavaScript(核心、BOM、DOM)

DOM(文档对象模型)

DOM是W3C组织制定的一套用于访问和操作XML和HTML文档的标准。W3C DOM被分为3个不同的部分 / 级别(parts / levels):

    • 核心DOM:用于任何结构化文档的标准模型(不作研究)
    • XML DOM:用于XML……
    • HTML DOM:用于HTML……

12、XML DOM和HTML DOM

HTML和XML:
HTML:超文本标记语言,标记是有限的,每个标记有自己固定的含义,主要用于信息的显示。
XML:可扩展标记语言,可以自定义标记,扩展性很强,主要用于信息的存储和传送

1) XML DOM和HTML DOM分别定义了访问和操作XML和HTML文档的标准方法(接口)。

2)HTML文档符合XML语法标准,所以可以使用XML DOM API解析HTML(比较麻烦),后面的例子会分别使用HTML DOM和XML DOM进行解析。

3)如果把HTML当做XML对待,不会忽略回车、空格和制表符。

13、DOM节点树模型(以HTML DOM树为例)

DOM node tree model

1)DOM模型将整个文档(XML文档和HTML文档)看成一个树形结构,并用document对象表示该文档。

2)DOM规定文档中的每个成分都是一个节点(Node):

文档节点(Document):代表整个文档

元素节点(Element):文档中的一个标记

文本节点(Text):标记中的文本

属性节点(Attr):代表一个属性,元素才有属性

3)Node为所有节点的父接口,其定义了一组公共的属性和方法,如下:

attrs and methods in Node

 14、DOM节点三大属性(XML DOM)

1)nodeName:元素节点、属性节点、文本节点分别返回元素的名称、属性的名称和#text的字符串。

2)nodeType:元素节点、属性节点、文本节点的nodeType值分别为1、2、3.、

3)nodeValue:元素节点、属性节点、文本节点的返回值分别为null、属性值和文本节点内容。

 15、Document对象常用属性和方法

属性:

documentElement:返回文档根元素的引用。如HTML文档中返回<html>标签元素

方法:

getElementById():☆根据id获取元素

getElementsByName():根据name属性获取元素,没有name时,根据id获取。

getElementsByTagName():根据标签名获取

createElement()、createTextNode():创建元素节点、文本节点。

 16、练习

Eg1、获取代码<h1 id=”test”>明天休息</h1>中的文本内容。

// ① XML DOM解析方式
var eleNode = document.getElementById("test");
alert(eleNode.firstChild.nodeValue);//方式1
alert(eleNode.childNodes[0].nodeValue);//方式2

// ② HTML DOM解析方式
var h1Obj = document.getElementById("test");
alert(h1Obj.innerHTML);//方式1
alert(h1Obj.innerText);//方式2

Eg2、将下图中的文本内容打印出来

questions code

// XML DOM解析方式
//定义一个printNode函数,输出节点中的文本内容
function printNode(node){
	if(node.nodeType == 3){
		alert(node.nodeValue.trim());
	}else if(node.nodeType == 1){
		var nodes = node.childNodes;
		for(var i = 0;i <nodes.length;i ++){
			printText(nodes[i]);
		}
	}
}
//执行代码
var liNodes = document.getElementsByTagName("li");
for(var i = 0;i < liNodes.length;i ++){
	printNode(liNodes[i]);
}

17、DOM常见操作(XML DOM)☆

1)获取节点

① 获取元素节点:通过document对象的三个方法获取

② 获取属性节点:属性节点附属于元素节点,可通过元素节点的getAttributeNode(attrName)方法获取属性节点,也可通过getAttribute(attrName)直接获取属性值。(与之相对的是Element接口的setAttribute(attrName , attrValue)方法,如果属性不存在,则直接添加到元素节点上)

③ 获取文本节点:文本节点为元素节点的子节点,可通过元素节点(Element接口)提供的childnodes()[index] 方法获得。

2)改变节点

① 改变属性节点的值:可以通过属性节点的nodeValue直接修改属性值,也可通过元素节点的setAttribute()方法改变(17.1.2节)。

② 改变文本节点的值:通过文本节点的nodeValue直接修改。

3)删除节点

① 删除元素节点:要想删除元素节点A,需获得A的父节点B,父节点可通过17.1.1中的方法获得,也可以直接通过A的parentNode属性获得(推荐)。调用B的removeChild(A) 即可删除A节点。

② 删除属性节点:可通过属性节点所属的元素节点的removeAttribute(attrName)或removeAttributeNode(node)删除。

③ 清空文本节点:最简单也是最常用的方法就是直接设置文本节点的nameNode属性为空串:textNode.nodeValue = ””。

4)创建和添加节点

① 创建节点:通过document对象的createElement(eleName)、createTextNode(nodeValue)方法可分别创建元素节点和文本节点。属性节点也有自己的create方法,但是用的少,直接用元素节点的setAttribute()方法即可添加属性。

② 添加节点:两个重要的方法:appendChild()和insertBefore(),具体见Node接口中的方法(13节)。

扩展:上面的两个方法都是在已知父节点时用到的,也可以直接在兄弟节点后添加新节点:x.insertBefore(newNode) 和 x.appendChild(newNode) 都可以向 x 后追加一个新的子节点。

5)替换节点:主要掌握replaceChild(newNode , oldNode) 替换元素节点。(属性节点和文本节点有更简单的方法)

18、HTML DOM(☆)

1)在HTML DOM中,获取和改变元素内容最简单方法是使用元素的innerHTML属性(innerText属性返回去掉标签的innerHTML)

2)改变HTML样式(style属性):element.style.color = “red”;

3)DOM事件:当 HTML 元素”有事情发生“时,浏览器就会生成事件,HTML DOM允许JS对HTML事件作出反应。使用方法有两种:

① 将JavaScript 代码添加到 HTML 事件属性中,如onclick = JavaScript

② HTML DOM允许在JS中为HTML元素分配事件,如下面的代码演示了为button元素分配onclick事件:document.getElementById(“myBtn”).onclick = function(){}

常见的JS事件有:

加载事件:onload

鼠标移动事件:onmouseover、onmouseout

鼠标点击事件:onclick

聚焦与离焦事件:onfocus、onblur

键盘事件:onkeypress(一般要配合event.keyCode使用)

提交与重置事件:onsubmit、onreset

域改变事件:onchange

19、DOM操作练习

DOM操作练习请看本博客另外一篇文章:http://www.flyne.org/article/420

20、BOM和HTML DOM关系图(了解)

BOM and DOM


JavaScript(核心、BOM、DOM)》有 1 条评论

  1. 希梦 说:

    基础知识很全面,值得一看

留下一个回复

你的email不会被公开。