DOM和jQuery

一、DOM

在学习DOM之前你应该已经具备了以下三个知识点的应用：HTML CSS javascript

DOM 是 W3C（万维网联盟）的标准。

W3C DOM 标准被分为 3 个不同的部分：

核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

在下面的的介绍中，我们会针对html DOM进行举例和验证，HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

 <html>
   <head>
     <title>DOM 教程</title>
   </head>
   <body>
     <h1>DOM 第一课</h1>
     <p>Hello world!</p>
   </body>
 </html>

在上面的 HTML 中：

<html> 节点没有父节点；它是根节点
<head> 和 <body> 的父节点是 <html> 节点
文本节点 "Hello world!" 的父节点是 <p> 节点

并且：

<html> 节点拥有两个子节点：<head> 和 <body>
<head> 节点拥有一个子节点：<title> 节点
<title> 节点也拥有一个子节点：文本节点 "DOM 教程"
<h1> 和 <p> 节点是同胞节点，同时也是 <body> 的子节点

并且：

<head> 元素是 <html> 元素的首个子节点
<body> 元素是 <html> 元素的最后一个子节点
<h1> 元素是 <body> 元素的首个子节点
<p> 元素是 <body> 元素的最后一个子节点

一些 DOM 对象方法

这里提供一些您将在本教程中学到的常用方法：

方法	描述
getElementById()	返回带有指定 ID 的元素。
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。
appendChild()	把新的子节点添加到指定节点。
removeChild()	删除子节点。
replaceChild()	替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点。
createAttribute()	创建属性节点。
createElement()	创建元素节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。
setAttribute()	把指定属性设置或修为指定的值。

　　编程接口:

　　可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。

所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。

方法是您能够执行的动作（比如添加或修改元素）。

属性是您能够获取或设置的值（比如节点的名称或内容）.

innerHTML 属性

<html>
<body>
 
<p id="intro">Hello World!</p>
 
<script>
var txt1=document.getElementById("intro").innerHTML;
var txt2=
document.write(txt);
</script>
 
</body>
</html>

在上面的例子中，getElementById 是一个方法，而 innerHTML 是属性。

innerHTML 属性可用于获取或改变任意 HTML 元素，包括 <html> 和 <body>。

对事件作出反应

当事件发生时，可以执行 JavaScript，比如当用户点击一个 HTML 元素时。

如需在用户点击某个元素时执行代码，请把 JavaScript 代码添加到 HTML 事件属性中：onclick=JavaScript

HTML 事件的例子：

当用户点击鼠标时
当网页已加载时
当图片已加载时
当鼠标移动到元素上时
当输入字段被改变时
当 HTML 表单被提交时
当用户触发按键时

     <script>
         function changetext(id){
             id.innerHTML = 'Hello!';
         }
     </script>
     <h1 onclick="changetext(this)" class="curser">请点击这段文本！</h1>

这段代码实现的是当你点击文本的时候，<h1>中的文本节点内容会变成Hello!

onchange 事件 :

 function myfunction(){
            var x = document.getElementById('fname');
            x.value= x.value.toUpperCase();
        }
 
 请输入你的英文名：<input type="text" id="fname" onchange="myfunction()" />

这段代码实现的是当你输入自己的英文名，并移出文本框的时候，英文名会变成大写。

getElementsByTagName：

    <p>Hello Word!</p>
    <p>Dom 很有用</p>
    <script>
        x = document.getElementsByTagName('p');
        document.write("第二段的 innerHTML 是: " + x[1].innerHTML);
    </script>

这段代码使用的是另外一个方法，返回的是节点列表，然后使用下标获取某个<p>元素的值。

二、jQuery:

当你学过jQuery之后，你就会发现，要实现上面的功能是很简单的，比如要找到id为i1的标签div，在jQuery中只需要执行$('#i1')就可以，

DOM和jQuery的更多相关文章

