DOM

1.

属性方法

类型/返回类型

说明

nodeName

String

节点名称，根据节点的类型而定义

nodeValue

string

节点的值，同样根据节点的类型而定义

nodeType

string

节点类型，常量值之一

firstChild

Node

指向childNodes列表中的第一个节点

lastChild

Node

指向childNodes列表中的最后一个节点

parentNode

Node

指向节点的父节点，如果已经是根节点，返回null

childNodes

NodeList

所有子节点的列表，方法item(i)可以访问第i+1个节点

previousSibling

Node

指向前一个兄弟节点，如果该节点已经是第一个节点，则返回null

nextSibling

Node

指向后一个兄弟节点，如果该节点已经是最后一个节点，则返回null

hasChildNodes

Boolean

当childNodes包含一个或多个节点时，返回true

attributes

NameNodeMap

包含一个元素特性的Attr对象，仅用于元素节点

appendChild(node)

Node

将node 节点添加到childNode的末尾

removeChild(node)

Node

从childNodes中删除node节点

replaceChild(newnode,oldnode)

Node

将childNodes中的oldnode节点替换成newnode节点

insertChild(newnode,refnode)

Node

在childNodes中的refnode节点之前插入newnode节点

2、访问节点

有两种方法getELementById 和getElemntsByTagName

举例：

var oUl=document.getElementsByTagName_r("ul");

var oLi2=oUl[1].getElementsByTagName_r("li");

alert(oLi2.length+""+oLi2[0].tagName+""+oLi2[1].childNodes[0].nodeVale);

var oLi=document.getElementByIdx_x("cssLi");注意这个地方的双引号不能丢掉

alert(oLi.tagName+" "+oLi.childNodes[0].nodeValue);

3、节点类型

元素节点的nodeType是1；属性节点的nodeType是1；文本节点的nodeType是1；

注意

• 糖醋排骨
• 圆笼粉蒸肉
• 泡菜鱼
• 板栗烧鸡
• 麻婆豆腐

在IE下输出正常，但是 FireFox 等其它浏览器还包含众多的空格作为文本节点，因此以上代码仅适用于IE浏览器。

• 糖醋排骨
• 圆笼粉蒸肉
• 泡菜鱼
• 板栗烧鸡
• 麻婆豆腐

修改成这样才在各个浏览器中兼容（这样就不如jquery）

下面的代码有一定难度：请多看几次

兼容代码处理方式

寻找父元素

4、查询和设置属性节点

getAttribute 和 setAttriute

var myImg = document.getElementsByTagName_r("img")[0];// 就一个元素也要用需要用[0]

//获取图片title属性

alert(myImg.getAttribute("title"));

myImg.setAttribute("src","02.jpg");

5、创建和添加节点

创建元素节点createElement_x()

创建文本节点createTextNode()

创建文档碎片createDocumentFragment();

注意顺序，先创建 元素节点，然后文本节点，元素节点追加文本节点

var oP = document.createElement_x("p");

var oText = document.createTextNode("这是一段感人的故事");

oP.appendChild(oText);

document.body.appendChild(oP);

6、删除节点 和 替 换节点

removeChild 和 replaceChild

var oP = document.getElementsByTagName_r("p")[0];

oP.parentNode.removeChild(oP);   // 追到父节点再删除

var oOldP = document.getElementsByTagName_r("p")[0];

var oNewP = document.createElement_x("p");        //新建节点

var oText = document.createTextNode("这是一个感人肺腑的 故事");

oNewP.appendChild(oText);//别忘记

oOldP.parentNode.replaceChild(oNewP,oOldP);          //替换节点

7、在特定节点前或后插入节点

insertBefore

oOldP.parentNode.insertBefore(oNewP,oOldP);          //插入节点

通常将节点添加到实际页面中，页面就会立即更新并反映出这个变化。添加的节点非常多的时候，页面执行的效率很低，解决办法是 创建一个文档碎片，把新的节点先添加到碎片上，然后一次性再添加到页面上

function insertPs(){

var aColors =

["red","green","blue","magenta","yellow","chocolate","black","aquamarine","lime","fuchsia","brass","azure","brown","bronze"];

var oFragment = document.createDocumentFragment();    //创建文档碎片

for(var i=0;i<aColors.length;i++){

var oP = document.createElement_x("p");

var oText = document.createTextNode(aColors[i]);

oP.appendChild(oText);

oFragment.appendChild(oP);            //将节点先添加到碎片中

}

document.body.appendChild(oFragment);       //最后一次性添加到 页面

}

DOM 提供的方法只能往目标元素之前用insertBefore 插入新元素，或者利用 appendChild在父元素的 childNodes末尾添加新元素。

需要自行编写insertAfter 函数

例子：

function insertAfter(newElement, targetElement){

var oParent = targetElement.parentNode;     //首先找到目标元素的父元素

if(oParent.lastChild == targetElement)   //如果目标元素已经是最后一个子元素了

oParent.appendChild(newElement); //则直接用appendChild()加到子元素列表的最后

else         //否则用insertBefore()插入到目标元 素的下一个兄弟元素之前

oParent.insertBefore(newElement,targetElement.nextSibling);

}

function insertP(){

var oOldP = document.getElementByIdx_x("myTarget");

var oNewP = document.createElement_x("p");        //新建节点

var oText = document.createTextNode("这 是一个感人肺腑的故事");

oNewP.appendChild(oText);

insertAfter(oNewP,oOldP);        //插入节点

}

