专辑篇:JS HTML DOM

JavaScript HTML DOM

通过HTML DOM,可以访问JavaScript HTML文档的所有元素

HTML DOM(文档对象模型)

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model).


HTML DOM模型被构造为对象的数

通过可编程的对象模型,JavaScript获得了足够的能力来创建动态的HTML.

  • JavaScript能够改变页面中的所有HTML元素.
  • JavaScript能够改变页面中的所有HTML属性.
  • JavaScript能够改变页面的所有CSS样式.
  • JavaScript能够对页面中的所有事件作出反应.

查找HTML元素

通常,通过JavaScript,您需要操作HTML元素.
为了做到这件事,您必须首先找到该元素,有三种方法来做这件事:

  • 通过id找到HTML元素

在DOM中查找HTML元素的最简单的方法,是通过使用元素的id.
本例查找id="intro"元素:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p id="intro">你好世界!</p>
<p>该实例展示了 <b>getElementById</b> 方法!</p>
<script>
x=document.getElementById("intro");
document.write("<p>文本来自 id 为 intro 段落: " + x.innerHTML + "</p>");
</script>
</body>
</html>
  • 通过标签名找到HTML元素

本例查找id ="main"的元素,然后查找id ="main"元素中的所有p元素;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>菜鸟教程</title>
    </head>
    <body>
        <p>你好世界!</p>
        <div id="main">
            <p>DOM是非常有用的.</p>
            <p>该实例展示了<b>getElementByTagName</b>方法</p>
        </div>
        <script>
            var x = document.getElementById("main");
            var y = x.getElementsByTagName("p");
            document.write("id=main元素中的第一个段落为:"+y[0].innerHTML);
        </script>
    </body>
</html>
  • 通过类名找到HTML元素

类似:var x = document.getElementsByClassName("intro");

  • document.write不可以在文档加载后使用
只能在输出中使用document.write,如果您在文档加载后使用该方法,会覆盖整个文档.
那怎么样算是在文档输出中使用,怎么样算在文档输出后使用:
1.如果直接将doucment.write放置到script脚本,而非嵌套函数中,
则在文档加载完成前会运行该代码
2.将document.write写入函数中,那么如果有运行到脚本中的函数,
那么就是属于文档加载后输出,这样会覆盖整个文档.

JavaScript HTML DOM-改变HTML

  1. 改变HTML输出流
    document.write(Date());
  2. 改变HTML内容
    document.getElementById(id).innerHTML=新的HTML
  3. 改变HTML属性
    document.getElementById(id).attribute=新属性值
    4.改变HTML样式
    document.getElementById(id).style.property=新样式
    例:document.getElementById("p2").style.color="blue";

JavaScript HTML DOM事件

对事件作出反应:
我们可以在事件发生时执行JavaScript代码,比如当用户在HTML元素上点击时.
如需在用户点击某个元素时执行代码,请向一个HTML事件属性添加JavaScript代码:
onclick = javascript
HTML事件的例子:
当用户点击鼠标时
当网页已经加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交HTML表单时
当用户触发按键时
HTML DOM事件详解
  1. onload 和onunload事件

onload和onunload事件会在用户进入或离开页面时被触发.
onload事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本.
onload和onunload事件可以用于处理cookie.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body onload="checkCookies()">
<script>
function checkCookies(){
    if (navigator.cookieEnabled==true){
        alert("Cookies 可用")
    }
    else{
        alert("Cookies 不可用")
    }
}
</script>
<p>弹窗-提示浏览器 cookie 是否可用。</p>
</body>
</html>
onchange事件

onchange事件常结合对输入字段的验证来使用
下面是一个如何使用onchange的列子.当用户改变输入再断的内容时,会调用upperCase()函数:

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8"
        <title>
         欢迎来到私人学习课堂.
        </title>
    </head>
    <body>
        输入你的名字:<input type="text" id = "fname" onchange="myFun()">
        <p>
            当你离开输入框后,函数将被触发,将小写字母转为大写字母.
        </p>
        <script>
            function myFun(){
                var x = document.getElementById("fname");
                x.value = x.value.toUpperCase();
            }
        </script>
    </body>
</html>
onmouseover和onmouseout事件

onmouseover和onmouseout事件可用于在用户的鼠标移至HTML元素上方或移出元素时触发函数:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;
width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
    obj.innerHTML="Thank You"
}
function mOut(obj){
    obj.innerHTML="Mouse Over Me"
}
</script>
</body>
</html>
onmousedown onmouseup以及onclick事件

onmousedown,onmouseup以及onclick构成了鼠标点击事件的所有部分,首先当点击鼠标按钮时,会触发onmousedown事件,当释放鼠标按钮时,会触发onmouseup事件,最后,当完成鼠标点击时,会触发onclik事件

JavaScript HTML DOM EventListener

addEventListener()方法
举例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click", displayDate);
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}
</script>
</body>
</html
-------------------------------------
addEventListener()方法用于向指定元素添加事件句柄
addEventListener()方法添加的事件句柄不会覆盖已存在的事件句柄
你可以向一个元素添加多个事件句柄
你可以向同个元素添加多个同类型的事件监听,如两个click事件.
你可以向任何DOM对象添加事件监听,不仅仅是HTML元素,如window对象
addEventListener()方法可以更简单的控制事件(冒泡与捕获).
当你使用addEventListener()方法时,javascript从html标记中分离开来,可读性更强,在没有控制html标记时也可以添加事件监听.
可以使用removeEventListener()方法来移除事件的监听
addEventListener语法

