DOM

一、JavaScript的历史

一、什么是DOM

DOM 是 W3C（万维网联盟）的标准。DOM定义了可以访问XML和HTML文档的标准。
什么是 XML DOM？－－－－>XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。
什么是 HTML DOM？－－－－>HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

二、DOM节点

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点(NODE)：

整个文档是一个文档节点(document对象)
每个 HTML 元素是元素节点(element 对象)
HTML 元素内的文本是文本节点(text对象)
每个 HTML 属性是属性节点(attribute对象)
注释是注释节点(comment对象)

　　　dom树是为了展示文档中各个对象之间的关系，用于对象的导航。

　　而一个NODE对象包含两部分

- 节点（自身）属性
  1. attributers 节点属性
  2. nodetype 节点类型
  3. nodeValue 节点值
  4. nodeName 节点名称
  5. innerHTML 节点元素的文本值
- 导航属性
  1. parentNode 节点的父节点
  2. firstChild 节点下的第一个元素
  3. lastChild 节点下的最后一个元素
  4. childNides 节点的子节点

导航属性

parentElement              // 父节点标签元素
children                        // 所有子标签
firstElementChild          // 第一个子标签元素
lastElementChild           // 最后一个子标签元素
nextElementtSibling       // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素

View Code

查找元素节点

通过使用 getElementById() 方法 
通过使用 getElementsByTagName() 方法   //标签类型
通过使用 getElementsByClassName() 方法 
通过使用 getElementsByName() 方法       //自定义的name属性

三、节点操作

1、创建节点

