JavaScript HTML DOM
HTML DOM (文档对象模型)当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。 HTML DOM 模型被构造为对象的树: HTML DOM 树通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。
查找 HTML 元素通常,通过 JavaScript,您需要操作 HTML 元素。 为了做到这件事情,您必须首先找到该元素。有三种方法来做这件事:
通过 id 查找 HTML 元素在 DOM 中查找 HTML 元素的最简单的方法,是通过使用元素的 id。 本例查找 id="intro" 元素: 实例var x=document.getElementById("intro");
如果找到该元素,则该方法将以对象(在 x 中)的形式返回该元素。 如果未找到该元素,则 x 将包含 null。 通过标签名查找 HTML 元素本例查找 id="main" 的元素,然后查找 id="main" 元素中的所有 <p> 元素: 实例var x=document.getElementById("main");
通过类名找到 HTML 元素本例通过 getElementsByClassName 函数来查找 class="intro" 的元素: 实例var x=document.getElementsByClassName("intro");
HTML DOM 教程在本教程接下来的篇幅中,您将学到:
|
改变 HTML 输出流JavaScript 能够创建动态的 HTML 内容: 今天的日期是: Wed Nov 28 2018 16:45:52 GMT+0800 (中国标准时间) 在 JavaScript 中,document.write() 可用于直接向 HTML 输出流写内容。 实例<!DOCTYPE html>
改变 HTML 内容修改 HTML 内容的最简单的方法是使用 innerHTML 属性。 如需改变 HTML 元素的内容,请使用这个语法: document.getElementById(id).innerHTML=新的 HTML 本例改变了 <p>元素的内容: 实例<html> 改变 HTML 属性如需改变 HTML 元素的属性,请使用这个语法: document.getElementById(id).attribute=新属性值 本例改变了 <img> 元素的 src 属性: 实例<!DOCTYPE html>
|
改变 HTML 样式如需改变 HTML 元素的样式,请使用这个语法: document.getElementById(id).style.property=新样式 下面的例子会改变 <p> 元素的样式: 实例document.getElementById("p2").style.color="blue"; 使用事件HTML DOM 允许我们通过触发事件来执行代码。 比如以下事件:
在接下来的章节,你会学到更多关于事件的知识。 本例改变了 id="id1" 的 HTML 元素的样式,当用户点击按钮时: 实例<!DOCTYPE html> |
JavaScript HTML DOM 事件
对事件做出反应我们可以在事件发生时执行 JavaScript,比如当用户在 HTML 元素上点击时。 如需在用户点击某个元素时执行代码,请向一个 HTML 事件属性添加 JavaScript 代码: οnclick=JavaScript HTML 事件的例子:
在本例中,当用户在 <h1> 元素上点击时,会改变其内容: 实例<!DOCTYPE html>
<!DOCTYPE html>
HTML 事件属性如需向 HTML 元素分配 事件,您可以使用事件属性。 实例向 button 元素分配 onclick 事件: <button οnclick="displayDate()">点这里</button>
使用 HTML DOM 来分配事件HTML DOM 允许您使用 JavaScript 来向 HTML 元素分配事件: 实例向 button 元素分配 onclick 事件: <script>
在上面的例子中,名为 displayDate 的函数被分配给 id="myBtn" 的 HTML 元素。 按钮点击时Javascript函数将会被执行。 onload 和 onunload 事件onload 和 onunload 事件会在用户进入或离开页面时被触发。 onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。 onload 和 onunload 事件可用于处理 cookie。 实例<body οnlοad="checkCookies()">
onchange 事件onchange 事件常结合对输入字段的验证来使用。 下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时,会调用 upperCase() 函数。 实例<input type="text" id="fname" οnchange="upperCase()">
onmouseover 和 onmouseout 事件onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。 onmousedown、onmouseup 以及 onclick 事件onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。 更多实例onmousedown 和onmouseup onload onfocus 鼠标事件 |
JavaScript HTML DOM EventListeneraddEventListener() 方法实例在用户点击按钮时触发监听事件: document.getElementById("myBtn").addEventListener("click", displayDate); addEventListener() 方法用于向指定元素添加事件句柄。 addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。 你可以向一个元素添加多个事件句柄。 你可以向同个元素添加多个同类型的事件句柄,如:两个 "click" 事件。 你可以向任何 DOM 对象添加事件监听,不仅仅是 HTML 元素。如: window 对象。 addEventListener() 方法可以更简单的控制事件(冒泡与捕获)。 当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来,可读性更强, 在没有控制HTML标记时也可以添加事件监听。 你可以使用 removeEventListener() 方法来移除事件的监听。 语法element.addEventListener(event, function, useCapture); 第一个参数是事件的类型 (如 "click" 或 "mousedown"). 第二个参数是事件触发后调用的函数。 第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
向原元素添加事件句柄当用户点击元素时弹出 "Hello World!" : element.addEventListener("click", function(){ alert("Hello World!"); });
你可以使用函数名,来引用外部函数:
当用户点击元素时弹出 "Hello World!" : element.addEventListener("click", myFunction); 向同一个元素中添加多个事件句柄addEventListener() 方法允许向同一个元素添加多个事件,且不会覆盖已存在的事件:
element.addEventListener("click", myFunction);
你可以向同个元素添加不同类型的事件: 实例element.addEventListener("mouseover", myFunction);
向 Window 对象添加事件句柄addEventListener() 方法允许你在 HTML DOM 对象添加事件监听, HTML DOM 对象如: HTML 元素, HTML 文档, window 对象。或者其他支出的事件对象如: xmlHttpRequest 对象。 实例当用户重置窗口大小时添加事件监听: window.addEventListener("resize", function(){
传递参数当传递参数值时,使用"匿名函数"调用带参数的函数: 实例element.addEventListener("click", function(){ myFunction(p1, p2); });
事件冒泡或事件捕获?事件传递有两种方式:冒泡与捕获。 事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中,用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢? 在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即: <p> 元素的点击事件先触发,然后会触发 <div> 元素的点击事件。 在 捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即: <div> 元素的点击事件先触发 ,然后再触发 <p> 元素的点击事件。 addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型: addEventListener(event, function, useCapture); 默认值为 false, 即冒泡传递,当值为 true 时, 事件使用捕获传递。 实例document.getElementById("myDiv").addEventListener("click", myFunction, true);
removeEventListener() 方法removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄: 实例element.removeEventListener("mousemove", myFunction);
浏览器支持表格中的数字表示支持该方法的第一个浏览器的版本号。
注意: IE 8 及更早 IE 版本,Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是,对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄: element.attachEvent(event, function); 实例跨浏览器解决方法: var x = document.getElementById("myBtn"); |
JavaScript HTML DOM 元素 (节点)
创建新的 HTML 元素 (节点) - appendChild()要创建新的 HTML 元素 (节点)需要先创建一个元素,然后在已存在的元素中添加它。 实例<div id="div1"> <p id="p1">这是一个段落。</p> <p id="p2">这是另外一个段落。</p> </div> <script> // 以下代码是用于创建 <p> 元素: var para = document.createElement("p"); // 为 <p> 元素添加文本节点: var node = document.createTextNode("这是一个新的段落。"); // 将文本节点添加到 <p> 元素中: para.appendChild(node); // 在一个已存在的元素中添加 p 元素。 查找已存在的元素: var element = document.getElementById("div1"); // 添加到已存在的元素中: element.appendChild(para); </script>
创建新的 HTML 元素 (节点) - insertBefore()以上的实例我们使用了 appendChild() 方法,它用于添加新元素到尾部。 如果我们需要将新元素添加到开始位置,可以使用 insertBefore() 方法: element.insertBefore(para, child);
移除已存在的元素要移除一个元素,你需要知道该元素的父元素。 实例<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>
替换 HTML 元素 - replaceChild()我们可以使用 replaceChild() 方法来替换 HTML DOM 中的元素。 <div id="div1"> <p id="p1">这是一个段落。</p> <p id="p2">这是另外一个段落。</p> </div> <script> var para = document.createElement("p"); var node = document.createTextNode("这是一个新的段落。"); para.appendChild(node); var parent = document.getElementById("div1"); var child = document.getElementById("p1"); parent.replaceChild(para, child); </script> |
JavaScript HTML DOM 集合(Collection)本章节介绍如何向文档中添加和移除元素(节点)。 HTMLCollection 对象getElementsByTagName() 方法返回 HTMLCollection 对象。 HTMLCollection 对象类似 HTML 元素的一个数组。 以下代码获取文档所有的 <p> 元素: 实例var x = document.getElementsByTagName("p"); 集合中的元素可以通过索引(以 0 为起始位置)来访问。
HTMLCollection 对象 length 属性HTMLCollection 对象的 length 属性定义了集合中元素的数量。 实例var myCollection = document.getElementsByTagName("p"); document.getElementById("demo").innerHTML = myCollection.length;
集合 length 属性常用于遍历集合中的元素。 实例修改所有 <p> 元素的背景颜色: var myCollection = document.getElementsByTagName("p"); var i; for (i = 0; i < myCollection.length; i++) { myCollection[i].style.backgroundColor = "red"; } 注意HTMLCollection 不是一个数组! HTMLCollection 看起来可能是一个数组,但其实不是。 你可以像数组一样,使用索引来获取元素。 HTMLCollection 无法使用数组的方法: valueOf(), pop(), push(), 或 join() 。 |
JavaScript HTML DOM 节点列表NodeList 对象是一个从文档中获取的节点列表 (集合) 。 NodeList 对象类似 HTMLCollection 对象。 一些旧版本浏览器中的方法(如:getElementsByClassName())返回的是 NodeList 对象,而不是 HTMLCollection 对象。 所有浏览器的 childNodes 属性返回的是 NodeList 对象。 大部分浏览器的 querySelectorAll() 返回 NodeList 对象。 以下代码选取了文档中所有的 <p> 节点: 实例var myNodeList = document.querySelectorAll("p"); NodeList 中的元素可以通过索引(以 0 为起始位置)来访问。
NodeList 对象 length 属性NodeList 对象 length 属性定义了节点列表中元素的数量。 实例var myNodelist = document.querySelectorAll("p"); document.getElementById("demo").innerHTML = myNodelist.length;
实例修改节点列表中所有 <p> 元素的背景颜色: var myNodelist = document.querySelectorAll("p"); var i; for (i = 0; i < myNodelist.length; i++) { myNodelist[i].style.backgroundColor = "red"; }
HTMLCollection 与 NodeList 的区别HTMLCollection 是 HTML 元素的集合。 NodeList 是一个文档节点的集合。 NodeList 与 HTMLCollection 有很多类似的地方。 NodeList 与 HTMLCollection 都与数组对象有点类似,可以使用索引 (0, 1, 2, 3, 4, ...) 来获取元素。 NodeList 与 HTMLCollection 都有 length 属性。 HTMLCollection 元素可以通过 name,id 或索引来获取。 NodeList 只能通过索引来获取。 只有 NodeList 对象有包含属性节点和文本节点。
|