好贷网好贷款

JavaScript学习笔记(二)---HTML DOM

发布时间:2016-12-5 12:36:23 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"JavaScript学习笔记(二)---HTML DOM",主要涉及到JavaScript学习笔记(二)---HTML DOM方面的内容,对于JavaScript学习笔记(二)---HTML DOM感兴趣的同学可以参考一下。

通过HTML DOM(文档对象模型),可以访问JavaScript HTML 文档的所有元素。当玩野被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。 HTML DOM 模型被构造为对象的树。 HTML DOM 树 通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的HTML。 1)JavaScript能够改变页面中所有HTML元素 2)JavaScript能够改变页面中所有HTML属性 3)JavaScript能够改变页面中所有CSS样式 4)JavaScript能够对页面中的所有时间做出反应 查找HTML元素 你需要操作HTML元素之前,你必须先找到该元素。有三种方法来做这件事: 1)通过 id 找到 HTML 元素 var x=document.getElementById("intro"); 2)通过标签名找到 HTML 元素 var x=document.getElementById("main"); var y=x.getElementsByTagName("p"); 3)通过类名找到 HTML 元素 改变HTML的内容 一、改变HTML输出流 从学习笔记(一)中的第二点已经有提到,改变 HTML 的输出流可以通过document.write()  <script> document.write(Date()); </script> 以上的部分代码是向 HTML 输出流输出当前的时间。 二|改变HTML内容 从学习笔记(一)中的第二点已经有提到,改变 HTML 的内容可以通过使用innerHTML属性。 如需改变HTML元素的内容,使用这个语法: document.getElementById(id).innerHTML=new HTML 三、改变HTML属性 如需改变 HTML 元素属性,使用这个语法: document.getElementById(id).attribute=new value 改变CSS样式 改变HTML样式 如需改变 HTML 元素样式,使用这个语法: document.getElementById(id).style.property=new style 例子 下面的例子会改变 < p > 元素的样式: <p id="p2">Hello World!</p> <script> document.getElementById("p2").style.color="blue"; </script> HTML DOM 事件 HTML DOM 事件是JavaScript 有能力对HTML 事件作出反应。 对事件作出反应 如需在用户点击某个元素师执行代码,向一个 HTML 事件属性添加 JavaScript 代码: onclick=JavaScript 例子: 当用户在 <h1 > 元素上点击时,会改变其内容: <h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1> HTML 事件属性 如需向HTML 元素分配事件,可以使用事件属性。 向 button 元素分配 onclick 事件: <button onclick="displayDate()">点击这里</button> 使用 HTMLDOM 来分配事件 HTML DOM 允许通过使用JavaScript 来向 HTML 元素分配事件: 向 button 元素分配 onclick 事件: <script> document.getElementById("myBtn").onclick=function(){displayDate()}; </script> 上面的例子中,名为displayDate 的函数被分配给 id = “myButn” 的 HTML 元素。当按钮被点击时,会执行函数。 onload 和 onunload 事件 onload 和 onunload 事件会在用户进入或离开页面是被触发。 onload 和 onunload 事件可用于处理cookie。 <body onload="checkCookies()"> onchane 事件 onchange 事件常结合输入字段的验证来使用。 onmouseover 和 onmouseout 事件 onmouseover 和 onmouseover 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素师触发函数。 onmousedown、onmouseup 以及 onclick 事件 onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。 HTML DOM 元素(节点) 创建新的 HTML 元素 如需向 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 element=document.getElementById("div1"); element.appendChild(para); </script> 删除已有的 HTML 元素 如需删除 HTML 元素,您必须首先获得该元素的父元素: <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>

上一篇:phpmyadmin的初始账号密码是多少
下一篇:搭建eclipse的nodejs开发环境

相关文章

相关评论