var  tag=document.createElement(“input")
            tag.setAttribute('type','text');

View Code

2、添加节点

追加一个子节点（作为最后的子节点）
somenode.appendChild(newnode)

 

把增加的节点放到某个节点的前边
somenode.insertBefore(newnode,某个节点);

View Code

3、删除节点

removeChild()：获得要删除的元素，通过父元素调用删除

View Code

4、替换节点

somenode.replaceChild(newnode, 某个节点);

View Code

5、节点属性操作

获取文本节点的值

- innerText:不管你是赋值还是取值，只能识别纯文本
- innerHtml:既可以识别纯文本，也可以识别标签

//    文本属性
//  1.innerText:不管你是赋值还是取值，只能识别纯文本
        var a1 = document.getElementsByClassName('c2')[0];
//        console.log(a1);
        //取值操作
        console.log(a1.innerText); //你好吗/
        console.log(a1.innerHTML); //你好吗/
        //赋值操作
        a1.innerText='Egon';
        a1.innerHTML='<a href="">hello</a>';
//  2.innerHtml:既可以识别纯文本，也可以识别标签
        var b1 = document.getElementsByClassName('c2')[1];
//        console.log(b1);
        //取值操作
        console.log(b1.innerText);
        console.log(b1.innerHTML);
        //赋值操作
        b1.innerText = 'lala';
        b1.innerHTML = '<input type="text">';

属性操作

 elementNode.setAttribute(name,value)    
 elementNode.getAttribute(属性名)        <-------------->elementNode.属性名(DHTML)
 elementNode.removeAttribute(“属性名”);

View Code

获取选中的value值

class操作

//    class属性=============
     var ele = document.getElementsByClassName('c1')[0];
     console.log(ele.className); //打印类的名字
     
     ele.classList.add('hide');
     console.log(ele); //<div class="c1 hide" id="d1">

     ele.classList.remove('hide');//吧添加的remove移除了
     console.log(ele)

View Code

四、DOM Event(事件)

1、事件类型

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。

onload         属性开发中 只给body元素加.这个属性的触发 标志着 页面内容被加载完成.
               应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性.

onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。
onmouseleave   鼠标从元素离开

onselect       文本被选中。
onsubmit       确认按钮被点击 只能给form元素使用

当我们给页面上的元素绑定事件的时候，必须等到文档加载完毕。因为我们无法给一个不存在的元素绑定事件。

windows.onload事件在文件加载过程结束的时候出发。此时，文档中的所有对象都位于DOM中，并且所有图像，脚本，链接和子框架都已完成加载

注意：onload函数存在覆盖现象

$(document).ready(function(){})不会发生覆盖现象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" class="test">
<input type="text" id="t1">
<script>
    //测试event对象
    var ele = document.getElementsByClassName('test')[0];
//    event :每次触发事件时所有的状态信息
//    event.keyCode ：保存着所有的状态信息
    ele.onkeydown =function (event) {
//        onkeydown按下键盘触发的事件
        console.log(event);
        console.log(event.keyCode);
        if (event.keyCode==13){
            //按回车就会弹出
            alert(666)
        }
    }
</script>
<script type="text/javascript">
    var ele=document.getElementById("t1");
    ele.onkeydown=function(e){
        // e=e||window.event;
        var keynum=e.keyCode;
        var keychar=String.fromCharCode(keynum);
       console.log(keynum); //每次键盘敲下的状态信息
       console.log(keychar);  //输入的字符
    };
</script>
</body>
</html>

onkeydown事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onsubmit事件</title>
    <!--onsubmit事件:确定按钮被点击-->
    <!--在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.-->
    <!--提交按钮本身就有一个默认事件（你点击提交的时候就会把数据发过去）-->
</head>
<body>
<form action="" id="submit">
    <p>姓名：<input type="text" class="name"></p>
    <p>年龄：<input type="text" class="age"></p>
    <input type="submit">
</form>

<script>
    var ele_form = document.getElementById('submit');
    var ele_name = document.getElementsByClassName('name')[0];
    var ele_age = document.getElementsByClassName('age')[0];
    ele_form.onsubmit = function (event) {
        var username = ele_name.value;
        var age = ele_age.value;
        alert(username);
        alert(age);
        if (username=='ls'){
            //阻止默认事件的两种方式
//            方式一：
//            return false;
//            方式二
//            给函数给一个形参，这个形参写什么都行，一般我们写成event
            event.preventDefault() //阻止默认事件（表单的提交）
        }
    }
</script>

</body>
</html>

onsubmit事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件传播</title>
    <style>
        .box1 {
            width: 300px;
            height: 300px;
            background-color: rebeccapurple;
        }
        .box2{
            width: 150px;
            height: 150px;
            background-color: yellow;
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="box2"></div>
</div>
<script>
    //因为盒子1是盒子2的父亲，所以当给父亲绑定一个事件，给儿子也绑定一个事件，就像
//    继承一样，儿子会继承父亲的事件，所以现在运行的时候如果点击盒子2，会把自己的是事件和
//    父亲的事件都执行了。所以如果只想让儿子执行自己的事件，那么就得阻止发生事件传播
    var ele1 = document.getElementsByClassName('box1')[0];
    var ele2 = document.getElementsByClassName('box2')[0];
    ele1.onclick = function () {
        alert(123)
    };
    ele2.onclick = function (event) {
        alert(456);
        console.log(event);
        console.log(event.keyCode);
        //    阻止事件传播的方式
        event.stopPropagation();
    };


</script>
</body>
</html>

<!--事件传播-->

阻止事件传播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模拟placeholder属性的功能</title>
</head>
<body>
<input type="text" placeholder="username" id="submit">
<input type="text" value="username" id="submit1">
<script>
    var ele = document.getElementById('submit1');
    ele.onfocus = function () {
        //先获取焦点，点击输入框就获取到焦点，光标一上去就把值设成空
        this.value=""
    };
    ele.onblur = function () {
//        当光标不点击那个输入框的时候就失去焦点了
        //当失去焦点的时候，判断当前的那个值是不是为空，是否含有空格
//        如果为空或者有空格，用trim()去掉空格。然后赋值为username
        if (this.value.trim()==""){
            this.value='username'
        }
    }
</script>
</body>
</html>

<!--seach示例-->

placeholder

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onchange事件</title>
</head>
<body>
<select name="" id="s1">
    <option value="">甘肃省</option>
    <option value="">安徽省</option>
    <option value="">湖北省</option>
</select>
<script>
    var ele = document.getElementById('s1');
    //下拉菜单，和你当前事件不同的时候出发事件
    ele.onchange= function () {
        alert(123)
    }
</script>
</body>
</html>

onchange

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级联动</title>
</head>
<body>
<select name="" id="s1">
    <option value="">请选择省份</option>
    <option value="gansu">甘肃省</option>
    <option value="hebei">河北省</option>
    <option value="henan">河南省</option>
</select>
<select name="" id="c1">
    <option value="city">请选择城市</option>
</select>
<script>
    var data = {'gansu':['兰州市','天水市','武威市'],'hebei':['保定','石家庄'],'henan':['郑州','开封']}
    var ele_select = document.getElementById('s1');
    var ele_critys = document.getElementById('c1');//父亲标签
    ele_select.onchange  =function () {
//        alert(123)
//        console.log(this.value)
        var ele_provice = this.value;
        var citys = data[ele_provice];
        console.log(citys);
        //要在没有添加之间清空，不然你点一次添加一次，点一次添加一次
        //方式一
//        ele_critys.children.length=1;  //不可行。。但是原理和方式二的一样
        //方式二
//        ele_critys.options.length = 1; //留一个，一般多的是设成0了
        for (var i =0;i<citys.length;i++) {
            //创建一个option标签
            var ele_option = document.createElement('option'); //<option></option>
            ele_option.innerHTML = citys[i];  //得到有文本的option标签
            ele_option.value = i + 1; //设置属性值
            console.log(ele_option);
            ele_critys.appendChild(ele_option);
        }
    }
</script>

</body>
</html>

用onchange事件实现的二级联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onmouse事件</title>
    <style>
        .box{
            width: 300%;
            height: 200px;
        }
        .title{
            background: steelblue;
            line-height: 40px;
        }
        .con{
            background: slategray;
            line-height: 30px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="title">onmouse</div>
    <div class="con hide">
        <div><a href="" class="item">你好吗？</a></div>
        <div><a href="" class="item">我好啊</a></div>
        <div><a href="" class="item">好就好呗</a></div>
    </div>
</div>
<script>
    var ele_title = document.getElementsByClassName('title')[0];
    var ele_box = document.getElementsByClassName('box')[0];
    //鼠标指上去的事件
    ele_title.onmouseover = function () {
        this.nextElementSibling.classList.remove('hide');
    };
    //鼠标移走的事件的两种方式
//    方式一（推荐）
     ele_box.onmouseleave= function () {
        ele_title.nextElementSibling.classList.add('hide');
    };
//    方式二
//    ele_title.onmouseout = function () {
//       this.nextElementSibling.classList.add('hide');
//    }
//    方式一和方式二的区别：
//    不同点
//      onmouseout：不论鼠标指针离开被选元素还是任何子元素，都会触发onmouseout事件
//      onmouseleave：只有在鼠标指针离开被选元素时，才会触发onmouseleave事件
//    相同点：都是鼠标移走触发事件
</script>
</body>
</html>

<!--onmouse-->

onmouse

2、绑定事件方式

<!--绑定事件的方式一-->
<div onclick="foo(this)">div</div>
<div class="c1">div2</div>
<script>
    function foo(self) {
        console.log(self); //<div onclick="foo(this)" style="color: red;">
        self.style.color = 'red';
    }

<-------------------------------------------------------->
//方式二
//    事件的绑定方式2：标签对象.on事件 = function (){}
     var ele=document.getElementsByClassName("c1")[0];
     ele.onclick=function () {
        console.log(this); // this 代指： 当前触发时间的标签对象；
        this.style.fontSize="30px"
    };

事件的绑定方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .back{
            background-color: white;
            height: 2000px;
        }

        .shade{
            position: fixed;
            top: 0;
            bottom: 0;
            left:0;
            right: 0;
            background-color: grey;
            opacity: 0.4;
        }

        .hide{
            display: none;
        }

        .models{
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;
            height: 200px;
            width: 200px;
            background-color: wheat;

        }
    </style>
</head>
<body>
<div class="back">
    <input class="c" type="button" value="click">
</div>

<div class="shade hide handles"></div>

<div class="models hide handles">
    <input class="c" type="button" value="cancel">
</div>


<script>


    var eles=document.getElementsByClassName("c");
    var handles=document.getElementsByClassName("handles");
    for(var i=0;i<eles.length;i++){
        eles[i].onclick=function(){

            if(this.value=="click"){

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

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

                 }

            }
            else {
                for(var j=0;j<handles.length;j++){

                    handles[j].classList.add("hide");
                }

            }
        }
    }

</script>

</body>
</html>

模态对话框

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>tab</title>
  <style>
    *{margin:0; padding:0; list-style:none;}
    body{
        font-family: "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", "\9ED1\4F53", Arial, sans-serif;
    }
    h3{
        text-align: center;
        color:darkcyan;
        margin-top: 30px;
        letter-spacing: 5px;
    }
    .box{
      width: 1000px;
      margin:50px auto 0px;
    }
    #title{
      line-height: 40px;
      background-color: rgb(247,247,247);
      font-size: 16px;
      font-weight: bold;
      color: rgb(102,102,102);
    }
    #title span{
      float: left;
      width: 166px;
      text-align: center;
    }
    #title span:hover{
      /*color: black;*/
      cursor: pointer;
    }
    #content{
      margin-top: 20px;
    }
    #content li{
      width: 1050px;
      display: none;
      background-color: rgb(247,247,247);
    }
    #content li div{
      width: 156px;
      margin-right: 14px;
      float: left;
      text-align: center;
    }
    #content li div a{
      font-size: 14px;
      color: black;
      line-height: 14px;
    /*  float: left;*/
    display: inline-block;
      margin-top: 10px;
    }
    #content li a:hover{
      color: #B70606;
    }
    #content li div span{
        font-size: 16px;
        line-height: 16px;
        /*float: left;*/
        display: block;
        color: rgb(102,102,102);
        margin-top: 10px;
      }
    #content img{
      float: left;
      width: 155px;
      height: 250px;
    }
    #title .select{
      background-color: #2459a2;
      color: white;
        border-radius: 10%;
    }
    #content .show{
      display: block;
    }

    .show span{
        color: red!important;
        font-size: 30px;
    }
  </style>
