首页 > 代码库 > DOM和jQuery

DOM和jQuery

2024-08-10 23:48:40   216人阅读

1、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 属性是属性节点
  • 注释是注释节点

     

1 <html>2   <head>3     <title>DOM 教程</title>4   </head>5   <body>6     <h1>DOM 第一课</h1>7     <p>Hello world!</p>8   </body>9 </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 表单被提交时
  •                 当用户触发按键时

           

1     <script>2         function changetext(id){3             id.innerHTML = ‘Hello!‘;4         }5     </script>6     <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>元素的值。

DOM和jQuery


联系
我们