前端开发之JavaScript HTML DOM理论篇二

主要内容：

　1、HTML DOM元素

　2、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 ...

随机推荐

eclipse 无用代码扫描工具UCDetector
本文主要介绍UCDetector(无用代码扫描工具)使用方法及局限对于沉积或多方接手开发的项目经常会遇到一坨一坨无用的代码,但一个一个类查找又相当费时,这里介绍一个eclipse插件扫描没有引用的类 ...
Linux 权限使用 777 真的好吗？
Linux 权限使用 777 真的好吗? 开发环境当然不是问题,但是会造成一个习惯,到生产时也容易经常配置成 777. 777 权限可以让你的项目出现很大安全问题.1 linux 775和777权限有 ...
hadoop之 distcp（分布式拷贝）
概述 distcp(分布式拷贝)是用于大规模集群内部和集群之间拷贝的工具. 它使用Map/Reduce实现文件分发,错误处理和恢复,以及报告生成. 它把文件和目录的列表作为map任务的输入,每个任务会 ...
callback&&callback()
如果存在回调函数就执行!这是利用了 JS &&符号的一个小技巧&& 符号在前面为假时就不会执行后面的语句了所以这个就相当于 if(callback){ callback ...
Unit03： Spring Web MVC简介、基于XML配置的MVC应用、基于注解配置的MVC应用
Unit03: Spring Web MVC简介 . 基于XML配置的MVC应用 . 基于注解配置的MVC应用 springmvc (1)springmvc是什么? 是一个mvc框架,用来简化基于mv ...
LockSupport分析
LockSupport是java.util.concurrent.locks包中的一个工具类,主要提供了一些在创建锁和同步类中用来阻塞其他线程的原始操作. 当有多个线程需要获取同一个资源的锁的时候,如 ...
局域网使用NAT进行测试第三方接口
问题分析在局域网内开发一些涉及到第三方的接口调用功能时(譬如:支付),需要对方服务器进行接口回调,接受对方发送过来的信息.问题来了,我们一般开发都是在内网,如何才能获取到外网返回的数据呢?如 ...
html5的canvas方法的总结
canvas的方法 save()保存当前环境的状态 restore() 返回之前保存过的路径状态和属性 createEvent() getContext()返回一个对象,指出访问绘图功能必要的API ...
FBString
folly/FBString.h fbstring is a drop-in replacement for std::string. The main benefit of fbstring is ...
javaweb地图定位demo
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

前端开发之JavaScript HTML DOM理论篇二

前端开发之JavaScript HTML DOM理论篇二的更多相关文章

随机推荐

热门专题