DOM操作 JS事件 节点增删改查
--------------------------习惯是社会的巨大的飞轮和最可贵的维护者。——威·詹姆斯
day 49
[value属性操作]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="">
姓名:
<input type="text" name="user" value="" id="i1">
<hr>
籍贯:
<select name="pro" id="i2" multiple="multiple">
<option value="1">湖北省</option>
<option value="2">湖南省</option>
<option value="3">河南省</option>
</select>
<hr>
简介:
<textarea name="info" id="i3" cols="30" rows="10"> </textarea>
<hr>
<input type="submit">
</form> <script> let i1=document.getElementById("i1");
let i2=document.getElementById("i2");
let i3=document.getElementById("i3"); console.log(i1.value);
console.log(i2.value);
console.log(i3.value); </script> </body>
</html>
[节点的增删改查]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="p1">
<h3 class="title">WELCOME!</h3>
</div>
<hr>
<div class="c1">
<div><button class="add">一 展示图片</button></div>
</div>
<hr>
<div class="c2">
<button class="rem">删除节点 </button>
<h4>欢迎删除,圣诞快乐!</h4>
</div>
<hr>
<div class="c3">
<button class="replace">替换节点 </button>
</div> <script>
// 1 创建节点添加节点
let ele=document.getElementsByClassName("add")[0];
ele.onclick=function () {
// 1 创建节点对象 <img src="imgs/圣诞老人.png" alt="" width="200" height="200">
let img=document.createElement("img") ; // <img >
img.setAttribute("src","imgs/圣诞老人.png");// <img src="imgs/圣诞老人.png">
img.setAttribute("width","200");
img.setAttribute("height","200");// <img src="imgs/圣诞老人.png" alt="" width="200" height="200">
console.log(img);
// 2 添加节点 父节点.appendchild(添加节点)
let pele=document.getElementsByClassName("c1")[0];
pele.appendChild(img) };
// 2 删除节点 父节点.removeChild(删除节点)
let ele2=document.getElementsByClassName("rem")[0];
ele2.onclick=function () {
let pele2=document.getElementsByClassName("c2")[0];
pele2.removeChild(this.nextElementSibling);
}; // 替换节点 父节点.replaceChild(新节点,旧节点)
let ele3=document.getElementsByClassName("replace")[0];
ele3.onclick=function () {
// 父节点
let pele3=document.getElementsByClassName("p1")[0];
// 新节点
let p=document.createElement("p"); // <p></p>
p.innerHTML="深圳欢迎您!";
// 旧节点
let title=document.getElementsByClassName("title")[0];
pele3.replaceChild(p,title)
}
</script> </body>
</html>
[js事件]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.error{
color: red;
margin-left: 10px;
}
</style>
<script> window.onload=function(){
// 1 创建节点添加节点
let ele=document.getElementsByClassName("c1")[0];
ele.onfocus=function () {
console.log("获取光标!") };
ele.onblur=function () {
console.log("退出光标!")
}; ele.onselect=function () {
console.log("正在拷贝该文本!")
}; let form=document.getElementById("form");
form.onsubmit=function () {
// 校验数据
let user=document.getElementById("user").value;
let email=document.getElementById("email").value;
console.log(user,email);
if (user.length<5){
console.log("长度不够!");
document.getElementById("user").nextElementSibling.innerHTML="长度不够";
setTimeout(function () {
document.getElementById("user").nextElementSibling.innerHTML="";
},1000);
return false }
};
}
</script> </head>
<body> <input type="text" class="c1"> <hr> <form id="form" action="" method="get">
<div>
<label for="user">姓名</label>
<input type="text" name="user" id="user"><span class="error"></span>
</div>
<div>
<label for="email">邮箱</label>
<input type="text" name="email" id="email"><span class="error"></span>
</div>
<input type="submit">
</form> </body>
</html>
[二级联动]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body> <select name="" id="pros">
<option value="0">请选择省份</option>
<option value="1">河北省</option>
<option value="2">广东省</option>
<option value="3">湖南省</option>
</select>
<select name="" id="citys">
<option value="">请选择城市</option>
</select> <script>
// 1 数据结构
let data={
"1":["石家庄","邯郸","邢台","衡水","保定"],
"2":["东莞","惠州"," 广州","汕头","深圳"],
"3":["长沙","张家界","湘潭","娄底"],
}; let pro=document.getElementById("pros");
let city=document.getElementById("citys");
pro.onchange=function () {
console.log(this.value);
//2 获取用户选择省份
let choose_pro=this.value;
// 3 获取省份对应的城市列表
let citys=data[choose_pro];
console.log(citys); // 清除操作
city.options.length=1;
// 循环添加
for(var i=0;i<citys.length;i++){ // 创建option标签
let option=document.createElement("option")// <option></option>
option.innerText=citys[i];
option.value=i+1;
// 添加标签
city.appendChild(option);
}
}
</script> </body>
</html>
DOM操作 JS事件 节点增删改查的更多相关文章
- springLdap 操作ldap示例（增删改查）
转自:http://blog.csdn.net/sundenskyqq/article/details/9002440 这部分的示例网上的确有很多,但是个人在查找的过程中还是感到不够满意,所以就自己总 ...
- zkCli的使用 常用的节点增删改查命令用法
zkCli的使用 常用的节点增删改查命令用法 1. 建立会话 命令格式:zkCli.sh -timeout 0 -r -server ip:port ./zkCli.sh -server -time ...
- java中XML操作：xml与string互转、读取XML文档节点及对XML节点增删改查
一.XML和String互转: 使用dom4j程式变得很简单 //字符串转XML String xmlStr = \"......\"; Document document = D ...
- Zookeeper节点增删改查与集群搭建（笔记）
1.上传文件目录说明 上传的文件一般放在 /home/下 安装文件一般在 /usr/local/下 2. 安装zookeeper 2.1将zookeeper-3.4.11.tar.gz拷贝到/home ...
- EF Codefirst 多对多关系 操作中间表的 增删改查（CRUD）
前言 此文章只是为了给新手程序员,和经验不多的程序员,在学习ef和lambada表达式的过程中可能遇到的问题. 本次使用订单表和员工表建立多对多关系. 首先是订单表: public class Ord ...
- mySQL CRUD操作（数据库的增删改查）
一.数据库操作 1.创建数据库 create database 数据库名称 2.删除数据库 drop database 数据库名称 二.表操作 1．创建表 create table 表名 ( ...
- JS源生代码“增删改查”之增
51呢最近在做一个管理数据的,第一次接触到用JS的源代码去实现一些功能,才知道网页里的许多功能都是依赖于“增删改查”完成的,下面的几张图片就是对于增的演示: 下面是有关HTML的代码:这个主要是弹窗部 ...
- Node.js之mysql增删改查
1.安装库 npm install mysql 2.编写db.js(用作公共模块) //连接MySQL数据库 var mysql = require("mysql"); var p ...
- DjangoMTV模型之model层——ORM操作数据库（基本增删改查）
Django的数据库相关操作 对象关系映射(英语:(Object Relational Mapping,简称ORM),是一种程序技术,用于实现面向对象编程语言里不同类型系统的数据之间的转换.从效果上说 ...
随机推荐
- 解决tomcat中文传输乱码问题
<Connector URIEncoding="utf-8" connectionTimeout="20000" encoding="utf-8 ...
- js 3d图形
使用Three.js在网上中进行3D图形的展示 Three.js的官网https://threejs.org/ 第一个Demo,生成一个旋转的正方体 <style> canvas { wi ...
- 多文档界面的实现(DotNetBar的superTabControl)
private void FormMain_Load(object sender, EventArgs e) { superTabControl2.Tabs.Clear(); timer1.Start ...
- linux系统/var/log目录下的信息详解
一./var目录 /var 所有服务的登录的文件或错误信息文件(LOG FILES)都在/var/log下,此外,一些数据库如MySQL则在/var/lib下,还有,用户未读的邮件的默认存放地点为/v ...
- c/c++叉树的创建与遍历（非递归遍历左右中，不破坏树结构）
二叉树的创建与遍历(非递归遍历左右中,不破坏树结构) 创建 二叉树的递归3种遍历方式: 1,先中心,再左树,再右树 2,先左树,再中心,再右树 3,先左树,再右树,再中心 二叉树的非递归4种遍历方式: ...
- pom文件
groupid和artifactId被统称为“坐标”是为了保证项目唯一性而提出的,如果你要把你项目弄到maven本地仓库去,你想要找到你的项目就必须根据这两个id去查找. groupId一般分为多个段 ...
- PHP实现邮件的自动发送
最近做一个邮箱验证的功能,研究了一会,搞定了邮件的自动发送.下面用qq邮箱作为演示,一步一步来解释: 代码下载地址 首先,就是做到邮件的发送,代码如下: <?php//邮件发送require ' ...
- window.location.href刷新页面
刷新当前页 window.location.href=window.location.href; 或者 window.location.href="当前URL",例如 window ...
- 南邮ctf-web的writeup
WEB 签到题 nctf{flag_admiaanaaaaaaaaaaa} ctrl+u或右键查看源代码即可.在CTF比赛中,代码注释.页面隐藏元素.超链接指向的其他页面.HTTP响应头部都可能隐藏f ...
- 2018-10-18读文献总结之DCB码分多址、零基线、信号产生
---恢复内容开始--- 今天心血来潮,想开始把自己读文献的过程和每篇文献的收获总结一下,不知道CSDN怎么回事,一直登陆不进去,搞得我注册了一个博客园的账户,博客园新注册的还需要认证,但是很快,所以 ...