Dom元素基本操作方法API,先记录下,方便以后使用。

  W3C DOM和JavaScript很容易混淆不清。DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访

问文档结构。JavaScript则是用于访问和处理DOM的语言。如果没有DOM,JavaScript根本没有Web页面和构成页面元素的概念。文档

中的每个元素都是DOM的一部分,这就使得JavaScript可以访问元素的属性和方法。

  DOM独立于具体的编程语言,通常通过JavaScript访问DOM,不过并不严格要求这样。可以使用任何脚本语言来访问DOM,这要归

功于其一致的API。表3-1列出了DOM元素的一些有用的属性,表3-2列出了一些有用的方法。

表3-1 用于处理XML文档的DOM元素属性 

属性名         描述

childNodes 返回当前元素所有子元素的数组

firstChild 返回当前元素的第一个下级子元素

lastChild 返回当前元素的最后一个子元素

nextSibling 返回紧跟在当前元素后面的元素

nodeValue 指定表示元素值的读/写属性

parentNode 返回元素的父节点

previousSibling 返回紧邻当前元素之前的元素

表3-2 用于遍历XML文档的DOM元素方法

方法名                         描述

getElementById(id) (document) 获取有指定惟一ID属性值文档中的元素

getElementsByTagName(name) 返回当前元素中有指定标记名的子元素的数组

hasChildNodes() 返回一个布尔值,指示元素是否有子元素

getAttribute(name) 返回元素的属性值,属性由name指定

  有了W3C DOM,就能编写简单的跨浏览器脚本,从而充分利用XML的强大功能和灵活性,将XML作为浏览器和服务器之间的通信介质。

  从下面的例子可以看到,使用遵循W3C DOM的JavaScript来读取XML文档是何等简单。代码清单3-3显示了服务器向浏览器返回的XML文档的内容。这是一个简单的美国州名列表,各个州按地区划分。

表3-3 动态创建内容时所用的W3C DOM属性和方法 

属性/方法                  描述

document.createElement(tagName) 文档对象上的createElement方法可以创建由tagName指定的元素。如果以串div作为方法参数,就会生成一个div元素

document.createTextNode(text) 文档对象的createTextNode方法会创建一个包含静态文本的节点 <element>.appendChild(childNode) appendChild方法将指定的节点增加到当前元素的子节点列表(作为一个新的子节点)。例如,

可以增加一个option元素,作为select元素的子节点

<element>.getAttribute(name)

<element>.setAttribute(name, value)这些方法分别获得和设置元素中name属性的值

<element>.insertBefore(newNode, targetNode)将节点newNode作为当前元素的子节点插到targetNode元素前面

<element>.removeAttribute(name) 这个方法从元素中删除属性name

<element>.removeChild(childNode) 这个方法从元素中删除子元素childNode

<element>.replaceChild(newNode, oldNode) 这个方法将节点oldNode替换为节点newNode

<element>.hasChildnodes() 这个方法返回一个布尔值,指示元素是否有子元素

Document--最顶层的节点,所有的其他节点都是附属于它的。

DocumentType--DTD引用(使用<!DOCTYPE>语法)的对象表现形式,它不能包含子节点。

DocumentFragment--可以像Document一样来保存其他节点。

Element--表示起始标签和结束标签之间的内容,例如<tag></tab>或者<tag/>。这是唯一可以同时包含特性和子节点的节点类型。

Attr--代表一对特性名和特性值。这个节点类型不能包含子节点。

Text--代表XML文档中的在起始标签和结束标签之间,或者CDataSection内包含的普通文本。这个节点类型不能包含子节点。

CDataSection--<![CDATA[]]>的对象表现形式。这个节点类型仅能包含文本节点Text作为子节点。

Entity--表示在DTD中的一个实体定义,例如<!ENTITY foo"foo">。这个节点类型不能包含子节点。

EntityReference--代表一个实体引用,例如&quot;。这个节点类型不能包含子节点。

ProcessingInstruction--代表一个PI。这个节点类型不能包含子节点。

Comment--代表XML注释。这个节点不能包含子节点。

