[DOM]javascript DOM操作

对于B/S开发,客户端与服务器端的交互是非常必要的,JavaScript的提出解决了很多问题,AJAX的提出也解决了异步通信的问题,更加为用户着想了。而DOM是其中非常基础的知识,在学习AJAX的同时,我学习了一下DOM的相关操作,这篇重点讲一下HTML
DOM的相关内容,其实就是在HTML网页上进行的各种操作。

          一,概述: DOM(对象文档模型(Document
Object Model)),是W3C组织推荐的处理可扩展置标语言的标准编程接口。DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。也就是说,这是表示和处理一个HTML或XML文档的常用方法。DOM技术是用户页面可以动态的变化,从而大大使页面的交互性增强。但是DOM必须通过JavaScript等脚本语言来进行读取,改变HTML、XHTML以及XML等文档。

        简单说就是DOM规定了HTML,XML等的一些规范,使JavaScript可以根基这些规范来进行各种操作。而这些规范我们可以用树来形象的表示:

       通过这样的树,我们就可以很快找到我们想要操作的节点,进而进行各种属性,方法,事件等的操作。

 

      二,通过JavaScript对HTML网页内容进行操作:

              1,首先需要我们查找要操作的节点:

a,通过id查找:

   Eg: varx=document.getElementById("name")

b,通过标签名:

Eg:查找ID为name标签下的所有p标签

     varx=document.getElementById("name");
    vary=x.getElementsByTagName("p");

c,通过类名:

 Eg:varx=document.getElementsByClassName("name");

  注意:这种情况在IE5,6,7,8中无效。(网上这么说,等待实验)

 2,修改插好出来的节点的属性,内容,样式等:

       首先看一下常用的HTML DOM属性:

        a,改变HTML的属性(注意HTML的属性和HTML
DOM属性的区分):

       Eg:改变<img>元素的src属性:          

 <script>

document.getElementById("image").src="/i/shanghai_lupu_bridge.jpg";

</script>

       b,改变HTML的内容:

        Eg:

<script>

document.getElementById("p1").innerHTML="Newtext!";

</script>

      c,改变HTML的样式:

<script>

document.getElementById("p2").style.color="blue";

</script>

 

总之对于HTML各种的修改需要对HTML的各种属性非常熟悉,通过JavaScript来进行各种修改!

      三,下边看一下关于节点本身的处理:

              首先了解一下节点的相关知识:   

              父(parent)、子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)。看这个图:

 1,添加新的节点:

[javascript] view
plain
copyprint?

  1. <span style="font-size:18px;">  <!DOCTYPE html>  
  2.     <html>  
  3.     <body>  
  4.       
  5.     <div id="div1">  
  6.     <p id="p1">这是一个段落。</p>  
  7.     <p id="p2">这是另一个段落。</p>  
  8.     </div>  
  9.       
  10.     <script>  
  11.     var para=document.createElement("p");//创建一个标签p节点名为para  
  12.     var node=document.createTextNode("这是新段落。");//定义节点元素的内容  
  13.     para.appendChild(node);//将元素和内容联系起来  
  14.       
  15.     var element=document.getElementById("div1");//找到节点为div1的节点  
  16.     element.appendChild(para);//向节点div1中添加新节点para  
  17.     </script>  
  18.       
  19.     </body>  
  20.     </html>  
  21. </span>  

2,删除某个节点元素:

[javascript] view
plain
copyprint?

  1. <span style="font-size:18px;">  <!DOCTYPE html>  
  2.     <html>  
  3.     <body>  
  4.       
  5.     <div id="div1">  
  6.     <p id="p1">这是一个段落。</p>  
  7.     <p id="p2">这是另一个段落。</p>  
  8.     </div>  
  9.       
  10.     <script>  
  11.     var parent=document.getElementById("div1");  
  12.     var child=document.getElementById("p1");  
  13.     parent.removeChild(child);//删除父节点中的子节点child  
  14.     </script>  
  15.       
  16.     </body>  
  17.     </html>  
  18. </span>  

 上边主要是进行各种方法的处理,涉及到的方法,在这里总结一下:

 

四,下边我写一下HTML DOM中的一些事件:

        首先看一下常见的事件,其实和我们C/S开发的大同小异:

下边我捡两个举一下例子说一下事件的用法:

1,获得焦点时改变颜色,这个是经常用的:

[javascript] view
plain
copyprint?

  1. <span style="font-size:18px;">  <!DOCTYPE html>  
  2.     <html>  
  3.     <head>  
  4.     <script>  
  5.     function myFunction(x)  
  6.     {  
  7.     x.style.background="yellow";  
  8.     }  
  9.     </script>  
  10.     </head>  
  11.     <body>  
  12.       
  13.     请输入英文字符:<input type="text" onfocus="myFunction(this)">  
  14.       
  15.     <p>当输入字段获得焦点时,会触发改变背景颜色的函数。</p>  
  16.       
  17.     </body>  
  18.     </html>  
  19. </span>  

2,鼠标移动上元素和移开元素:

[javascript] view
plain
copyprint?

  1. <span style="font-size:18px;">  <!DOCTYPE html>  
  2.     <html>  
  3.     <body>  
  4.       
  5.     <div   
  6.     onmouseover="mOver(this)"   
  7.     onmouseout="mOut(this)"   
  8.     style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;">  
  9.     Mouse Over Me  
  10.     </div>  
  11.       
  12.     <script>  
  13.     function mOver(obj)  
  14.     {  
  15.     obj.innerHTML="谢谢你"  
  16.     }  
  17.       
  18.     function mOut(obj)  
  19.     {  
  20.     obj.innerHTML="把鼠标指针移动到上面"  
  21.     }  
  22.     </script>  
  23.       
  24.     </body>  
  25.     </html>  
  26. </span>  

    综上为HTML DOM通过JavaScript操作HTML页面的基础知识,其实和我们C/S,B/S后台的都大同小异,只不过它是解

决网页上的一些内容而已,有一些新的知识点,但是知识类型,例如属性,方法,事件哈等都是一样的!不过还是非常需要我们在实践中来锻炼的!这篇博客为HTML DOM篇,主要是针对HTML来操作。,下篇,重点学习一下XML
DOM知识!

时间: 2024-10-27 14:06:50

[DOM]javascript DOM操作的相关文章

JavaScript DOM事件(笔记)_javascript技巧

第1章 事件流 1-1.事件冒泡:事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收; 然后逐级向上传播至最不具体的那个节点(文档); 1-2.事件捕获:不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件; 第2章 事件处理程序 2-1 HTML事件处理程序 //缺点:HTML和JS代码紧密的耦合在一起; <input type="button" value="按钮" onclick="showMessage()"&g

JavaScript DOM操作表格及样式_基础知识

一 操作表格 <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它; // 使用DOM来创建表格; var table = document.createElement('table'); table.border = 1; table.width = 300; var caption = document.createElement('caption'); table.appendChild(caption); caption.appe

JavaScript——DOM操作——Window.document对象详解_javascript技巧

一.找到元素:     docunment.getElementById("id"):根据id找,最多找一个:     var a =docunment.getElementById("id");将找到的元素放在变量中:     docunment.getElementsByName("name"):根据name找,找出来的是数组:     docunment.getElementsByTagName("name"):根据标签

javascript DOM 操作自定义创建HTML代码实例

创建自定义的HTML元素 我们可以使用 document.registerElement() 创建自定义的HTML元素,这个函数返回的是一个构造函数,第一个参数是用来声明自定义HTML元素的名称,第二个参数是可选的,用来描述原型的对象,自定义功能的元素. 在下面的示例中,简单的创建了一个新的HTML元素<x-treehouse>,并且将它放入到页面中: var XTreehouseElement = document.registerElement('x-treehouse');documen

javascript dom 操作优化

DOM 操作优化 首先澄清两个概念--Repaint 和 Reflow:Repaint 也叫 Redraw,它指的是一种不会影响当前 DOM 的结构和布局的一种重绘动作.如下动作会产生 Repaint 动作: 不可见到可见(visibility 样式属性); 颜色或图片变化(background, border-color, color 样式属性); 不改变页面元素大小,形状和位置,但改变其外观的变化 Reflow 比起 Repaint 来讲就是一种更加显著的变化了.它主要发生在 DOM 树被操

使用Dojo的Ajax应用开发进阶教程,第4部分: DOM查询与操作

DOM 的全称是文档对象模型(Document Object Model).它是 HTML 和 XML 文档的 API.它定义了文档的逻辑结构,以及对文档进行访问和操作的方式.通过 DOM,开发人员可以在文档中自由导航, 也可以添加.更新和删除其中的元素和内容.基本上文档中的任何内容都是可以通过 DOM 进行访问和操作的.本文详细介绍了如何使用 DOM 基本 API 和 Dojo 来进行 DOM 查询和操作.使用的 Dojo 版本是 1.4.下面首先介绍 DOM 的基本概念. DOM 基本概念

JavaScript DOM进阶方法

 DOM自身存在很多类型,在上一章中有介绍,比如Element类型:表示的是元素节点;再比如Text类型;表示的是文本节点; 一 DOM类型 类型名 说明 Node 表示所有类型值的统一接口,IE不支持; Document 表示文档类型; Element 表示元素节点类型; Text 表示文本节点类型; Comment 表示文档中的注释类型; CDATASection 表示CDATA区域类型; DocumentType 表示文档声明类型; DocumentFragment 表示文档片段类型; A

重读《JavaScript DOM编程艺术》(第一版)

今天来了雅兴去图书馆看书.把<JavaScript DOM编程艺术>温习了一遍,平时写js的机会不是特别多,很多知识都有些模糊了. 伴随着身边键盘卡啦卡啦的声音,一位手速不是一般的快的程序猿.我也快速的回顾了下~ Chapter 1     JavaScript简史 1.Netscape(网景)/Sun公司 2.JavaScript 1.0 - Netscspe Navigator 2 3.VBScript - IE 3 4.ECMA标准化 - 浏览器之争 5.什么是DOM? W3C 文档对象

JavaScript DOM元素尺寸和位置_基础知识

一 获取元素的CSS大小  1.通过style内联获取元素的大小   复制代码 代码如下:      var box = document.getElementById('box');    // 获得元素;      box.style.width;                             // 200px;      box.style.height;                            // 200px; // PS:style获取只能取到行内style属