element.addEventListener(event,function,useCapture);
第一个参数是事件的类型(如click或mousedown)
第二个参数是事件触发后调用的函数
第三个参数是个布尔值用于描述事件是冒泡还是捕获,该参数可选的.
备注:不要使用"on"前缀.例如,使用"click",而不是使用"onclick".

例:当用户点击元素时弹出"hello world":
element.addEventListener("click",function(){...});
----------------------------------------
*element*.addEventListener("click", myFunction);
function myFunction() { alert ("Hello World!");}
向同一个元素中添加多个事件句柄
addEventListener() 方法允许向同个元素添加多个事件，且不会覆盖已存在的事件：
*element*.addEventListener("click", myFunction);
*element*.addEventListener("click",mySecondFunction);
----------------------------------------
你可以向同个元素添加不同类型的事件：
*element*.addEventListener("mouseover",myFunction);
*element*.addEventListener("click",mySecondFunction);
*element*.addEventListener("mouseout",myThirdFunction);
向 Window 对象添加事件句柄
addEventListener() 方法允许你在 HTML DOM 对象添加事件监听，
 HTML DOM 对象如： HTML 元素, HTML 文档, window 对象。或者
其他支出的事件对象如: xmlHttpRequest 对象。
window.addEventListener("resize", 
   function(){    
      document.getElementById("demo").innerHTML = *sometext*;
});
传递参数
当传递参数值时，使用"匿名函数"调用带参数的函数：
*element*.addEventListener("click", 
    function(){ 
      myFunction(p1, p2); 
});
事件冒泡或事件捕获？

事件传递有两种方式：冒泡与捕获。
事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？
在 *冒泡 *中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。
在 *捕获 *中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。
addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：

addEventListener(*event*, *function*, *useCapture*);
-------------------------
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div {
    background-color: coral;
    border: 1px solid;
    padding: 50px;
}
</style>
</head>
<body>
<p>实例演示了在添加不同事件监听时，冒泡与捕获的不同。</p>
<div id="myDiv">
    <p id="myP">点击段落，我是冒泡。</p>
</div><br>
<div id="myDiv2">
    <p id="myP2">点击段落，我是捕获。 </p>
</div>
<script>
document.getElementById("myP").addEventListener("click", function() {
    alert("你点击了 P 元素!");
}, false);
document.getElementById("myDiv").addEventListener("click", function() {
    alert(" 你点击了 DIV 元素 !");
}, false);
document.getElementById("myP2").addEventListener("click", function() {
    alert("你点击了 P2 元素!");
}, true);
document.getElementById("myDiv2").addEventListener("click", function() {
    alert("你点击了 DIV2 元素 !");
}, true);
</script>
</body>

JavaScript HTML DOM元素(节点)

创建新的html元素,如需向HTML DOM添加元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>都比你好</title>
    </head>
    <body>
        <div id = "demo"></div>
        <script>
            var para = document.createElement("p");
            var node = document.createTextNode("这是一个新段落.");
            para.appendChild(node);
            var element = document.getElementById("demo");
            element.appendChild(para);
        </script>
    </body>
</html>
----------------------------------
例子解析:
这段代码创建新的<p> 元素：
var para=document.createElement("p");
如需向 <p> 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：
var node=document.createTextNode("这是一个新段落。");
然后您必须向 <p> 元素追加这个文本节点：
para.appendChild(node);
最后您必须向一个已有的元素追加这个新元素。
这段代码找到一个已有的元素：
var element=document.getElementById("div1");
以下代码在已存在的元素后添加新元素：
element.appendChild(para);

----------------------
删除已有的 HTML 元素
以下代码演示了如何删除元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<div id="div1">
    <p id="p1">这是一个段落。</p>
    <p id="p2">这是另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

</body>
</html>
--------------------------------------
实例解析 
这个 HTML 文档含有拥有两个子节点（两个 <p> 元素）的 <div> 元素：
<div id="div1"><p id="p1">这是一个段落。</p><p id="p2">这是另一个段落。</p></div>
找到 id="div1" 的元素：
var parent=document.getElementById("div1");
找到 id="p1" 的 <p> 元素：
var child=document.getElementById("p1");
从父元素中删除子元素：
parent.removeChild(child);
如果能够在不引用父元素的情况下删除某个元素，就太好了。不过很遗憾。DOM 需要清楚您需要删除的元素，以及它的父元素。
常用的解决方案：找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素：
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,222评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,455评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,720评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,568评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,696评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,879评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,028评论 3赞 409
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,773评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,220评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,550评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,697评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,360评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,002评论 3赞 315
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,782评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,010评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,433评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,587评论 2赞 350

推荐阅读更多精彩内容

  • JS中DOM0,DOM2,DOM3级事件模型解析
    声明：本文来源于http://www.webzsky.com/?p=731我只是在这里作为自己的学习笔记整理一下（...
    angryyan阅读 6,973评论 1赞 6
  • js原生态
    我们首先要明白，我们给页面添加效果用到的js到底是什么？js其实包含三部分：dom 文档对象模型 bom 浏览...
    一直以来都很好阅读 796评论 0赞 0
  • JS HTML DOM (文档对象模型)
    DOM简介 当网页加载时，浏览器会创建页面的文档对象模型（DOM）。通过DOM，JS可以对HTML实现以下操作：改...
    figure_ai阅读 511评论 0赞 1
  • 浅谈DOM的事件绑定
    事件绑定的方式 给 DOM 元素绑定事件分为两大类：在 html 中直接绑定 和 在 JavaScript 中绑定...
    Bruce_zhuan阅读 1,032评论 0赞 6
  • 天泣
    天泪潇纷飞，悠然沁春草，昨日花满盛，今昔了无痕。
    北豆阅读 188评论 0赞 1