49 DOM（2）

一.value属性：
　　input ,select 标签，textarea 标签中有value属性，

　　获取他们属性值的方法，先获取该元素ele,然后ele.value得到value值。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <!--input ,select ,textarea 有vaule 属性-->

    <script>

        window.onload =function (ev) {

            var user = document.getElementById("user");

            //鼠标失去焦点时触发

            user.onblur = function (ev2) {

                console.log(user.value);

            // 获取select标签中的value属性值

            var sel_value = document.getElementById("sel").value;

            //获取textarea 标签中的value属性值

            var tex_value = document.getElementById("tex").value;

            console.log(sel_value);

            console.log(tex_value);

            };

        }

    </script>

    <form action="">

        <div>

            姓名：

            <label for="user"></label>

            <input type="text" name="usr" id="user">

        </div>

         <select name="op" id="sel">

            <option value="0">北京</option>

            <option value="1">上海</option>

            <option value="2">广州</option>

            <option value="3">深圳</option>

        </select>

        <div>

             <textarea name="" id="tex" cols="30" rows="10">

             </textarea>

        </div>

    </form>

</body>

</html>

二.js事件：
　　onblur：鼠标失去焦点时触发
　　onfocus：鼠标获得焦点时触发
　　onshbmit ：form表单数据提交时，先触发该事件再提交
　　onselect：被选中时，触发的事件
　　onchange:改变时触发

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div class="box">

    <img src="default.jpg" alt="" width="100px" height="100px" >

    <input type="file" id="file">

</div>

<script>

    var f1 = document.getElementById("file");

    var img = document.getElementsByTagName("img")[0];

    f1.onchange=function (ev) {

       //1.获取用户选中的文件

        var file_obj = f1.files[0];

        //2.找到该文件的路径

        //创建一个文件阅读阅读器

        var reader = new FileReader();

        //读该文件对象

        reader.readAsDataURL(file_obj);

        //等待文件阅读器加载完成

        reader.onload =function (ev2) {

            //3.将图片地址赋值给src

            img.src =reader.result;

        }

    }

</script>

</body>

</html>

onchange事件和头像上传

三.节点的增删改替换：

　　1.创建节点：

　　　　var ele = document.createElement(节点名)

　　　　父节点.appendChild（ele）

　　2.删除节点