Python 【第八章】：JavaScript 、Dom、jQuery
JavaScript 放置位置 body内部最下面,这样可以避免javascript链接失效时,长时间加载不到页面html内容变量: var a =123 局部变量 a = 123 全局变量作用域 ...
一周一话题之四（JavaScript、Dom、jQuery全面复习总结<jQuery篇>）
-->目录导航一. 初探Jquery 1. 介绍 2. 基础二. Jquery操作 1. jQuery页面加载 2. 选择器 3. 操作Dom 三. Jquery进阶 1. 隐式迭代与链式编 ...
Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode
Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode Element DOM Tree jQuery pl ...
dom变成jquery对象先获取dom对象然后通过$()转换成jquery对象
dom变成jquery对象先获取dom对象然后通过$()转换成jquery对象
dom与jquery互相转换
/*取得<input>标签中的value属性的内容[dom对象->jquery对象] var inputElement = document.getElementById(" ...
jquery 第二节 Dom和jQuery的互相转换
1.Dom转jQuery Dom对象: var v_dom = document.getElementById("name"); 转换: jQuery对象: var v_jq ...
dom&JavaScript&Jquery
目录 dom&JavaScript&Jquery 建节点添加节点删除节点: 替换节点: 属性节点获取值操作 class的操作指定CSS操作操作节点获取input用户输入操 ...
jQuery操作Dom、jQuery事件机制、jQuery补充部分
jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要 ...
对比DOM和jQuery完善度
<input type="text" id="username" value="请输入你的用户名"> <script> ...
jQuery基础学习2——DOM和jQuery对象
<body> <h3>例子</h3> <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> < ...

随机推荐

Hdu1093
#include <stdio.h> int main() { int T,n; ; while(scanf("%d",&T)!=EOF){ while(sca ...
JavaWeb学习笔记--2.3内置对象
参考资料:http://www.cnblogs.com/qqnnhhbb/archive/2007/10/16/926234.html 目录 1. JSP内置对象分类2. 属性保存范围 2.1 pag ...
Office2007设置无格式粘贴
打开Word 2007,按Alt+F11.这时会出现一个Visual Basic编辑窗口.如图所示: 上图中左上方,鼠标右击Normal→插入→模块,出现下图: 双击"模块1&q ...
position: absolute;绝对定位水平居中问题
position: absolute;绝对定位水平居中问题用CSS让元素居中显示并不是件很简单的事情—同样的合法CSS居中设置在不同浏览器中的表现行为却各有千秋.让我们先来看一下CSS中常见的几种让 ...
BZOJ 2324 营救皮卡丘
http://www.lydsy.com/JudgeOnline/problem.php?id=2324 思路:最小费用最大流考虑设数组d[k][i][j],代表只用前k个城市,i到j的最短路然后 ...
InnoSetup中枚举出INI文件的所有sections和键值
原文 http://blog.chinaunix.net/uid-23480430-id-3016899.html InnoSetup支持一些INI文件操作函数, 例如GetIniString,Ini ...
五子棋AI
下面是一些参考资料,打算看看: http://www.cnblogs.com/Blog_SivenZhang/archive/2010/06/13/1757677.html http://blog.c ...
页和区 sql server
原文地址:http://msdn.microsoft.com/zh-cn/library/ms190969.aspx SQL Server 中数据存储的基本单位是页.为数据库中的数据文件(.mdf 或 ...
linux使用mysql的命令
1.连接到mysql服务器的命令 mysql -h 服务器主机地址 -u 用户名 -p 用户密码例:mysql -h 192.168.1.1 -u root -p //指定服务器的主机地址和用户 ...
04747_Java语言程序设计（一）_第10章_网络与数据库编程基础
例10.1说明InetAddress类的用法的应用程序. public class Example10_1 { public static void main(String args[]) { try ...

DOM和jQuery

一些 DOM 对象方法

编程接口:

innerHTML 属性

DOM和jQuery的更多相关文章

随机推荐

热门专题

　　编程接口: