DOM和jQuery

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>元素的值。

时间: 2024-10-08 20:55:06

DOM和jQuery的相关文章

DOM与JQuery 常用属性

DOM 与 JQuery 与 HTML5 事件 DOM: document.getElementById('btn ').onclick = function(){ }; jQuery: $('#btn').click(function(){ });  ---> 添加事件没有on 对象.事件名(匿名函数); jQuery对象转DOM对象 jQuery对象[0].value(); jQuery对象.get(0).value(); this this     $(this) 获取值 DOM: .va

web前端全部课件(html5+CSS3+javascript+dom+bom+jquery+jqm+bootstrap+angular+ext+weixin+less)

一.HTML5 BASIC课件 Unit01:Web基础知识.HTML快速入门.文本 Unit02:图像和链接.表格.结构标记 Unit03:列表.表单.其他常用标记 二.CSS3 BASIC课件 Unit01:CSS 概述.CSS 语法\尺寸与边框 Unit02:框模型.背景.渐变\文本格式化-1 Unit03:文本格式化-2.表格.浮动.显示 Unit04:列表.定位 三.京东首页实战(无PPT) 四.WEB UI课件 Unit01:Photoshop基本操作.网页切图.图像优化 Unit0

dom与jquery互相转换

1 /*取得<input>标签中的value属性的内容[dom对象->jquery对象] 2 var inputElement = document.getElementById("inputID");//DOM对象 3 var $input = $(inputElement);//jQuery对象 4 var value = $input.val(); 5 alert(value); 6 */ 7 8 /*取得<div>标签中的文本内容[jquery对象

JQuery对象转dom ,dom转jQuery

jquery对象转换成 dom对象jquery提供了两种方法将一个jquery对象转换成一个dom对象,即[index]和get(index).可能有人会觉得奇怪,怎么是用下标呢,没错,jquery对象就是一个数组对象.下面代码将演示一个jquery对象转换成dom对象,再使用dom对象的方法复制代码 代码如下: var $cr=$("#cr"); //jquery对象var cr = $cr[0]; //dom对象 也可写成 var cr=$cr.get(0);alert(cr.ch

dom AND JQUERY

1.文档全部加在完毕后执行 一:$(document).ready(function(){} 二:$().ready(function(){} 三:window.onload=function(){} 2.dom转jQuery var username=document.getElementById("username"); alert(username.value); var $username=$(username); alert($username.val()); 3.jQuer

全选与反选(dom与jquery比较)

<html> <head> <title>全选或反选(dom)</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <script> var divCheckbox; function init(){ var allCheckbox = document.getElementById("

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

jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要修改的属性,就会进行修改,如果没有,直接添加 例:$("a").attr("href","http://www.baidu.com"); 修改多个属性值: //attr(obj) $(“img”).attr({ “title”: ”文件名称”, “s

python_way day16 JavaScirpt(re)、 DOM 、 jQuery、

Python_way day16 1.Dom  (找到html中的标签) 2.Javascirpt(正则) 3.jQuery(1.10,1.12-兼容性好,2.0.以后放弃了ie9以下) - 封装了Dom & JavaScript 一.DOM 1.查找元素 直接查找 document.getElementById 根据ID获取一个标签 --->这里是获取一个标签中间没有s document.getElementsByName 根据name属性获取标签集合 document.getElemen

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

1 <body> 2 <h3>例子</h3> 3 <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> 4 <ul> 5 <li id="apple">苹果</li> 6 <li>橘子</li> 7 <li>菠萝</li> 8 </ul> 9 </body> 可以通过JavaScr

Javascript、Dom、JQuery

1.Javascript JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果.通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的. 1.1 存在形式 1 1.文件形式 2 <script src="../jquery-2.2.0.js" type="text/javascript"></script> 3 2.嵌入HTML中 4 &l