Notation--代表在DTD中定义的记号。这个很少用到。

Node接口定义了所有节点类型都包含的特性和方法。 

特性/方法 类型/返回类型 说明

nodeName String 节点的名字;根据节点的类型而定义

nodeValue String 节点的值;根据节点的类型而定义

nodeType Number 节点的类型常量值之一

ownerDocument Document 指向这个节点所属的文档

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

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

childNodes NodeList 所有子节点的列表

previousSibling Node 指向前一个兄弟节点;如果这个节点就是第一个兄弟节点,那么该值为null

nextSibling Node 指向后一个兄弟节点;如果这个节点就是最后一个兄弟节点,那么该值为null

hasChildNodes() Boolean 当childNodes包含一个或多个节点时,返回真

attributes NamedNodeMap 包含了代表一个元素的特性的Attr对象;仅用于Element节点

appendChild(node) Node 将node添加到childNodes的末尾

removeChild(node) Node 从childNodes中删除node

replaceChild(newnode,oldnode) Node 将childNodes中的oldnode替换成newnode

insertBefore(newnode,refnode) Node 在childNodes中的refnode之前插入newnodd

除节点外,DOM还定义了一些助手对象,它们可以和节点一起使用,但不是DOM文档必有的部分。

NodeList--节点数组,按照数值进行索引;用来表示和一个元素的子节点。

NamedNodeMap--同时使用数值和名字进行索引的节点表;用于表示元素特性。

2.访问相关的节点 

下面的几节中考虑下面的HTML页面

1<html>
2 <head>
3 <title>DOM Example</title> 4 </head>
5 <body>
6 <p>Hello World!</p>
7 <p>Isn't this exciting?</p>
8 <p>You're learning to use the DOM!</p>
9 </body></html>

要访问<html/>元素(你应该明白这是该文件的document元素),你可以使用document的documentElement特性:

var oHtml = document.documentElement;

现在变量oHtml包含一个表示<html/>的HTMLElement对象。如果你想取得<head/>和<body/>元素,下面的可以实现:

var oHead = oHtml.firstChild;

var oBody = oHtml.lastChild;

也可以使用childNodes特性来完成同样的工作。只需把它当成普通的javascript array,使用方括号标记:

var oHead = oHtml.childNodes[0];

var oBody = oHtml.childNodes[1];

注意方括号标记其实是NodeList在javascript中的简便实现。实际上正式的从childNodes列表中获取子节点的方法是使用item()方法:

var oHead = oHtml.childNodes.item(0);

var oBody = oHtml.childNodes.item(1);

HTML DOM页定义了document.body作为指向<body/>元素的指针。

var oBody = ducument.body;

有了oHtml,oHead和oBody这三个变量,就可以尝试确定它们之间的关系:

alert(oHead.parentNode==oHtml);

alert(oBody.parentNode==oHtml);

alert(oBody.previousSibling==oHead);

alert(bHead.nextSibling==oBody);

alert(oHead.ownerDocument==document);

以上均outputs "true"。

3.处理特性 

正如前面所提到的,即便Node接口已具有attributes方法,且已被所有类型的节点继承,然而,只有

Element节点才能有特性。Element节点的attributes属性其实是NameNodeMap,它提供一些用于访问和处理其内容的方法:

getNamedItem(name)--返回nodename属性值等于name的节点;

removeNamedItem(name)--删除nodename属性值等于name的节点;

setNamedItem(node)--将node添加到列表中,按其nodeName属性进行索引;

item(pos)--像NodeList一样,返回在位置pos的节点;

注:请记住这些方法都是返回一个Attr节点,而非特性值。

NamedNodeMap对象也有一个length属性来指示它所包含的节点的数量。

当NamedNodeMap用于表示特性时,其中每个节点都是Attr节点,这的nodeName属性被设置为特性名称,而nodeValue属性被设置为特性的值。例如,假设有这样一个元素:

<p style="color:red" id="p1">Hello world!</p>

同时,假设变量oP包含指向这个元素的一个引用。于是可以这样访问id特性的值:

