javascript 操作DOM对象

zxc8899

浏览: 166428 次
性别:

最近访客更多访客>>

shanglo

chendpchendp

zt903060249

wangwei_peking

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

html dom javascript

为了操纵浏览器和文档,JavaScript使用分层的父对象和子对象,这就成为DOM.这些对象的组织类似一个树形结构,并表示一个Web文档的所有内容和组件.

DOM对象拥有属性(描述Web页面或文档的变量)和方法(允许操作部分Web页面).

当说明一个对象时,先是父对象名,后接着是子对象名,使用圆点隔开.

1.document对象

1.1document属性

    document对象主要对应于文档的主体部分,对于头部分只提供了有限的支持.

    body属性:

    background 指定文档背景图像的URL.

    bgColor 设置文档颜色.

    Text 指定文档中正常文本的颜色.

    link 指定未访问链接的颜色.

    vlink 指定已访问链接的颜色.

    document常用属性:

    anchor[]      anchor对象数值,每一个都代表文档中出现的一个锚点.

    applets[]     applet对象数组,代表文档中出现的每一个小代码.

    bgColor       指定文档的背景颜色,字符串类型.

    cookie         允许读写HTTP的cookie,字符串类型.

    domain       指定文档来自哪一个Internet域,用于安全目的,字符串类型.

    embeds[]    代表文档中是哟偶那个<embed>标记嵌入数据,与plugins[]同义.

    fgColor        指定文档的前景颜色,字符串类型.

    forms[]       form对象数组,每一个元素对应于文档中的一个HTML<form>标记.

    images[]     image对象数组,每一个元素对应于文档中的一个HTML<img>标记.

    lastModified 给出文档最近修改时间,字符串类型,只读属性.

    linkColor     指定未访问链接的颜色.

    links[]         link对象数组,每一个元素对应于文档中的一个HTML<a href>标记.

    location       文档的URL地址.

    plugins[]     与embeds[]属性的意义相同.

    referret       只读属性,连接到当前文档的URL.

    title             文档标题,对应于文档中<title>标记的内容.

    URL             指定当前文档的URL,只读属性.

    vlinkColor    指定已访问链接的颜色.

    示例:

   
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> document对象所有属性 </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
 <BODY>
  <h2>document属性列表</h2>
  <script>
  var attrs = new Array();
  for(var property in window.document)
  {
 attrs.push(property);
  }
  attrs.sort();
  document.write("<table>");
  for(i = 0; i<attrs.length; i++)
  {  
    if(i == 0)
 {
   document.write("<tr>");
 }
 if(i > 0 && i % 5 ==0)
 {
   document.write("</tr><tr>");
 }
 document.write("<td>" + attrs[i] + "</td>");
  }
  document.write("</table>");
  </script>
 </BODY>
</HTML>

 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> 显示当前document对象属性 </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
 <BODY bgcolor = "orange" text = "red" link = "blue" vlink = "fuchsia">
  <img src = "z.jpg" border = 2>
  <h2>documen对象属性的当前值</h2>
  <font face = "楷体" size = "+2">
  <script>
  document.write("文档地址: " + "<em>" + document.location + "</em><br>");
  document.write("文档标题: " + "<em>" + document.title + "</em><br>");
  document.write("图像文件: " + "<em>" + document.images[0].src + "</em><br>");
  document.write("URL: " + "<em>" + document.URL + "</em><br>");
  document.write("背景颜色: " + "<em>" + document.bgColor + "</em><br>");
  document.write("链接颜色: " + "<em>" + document.linkColor + "</em><br>");
  document.write("文本颜色: " + "<em>" + document.fgColor + "</em><br>");
  document.write("最后修改: " + "<em>" + document.lastmodified + "</em><br>");
  </script>
  <a href = "http://www.baidu.com">百度连接</a>
 </BODY>
</HTML>

1.2document方法

    open()                         删除现有文档的内容,打开一个新的文档输出流.

    close()                         关闭open()打开的文档输出流.

    focus()                        让指定文档得到焦点.

    write(value,...)           在当前文档中插入字符串或在open()打开的文档末尾添加字符串

    writeln(value,...)         与writeln方法相同,只是在输出字符串的末尾添加回车符.

    示例:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>document对象方法</TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
<script>
var newWindow;
function makeNewWindow()
{
  if(!newWindow || newWindow.closed)
  {
    newWindow = window.open("","sub","status, height = 350, width = 300");
  }else if (newWindow.focus)
  {
    newWindow.focus();
  }
  newWindow.location = "a.htm";
  newWindow.moveTo(0, 0);
  parent.window.resizeTo(400, 400);
  parent.window.moveTo(350, 0);
}
function writeToWindow()
{
  var newContent = "<html><head><title>新打开的窗口-显示唐诗<<赤壁>></title></head>";
  newContent += "<body><h1>折戟沉沙铁未销,</h1>";
  newContent += "<h1>自将磨洗认前朝.</h1>";
  newContent += "<h1>东风不与周郎便,</h1>";
  newContent += "<h1>铜雀春深锁二乔.</h1>";
  newContent += "</body></html>";
  newWindow.document.open();
  newWindow.document.write(newContent);
  newWindow.document.close();
}
</script>
 <BODY>
 <h2> document对象方法演示</h2>
 <button onClick = "makeNewWindow();">
 <font size = "+1" face = 宋体>创建新窗口</button><br>
 <button onClick = "writeToWindow();">
 <font size = "+1" face = 宋体>输出内容</button>
 </BODY>
