前端开发之JavaScript HTML DOM理论篇二
主要内容：
一、DOM元素
主要操作有添加、删除和替换HTML元素
1、创建新的HTML元素
（1）方法一： appendChild() 追加
如需向 HTML DOM 添加新元素，您首先必须创建该元素，然后把它追加到已有的元素上。
实例和解析：
<div id="box1">
<p id="p1">This is first paragraph.</p>
<p id="p1">This is second paragraph.</p>
</div> <script>
// 创建一个新的<p>元素
var para = document.createElement("p"); // 如需向<p>元素添加文本，你要首先创建文本节点，以下这句即为创建文本节点
var node = document.createTextNode("This is new!"); // 接下来，你要将文本节点追加到<p>元素中
para.appendChild(node); // 最后，要向已有的元素中追加这个元素，先查找到这个元素
var element = document.getElementById("box1"); // 将新元素添加到已有的元素中
element.appendChild(para); </script>
（2）方法二：insertBefore(new,old) 插入
实例：
<div id="box1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div> <script>
var para = document.createElement("p");// 创建一个新的<p>元素
var node = document.createTextNode("This is another one!"); // 创建文本节点
para.appendChild(node); // 向<p>中追加文本节点 var element = document.getElementById("box");// 查找<p>节点的父节点
var child = document.getElementById("p1"); // 找到<p>节点的同胞节点
element.insertBefore(para,child);// 将新创建的<p>节点插入到id为p1的同胞节点之前
2、删除已有的HTML元素
如需删除HTML元素，你需要知道该元素的父元素。
实例：
<div id="box1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div> <script>
// 获取父元素
var parent = document.getElementById("box1");
// 获取要删除的元素
var child = document.getElementById("p1");
// 删除该元素
parent.removeChild(child);
</script>
简略方法：找到您需要删除的子元素，然后使用 parentNode 属性来查找其父元素
var child = document.getElementById("p1");
child.parentNode.removeChild(child); // child.parentNode表示child的父元素
3、替换HTML元素
如需替换 HTML DOM 中的元素，请使用 replaceChild(new,old) 方法：
<div id="box1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div> <script>
var para = document.createElement("p");
var node = document.createTextNode(" This is new new !");
para.appendChild(node); var parent = document.getElementById("box1");
var child = document.getElementById("p2");
parent.replaceChild(para,child);
</script>
二、HTML DOM事件
HTML DOM 允许 JavaScript 对 HTML 事件作出反应。
1、对事件做出反应
当事件发生时，可以执行 JavaScript，比如当用户点击一个 HTML 元素时。
如需在用户点击某个元素时执行代码，请把 JavaScript 代码添加到 HTML 事件属性中：
onclick = javaScript
实例：
// 当用户点击时，会改变 <h2> 元素的内容
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<h2 onclick = "this.innerHTML='hello!'">请点击这段文本！有惊喜...</h2>
</body>
</html>
另一种写法 --- 从事件处理程序中调用函数
<!DOCTYPE HTMLl>
<html lang="en">
<head>
<meta charset="utf-8">
<script>
function changeText(id){
id = innnerHTML = "hello world!";
}
</script>
</head>
<body>
<h2 onclick="changetext(this)">请点击这段文本!</h2>
</body>
</html>
2、HTML 事件属性
如需向 HTML 元素分配事件，您可以使用事件属性。
实例 --- 当点击按钮时，会执行名为 displayDate 的函数。
<!DOCTYPE html>
<html>
<body> <p>点击按钮来执行 <strong>displayDate()</strong> 函数。</p> <button onclick="displayDate()">试一试</button>
<p id="demo"></p> </body>
<script>
function displayDate()
{
document.getElementById("demo").innerHTML = Date();
}
</script>
</html>
3、使用 HTML DOM 来分配事件
HTML DOM 允许您使用 JavaScript 向 HTML 元素分配事件。
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body> <p>点击按钮来执行 <b>displayDate()</b> 函数。</p>
<button id=“myBtn”>试一试</button> <p id="demo"></p> </body>
<script>
document.getElementById("myBtn").onclick=function(){
displayDate();
}
function displayDate(){
document.getElementbyId("demo").innerHTML = Date();
}
</script>
</html>
4、onload 和 onunload 事件
当用户进入或离开页面时，会触发 onload 和 onunload 事件。
onload 事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。
onload 和 onunload 事件可用于处理 cookies。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body onload="checkCookies()"> <p>弹出的提示框会告诉你浏览器是否已启用 cookie。</p>
</body>
<script>
function checkCookies(){
if(navigator.cookieEnabled == true)
{
alert("Cookies are enabled");
}
else
{
alert("Cookies are not enabled");
}
}
</script>
</html>
5、onchange 事件
onchange事件常用于输入字段的验证。
实例 --- 当用户改变输入字段的内容时，将调用 upperCase() 函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body> 请输入你的英文名：<input type="text" id="fname" onchange="myFunction()">
<p>当你离开输入框时，被触发的函数会把你输入的文本转换为大写字母。</p>
</body>
<script>
function myFunction(){
var a = document.getElementById("fname");
a.value = a.value.toUpperCase();
}
</script>
</html>
6、onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在鼠标指针移动到或离开元素时触发函数。
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
</body>
<div
onmouseover="mOver(this)"
onmouseout="mOut(this)"
style="background-color:greenyellow;width:200px;height:50px;padding-top:25px;text-align:center;">
Mouse Over Me
</div>
<script>
function mOver(obj){
obj.innerHTML = "Thank you!";
obj.style.backgroundColor = "red";
}
function mOut(obj){
obj.innerHTML = "move here!";
obj.style.backgroundColor = "greenyellow";
}
</script>
</html>
7、onmousedown、onmouseup 以及 onclick 事件
onmousedown、onmouseup 以及 onclick 事件是鼠标点击的全部过程。首先当某个鼠标按钮被点击时，触发 onmousedown 事件，
然后，当鼠标按钮被松开时，会触发 onmouseup 事件，最后，当鼠标点击完成时，触发 onclick 事件。
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;">
点击这里
</div>
</body>
<script>
function mDown(obj){
obj.style.backgroundColor = "green";
obj.innerHTML = "松开鼠标";
}
function mUp(obj){
obj.style.backgroundColor = "yellow";
obj.innerHTML = "谢谢！";
}
</script>
</html>
前端开发之JavaScript HTML DOM理论篇二的更多相关文章
- 前端开发之JavaScript HTML DOM理论篇一
主要内容: 1.DOM简介 2.DOM 节点 3.DOM 方法和属性 4.DOM 访问和修改 一.DOM简介 1.什么是 DOM? DOM 是 W3C(万维网联盟)的标准. DOM 定义了访问 HTM ...
- 前端开发之JavaScript HTML DOM实战篇
实战案例一: “灯泡发光” <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- 前端开发之JavaScript篇
一.JavaScript介绍 前端三剑客之JavaScript,简称js,可能是这三个里面最难的一个了.很早以前,市面上流通着三种js版本,为了统一,ECMA(欧洲计算机制造协会)定义了规范的版本, ...
- 前端开发之JavaScript基础篇一
主要内容: 1.JavaScript介绍 2.JavaScript的引入方法和输出及注释 3.javaScript变量和命名规则 4.五种基本数据类型 5.运算符 6.字符串处理 7.数据类型转换 ...
- 前端开发之javascript BOM篇
主要内容: 1.BOM输出 2.BOM的对象 3.client的相关属性 4.offset的相关属性 5.scroll的相关属性 前情提要: 何谓BOM? 所谓 BOM 指的就是浏览器对象模型 Bro ...
- 前端开发之JavaScript基础篇三
主要内容: 1.创建对象的几种方式 2.JavaScript内置对象 3.JavaScript错误--Throw.Try 和 Catch 4.JavaScript 表单验证 一.创建对象的几种方式 1 ...
- 前端开发之JavaScript基础篇四
主要内容: 1.定时器 2.正则表达式入门 3.元字符 4.正则表达式实战运用 一.定时器 javaScript里主要使用两种定时器,分别是:setInterval()和setTimeout(). 1 ...
- 前端开发之JavaScript基础篇二
主要内容: 1.流程控制条件语句和switch语句 2.for循环和while循环 3.Break语句和Continue语句 4.数组和数组常用方法 5.函数 6.对象 一.流程控制条件语句和swit ...
- 前端开发之BOM和DOM（转载）
BOM BOM:是指浏览器对象模型,它使JavaScript可以和浏览器进行交互. 1,navigator对象:浏览器对象,通过这个对象可以判定用户所使用的浏览器,包含了浏览器相关信息. naviga ...
随机推荐
- VS2013下的64位与32位程序配置
VS2013下的64位与32位程序配置 在Windows 7 64bit和Visual Studio 2013下生成64位程序. 新建一个Visual Studio Win32 Console项目 ...
- CAS原理分析
在JDK 5之前Java语言是靠synchronized关键字保证同步的,这会导致有锁(后面的章节还会谈到锁). 锁机制存在以下问题: (1)在多线程竞争下,加锁.释放锁会导致比较多的上下文切换和调度 ...
- Python学习系列（九）(IO与异常处理）
Python学习系列(九)(IO与异常处理) Python学习系列(八)( 面向对象基础) 一,存储器 1,Python提供一个标准的模块,称为pickle,使用它既可以在一个文件中存储任何Pytho ...
- linux下如何添加一个用户并且让用户获得root权限【转载】
原文:http://www.cnblogs.com/johnw/p/5499442.html 1.添加用户,首先用adduser命令添加一个普通用户,命令如下: #adduser tommy //添加 ...
- centos6.6安装SVN服务器（2015/3/7）
一.安装#yum install subversion 判断是否安装成功 [root@]# svnserve --version有了SVN软件后还需要建立SVN库.#mkdir /opt/svn/ ...
- Oracle删除主键约束的同时删除索引
继续昨天的折腾(Oracle修改主键约束),删掉主键约束后,发现唯一索引并未删掉.仔细看了下,主键约束跟唯一索引名称不一样,这说明是先创建了唯一索引,后创建的主键约束.我们来试验下: SQL> ...
- hyperledger fabric共识组件分析 --背书策略
在fabric中,共识过程意味着多个节点对于某一批交易的发生顺序.合法性以及它们对账本状态的更新结构达成一致的观点.满足共识则意味着多个节点可以始终保证相同的状态,对于以同样顺序到达的交易可以进行一致 ...
- Unit04： 实战技巧 、 登录
Unit04: 实战技巧 . 登录 使用注解方式简化Unit04的小程序. 1. 基于注解的springmvc应用程序的开发 (1)编程步骤 step1. 导包. step2. 添加spring配置文 ...
- Fluent NHibernate AutoMapping Conventions
前言 使用nhibernate在项目中不管是代码或者xml文件映射方式,如果项目较大编写映射也应该算一笔大的工作量了,使用Fluent Nhibernate自己编写映射规则,将从conventions ...
- Maven构建项目速度太慢的解决办法 Maven 调试
Apache Maven是当今非常流行的项目构建和管理工具,它把开发人员从繁杂的项目依赖关系处理事务中解放出来,完全自动化管理依赖问题.在Web应用开发过程中,通常我们会用到maven的archety ...