var sId = oP.attributes.getNamedItem("id").nodeValue;

当然,还可以用数值方式访问id特性,但这样稍微有些不直观:

var sId = oP.attributes.item(1).nodeValue;

还可以通过给nodeValue属性赋新值来改变id特性:

oP.attributes.getNamedItem("id").nodeValue="newId";

Attr节点也有一个完全等同于(同时也完全同步于)nodeValue属性的value属性,并且有name属性和nodeName属性保持同步。我们可以随意使用这些属性来修改或变更特性。

因为这个方法有些累赘,DOM又定义了三个元素方法来帮助访问特性:

getAttribute(name)--等于attributes.getNamedItem(name).value;

setAttribute(name,newvalue)--等于attribute.getNamedItem(name).value=newvalue;

removeAttribute(name)--等于attribute.removeNamedItem(name)。

 

4.访问指定节点 

(1)getElementsByTagName()

核 心(XML) DOM定义了getElementsByTagName()方法,用来返回一个包含所有的tagName(标签名)特性等于某个指定值的元素的 NodeList。在Element对象中,tagName特性总是等于小于号之后紧跟随的名称--例如,<img />的tagName是"img"。下一行代码返回文档中所有<img />元素的列表:var oImgs = document.getElementsByTagName("img");

把所有图形都存于oImgs后,只需使用方括号或者Item()方法(getElementsByTagName()返回一个和childNodes一样的NodeList),就可以像访问子节点那样逐个访问这些节点了:

alert(oImgs[0].tagName);      //outputs "IMG"

假如只想获取在某个页面第一个段落的所有图像,可以通过对第一个段落元素调用getElementsByTagName()来完成,像这样:

var oPs = document.getElementByTagName("p");

var oImgsInp = oPs[0].getElementByTagName("img");

可以使用一个星号的方法来获取document中的所有元素:

var oAllElements = document.getElementsByTagName("*");

当参数是一个星号的时候,IE6.0并不返回所有的元素。必须使用document.all来替代它。

(2)getElementsByName()

HTML DOM 定义了getElementsByName(),这用来获取所有name特性等于指定值的元素的。

(3)getElementById()

这是HTML DOM定义的第二种方法,它将返回id特性等于指定值的元素。在HTML中,id特性是唯一的--这意味着没有两个元素可以共享同一个id。毫无疑问这是从文档树中获取单个指定元素最快的方法。

注:如果给定的ID匹配某个元素的name特性,IE6.0还会返回这个元素。这是一个bug,也是必须非常小心的一个问题。

5.创建新节点 

最常用到的几个方法是

createDocumentFragment()--创建文档碎片节点

createElement(tagname)--创建标签名为tagname的元素

createTextNode(text)--创建包含文本text的文本节点

createElement()、createTextNode()、appendChild()

1<html>
2 <head>
3 <title>createElement() Example</title>
4 <script type="text/javascript">
5 function createMessage() {
6 var oP = document.createElement("p");
7 var oText = document.createTextNode("Hello World!");
8 oP.appendChild(oText);
9 document.body.appendChild(oP);
10 }
11 </script>
12 </head>
13 <body onload="createMessage()">
14 </body></html>

removeChild()、replaceChild()、insertBefore()

删除节点

1<html>
2 <head>
3 <title>removeChild() Example</title>
4 <script type="text/javascript">
5 function removeMessage() {
6 var oP = document.body.getElementsByTagName("p")[0];
7 oP.parentNode.removeChild(oP);
8 }
9 </script>
10 </head>
11 <body onload="removeMessage()">
12 <p>Hello World!</p>
13 </body></html>

替换

1<html>
2 <head>
3 <title>replaceChild() Example</title>
4 <script type="text/javascript">
5 function replaceMessage() {
6 var oNewP = document.createElement("p");
7 var oText = document.createTextNode("Hello Universe!");
8 oNewP.appendChild(oText);
9 var oOldP = document.body.getElementsByTagName("p")[0];
10 oOldP.parentNode.replaceChild(oNewP, oOldP);
11 }
12 </script>
13 </head>
14 <body onload="replaceMessage()">
15 <p>Hello World!</p>
16 </body></html

