--------------------------习惯是社会的巨大的飞轮和最可贵的维护者。——威·詹姆斯

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事件 节点增删改查的更多相关文章

  1. springLdap 操作ldap示例（增删改查）

    转自:http://blog.csdn.net/sundenskyqq/article/details/9002440 这部分的示例网上的确有很多,但是个人在查找的过程中还是感到不够满意,所以就自己总 ...

  2. zkCli的使用 常用的节点增删改查命令用法

    zkCli的使用 常用的节点增删改查命令用法 1. 建立会话  命令格式:zkCli.sh -timeout 0 -r -server ip:port ./zkCli.sh -server -time ...

  3. java中XML操作：xml与string互转、读取XML文档节点及对XML节点增删改查

    一.XML和String互转: 使用dom4j程式变得很简单 //字符串转XML String xmlStr = \"......\"; Document document = D ...

  4. Zookeeper节点增删改查与集群搭建（笔记）

    1.上传文件目录说明 上传的文件一般放在 /home/下 安装文件一般在 /usr/local/下 2. 安装zookeeper 2.1将zookeeper-3.4.11.tar.gz拷贝到/home ...

  5. EF Codefirst 多对多关系 操作中间表的 增删改查（CRUD）

    前言 此文章只是为了给新手程序员,和经验不多的程序员,在学习ef和lambada表达式的过程中可能遇到的问题. 本次使用订单表和员工表建立多对多关系. 首先是订单表: public class Ord ...

  6. mySQL CRUD操作（数据库的增删改查）

    一.数据库操作 1.创建数据库 create database 数据库名称 2.删除数据库 drop database 数据库名称   二.表操作 1．创建表 create table 表名 (    ...

  7. JS源生代码“增删改查”之增

    51呢最近在做一个管理数据的,第一次接触到用JS的源代码去实现一些功能,才知道网页里的许多功能都是依赖于“增删改查”完成的,下面的几张图片就是对于增的演示: 下面是有关HTML的代码:这个主要是弹窗部 ...

  8. Node.js之mysql增删改查

    1.安装库 npm install mysql 2.编写db.js(用作公共模块) //连接MySQL数据库 var mysql = require("mysql"); var p ...

  9. DjangoMTV模型之model层——ORM操作数据库（基本增删改查）

    Django的数据库相关操作 对象关系映射(英语:(Object Relational Mapping,简称ORM),是一种程序技术,用于实现面向对象编程语言里不同类型系统的数据之间的转换.从效果上说 ...

随机推荐

  1. LeetCode题解之Find Bottom Left Tree Value

    1.题目描述 2.问题分析 使用层序遍历思想 3.代码 int findBottomLeftValue(TreeNode* root) { if (root == NULL) ; queue<T ...

  2. NoSQL与MongoDB介绍

    写在前面 本文是由一次演讲整理出来的,文中大部分资料来源于网络,感谢Wikipedia,Google和MongoDB官网.文中使用的MongoDB版本为1.2.4. What is NoSQL NoS ...

  3. MySQL Host is blocked because of many connection errors 解决方法

    应用日志提示错误:create connection error, url: jdbc:mysql://10.45.236.235:3306/db_wang?useUnicode=true&c ...

  4. define和typedef的区别

    define和typedef的区别 define是单纯的字符替换,typedef是重新定义了新的类型 #include <stdio.h> #define CHAR1 char* type ...

  5. 轻量的web框架Bottle

    简洁的web框架Bottle 简介 Bottle是一个非常简洁,轻量web框架,与django形成鲜明的对比,它只由一个单文件组成,文件总共只有3700多行代码,依赖只有python标准库.但是麻雀虽 ...

  6. git笔记(2)-常见命令的使用（详解待续）

    1. 常用命令 (1)git --help 帮助命令,其他的类似 (2)git branch 查看分支及其他(创建分支,查看远程分支名称等) (3)git checkout 切换分支以及其他 (3)g ...

  7. esxi网络中虚拟机的相关操作

    一个虚拟机的克隆就是原始虚拟机全部状态的一个备份或镜像.克隆的过程不影响原始虚拟机.而快照指的是虚拟磁盘在某一特定时间点的副本.执行快照将保留虚拟机的状况和数据. 一.实验拓扑图: 目标:克隆虚拟机, ...

  8. SAP LOGON 快捷登陆方式如何保存密码

    默认情况下,快捷方式密码是不能输入的. 解决方法:修改注册表: 计算机\HKEY_CURRENT_USER\Software\SAP\SAPShortcut\Security EnablePasswo ...

  9. ZooKeeper Observers解决节点过多时写性能下降问题

    ZooKeeper Observers Observers: Scaling ZooKeeper Without Hurting Write Performance How to use Observ ...

  10. js判断是否是移动端自动跳转到wap页面代码

    <script type="text/javascript"> function is_mobile(){ var regex_match=/(nokia|iphone ...