</head>

<body>
    <h3 id="wel">京东商城欢迎您</h3>
    <!--  direction="right up down left" -->
<!--  behavior：滚动方式(包括3个值：scroll、slide、alternate) -->
<!--  说明：scroll：循环滚动，默认效果；slide：只滚动一次就停止；alternate：来回交替进行滚动。 -->
<!--  scrollamount="5" 滚动速度 -->

<marquee behavior="scroll" direction="right">欢迎海燕来访</marquee>

    <div class="box">
      <p id="title">
        <span class="select">家用电器</span>
        <span>家具</span>
        <span>汽车</span>
        <span>食品</span>
        <span>女鞋</span>
        <span>医疗保健</span>
      </p>

      <ul id="content">
        <li class="show">

          <div><img src="https://img10.360buyimg.com/n1/s450x450_jfs/t4786/325/2470647304/119102/9e1a4ed5/59005841Nd786a8df.jpg" alt="冰箱"><a href="#">容声(Ronshen)冰箱</a><span>价格:5600</span></div>
          <div><img src="https://img12.360buyimg.com/n1/s450x450_jfs/t3037/347/1290968859/201366/7c1028a0/57c00194N9d0a54c6.jpg" alt="洗衣机"><a href="#">海尔洗衣机</a><span>价格:5400</span></div>
          <div><img src="https://img11.360buyimg.com/n1/jfs/t3289/128/2393835119/236360/af1d283b/57e0f300N53dde603.jpg" alt="电饭煲"><a href="#">福库(CUCKOO)电饭煲</a><span>价格:3999</span></div>
          <div><img src="https://img13.360buyimg.com/n1/jfs/t3235/137/2361713777/152258/a6908440/57e098c2N44a90a5d.jpg" alt="智能电视"><a href="#">三星智能电视</a><span>价格:8999</span></div>
          <div><img src="https://img10.360buyimg.com/n1/jfs/t2053/101/1391591157/215066/572e131b/5696ee9bN2376492d.jpg" alt="净水器"><a href="#">净水器</a><span>价格:1300</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t3175/78/2357430273/262835/9a8e7f65/57e0a3e9Nbda39dd2.jpg" alt="空气净化器"><a href="#">空气净化器</a><span>价格:5300</span></div>
        </li>

        <li>

          <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div>

        </li>
        <li>
          <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div>
          <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div>
          <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div>
          <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div>
          <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div>
          <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div>
        </li>
        <li>

          <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div>

        </li>
        <li>

          <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div>

        </li>
        <li>

          <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁 肾宝片"><a href="#">汇仁 肾宝片</a><span>价格:322</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁 肾宝片"><a href="#">汇仁 肾宝片</a><span>价格:322</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁 肾宝片"><a href="#">汇仁 肾宝片</a><span>价格:322</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁 肾宝片"><a href="#">汇仁 肾宝片</a><span>价格:322</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁 肾宝片"><a href="#">汇仁 肾宝片</a><span>价格:322</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁 肾宝片"><a href="#">汇仁 肾宝片</a><span>价格:322</span></div>

        </li>


      </ul>
    </div>

    <script>
        function test(){
            var mywel = document.getElementById("wel");
            var content = mywel.innerText;
            var f_content = content.charAt(0);
            var l_content = content.substring(1,content.length);
            var new_content = l_content + f_content;
            mywel.innerText = new_content;
        }

        // setInterval("test();", 500);
    </script>
    <script>
      var title=document.getElementById('title');
      var content=document.getElementById('content');
      var category=title.getElementsByTagName('span');
      var item=content.getElementsByTagName('li');

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

          category[i].index=i;

          category[i].onclick=function(){

            for (var j = 0; j < category.length; j++) {
              category[j].className='';
              item[j].className='';
            }
            this.className='select';
            item[this.index].className='show';
          }


      }

    </script>
</body>
</html>

<!--tab切换-->

<!--tab-->

tab切换

posted @ 2018-04-24 09:14 慕沁阅读(638) 评论(0) 收藏举报

刷新页面返回顶部

慕沁

DOM

一、JavaScript的历史

一、什么是DOM

二、DOM节点

三、节点操作

四、DOM Event(事件)

公告