</HTML>

2.DOM对象

2.1访问DOM节点

    要访问html元素，可以使用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];

    使用childNodes.length属性来获取子节点的数量：

alert(oHtml.childNodes.length);//输出子节点个数

    实际上正式地从childNodes列表中获取子节点的方法是使用item()：

var oHtml.childNodes.item[0];

var obody.childNodes.item[1];

    核心DOM定义了getElementByTagName()方法，用来返回一个包含所有的tagName属性等于某个指定值的元素的Nodelist。

var oimgs = document.getElementByTagName("img");

    在把所有图像都存于oimgs后，只需要使用方括号或者item()方法，就可以像访问子节点一样逐个访问这些节点了：

alert(oimgs[0].tagName);//输出img

    如果只想要获得在某个页面第一个段落的所有图像，则可以通过对第一个段落元素用getElementByTagName()来完成，如：

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

var oimgsIp = ops[0].getElemetByTagName("img");

    可以使用型号的方法来获取document中的所有元素：

var oALLElements = document.getElementByTagName("*");

    DOM定义了getElementByName()方法，它用来获取所有name属性等于指定值的元素。

    示例：

 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> DOM技术 </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
 
 <BODY>
  <form method = "post" action = "document.cgi">
  <fieldset>
  <legend>选择你喜欢的颜色！</legend>
  <input type = "radio" name = "color" value = "red">red<br>
  <input type = "radio" name = "color" value = "green">green<br>
  <input type = "radio" name = "color" value = "blue">blue<br>
  </fieldset>
  <input type = "submit" value = "submit">
  </form>
  <script language = "javascript">
  var oRadios = document.getElementsByName("color");
  alert(oRadios[0].getAttribute("value"));//输出red
  </script>
 </BODY>
</HTML>

getElementById()将返回ID属性等于指定值的元素。在HTML中，id属性是唯一的，这就意味着没有两个元素可以使用一个id。这是从文档中获取每个元素的最快方法。

示例：

 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> DOM技术2 </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
<script type = "text/javascript">
function getValue()
{
  var odiv1 = document.getElementById("div1");
  odiv1.innerText = "hello!";
  }
 </script>
 <BODY onload = "getValue()">
  <div id = "div1"></div>
 </BODY>
</HTML>

2.2处理属性

    Node接口具有attributes方法，且已经被所有类型的节点继承，然而，只有element节点才能有属性。

    getNameItem(name):返回nodeName属性值等于name的节点。

    removeNamedItem(name):删除nodeName属性值等于name的节点。

    setNameItem(node):将node添加到列表中，按其nodeName属性进行索引。

    item(pos):与NodeList一样，返回在位置pos的节点。

2.3创建和操作节点

    creatDocumentFragment():创建文本碎片节点

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

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

    createElement():创建元素

    createTextNode():创建文本节点

    appendChild():添加子节点

    removeChild():删除子节点

    示例：

 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> createElement()方法 </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
 
 <BODY onload = "createM()">
  <script>
  function createM()
  {
    var op = document.createElement("p");
 var otext = document.createTextNode("你好");
 op.appendChild(otext);
 document.body.appendChild(op);
 }
 </script>
 </BODY>
</HTML>

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> 删除节点 </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
<script>
function removeM()
{
  var op = document.body.getElementsByTagName("p")[0];
  document.body.removeChild(op);
  }
  </script>
 <BODY onload = "removeM()">
  <p>你好！</p>
  <p>Hello World!</p>
 </BODY>
</HTML>

    replaceChild():替换子节点

    insertBefore():让新节点出现在已有节点之前

2.4DOM的其它技术

    DOM用getAttribute()和setAttribute()方法来获取和设置图片元素的src和border属性。

    示例：

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

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



    使用核心DOM方法来创建一个表格会比较复杂。为了更方便地建立表格，HTML DOM给一些表格元素添加了一些属性和方法。

    <table/>元素内添加的内容

    caption:指向caption元素

    tBodies:<tbody/>元素的集合

    tFoot:指向<tFoot/>元素

    tHead:指向<tHead/>元素

    rows:表格中的行

    createTHead():创建<tHead/>元素标签并将其放入表格中

    createTFoot():创建<tFoot/>元素标签并将其放入表格中

    createCaption():创建<Caption/>元素标签并将其放入表格中

    deleteTHead():删除<tHead/>元素标签

    deleteTFoot():删除<tFoot/>元素标签

    deleteCaption():删除<Caption/>元素标签

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

    insertRow():在Rows集合中的指定位置插入一个新行

    <tbody/>

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

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

    insertRow():在Row集合中的指定位置插入一个新行

    <tr/>

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

    deleteCell():删除指定位置的单元格

    insertCell():在cells集合的给定位置插入一个新的单元格

分享到：

XML基础 | 网络编程总结java

2012-06-15 23:27
浏览 3132
评论(0)
分类:编程语言
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论