一、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的更多相关文章

  1. Python 【第八章】：JavaScript 、Dom、jQuery

    JavaScript 放置位置 body内部最下面,这样可以避免javascript链接失效时,长时间加载不到页面html内容 变量: var a =123 局部变量 a = 123 全局变量 作用域 ...

  2. 一周一话题之四（JavaScript、Dom、jQuery全面复习总结<jQuery篇>）

    -->目录导航 一. 初探Jquery 1. 介绍 2. 基础 二. Jquery操作 1. jQuery页面加载 2. 选择器 3. 操作Dom 三. Jquery进阶 1. 隐式迭代与链式编 ...

  3. Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode

    Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode Element DOM Tree jQuery pl ...

  4. dom变成jquery对象 先获取dom对象 然后通过$()转换成jquery对象

    dom变成jquery对象   先获取dom对象 然后通过$()转换成jquery对象

  5. dom与jquery互相转换

    /*取得<input>标签中的value属性的内容[dom对象->jquery对象] var inputElement = document.getElementById(" ...

  6. jquery 第二节 Dom和jQuery的互相转换

    1.Dom转jQuery Dom对象: var v_dom = document.getElementById("name"); 转换: jQuery对象:    var v_jq ...

  7. dom&JavaScript&Jquery

    目录 dom&JavaScript&Jquery 建节点 添加节点 删除节点: 替换节点: 属性节点 获取值操作 class的操作 指定CSS操作 操作节点 获取input用户输入 操 ...

  8. jQuery操作Dom、jQuery事件机制、jQuery补充部分

    jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要 ...

  9. 对比DOM和jQuery完善度

    <input type="text" id="username" value="请输入你的用户名"> <script> ...

  10. jQuery基础学习2——DOM和jQuery对象

    <body> <h3>例子</h3> <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> < ...

随机推荐

  1. css 溢出文本显示省略号

    这个标题其实已经是一个老生常谈的问题了.很多时候,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没有这么宽,这时候最正常的做法就是 让超出宽度的部分文字用省略号(…)来表示.通常做法是网 ...

  2. 使用POI插件，提取导出excel的工具类

    在网站的不同的模块都需要使用到导入导出excel的功能,我们就需要写一个通用的工具类ExcelUtil. 我的思路:首先,导入和导出的Excel的文件格式固定:主标题,二级标题,数据行(姑且就这么叫) ...

  3. VS2010中<无法打开包括文件:“iostream.h”:>错误解决方法

    C/C++ code? 1 2 #include <iostream.h> 改为: C/C++ code? 1 2 #include <iostream> using name ...

  4. 使用SALT-API进入集成开发的简单样例

    测试的时候,可以CURL -K,但真正作集成的时候,却是不可以的. 必须,不可以让TOKEN满天飞吧. 现在进入这个阶段了.写个样例先: import salt import salt.auth im ...

  5. 采购术语PR、PO、RFQ、RFI、SOW、BOM、JIT、VMI、MRO 是什么意思

    PO:Purchase Order Form 采购订单,公司对外使用,还有个PR: ,公司内部使用的采购申请单 PR (Purchase Requirent) 请购单,采购申请单,代表企业内部的申请需 ...

  6. format %x invalid or incompatible with argument问题解决方法

    现在还有好多朋友在用Protel 99se来画图,可是在现在的双核或四核电脑上运行Protel出现错误并且弹出对话框:“format '%x' invalid or incompatible with ...

  7. QThread居然有一个setEventDispatcher函数

    http://doc.qt.io/qt-5/qthread.html#setEventDispatcher 难道QtService里不能执行tr函数,是需要手动安装事件发送器?

  8. c++ 10

    一.二叉树 1.基本特征 1)树型结构的最简模型,每个节点最多有两个子节点--左子节点和右子节点. 2)单根性,每个子节点有且仅有一个父节点,整棵树有且仅有一个根节点. 3)递归性,以任何一个节点为根 ...

  9. 基于微信公众平台的开发（清华大学第二讲）_Alien的笔记

    基于微信公众平台的开发(清华大学第二讲)_Alien的笔记 基于微信公众平台的开发(清华大学第二讲)

  10. Linux 程序设计的一些优化措施

    Linux 程序设计的一些优化措施 这些知识是在平常的阅读中,零散的获得的,自己总结了一下,分享在这里 全局变量VS函数参数 全局变量在Linux下的驱动编程里边,用的是非常多,例如中断服务函数ISR ...