HTML之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属性：

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

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

2,删除某个节点元素：

<span style="font-size:18px;"> <!DOCTYPE html>
<html>
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);//删除父节点中的子节点child
</script>
</body>
</html>
</span>

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

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

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

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

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

<span style="font-size:18px;"> <!DOCTYPE html>
<html>
<head>
<script>
function myFunction(x)
{
x.style.background="yellow";
}
</script>
</head>
<body>
请输入英文字符：<input type="text" onfocus="myFunction(this)">
<p>当输入字段获得焦点时，会触发改变背景颜色的函数。</p>
</body>
</html>
</span>

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

<span style="font-size:18px;"> <!DOCTYPE html>
<html>
<body>
<div
onmouseover="mOver(this)"
onmouseout="mOut(this)"
style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;">
Mouse Over Me
</div>
<script>
function mOver(obj)
{
obj.innerHTML="谢谢你"
}
function mOut(obj)
{
obj.innerHTML="把鼠标指针移动到上面"
}
</script>
</body>
</html>
</span>

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

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

HTML之DOM的更多相关文章

关于DOM的操作以及性能优化问题-重绘重排
写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素二.修改DOM引起的重绘重排一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...
读书笔记：JavaScript DOM 编程艺术（第二版）
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
页面嵌入dom与被嵌入iframe的攻防
1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.hr ...
通俗易懂的来讲讲DOM
DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系 ...
HTML DOM 介绍
本篇主要介绍DOM内容.DOM 节点.节点属性以及获取HTML元素的方法. 目录 1. 介绍 DOM:介绍DOM,以及对DOM分类和功能的说明. 2. DOM 节点:介绍DOM节点分类和节点层次. 3 ...
HTML DOM 对象
本篇主要介绍HTML DOM 对象:Document.Element.Attr.Event等4个对象. 目录 1. Document 对象:表示文档树的根节点,大部分属性和方法都是对元素进行操作. 2 ...
重撸js_2_基础dom操作
1.node 方法返回含义 nodeName String 获取节点名称 nodeType Number 获取节点类型 nodeValue String 节点的值(注意:文本也是节点) 2.inn ...
虚拟dom与diff算法分析
好文集合: 深入浅出React(四):虚拟DOM Diff算法解析全面理解虚拟DOM,实现虚拟DOM
窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？
引言你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么在之前,React和Em ...
jQuery学习之路（2）-DOM操作
▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作看 ...

随机推荐

洛谷P3373 【模板】线段树 2
P3373 [模板]线段树 2 47通过 186提交题目提供者HansBug 标签难度提高+/省选- 提交讨论题解最新讨论为啥WA(TAT) 题目描述如题,已知一个数列,你需要进行 ...
C# 自定义序列化问题
public class overdue { public int overdueTimes { get; set; } /// <summary ...
用shell脚本切分task_list，并分别执行的脚本
#/bin/sh TASK_LIST=$ len=`wc -l $TASK_LIST | awk '{print $1}'` #noExce(){ ) ))'p' $TASK_LIST > $T ...
Nginx服务测试时的一些配置:wireshark、常用搜索URL格式、关闭防火墙、siege
wrieshark sudo yum install wireshark-gnome sudo wireshar (以root启动,否则看不到网卡) 网站URL格式以查询lumia为例 google ...
循序渐进Python3（三） -- 1 -- 内置函数
对函数有了一定了解之后,我们来看看Python的内置函数.下图是Python所有的内置函数,共68个.
The certificate used to sign “AppName” has either expired or has been revoked. An updated certificate is required to sign and install the application解决
问题 The certificate used to sign "AppName" has either expired or has been revoked. An updat ...
改进的SQL Express LocalDBB
介绍一种改进的SQL Express LocalDB LocalDB专门为开发商.它是非常容易安装,无需管理,但它提供了相同的T-SQL语言,编程表面和客户端供应商定期的SQL Server Expr ...
GridView中 LinkButton两种方式
<asp:TemplateField HeaderText="操作" ShowHeader="False"> <ItemTemplate> ...
Java 基础知识总结 (四、String)
四.String public final class String extends Object implements Serializable, Comparable<String>, ...
Scrum会议10.20
Scrum会议组名称:好好学习项目名称:记账本参会成员:林莉(Master)胡丽娜汪东涵宫丽君时间:2016.10.20 已完成内容: 1.理解项目和代码. 2.讨论新功能. 计划完成 ...

HTML之DOM

HTML之DOM的更多相关文章

随机推荐

热门专题