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),是一种程序技术,用于实现面向对象编程语言里不同类型系统的数据之间的转换.从效果上说 ...
随机推荐
- Spark集群搭建【Spark+Hadoop+Scala+Zookeeper】
1.安装Linux 需要:3台CentOS7虚拟机 IP:192.168.245.130,192.168.245.131,192.168.245.132(类似,尽量保持连续,方便记忆) 注意: 3台虚 ...
- 数据库之mysql篇（6）—— mysql常用函数函数/自定义函数
常用函数 运算函数 我相信你都能看懂,所以以上的不再做过多解释 然后还有个,前面漏掉的between and: 意指10是否在0到20之间,如果是返回1,否则返回0 日期函数 这个要稍微注意一下参数, ...
- WebClient图片下载
使用WebClient下载文件非常方便,针对有部分网站通过请求头的Referer,做了图片防盗链,可以在webClient加上Referer 来模拟请求 string basePath = Path. ...
- python3 之视频抽针
import cv2 import os Path = "C:/Users/zl3269/Desktop/test/video/" # 视频的格式 /aisg-server/Dat ...
- JS 代码中到底加不加分号
背景 在写自动执行函数时 vm.$watch('datas', function() { console.log(vm.datas); }) (function () { console.log('t ...
- docker：版本变更
在2017年之前的版本号: v1.4, v1.5, v1.6, v1.7, v1.8, v1.9, v1.10, v1.11, v1.12, v1.13 从2017年开始版本后变更为:${yy} ...
- sq
CREATE TABLE `message` ( `id` bigint(20) NOT NULL AUTO_INCREMENT, `username` varchar(20) DEFAULT NUL ...
- Spring Boot 中文乱码问题解决方案汇总
使用 Spring Boot 开发,对外开发接口供调用,传入参数中有中文,出现中文乱码,查了好多资料,总结解决方法如下: 第一步,约定传参编码格式 不管是使用httpclient,还是okhttp,都 ...
- 让vue-cli脚手架搭建的项目可以处理vue文件中postcss语法
图中&属于postcss的语法,这样书写样式可以清楚的看出选择器之前的层级关系,非常好用. 在利用vue-cli脚手架搭建的项目中如果不配置是不支持这种写法的,这样写不会报错,但是样式不生效. ...
- Rancher学习笔记----在UI界面添加主机页面无法正常显示
今天在学习rancher添加主机的时候,遇到了一个小问题,但是困扰老娘一上午 问题描述:在点击添加主机的时候,页面有跳转,但是页面显示为空,没有任何可选项.如下正常界面: 解决办法是:请换个浏览器