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. 1<html>
  2. 2    <head>
  3. 3        <title>DOM Example</title> 
  4.  
  5. 4    </head>
  6. 5    <body>
  7. 6        <p>Hello World!</p>
  8. 7        <p>Isn't this exciting?</p>
  9. 8        <p>You're learning to use the DOM!</p>
  10. 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. 1<html>
  2. 2    <head>
  3. 3        <title>createElement() Example</title>
  4. 4        <script type="text/javascript">
  5. 5            function createMessage() {
  6. 6                var oP = document.createElement("p");
  7. 7                var oText = document.createTextNode("Hello World!");
  8. 8                oP.appendChild(oText);
  9. 9                document.body.appendChild(oP);
  10. 10            }
  11. 11        </script>
  12. 12    </head>
  13. 13    <body onload="createMessage()">
  14. 14    </body></html>

removeChild()、replaceChild()、insertBefore()

删除节点

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

替换

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

新消息添加到旧消息之前

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

createDocumentFragment()

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

  1. 1<html>
  2. 2    <head>
  3. 3        <title>insertBefore() Example</title>
  4. 4        <script type="text/javascript">
  5. 5            function addMessages() {
  6. 6                var arrText = ["first", "second", "third", "fourth", "fifth", "sixth", "seventh", "eighth", 
  7.  
  8. "ninth", "tenth"]; 
  9.  
  10. 7
  11. 8                var oFragment = document.createDocumentFragment();
  12. 9
  13. 10                for (var i=0; i < arrText.length; i++) {
  14. 11                    var oP = document.createElement("p");
  15. 12                    var oText = document.createTextNode(arrText[i]);
  16. 13                    oP.appendChild(oText);
  17. 14                    oFragment.appendChild(oP);
  18. 15                }
  19. 17                document.body.appendChild(oFragment);
  20. 18 19            }
  21. 20        </script>
  22. 21    </head>
  23. 22    <body onload="addMessages()">
  24. 23
  25. 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. 转载：.NET Web开发技术简单整理

    在最初学习一些编程语言.一些编程技术的时候,做的更多的是如何使用该技术,如何更好的使用该技术解决问题,而没有去关注它的相关性.关注它的理论支持,这种学习技术的方式是短平快.其实工作中有时候也是这样,公 ...

  2. Node.js Express框架

    Express 介绍 Express是一个最小的,灵活的Node.js Web应用程序框架,它提供了一套强大的功能来开发Web和移动应用程序. 它有助于基于Node Web应用程序的快速开发.下面是一 ...

  3. 解决maven仓库有jar包但是maven程序无法下载仓库jar包

    话说,这个问题困扰了我两个多月了已经~~~ 后来发现不知道被谁动了,把我的仓库没有放到仓库组里面~~~ 用admin登录进去,默认密码是admin123,然后看截图操作吧. (记得删除你本地报错说** ...

  4. PGA突破pga_aggregate_target限制

    SQL> show parameter pga NAME         TYPE  VALUE ------------------------------------ ----------- ...

  5. 【HDOJ】3309 Roll The Cube

    BFS,考虑一球进洞仅一球滚动以及两球重叠的情况即可. /* 3309 */ #include <iostream> #include <queue> #include < ...

  6. 【算法Everyday】第三日 KMP算法

    题目 你知道的. 分析 分析不来. 代码 void OutputArray(int* pArr, int iLen) { ; i < iLen; i++) { printf("%d\t ...

  7. 数据结构(树链剖分，堆)：HNOI 2016 network

    2215. [HNOI2016]网络 ★★★☆   输入文件:network_tenderRun.in   输出文件:network_tenderRun.out   简单对比时间限制:2 s   内存 ...

  8. 字符串(马拉车算法，后缀数组，稀疏表)：BZOJ 3676 [Apio2014]回文串

    Description 考虑一个只包含小写拉丁字母的字符串s.我们定义s的一个子串t的“出 现值”为t在s中的出现次数乘以t的长度.请你求出s的所有回文子串中的最 大出现值. Input 输入只有一行 ...

  9. JavaScript引擎研究与C、C++与互调用(转)

    本文转自:ice6015的专栏.为什么有些招聘需要熟悉JS和C++,这或许就是原因. 1.  概要 JavaScript是一种广泛用于Web客户端开发的脚本语言,常用来控制浏览器的DOM树,给HTML ...

  10. DNA Sequence - POJ 2778（AC自动机+矩阵乘法）

    题目大意:DNA序列是有 ATGC 组成的,现在知道一些动物的遗传片段有害的,那么如果给出这些有害的片段,能否求出来所有长度为 N 的基因中有多少是不包含这些有害片段的.   分析:也是断断续续做了一 ...