js05-DOM对象二
一、节点操作
创建节点：var ele_a = document.createElement('a');
添加节点：ele_parent.appendChild(ele_img);
删除节点：ele_parent.removeChild(ele_p);
替换节点：ele_parent.replaceChild(新标签,旧标签);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节点操作</title>
<style>
.c1 {
width: 300px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="c1">
<p id="p1">年后</p>
<p id="p2">hello</p>
</div>
<button class="addBtn">ADD</button>
<button class="delBtn">DEL</button>
<button class="replaceBtn">Replace</button>
<ul>
<li>创建节点：var ele_a = document.createElement('a');</li>
<li>添加节点：ele_parent.appendChild(ele_img);</li>
<li>删除节点：ele_parent.removeChild(ele_p);</li>
<li>替换节点：ele_parent.replaceChild(新标签,旧标签);</li>
</ul>
<table border="1">
<tbody id="t1">
<tr>
<td><input type="checkbox"></td>
<td><input type="text"></td>
<td><button class="delbtn">del1</button></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td><input type="text"></td>
<td><button class="delbtn">del2</button></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td><input type="text"></td>
<td><button class="delbtn">del3</button></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td><input type="text"></td>
<td><button class="delbtn">del4</button></td>
</tr>
</tbody>
</table>
<script>
var ele_add = document.getElementsByClassName('addBtn')[0];
var ele_del = document.getElementsByClassName('delBtn')[0];
var ele_repleace = document.getElementsByClassName('replaceBtn')[0];
console.log(ele_add);
//绑定的添加节点的事件
ele_add.onclick = function () {
//先创建一个标签
var ele_a = document.createElement('a');
console.log(ele_a); //<a></a>
ele_a.innerHTML = '点击'; //<a>点击</a>
ele_a.href = 'http://www.baidu.com'; //<a href='http://www.baidu.com'>点击</a>
//先创建一个标签
var ele_img = document.createElement('img');
ele_img.src = '1.png';
ele_img.width = 50;
ele_img.height = 50;
//找到父标签
var ele_parent = document.getElementsByClassName('c1')[0];
//然后添加
ele_parent.appendChild(ele_a);
ele_parent.appendChild(ele_img);
};
//绑定的删除节点的事件
ele_del.onclick = function () {
//先获取要删除的元素
var ele_p = document.getElementById('p1');
//获取它的父元素
var ele_parent = document.getElementsByClassName('c1')[0];
//然后删除（注意是父元素删除子元素）
ele_parent.removeChild(ele_p)
};
//绑定的替换节点的事件
ele_repleace.onclick = function () {
//找被替换的标签（旧标签）
var ele_p = document.getElementById('p2');
//创建一个替换后的标签（新标签）
var ele_img = document.createElement('img');
ele_img.src = '2.png';
ele_img.width = 100;
ele_img.height = 50;
//找到父节点
var ele_parent = document.getElementsByClassName('c1')[0];
//做替换（父节点替换子节点中的某一个节点）：相当于一次删除加一次添加
ele_parent.replaceChild(ele_img, ele_p);
}
</script>
<script>
//绑定删除节点的事件
var ele_dels = document.getElementsByClassName('delbtn');
for(var i=0;i<ele_dels.length;i++){
ele_dels[i].onclick = function () {
//获取删除的元素
var ele_tr = this.parentElement.parentElement;
// console.log(ele_tr)
//找到父节点
var ele_tbody_parent =document.getElementById('t1');
//然后删除
ele_tbody_parent.removeChild(ele_tr)
}
}
</script>
</body>
</html> 具体的节点操作实例
节点例子
二、onload事件
onload 属性开发中 只给 body元素加.这个属性的触发 标志着 页面内容被加载完成.应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性.
什么时候加载完什么时候触发（如果你想把script放在body上面去，就用到onload事件了）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 300px;
height: 300px;
background-color: green;
margin: 0 auto;
}
</style>
<script type="text/javascript">
window.onload = function(){
var box1 = document.getElementById("box");
box1.style.width = 200 + "px";
box1.style.height = 200 + "px";
box1.style.marginTop = 50 + "px";
}
</script> </head>
<body>
<div onclick="click1(this)" id="box" >
<p id="bode">我有一头小毛驴,我从来也不骑,有一天我心血来潮骑着去赶集.....</p>
</div> </body> </html>
onload事件
三、onkeydown事件
Event 对象：Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.比如onkeydown,我们想知道哪个键被按下了，需要问下event对象的属性，这里就时KeyCode.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>event事件</title>
</head>
<body>
<input type="text" name="" id="t1" value="" />
</body>
<script type="text/javascript">
var keyStat = document.getElementById("t1");
keyStat.onkeydown = function(event){
var num = event.keyCode;
console.log(event);
console.log(event.keyCode);
console.log(String.fromCharCode(num)) if (event.keyCode == 13) {
alert("你按下了回车键!") } else{ }
}
</script>
</html>
event事件
四、onsubmit事件
当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>onsubmit事件</title>
<!--在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.-->
<!--提交按钮本身就有一个默认事件（你点击提交的时候就会把数据发过去）-->
</head>
<body>
<form action="https://www.baidu.com" method="get" id="sub">
用户名:
<input type="text" value="" class="user"/>
密码:
<input type="password" value="" class="pwd"/>
<input type="submit" />
</form>
</body> <!--提交按钮被点击时,判断用户名和密码是否和数据库中的吻合--> <script type="text/javascript">
var submit1 = document.getElementById("sub");
var username = document.getElementsByClassName("user")[0];
var passwd = document.getElementsByClassName("pwd")[0];
submit1.onsubmit = function(event){
var uName = username.value;
var passWd = passwd.value;
if (uName == "jack" && passWd == "123") {
alert("登录成功") } else{
alert("登录失败")
// event.preventDefault() //默认阻止提交
//方法2
return false //如果不阻止提交,会跳向action的网址. }
}
</script>
</html>
五、事件传播
本例中:box2是box1的子元素,默认继承了box1的事件.所以点击box2的时候,也会执行box1元素的点击事件.如果不想让box2执行,就必须阻止事件传播.具体看代码.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件传播</title>
<!--因为盒子1是盒子2的父亲，所以当给父亲绑定一个事件，给儿子也绑定一个事件，就像
继承一样，儿子会继承父亲的事件，所以现在运行的时候如果点击盒子2，会把自己的是事件和
父亲的事件都执行了。所以如果只想让儿子执行自己的事件，那么就得阻止发生事件传播-->
</head>
<style type="text/css">
*{padding: 0;margin: 0;}
#box1{
width: 300px;
height: 300px;
background: red;
position: relative;
}
#box2{
width: 150px;
height: 150px;
background: green;
position: absolute;
left: 400px;
}
</style>
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body>
<script type="text/javascript">
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
box1.onclick = function(){
alert(1111111)
}
box2.onclick = function(event){
alert(222)
//阻止事件传播
event.stopPropagation()
} </script>
</html>
事件传播
js05-DOM对象二的更多相关文章
- 前端之JavaScript：JS之DOM对象二
继续JS之DOM对象二 前面在JS之DOM中我们知道了属性操作,下面我们来了解一下节点操作.很重要!! 一.节点操作 创建节点:var ele_a = document.createElement(' ...
- 继续JS之DOM对象二
前面在JS之DOM中我们知道了属性操作,下面我们来了解一下节点操作.很重要!! 一.节点操作 创建节点:var ele_a = document.createElement('a');添加节点:ele ...
- JS之DOM对象二
前面在JS之DOM中我们知道了属性操作,下面我们来了解一下节点操作.很重要!! 一.节点操作 创建节点:var ele_a = document.createElement('a');添加节点:ele ...
- JS对象与Dom对象与jQuery对象之间的区别
前言 通过问题看本质: 举例: js的写法:document.getElementById('save').disabled=true; 在jquery中我是这样写的 $("#save&qu ...
- 【二】jquery之基础概念与jquery对象与dom对象的区别及混合使用
一:jquery基本概念 1.jquery是一个javascript框架,它是一个轻量级的js库 2.当下流行的js库有: jquery MooTools Prototype 3.$(ducoment ...
- dom对象详解--document对象(二)
dom对象详解--style对象 style对象 style对象和document对象下的集合对象styleSheets有关系,styleSheets是文档中所有style对象的集合,这里讲解的 ...
- jQuery学习-----（二）JQuery对象与DOM对象的区别与转换
1.jQuery对象和DOM对象的区别 DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象; eg: var domObj = ...
- JS总结之二：DOM对象控制HTML
DOM对象控制HTML 1.方法 getElementsByName( ) ——获取name getElementsByTagName( ) ——获取元素 getAttribute( ) ——获取元素 ...
- jQuery入门二（DOM对象与jQuery对象互相转换）
- DOM对象与jQuery对象互相转换 第一篇说过,DOM对象不能调用jQuery对象的属性和方法,同样jQuery对象也不能调用DOM对象的属性和方法.但是在实际开发中,可能两者间需要互相调用对方 ...
- JavaScript实现DOM对象选择器
目的: 根据传入的选择器类型选出第一个符合的DOM对象. ①可以通过id获取DOM对象,例如 $("#adom"); ②可以通过tagName获取DOM对象,例如 $(" ...
随机推荐
- Oracle 连接 另一个Oracle数据库 服务器连接
一.场景 两台不同的服务器A.B分别装有不同业务的oracle数据库,因业务需要,现需要将B中test表的数据,定时同步到A中. 二.实现 根据以上场景,我想到了oracle中的dblink, ...
- vue从入门到进阶：Vuex状态管理（十）
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 在 Vue 之后引入 vuex 会进行自动 ...
- zabbix3.4 监控mysql 数据库连接数
zabbix3.4 监控mysql 数据库连接数具体监控配置待定,近期即将发布!
- 如何获得MIUI10系统的root超级权限
MIUI10系统有没有办法拥有root超级权限?做开发的人都清楚,android手机有root超级权限,如果手机拥有root相关权限,能够实现更强的功能,举个栗子做开发的人企业的营销部门,使用某些营销 ...
- 从零学习Fluter(四):Flutter中ListView组件系列详展
今天继续研究了一些Flutter,主要时关于ListVIew那一块的东西,有 SingleChildScrollViewListViewGridViewCustomScrollView 感觉Flutt ...
- Linux如何查找某个时间点后生成的空文件
今天遇到一个特殊需求,需要找到某天(例如2017-04-13)以及这之后生成的空文件.那么这个要怎么处理呢?这个当然是用find命令来解决.如下所示, -mtime -5 表示查找距现在 5*24H ...
- JavaScript（二）数据类型（二）
布尔值布尔值指真或假,开或关,是或否,关键字true和false.下面这些值会被转换成false: undefined null 0 -0 NaN "" // 空字符串 布 ...
- java反射（java.lang.reflect）---java.lang.reflect.Modifier中状态码
1. 详情请看jvm(虚拟机)规范 java.lang.reflect.Modifier public static final int ABSTRACT 1024 public static fin ...
- 如何让EasyUI的Tree或者ComboTree节点不显示图标？
版本:jQuery EasyUI 1.3.2 通过测试,只需把节点的state属性设置为null即可使EasyUI的Tree或者ComboTree控件的节点不显示图标.
- Github如何提交修改的代码以及更新到最新版本
最近有人问我,Github上如何把修改fork到的代码提交到原版本上去,以及如何更新到最新的版本.只针对初学者,大神的话勿喷. 首先说第一个问题. 进入到你修改的某个repository里面(以本人的 ...