`
super_521
  • 浏览: 49725 次
  • 性别: Icon_minigender_2
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

JS操作DOM元素属性和方法

 
阅读更多

JS操作DOM元素属性和方法

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>
10</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.创建新节点
最常用到的几个方法是
Java代码 复制代码收藏代码
  1. createDocumentFragment()－－创建文档碎片节点
  2. createElement(tagname)－－创建标签名为tagname的元素
  3. createTextNode(text)－－创建包含文本text的文本节点
  5. createElement()、createTextNode()、appendChild()
  7. 1<html>
  8. 2<head>
  9. 3<title>createElement()Example</title>
  10. 4<scripttype="text/javascript">
  11. 5functioncreateMessage(){
  12. 6varoP=document.createElement("p");
  13. 7varoText=document.createTextNode("HelloWorld!");
  14. 8oP.appendChild(oText);
  15. 9document.body.appendChild(oP);
  16. 10}
  17. 11</script>
  18. 12</head>
  19. 13<bodyonload="createMessage()">
  20. 14</body>
  21. 15</html>
  23. removeChild()、replaceChild()、insertBefore()
  24. 删除节点
  25. 1<html>
  26. 2<head>
  27. 3<title>removeChild()Example</title>
  28. 4<scripttype="text/javascript">
  29. 5functionremoveMessage(){
  30. 6varoP=document.body.getElementsByTagName("p")[0];
  31. 7oP.parentNode.removeChild(oP);
  32. 8}
  33. 9</script>
  34. 10</head>
  35. 11<bodyonload="removeMessage()">
  36. 12<p>HelloWorld!</p>
  37. 13</body>
  38. 14</html>
  41. 替换
  42. 1<html>
  43. 2<head>
  44. 3<title>replaceChild()Example</title>
  45. 4<scripttype="text/javascript">
  46. 5functionreplaceMessage(){
  47. 6varoNewP=document.createElement("p");
  48. 7varoText=document.createTextNode("HelloUniverse!");
  49. 8oNewP.appendChild(oText);
  50. 9varoOldP=document.body.getElementsByTagName("p")[0];
  51. 10oOldP.parentNode.replaceChild(oNewP,oOldP);
  52. 11}
  53. 12</script>
  54. 13</head>
  55. 14<bodyonload="replaceMessage()">
  56. 15<p>HelloWorld!</p>
  57. 16</body>
  58. 17</html

新消息添加到旧消息之前
Java代码 复制代码收藏代码
  1. 1<html>
  2. 2<head>
  3. 3<title>insertBefore()Example</title>
  4. 4<scripttype="text/javascript">
  5. 5functioninsertMessage(){
  6. 6varoNewP=document.createElement("p");
  7. 7varoText=document.createTextNode("HelloUniverse!");
  8. 8oNewP.appendChild(oText);
  9. 9varoOldP=document.getElementsByTagName("p")[0];
  10. 10document.body.insertBefore(oNewP,oOldP);
  11. 11}
  12. 12</script>
  13. 13</head>
  14. 14<bodyonload="insertMessage()">
  15. 15<p>HelloWorld!</p>
  16. 16</body>
  17. 17</html>

createDocumentFragment()
一旦把节点添加到document.body（或 者它的后代节点）中，页面就会更新并反映出这个变化。对于少量的更新，这是很好的，然而，当要向document添加大量数据时，如果逐个添加这些变动， 这个过程有可能会十分缓慢。为解决这个问题，可以创建一个文档碎片，把所有的新节点附加其上，然后把文档碎片的内容一次性添加到document中，假如 想创建十个新段落
Js代码 复制代码收藏代码
  1. 1<html>
  2. 2<head>
  3. 3<title>insertBefore()Example</title>
  4. 4<scripttype="text/javascript">
  5. 5functionaddMessages(){
  6. 6vararrText=["first","second","third","fourth","fifth","sixth","seventh","eighth","ninth","tenth"];
  7. 7
  8. 8varoFragment=document.createDocumentFragment();
  9. 9
  10. 10for(vari=0;i<arrText.length;i++){
  11. 11varoP=document.createElement("p");
  12. 12varoText=document.createTextNode(arrText[i]);
  13. 13oP.appendChild(oText);
  14. 14oFragment.appendChild(oP);
  15. 15}
  16. 16
  17. 17document.body.appendChild(oFragment);
  18. 18
  19. 19}
  20. 20</script>
  21. 21</head>
  22. 22<bodyonload="addMessages()">
  23. 23
  24. 24</body>
  25. 25</html>

6.让特性像属性一样
大部分情况下，HTML DOM元素中包含的所有特性都是可作为属性。
假设有如下图像元素：
Js代码 复制代码收藏代码
  1. <imgsrc="mypicture.jpg"border=0/>
  2. 如果要使用核心的DOM来获取和设置src和border特性，那么要用getAttribute()和setAttribute()方法：
  3. alert(oImg.getAttribute("src"));
  4. alert(oImg.getAttribute("border"));
  5. oImg.setAttribute("src","mypicture2.jpg");
  6. oImg.setAttribute("border",1);
  7. 然而，使用HTMLDOM，可以使用同样名称的属性来获取和设置这些值：
  8. alert(oImg.src);
  9. alert(oImg.border);
  10. oImg.src="mypicture2.jpg";
  11. oImg.border="1";
唯一的特性名和属性名不一样的特例是class属性，它是用来指定应用于某个元素的一个CSS类，因为class在ECMAScript中是一个保留字，在javascript中，它不能被作为变量名、属性名或都函数名。于是，相应的属性名就变成了className;
注：IE在setAttribute()上有很大的问题，最好尽可能使用属性。

7.table方法
为了协助建立表格，HTML DOM给<table/>,<tbody/>和<tr/>等元素添加了一些特性和方法。
给<table/>元素添加了以下内容：
特性/方法 说明
Js代码 复制代码收藏代码
  1. caption指向<caption/>元素并将其放入表格
  2. tBodies<tbody/>元素的集合
  3. tFoot指向<tfoot/>元素（如果存在）
  4. tHead指向<thead/>元素（如果存在）
  5. rows表格中所有行的集合
  6. createTHead()创建<thead/>元素并将其放入表格
  7. createTFood()创建<tfoot/>元素并将其放入表格
  8. createCpation()创建<caption/>元素并将其放入表格
  9. deleteTHead()删除<thead/>元素
  10. deleteTFood()删除<tfoot/>元素
  11. deleteCaption()删除<caption/>元素
  12. deleteRow(position)删除指定位置上的行
  13. insertRow(position)在rows集合中的指定位置上插入一个新行

<tbody/>元素添加了以下内容
特性/方法 说明
rows <tbody/>中所有行的集合
deleteRow(position) 删除指定位置上的行
insertRow(position) 在rows集合中的指定位置上插入一个新行

<tr/>元素添加了以下内容
特性/方法 说明
cells <tr/>元素中所有的单元格的集合
deleteCell(postion) 删除给定位置上的单元格
insertCell(postion) 在cells集合的给点位置上插入一个新的单元格
分享到：
| Myeclipse下java.lang.OutOfMemoryError: ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JS操作DOM元素属性和方法.pdf

    JS操作DOM元素属性和方法.pdf

    JS操作DOM元素属性和方法大全

    比较全的JS DOM编程技术，都有例子，适合对DOM想深入学习的朋友

    js for循环中实现进度条 & 快速解决js动态改变dom元素属性后页面及时渲染的问题

    js for循环中实现进度条 & 快速解决js动态改变dom元素属性后页面及时渲染的问题

    Javascript dom位置、大小、鼠标定位操作

    做了这么久web开发，凡是涉及用js操作dom元素位置、测量dom元素大小时就心虚，因为js整整提供了二十几个属性对dom元素的位置、大小进行操作。比如：clientTop、offsetTop、scrollTop、clientWidth、offsetWidth、...

    JS选取DOM元素常见操作方法实例分析

    本文实例讲述了JS选取DOM元素常见操作方法。分享给大家供大家参考，具体如下： JS选取DOM元素的方法 注意：原生JS选取DOM元素比使用jQuery类库选取要快很多 1、通过ID选取元素 document.getElementById('myid'); 2...

    快速解决js动态改变dom元素属性后页面及时渲染的问题

    下面小编就为大家带来一篇快速解决js动态改变dom元素属性后页面及时渲染的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

    JS选取DOM元素的简单方法

    摘自JavaScript权威指南（jQuery根据样式选择器查找元素的终极方式是 先用getElementsByTagName(*)获取所有DOM元素，然后根据样式选择器对所有DOM元素进行筛选） 今天试了下各种选取元素的方法的速度，用原生的方法...

    Ajax基本对象的属性和方法

    Ajax基本对象的属性和方法：动态创建内容时所用的W3C DOM属性和方法。用于遍历XML的DOM元素方法。用于处理XML的DOM元素属性。标准XMLHttpRequest操作

    在vue中获取dom元素内容的方法

    本篇文章主要介绍了在vue中获取dom元素内容的方法，可以通过给标签加ref属性，这里整理了详细的代码,有兴趣的可以了解一下

    js操作dom.xmind

    自己写的js操作DOM的思维导图，主要有如下内容：1、什么是DOM，对于DOM的介绍。2、获取DOM节点，通过id / 标签名 / 表单元素获取元素节点，获取属性节点，获取内容节点

    浅谈JS读取DOM对象(标签)的自定义属性

    我们会发现，已经给这个id为test的DOM元素添加了一个叫做adang的属性了，然后在js中，可以调用这个属性。我在写js的时候经常用到这种方法，可以很方便地对某个dom对象添加一些特殊的数据，感觉DOM对象就像一个很好

    详解JS获取HTML DOM元素的8种方法

    文档对象模型（Document Object Model），是W3...JS获取DOM元素的方法（8种） 通过ID获取（getElementById） 通过name属性（getElementsByName） 通过标签名（getElementsByTagName） 通过类名（getElementsByClass

    Js操作DOM元素及获取浏览器高宽的简单方法

    在JavaScript中，经常会来获取Document文档元素，是 HTML 文档对象模型的英文缩写，Document Object Model for HTML，是基于浏览器编程，HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的...

    JavaScript DOM编程艺术(中文第2版)

    2.7.1 内建对象 2.7.2 宿主对象 2.8 小结 第3章 DOM 3.1 文档:DOM中的"D" 3.2 对象:DOM中的"O" 3.3 模型:DOM中的"M" 3.4 节点 3.4.1 元素节点 3.4.2 文本节点 3.4.3 属性节点 3.4.4 CSS 3.4.5 获取元素 3.4.6 盘点...

    JavaScript HTML DOM元素 节点操作汇总

    DOM 节点有三个重要的属性 ： 1. nodeName : 节点的名称 2. nodeValue ：节点的值 3. nodeType ：节点的类型 节点类型：元素 1 ，属性 2 ，文本 3 ，注释 8，文档 9。 一、添加和删除节点（HTML 元素） 1、创建节点...

    【JavaScript源代码】react中的虚拟dom和diff算法详解.docx

    　比如我们创建一个div，我们可以在控制台查看一下这个div上自带或者继承了很多属性，尤其是我们使用js操作DOM的时候，我们的DOM本身就很复杂，js的操作也会占用很多时间，但是我们控制不了DOM元素本身，因此虚拟DOM...

    用JavaScript获取DOM元素位置和尺寸大小的方法

    在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果，这种时候我们经常会用到一些元素位置和尺寸的计算，浏览器兼容性问题也是不可忽略的一部分，要想写出预想效果的JavaScript代码，我们需要了解一些...

    WEB中截屏某一个DOM

    通过网页中Dom元素的ID或者某一个属性，对这个DOM元素中的显示内容进行截屏，其中解决了canvas不能跨域的问题

    JS中DOM元素的操作等基础知识笔记

    删除5.DOM节点类型(元素和文本)6.DOM属性节点7.DOM高级操作 1. DOM的概念和作用  DOM 是 JavaScript操作网页的api接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript...

    JavaScript简单遍历DOM对象所有属性的实现方法

    主要介绍了JavaScript简单遍历DOM对象所有属性的实现方法,涉及JavaScript针对页面元素属性操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下

Magicbox
Global site tag (gtag.js) - Google Analytics