8、非标准 DOM innerHTML属性

var myDiv =
document.getElementByIdx_x("myTest");

alert(myDiv.innerHTML);            
//直接 显示innerHTML的内容

//修改innerHTML，可直接添加代码

myDiv.innerHTML = "";

注意：innerHTML 属性并不是W3C
DOM的标准组成部分，它不能返回任何对刚插入的内容进行处理的对象。如果需要对刚插入的内容进行处理，还需要DOM方法

9、CSS

var oMy =
document.getElementsByTagName_r("ul")[0];

oMy.className =
"myUL2";  // 修改CSS类

oMy.className += "
myUL2";//追加CSS类

DOM

1、 DOM是document object model的简写而来，即文档对象模型。DOM可被javascript用来读取、改变HTML、XHTML以及XML文档。

2、 HTML文档中每个成分都是一个节点。整个文档是一个文档节点；每个HTML标签是一个元素节点；包含在HTML元素中的文本是文本节点；每个HTML属性是一个属性节点；注释属于注释节点。

3、 一棵节点树中的所有节点彼此都是有关系的，除文档节点外每个节点都有父节点。大部分元素都有子节点，当节点分享同一个父节点时，它们就是同辈（同级节点），节点有可以拥有后代，后代指某个节点的子节点，或者这些节点的子节点，节点也可以拥有先辈，先辈指某个节点的父节点，或者这些父节点的父节点。可以通过若干种方法来查找你需要操作的元素如：getElementById()和getEelmentsByTagName()方法；通过使用一个元素节点的parentNode,firstChild,LastChild属性。

实例 1

下面这个例子会返回文档中所有

元素的一个节点列表：

document.getElementsByTagName("p");

实例 2

下面这个例子会返回所有

元素的一个节点列表，且这些

元素必须是 id 为 "maindiv" 的元素的后代：

document.getElementById('maindiv').getElementsByTagName("p");

4、节点列表（nodeList）

当我们使用节点列表时，通常要把此列表保存在一个变量中，就像这样：

var
x=document.getElementsByTagName("p");

现在，变量 x 包含着页面中所有

元素的一个列表，并且我们可以通过它们的索引号来访问这些

元素。

注释：索引号从 0 开始。

您可以通过使用 length 属性来循环遍历节点列表：

var
x=document.getElementsByTagName("p");

for
(var i=0;i<x.length;i++)

{

// do something with each paragraph

}

您也可以通过索引号来访问某个具体的元素。

要访问第三个

元素，您可以这么写：

var y=x[2];

parentNode、firstChild以及lastChild

这三个属性 parentNode、firstChild 以及 lastChild 可遵循文档的结构，在文档中进行“短距离的旅行”。

请看下面这个 HTML 片段：

John

Doe

Alaska

在上面的HTML代码中，第一个 是 元素的首个子元素（firstChild），而最后一个 是 元素的最后一个子元素（lastChild）。

此外， 是每个 元 素的父节点（parentNode）。

对 firstChild 最普遍的用法是访问某个元素的文本：

var
x=[a paragraph];

var
text=x.firstChild.nodeValue;

parentNode 属性常被用来改变文档的结构。假设您希望从文档中删除带有 id 为
"maindiv" 的节点：

var
x=document.getElementById("maindiv");

x.parentNode.removeChild(x);

首先，您需要找到带有指定 id 的节点，然后移至其父节点并执行 removeChild() 方法。

根节点

有两种特殊的文档属性可用来访问根节点：

• · document.documentElement
• · document.body

第一个属性可返回存在于 XML 以及 HTML 文档中的文档根节点。

第二个属性是对 HTML 页面的特殊扩展，提供了对
标签的直接访问。

nodeName、nodeValue 以及 nodeType 包含有关于节点的信息。

节点信息

每个节点都拥有包含着关于节点某些信息的属性。这些属性是：

• · nodeName（节点名称）
• · nodeValue（节点值）
• · nodeType（节点类型）

nodeName

nodeName 属性含有某个节点的名称。

• · 元素节点的 nodeName 是标签名称
• · 属性节点的 nodeName 是属性名称
• · 文本节点的 nodeName 永远是 #text
• · 文档节点的 nodeName 永远是 #document

注释：nodeName 所包含的 XML 元素的标签名称永远是大写的

nodeValue

对于文本节点，nodeValue 属性包含文本。

对于属性节点，nodeValue 属性包含属性值。

nodeValue 属性对于文档节点和元素节点是不可用的。

5、nodeType

nodeType 属性可返回节点的类型。

最重要的节点类型是：

元素类型

节点类型

元素

1

属性

2

文本

3

注释

8

文档

9

6、Browser 对象参考手册

对象

描述

Window

JavaScript 层级中的顶层对象，表示浏览器窗口。

Navigator

包含客户端浏览器的信息。

Screen

包含客户端显示屏的信息。

History

包含了浏览器窗口访问过的 URL。

Location

包含了当前 URL 的信息。

HTML DOM 对象参考手册

对象

描述

Document

代表整个 HTML 文档，可被用来访问页面中的所有元素

Anchor

代表 元素

Area

代表图像映射中的 元素

Base

代表 元素

Body

代表 元素

Button

代表 元素

Event

代表某个事件的状态

Form

代表

元素

Frame

代表 元素

Frameset

代表 元素

Iframe

代表