对于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，添加新的节点：

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

2,删除某个节点元素：

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

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

四，下边我写一下HTML DOM中的一些事件：

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

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

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

  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. 请输入英文字符：<input type="text" onfocus="myFunction(this)">
  13. <p>当输入字段获得焦点时，会触发改变背景颜色的函数。</p>
  14. </body>
  15. </html>
  16. </span>

2，鼠标移动上元素和移开元素：

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

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

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

HTML之DOM的更多相关文章

  1. 关于DOM的操作以及性能优化问题-重绘重排

     写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...

  2. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  3. 页面嵌入dom与被嵌入iframe的攻防

    1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.hr ...

  4. 通俗易懂的来讲讲DOM

    DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系 ...

  5. HTML DOM 介绍

    本篇主要介绍DOM内容.DOM 节点.节点属性以及获取HTML元素的方法. 目录 1. 介绍 DOM:介绍DOM,以及对DOM分类和功能的说明. 2. DOM 节点:介绍DOM节点分类和节点层次. 3 ...

  6. HTML DOM 对象

    本篇主要介绍HTML DOM 对象:Document.Element.Attr.Event等4个对象. 目录 1. Document 对象:表示文档树的根节点,大部分属性和方法都是对元素进行操作. 2 ...

  7. 重撸js_2_基础dom操作

    1.node 方法 返回 含义 nodeName String 获取节点名称 nodeType Number 获取节点类型 nodeValue String 节点的值(注意:文本也是节点) 2.inn ...

  8. 虚拟dom与diff算法 分析

    好文集合: 深入浅出React(四):虚拟DOM Diff算法解析 全面理解虚拟DOM,实现虚拟DOM

  9. 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？

    引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...

  10. jQuery学习之路（2）-DOM操作

    ▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看 ...

随机推荐

  1. ios实现程序切入后台，实现后台任务 （转自）

    ,项目需求,是程序home键切入后台,3分钟后退出登陆, 首先,iOS 会再持续切入后台,给我们5秒钟的时间去处理相关数据,5秒后,程序不会再执行任何代码,处于挂起状态. - (void)applic ...

  2. lua 中的面向对象

    lua 是一种脚步语言,语言本身并不具备面向对象的特性. 但是我们依然可以利用语言的特性,模拟出面向对象的特性. 面向对象的特性通常会具备:封装,继承,多态的特性,如何在lua中实现这些特性,最主要的 ...

  3. python3内置函数详解

    内置函数 注:查看详细猛击这里 abs() 对传入参数取绝对值 bool() 对传入参数取布尔值, None, 0, "",[],{},() 这些参数传入bool后,返回False ...

  4. [清理页面缓存]asp.net、html

    (1)   MVC BaseController: Controller内 protected override void Initialize(System.Web.Routing.RequestC ...

  5. MVC导出Excel,提供下载Excel

    类1: using System.Collections.Generic;using System.Data;using System.Web.Mvc;using System.IO;using Sy ...

  6. 搭建java,oracle，plsql开发环境

    一:安装jdk和jre; (1)有两种方法:1,从官网网址上安装:2,安装绿色版 (2)配置环境变量 在"系统变量"下进行如下配置: (1)新建->变量名:JAVA_HOME ...

  7. 亚马逊开放机器学习系统源代码：挑战谷歌TensorFlow

    北京时间5月17日上午消息,亚马逊在开源技术领域迈出了更大的步伐,宣布开放该公司的机器学习软件DSSTNE的源代码.这个最新项目将与谷歌的TensorFlow竞争,后者已于去年开源.亚马逊表示,在缺乏 ...

  8. rem 和 ::

    -------siwuxie095 rem 和 ::   都是用作批处理注解(等同于各种编程语言中的注释) 注解批处理时,标准写法是写在被注解代码的上一行 REM 在批处理文件或CONFIG.SYS里 ...

  9. 使用Coookie实现浏览器显示上次的登录时间

    实现的效果:  每一次刷新 都会显示上一次访问servlet的时间 ,只适用于同一个浏览器 ,更换浏览器再次访问就该使用session技术了, 因为cookie是浏览器端技术,cookie保存在浏览器 ...

  10. 对CLR基本原理概念&垃圾回收机制的简单理解

    前言,之前有说过C语言的函数&变量的一些基本概念,说得可能不是很好,先也把C#的.里相关的也说下,已成一统. 而说函数变量,其实主要就是GC,而GC又是CLR的主要内容,故就有了此文. CLR ...