新消息添加到旧消息之前

1<html>
2 <head>
3 <title>insertBefore() Example</title>
4 <script type="text/javascript">
5 function insertMessage() {
6 var oNewP = document.createElement("p");
7 var oText = document.createTextNode("Hello Universe!");
8 oNewP.appendChild(oText);
9 var oOldP = document.getElementsByTagName("p")[0];
10 document.body.insertBefore(oNewP, oOldP);
11 }
12 </script>
13 </head>
14 <body onload="insertMessage()">
15 <p>Hello World!</p>
16 </body></html>

createDocumentFragment()

一旦把节点添加到document.body(或 者它的后代节点)中,页面就会更新并反映出这个变化。对于少量的更新,这是很好的,然而,当要向document添加大量数据时,如果逐个添加这些变动, 这个过程有可能会十分缓慢。为解决这个问题,可以创建一个文档碎片,把所有的新节点附加其上,然后把文档碎片的内容一次性添加到document中,假如 想创建十个新段落

1<html>
2 <head>
3 <title>insertBefore() Example</title>
4 <script type="text/javascript">
5 function addMessages() {
6 var arrText = ["first", "second", "third", "fourth", "fifth", "sixth", "seventh", "eighth", "ninth", "tenth"]; 7
8 var oFragment = document.createDocumentFragment();
9
10 for (var i=0; i < arrText.length; i++) {
11 var oP = document.createElement("p");
12 var oText = document.createTextNode(arrText[i]);
13 oP.appendChild(oText);
14 oFragment.appendChild(oP);
15 }
17 document.body.appendChild(oFragment);
18 19 }
20 </script>
21 </head>
22 <body onload="addMessages()">
23
24 </body></html>

6.让特性像属性一样

大部分情况下,HTML DOM元素中包含的所有特性都是可作为属性。

假设有如下图像元素:

<img src = "mypicture.jpg" border=0 />

如果要使用核心的DOM来获取和设置src和border特性,那么要用getAttribute()和setAttribute()方法:

alert(oImg.getAttribute("src"));

alert(oImg.getAttribute("border"));

oImg.setAttribute("src","mypicture2.jpg");

oImg.setAttribute("border",1);

然而,使用HTML DOM,可以使用同样名称的属性来获取和设置这些值:

alert(oImg.src);

alert(oImg.border);

oImg.src="mypicture2.jpg";

oImg.border ="1";

唯一的特性名和属性名不一样的特例是class属性,它是用来指定应用于某个元素的一个CSS类,因为class在ECMAScript中是一个保

留字,在javascript中,它不能被作为变量名、属性名或都函数名。于是,相应的属性名就变成了className;

注:IE在setAttribute()上有很大的问题,最好尽可能使用属性。

7.table方法

为了协助建立表格,HTML DOM给<table/>,<tbody/>和<tr/>等元素添加了一些特性和方法。

给<table/>元素添加了以下内容:

特性/方法 说明

caption 指向<caption/>元素并将其放入表格

tBodies <tbody/>元素的集合

tFoot 指向<tfoot/>元素(如果存在)

tHead 指向<thead/>元素(如果存在)

rows 表格中所有行的集合

createTHead() 创建<thead/>元素并将其放入表格

createTFood() 创建<tfoot/>元素并将其放入表格

createCpation() 创建<caption/>元素并将其放入表格

deleteTHead() 删除<thead/>元素

deleteTFood() 删除<tfoot/>元素

deleteCaption() 删除<caption/>元素

deleteRow(position) 删除指定位置上的行

insertRow(position) 在rows集合中的指定位置上插入一个新行

<tbody/>元素添加了以下内容

特性/方法 说明

rows <tbody/>中所有行的集合

deleteRow(position) 删除指定位置上的行

insertRow(position) 在rows集合中的指定位置上插入一个新行 <tr/>元素添加了以下内容

特性/方法 说明

cells <tr/>元素中所有的单元格的集合