　　　　父节点.removeChild(节点）

　　3.替换节点　　　

　　　父节点.replaceChild(新节点,旧节点)

<!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 创建节点添加节点

     var add =document.getElementsByClassName("add")[0];

     var c1 =document.getElementsByClassName("c1")[0];

     var img = document.createElement("img");//把创建的节点放在点击事件外面，效果是只创建一张图片

     // img.setAttribute("src","高圆圆.jpg");

     img.src="高圆圆.jpg";

     add.onclick=function () {

         c1.appendChild(img);

     };

    // 2 删除节点   父节点.removeChild(删除节点),删除节点的思路为，先找到父节点，再删除需要删除的子节点

     var c2 =document.getElementsByClassName("c2")[0];

     var button =document.getElementsByClassName("rem")[0];

     button.onclick =function () {

         c2.removeChild(this.nextElementSibling);//删除下个兄弟节点

     };

    // 替换节点  父节点.replaceChild(新节点,旧节点)

     //需要替换的换的节点

    var h3 =document.getElementsByClassName("title")[0];

     //父节点

    var p1 =document.getElementsByClassName("p1")[0];

    //获取点击事件标签

    var rep =document.getElementsByClassName("replace")[0];

    rep.onclick =function () {

        //创建一个新的节点

        var p =document.createElement("p");

        p.innerText = "到深圳就是深圳人！";

        p1.replaceChild(p,h3);

    }

</script>

</body>

</html>

四.二级联动：
　　实例场景：两个select的标签中，省份对应地区。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <select name="" id="sel1">

        <option value="0">请选择省份</option>

        <option value="1">上海</option>

        <option value="2">深圳</option>

        <option value="3">广州</option>

    </select>

    <select name="" id="sel2">

        <option value="0">请选择地区</option>

    </select>

    <script>

        var sel1 = document.getElementById("sel1");

        var sel2 = document.getElementById("sel2");

        var data ={

            "1":["徐汇区","浦东新区","黄埔区"],

            "2":["南山区","龙华区","罗湖区"],

            "3":["天河区","海珠区","番禺区"]

        };

        //sel1改变时触发事件

        sel1.onchange =function (ev) {

            //先将sel2中的option标签去掉，留下第一个

            sel2.options.length =1;

            //接着将在sel1标签中增加option标签，第一步创建标签，第二部循环添加标签

            //创建标签

            var key = this.value;

            for (var i=0;i<data[key].length;i++){

                var option =document.createElement("option");

                option.innerText =data[key][i];

                option.value =i+1;

                sel2.appendChild(option);

            }

        };

    </script>

</body>

</html>

五.实例：tab栏（对应关系的切换 li ===> div）

　　两点：

　　　　1.被点击的 li北京变红色，其他 li变白色。

　　　　2.被点击的 li 对应的div显示，其他 li 对应的div隐藏。

　　两层循环解决问题

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            padding: 0;

            margin: 0;

        }

        ul,li{

            list-style: none;

        }

        a{

            text-decoration: none;

        }

        .bar{

            width: 60%;

            height: 40px;

            border: 1px solid red;

        }

        .bar .list{

            text-align: center;

            height: 40px;

            line-height: 40px;

        }

        .bar .list li{

            float: left;

            width: 106px;

            height: 40px;

            text-align: center;

            border: 1px solid pink;

            cursor: pointer;

        }

        .bar .list li :hover{

            color: red;

        }

         .bar .list .li2{

             width: 120px;

         }

         .bar .list .li4{

             width: 156px;

         }

        .bar .list a{

            display: inline-block;

            height: 40px;

            width: 104px;

            border: 1px solid green;

            float: right;

            margin-right: 10px;

            color: #333333;

        }

        .item{

            width: 60%;

            height: 400px;

            border: 1px solid red;

        }

        .hide{

            display: none;

        }

        .show{

            display: block;

        }

    </style>

</head>

<body>

<!--https://item.jd.com/7512626.html-->

    <div class="bar">

        <ul class="list">

            <li class="li li1 " >商品介绍</li>

            <li class="li li2" >规格与包装</li>

            <li class="li li3" >售后保障</li>

            <li class="li li4" >商品评价(10万+)</li>

            <li class="li li5" >社区互动</li>

            <a href="#">a加入购物车</a>

        </ul>

    </div>

    <div class="item item1 "  >div1</div>

    <div class="item item2 hide">div2</div>

    <div class="item item3 hide">div3</div>

    <div class="item item4 hide">div4</div>

    <div class="item item5 hide">div5</div>

    <script>

        var lis =document.getElementsByClassName("li");

        var items =document.getElementsByClassName("item");

        for(i=0;i<lis.length;i++){

            lis[i].onclick =function () {

                //被点击的li背景色变成红色，其他变成白色，两层循环实现

                this.style.backgroundColor="red";

                // items[i].classList.remove("hide");//这句不能放上面，因为i加载完页面后i变成了5；每次点击页面i都是为固定值

                for (var j=0;j<lis.length;j++){

                    if (lis[j] !==this){

                        lis[j].style.backgroundColor="white";

                        items[j].classList.add("hide");

                    }else {

                        items[j].classList.remove("hide");

                    }

                }

                //被点击的li对应的div显示出来，其他li对应的div隐藏

            }

        }

    </script>

</body>

</html>

49 DOM（2）的更多相关文章

