首页 > 代码库 > JavaScripts学习日记——DOM
JavaScripts学习日记——DOM
DOM Document Object Model 文档对象模型 整合js和html css.控制html文档行为.
DOM就是把页面当中所有内容全部封装成对象.
HTML文档中万物皆对象.
1.对象的分类
Document ***
Element ***
Attribute
Text
Common
以上5类对象 具有一些共同特征 抽象出了一个父类
Node
自身属性
nodeName
nodeValue
nodeType Document ==> 9 Element ==> 1
导航属性
parentNode
2.页面中获得Element对象的方式
Document
getElementById();
getELementsByTagName();
getElementsByClassName();
getElementsByName();
Element（局部中获得Element的方式）
getELementsByTagName();
getElementsByClassName();
3.事件
给Element对象附加一些事件属性.属性的类型是Function类型.这些Function属性在什么时候被运行呢?
只看属性的名称.
属性名称:
onclick ==> 单击时触发
ondblclick ==> 双击时触发
onblur ==> 失去焦点时触发
onfocus ==> 得到焦点时触发
onchange ==> 用于表单元素, 当元素被修改时触发
onkeydown ==> 当键盘按键被按下时
onmousemove ==> 当鼠标移动时触发
onmousedown ==> 当鼠标按键按下时触发
onmouseover ==> 当鼠标指向时触发
onmouseout ==> 当鼠标移出时触发
onsubmit ==> 当表单提交时触发
onload ==> 只给body标签使用.当页面加载完成后 执行.
两种添加事件的方式：
<body> <input type="button" value="http://www.mamicode.com/点我" onclick="alert(‘aaa‘);" id="abc" /><script type="text/javascript">//第一种为元素附加事件属性的方式//就是在标签上写上属性名称和 对应执行的代码 例如: onclick="alert(‘aaa‘);"//如上代码就是在为input对象附加 一个onclick的Function属性.//alert(‘aaa‘); 就是 Function的方法体.//证明如下var input = document.getElementById("abc"); alert(input.onclick);</script></body>
<body> <input type="button" value="http://www.mamicode.com/点我" id="abc" /><script type="text/javascript">//第二种为元素附加事件属性的方式var input = document.getElementById("abc");input.onclick = function(){ alert(‘bbb‘);}</script></body>
3.事件详情的获得:
我们获得事件详情要找到侦探来知道(事件Event);
如何来获得Event对象呢?
Event对象是在事件发生时被创建, 并传递给我们的事件Function中.所以我们直接使用即可.
使用示例：
<body> <input type="text" id="abc" /> <script type="text/javascript">//onkeydown 当键盘某个键按下时触发 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.//问题1? 如何获得用户按下的是哪个键呢? 找侦探问.//问题2? 如何获得侦探? 侦探在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可. var input = document.getElementById("abc");input.onkeydown = function (event,abc){ //拿到侦探之后 如何获得 事件详情(哪个键被按下呢) //alert(event.keyCode); //经过观察 回车按键对应的 keyCode是 13 if(event.keyCode == 13){ alert("表单提交啦!"); }}</script></body>
4.Event对象
属性:
keyCode
button
clientX(了解) 返回当事件被触发时，鼠标指针的水平坐标。
clientY(了解) 返回当事件被触发时，鼠标指针的垂直坐标。
方法:
preventDefault() ==> 阻止默认关联事件的发生.
stopPropergation ==> 组织事件的向下传播.
关于页面对象的增删该查
相关方法:
Document
creatElement
Element
方法
appendChild
removeChild
replaceChild
cloneNode
setAttribute(key,value)
属性
innerHTML 修改标签体.(支持直接书写html代码)
DHTML的概念 Dynamic HTML 动态网页技术
就是整合4门技术 ==> DOM HTML CSS JavaScript
用通俗的话说: DHTML就是 将我们的之前学的DOM对象进行增强.
什么是增强? 对对象来讲,增强无非就是 增加新的属性获得方法.
5.增删改查
<script type="text/javascript">//在第一个div中动态增加一个a标签. 该a标签点击之后跳转到 传智首页. function addNode(){ //1.获得 第一个div var div = document.getElementById("div_1"); //2.创建a标签 createElement==>创建一个a标签 <a></a> var eleA = document.createElement("a"); //3.为a标签添加属性 <a href="http://www.itcast.cn"></a> eleA.setAttribute("href", "http://www.itcast.cn"); //4.为a标签添加内容 <a href="http://www.itcast.cn">传智</a> eleA.innerHTML = "传智"; //5.将a标签添加到div中 div.appendChild(eleA); } //点击后 删除div区域2 function deleteNode(){ //1 获得要删除的div区域 var div = document.getElementById("div_2"); //2.获得父亲 var parent = div.parentNode; //3 由父亲操刀 parent.removeChild(div); } //点击后 替换div区域3 为一个美女 function updateNode(){ //1 获得要替换的div区域3 var div = document.getElementById("div_3"); //2创建img标签对象 <img /> var img = document.createElement("img"); //3添加属性 <img src="http://www.mamicode.com/001.jpg" /> img.setAttribute("src", "001.JPG"); //4.获得父节点 var parent = div.parentNode; //5.替换 parent.replaceChild(img, div); } //点击后 将div区域4 克隆一份 添加到页面底部 function copyNode(){ //1.获取要克隆的div var div = document.getElementById("div_4"); //2.克隆 参数为true 那么克隆时克隆所有子元素. false 只克隆自己 var div_copy = div.cloneNode(true); //3.获得父亲 var parent = div.parentNode; //4.添加 parent.appendChild(div_copy); } </script>
6.增加表格数据
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>添加用户</title> </head> <body> <center> <br><br> 添加用户:<br><br> 姓名: <input type="text" name="name" id="name" /> email: <input type="text" name="email" id="email" /> 电话: <input type="text" name="tel" id="tel" /><br><br> <button id="addUser">提交</button> <br><br> <hr> <br><br> <table id="usertable" border="1" cellpadding="5" cellspacing=0> <tbody> <tr> <th>姓名</th> <th>email</th> <th>电话</th> <th> </th> </tr> <tr> <td>Tom</td> <td>tom@tom.com</td> <td>5000</td> <td><a href="javascript:void(0)" onclick="del(this)" >Delete</a></td> </tr> <tr> <td>Jerry</td> <td>jerry@sohu.com</td> <td>8000</td> <td><a href="javascript:void(0)" onclick="del(this)" >Delete</a></td> </tr> </tbody> </table> </center> </body> <script language="JavaScript"> /** <a href="javascript:void(fun1())" >haha</a> function fun1(){ alert(‘haha‘); return "haha"; } */ /* document.getElementById("addUser").onclick=function(){ // value属性属于 DHTML的范畴. Dynamic HTML ==> 动态网页 ==> DOM JS CSS HTML ==> DHTML实际上就是对DOM对象的增强. // DHTML为我们的DOM对象 附加了很多 便利 属性和方法.能简化我们的开发工作. //1.获得表单中 名字 邮箱 电话信息 var name = document.getElementById("name").value; var email = document.getElementById("email").value; var tel = document.getElementById("tel").value; //2.组装tr var tr = document.createElement("tr"); //3.组装td var nameTd = document.createElement("td"); nameTd.innerHTML = name; var emailTd = document.createElement("td"); emailTd.innerHTML = email; var telTd = document.createElement("td"); telTd.innerHTML = tel; //4.将td添加到tr中 tr.appendChild(nameTd); tr.appendChild(emailTd); tr.appendChild(telTd); //5.将tr添加到table中 document.getElementById("usertable").appendChild(tr); } */ document.getElementById("addUser").onclick=function(){ // value属性属于 DHTML的范畴. Dynamic HTML ==> 动态网页 ==> DOM JS CSS HTML ==> DHTML实际上就是对DOM对象的增强. // DHTML为我们的DOM对象 附加了很多 便利 属性和方法.能简化我们的开发工作. //1.获得表单中 名字 邮箱 电话信息 var name = document.getElementById("name").value; var email = document.getElementById("email").value; var tel = document.getElementById("tel").value; //2组装tr var tr = document.createElement("tr"); tr.innerHTML="<td>"+name+"</td><td>"+email+"</td><td>"+tel+"</td><td><a href=‘javascript:void(0)‘ onclick=‘del(this)‘ >Delete</a></td>"; //3将tr添加到table中 document.getElementById("usertable").appendChild(tr); } //小知识点: 协议名:协议内容 // 将a标签自身功能阉割. // <a href="javascript:void(0)" onclick="del(this)" >Delete</a> //小知识点: this 指向 方法的调用者,在当前例子中.this指向了a标签 function del(obj){ obj.parentNode.parentNode.parentNode.removeChild(a.parentNode.parentNode); } </script></html>
JavaScripts学习日记——DOM