deleteCell(postion) 删除给定位置上的单元格

insertCell(postion) 在cells集合的给点位置上插入一个新的单元格

JS操作DOM元素属性和方法的更多相关文章

  1. Js操作DOM元素及获取浏览器高宽

    在JavaScript中,经常会来获取Document文档元素,是 HTML 文档对象模型的英文缩写,Document Object Model for HTML,是基于浏览器编程,HTML DOM ...

  2. js操作DOM元素

    创建 document.createElement() 查找 document.getElementById()   返回对拥有指定 id 的第一个对象的引用. document.getElement ...

  3. DOM 元素 属性和方法

    console.dir() namespaceURI: "http://www.w3.org/1999/xhtml" nextElementSibling: null nextSi ...

  4. 【面试必备】javascript操作DOM元素

    前言 时间过的真快,不知不觉就到年底了.问问自己,这一年你对自己的工作满意吗? 评价标准是什么呢?当然是马云的那两条准则了:钱给到了吗?干的爽吗?如果答案都是no,那么,你准备好跳槽了吗? 为了应对年 ...

  5. web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记

    hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...

  6. JS-DOM ~ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性

    带有Element和不带的区别 a)  带Element的获取的是元素节点 b)  不带可能获取文本节点和属性节点 获取所以子节点 a)   . childNodes b)   . children ...

  7. jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解

    jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...

  8. JS1 js获取dom元素方法

     js获取dom元素方法  1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId")         其 ...

  9. JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分)

    JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分) 1.匹配属性的开头 $("[attributeName^='value']"); 2.匹配属性的结尾 ...

随机推荐

  1. WSGI规格说明书

    PEP 333 这应该是WSGI最权威的文档了  http://www.python.org/dev/peps/pep-3333/  值翻译了最重要的前面部分,后面读者可以参考 当然文档有些生硬,欢迎 ...

  2. [BZOJ 1066] [SCOI2007] 蜥蜴 【最大流】

    题目链接:BZOJ - 1066 题目分析 题目限制了高度为 x 的石柱最多可以有 x 只蜥蜴从上面跳起,那么就可以用网络流中的边的容量来限制.我们把每个石柱看作一个点,每个点拆成 i1, i2,从 ...

  3. cf D. On Sum of Fractions

    http://codeforces.com/problemset/problem/397/D 题意:v(n) 表示小于等于n的最大素数,u(n)表示比n的大的第一个素数,然后求出: 思路:把分数拆分成 ...

  4. 从相对路径说开来(从C++到Qt)

    从相对路径说开来(从C++到Qt) 转载自:http://blog.csdn.net/dbzhang800/article/details/6363165 在Qt论坛经常看到网友抱怨: QPixmap ...

  5. FindControl什么时候才会使用ObjectFromHWnd函数呢?——VCL很难调试,加一个日志函数,记录时间

    IsDelphiHandleFindVCLWindowfunction IsVCLControl(Handle: HWND): Boolean;function FindControl(Handle: ...

  6. The Embarrassed Cryptographer(高精度取模+同余模定理)

    Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 11435   Accepted: 3040 Description The ...

  7. Python操作Excel_输出所有内容(包含中文)

    python 2.7.5代码: # coding=utf-8 import sys import xlrd data=xlrd.open_workbook('D:\\menu.xls') table ...

  8. 使用sklearn进行数据预处理 —— 归一化/标准化/正则化

    一.标准化(Z-Score),或者去除均值和方差缩放 公式为:(X-mean)/std  计算时对每个属性/每列分别进行. 将数据按期属性(按列进行)减去其均值,并除以其方差.得到的结果是,对于每个属 ...

  9. UVa11419 SAM I AM(构造最小点覆盖)

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=27475 [思路] 二分图的最小点覆盖以及构造最小覆盖. 二分图的最 ...

  10. 数据结构算法集---C++语言实现

    //数据结构算法集---C++语言实现 //各种类都使用模版设计,可以对各种数据类型操作(整形,字符,浮点) /////////////////////////// // // // 堆栈数据结构 s ...