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="点我" 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="点我" 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="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的更多相关文章
- JavaScripts学习日记——DOM SAX JAXP DEMO4J XPath
今日关键词: XML解析器 DOM SAX JAXP DEMO4J XPath XML解析器 1.解析器概述 什么是解析器 XML是保存数据的文件,XML中保存的数据也需要被程序读取然后使用.那么程序 ...
- JavaScripts学习日记——BOM
IE 3.0 和 Netscape Navigator 3.0 提供了一种特性 - BOM(浏览器对象模型),可以对浏览器窗口进行访问和操作.使用 BOM,开发者可以移动窗口.改变状态栏中的文本以及执 ...
- JavaScripts学习日记——ECMAscript
1.Function对象 Function是一个很特殊的对象,特殊在该对象就像java中的方法一样,可以运行,可以传参数. 三种定义function对象的方法: 1.function fun1(a,b ...
- JavaScripts学习日记——XML DTD Schema
今日关键词: XML DTD Schema 1.XML 1 XML的概述 1.1 什么是XML XML全称为Extensible Markup Language,意思是可扩展的标记语言.XML语法上和 ...
- Linux学习日记-使用EF6 Code First(四)
一.在linux上使用EF 开发环境 VS2013+mono 3.10.0 +EF 6.1.0 先检测一下EF是不是6的 如果不是 请参阅 Linux学习日记-EF6的安装升级(三) 由于我的数据库 ...
- android学习日记05--Activity间的跳转Intent实现
Activity间的跳转 Android中的Activity就是Android应用与用户的接口,所以了解Activity间的跳转还是必要的.在 Android 中,不同的 Activity 实例可能运 ...
- android学习日记03--常用控件Dialog
常用控件 9.Dialog 我们经常会需要在Android界面上弹出一些对话框,比如询问用户或者让用户选择.这些功能我们叫它Android Dialog对话框 对话框,要创建对话框之前首先要创建Bui ...
- android学习日记03--常用控件checkbox/radiobutton
常用控件3.checkbox 复选框,确定是否勾选,点击一下勾选,点击第二下取消,当有一系列备选项时适合用checkbox控件,方便用户提交数据. 贴上例子Activity的java代码 packag ...
- android学习日记03--常用控件button/imagebutton
常用控件 控件是对数据和方法的封装.控件可以有自己的属性和方法.属性是控件数据的简单访问者.方法则是控件的一些简单而可见的功能.所有控件都是继承View类 介绍android原生提供几种常用的控件bu ...
随机推荐
- printf格式输出总结
#include<stdio.h> #include<string.h> int main() { ]; ; floa ...
- QT参考录
源码参考: #include "CServerManager.h" CServerManager* CServerManager::m_pInstance = NULL; CSer ...
- 配置mysql允许远程连接
开启MySQL数据库的远程连接权限: use mysql://进入数据库 grant all privileges on *.* to root@'%'identified by '123465789 ...
- linux笔记2.25
解决vsftpd用root登录不了的问题 把/etc/pam.d/vsftpd文件中的 auth required pam_listfile.so item=user sense=d ...
- html5 js跨域
介绍 当我们使用XMLHttpRequest发送请求时,浏览器发现该请求不符合同源策略,会给该请求加一个请求头:Origin,后台进行一系列处理,如果确定接受请求则在返回结果中加入一个响应头:Acce ...
- .NET MVC插件化开发(支持Script和css压缩)
上一篇博文里面,没有支持Script和css的压缩功能以及script和css的路径问题也没有解决,所以重新发布一个版本,解决了这几个问题,并且优化了插件路由注册,现在可以很方便的实现热插拔web插件 ...
- java8新特性学习
lambda语法 语法组成为三部分:参数列表.箭头符号“->”.代码块 lambda语法的比jdk1.8之前的要通过匿名类实现Runnable接口,代码上要少,而且它支持访问外部变量 strea ...
- php/java bridge
http://blog.163.com/wangyifeng_0821/blog/static/3077437220103645838478/ http://hi.baidu.com/luanxian ...
- Altium Designer中使用差分对布线
Contents Language 在原理图中定义差分对 在PCB中查看和管理差分对 在PCB中定义差分对 适用的设计规则 设置设计规则的辖域 使用差分对向导定义规则 差分对布线 包括管脚交换的FPG ...
- Android 使用Post方式提交数据（登录）
在Android中,提供了标准Java接口HttpURLConnection和Apache接口HttpClient,为客户端HTTP编程提供了丰富的支持. 在HTTP通信中使用最多的就是GET和POS ...