DOM（二）使用DOM
在了解DOM(文本对象模型)的框架和节点后,最重要的是使用这些节点处理html网页对于一个DOM节点node,都有一系列的属性和方法可以使用.常用的有下表. 完善:http://www.w3scho ...
一步一步带你实现virtual dom（一）
一步一步带你实现virtual dom(一) 一步一步带你实现virtual dom(二)--Props和事件要写你自己的虚拟DOM,有两件事你必须知道.你甚至都不用翻看React的源代码,或者其他 ...
8.6 JavaScript之HTML的DOM（三）
8.5 HTML和JavaScript的DOM(三) 一.DOM 是Document Object Model( 文档对象模型 )的缩写. DOM把所有的html都转换为节点 .整个文档是一个节点 ...
JS之DOM（一）
一.DOM简介什么是DOM?简单地说,DOM是是针对HTML和XML文档的一个API,一套对文档的内容进行抽象和概念化的方法. 学习过ORM的同学可能知道ORM是将数据库中的表映射到类,建立一个表和 ...
DOM（四）事件流
1.冒泡型事件浏览器的事件模型分两种:捕获型事件和冒泡型事件.由于ie不支持捕获型事件,所以以下主要以冒泡型事件作为讲解.(dubbed bubbling)冒泡型指事件安装最特定的事件到最不特定的事 ...
DOM（五）事件对象
浏览器中的事件都是以对象的形式存在的,同样ie浏览器与标准dom浏览器之间存在获取事件对象上也存在差别.在ie浏览器中事件对象是windows对象的一个属性event,访问通常采用如下方法. oP.o ...
JS之DOM（二）
一.DOM节点的操作 1.增加: (1). document.creatElement('标签名');创建元素节点 (2). document.creatTextNode('文本内容'):创建文本节点 ...
《JavaScript 闯关记》之 DOM（下）
Element 类型除了 Document 类型之外,Element 类型就要算是 Web 编程中最常用的类型了.Element 类型用于表现 XML 或 HTML 元素,提供了对元素标签名.子节点 ...
《JavaScript 闯关记》之 DOM（上）
DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API.DOM 描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分. 节点层次 DOM 可以将任何 HTML 或 XM ...

随机推荐

关于Context []startup failed due to previous errors
文章转自:http://blog.sina.com.cn/s/blog_49b4a1f10100q93e.html 框架搭建好后,启动服务器出现如下的信息: log4j:WARN No appende ...
面试问题整理之python测试
1．下列哪个语句在Python中是非法的? A.x = y = z =1 B.x = (y = z + 1) C.x, y = y, x D.x += y 答案:B 2．关于Python内存管理,下列 ...
Docker容器和数据可视化管理工具Flocker
Flocker 可轻松实现 Docker 容器及其数据的管理.这是一个数据卷管理器和多主机的 Docker 集群管理工具,你可以通过它来控制数据.可用来在 Docker 中运行你的数据库.查询和 K/ ...
2018“金三”之一线互联网公司Java高级面试题总结
JVM 1.请介绍一下JVM内存模型??用过什么垃圾回收器都说说呗 2.线上发送频繁full gc如何处理? CPU 使用率过高怎么办? 如何定位问题?如何解决说一下解决思路和处理方法 3.知道字节码 ...
Log4j将不同Package的日志输出到不同的文件的方法
随着项目规模的越来越大,会不断的引入新的模块,不同的模块都会打印自己的日志,最后就造成日志根本没法查看,比如我自己的项目中,就存在以下这些日志: 接收外界消息的日志.对外发送消息的日志: 后台常驻线程 ...
Package libvirt was not found in the pkg-config search path
关于pip安装libvirt-python的时候提示Package libvirt was not found in the pkg-config search path的问题解决方法 1.一开始以为 ...
HDU 2841 Visible Trees（容斥）题解
题意:有一块(1,1)到(m,n)的地,从(0,0)看能看到几块(如果两块地到看的地方三点一线,后面的地都看不到). 思路:一开始是想不到容斥...后来发现被遮住的地都有一个特点,若(a,b)有gcd ...
第四章消息摘要算法--SHA
注意:本节内容主要参考自<Java加密与解密的艺术(第2版)>第6章“验证数据完整性--消息摘要算法” 4.1.SHA 原理:消息摘要长度(可以定量为加密后的字符串的长度)越长,安全性越高 ...
如何给域名配置https证书
http和https的区别就是,后者在网络传输过程中会很安全,原因就是给http安装了SSL证书. SSL证书有免费的和收费的,收费的顾名思义就是保护的方面更多,更安全.收费的像单域名的一年有几百.几 ...
YOLOv3-darknet 内容解析
目录 Yolov3-darknet 内容解析多标签分类预测跨尺度预测网络结构改变 reference Yolov3-darknet 内容解析 YOLOv3是到目前为止,速度和精度最均衡的目标检测 ...

49 DOM（2）

49 DOM（2）的更多相关文章

随机推荐

热门专题