JavaScript学习笔记22

一、DOM基本操作

1、Element节点的一些属性

innerHTML==》可取，可写，课赋值
innerText==》可取，可赋值
textContent（火狐使用这个）

例：div.innerHTML 可以改变 div 里面的 HTML 的内容

 <div>
        <span>123</span>
        <strong>234</strong>
    </div>
    <script>
        var div = document.getElementsByTagName("div")[0];
    </script>

div.innerHTML=“123”;是覆盖

可赋值，可写值的才能+=
下面是用 innerHTML 改变 css 行间样式

例 ：innerText 可取可赋值，赋值会覆盖掉（能覆盖标签）

例：下面的innerText让span没有了，所以赋值要谨慎

2、Element节点的一些方法

ele.setAttriute()//设置
ele.getAttribute();//取这个值
行间属性可以设置系统没有的

用.setAttribute()设置属性

用.getAttribute()取这个值

---

通过 div.setAttribute(‘id’,’only’)动态的去改 div 的值

当满足一定条件时，if 就可以动态操作了，配合事件连成整体操作

---

这个行间属性可以设置系统没有的。data-log 是打点，点击率，这是人工设置的行间属性，不是系统定义的

---

例：如何取这个 data-log？

<div>
        <a href="#" data-log="0">hehe</a>
    </div>
    <script>
        var div = document.getElementsByTagName("div")[0];
        var a = document.getElementsByTagName("a")[0];
        a.onclick = function() {
            console.log(this.getAttribute("data-log"));
        }
    </script>

---

给三个标签，让他们行间有一个属性 this-name，比如第一个 DIV，第二个 SPAN

---

习题

<div>
        <p></p>
    </div>
    <script>
        var div = document.getElementsByTagName("div")[0];
        var p = document.getElementsByTagName("p")[0];
        div.setAttribute("class", "example");
        p.setAttribute("class", "slogan");
        var text = document.createTextNode("最帅");
        p.appendChild(text);
        div.appendChild(p);
        document.body.appendChild(div);
    </script>

如果想改变一个 div 结构或 dom 结构或 html 结构的 class，直接用 div.className=""就可以了，不用 setAttribute

---

二、习题

封装函数 insertAfter()；功能类似 insertBefore();
insertAfter 是系统没有提供的

提示:可忽略老版本浏览器，直接在 Element.prototype 上编程

<div>
        <i></i>
        <b></b>
        <span></span>
    </div>
    <script>
        Element.prototype.insertAfter = function(targetNode, afterNode) {
            var beforeNode = afterNode.nextElementSibling;
            if (beforeNode == null) {
                this.appendChild(targetNode);
            } else {
                this.insertBefore(targetNode, beforeNode);
            }
        }
        var div = document.getElementsByTagName("div")[0];
        var b = document.getElementsByTagName("b")[0];
        var span = document.getElementsByTagName("span")[0];
        var p = document.createElement("p");
    </script>

---

2.将目标节点内部的节点顺序，逆序。（标签逆序）
eg:<div> <a></a> <em></em></div>
<div><em></em><a></a></div>
利用 appendChild 和剪切，第一次先操作倒数第二个，第二次操作倒数第三个，写个for 循环

---

3.封装 remove(); 使得 child.remove()直接可以销毁自身

---

三、日期对象 Date()

就是一种对象，是系统提供好的

var date = new Date()大写的 Date 是系统提供的一个构造函数，
通过 new Date 的方法会给我们返回一个对象，这个对象就是一个日期对象。日期对象有很多属性和方法。
小的 date 代表此时此刻的时间。用小的 date 调用方法，如 date.getDate( )

getUTC 一类，parse()的没用，不放表格里面
在控制台调用 date.getSeconds 就是 date 创建时间的毫秒数，是静止的，不是动态的。
这个 date 对象记录的是出生的那一刻的时间，不是实时的。

---

getTime()

---

setDate()

---

循环执行用 setInterval

---

setTime()

toString()和 toTimeString()

---

作业：封装函数，打印当前是何年何月何日何时，几分几秒

四、js 定时器

一、setInterval();

注意：setInterval(“func()”,1000);定时循环器

---

例 setInerval(function () {},1000);定时器，意思是 1000 毫秒执行一次这个函数

    <script>
        var time = 1000;
        setInterval(function() {
            console.log("a");
        }, time);
        time = 2000;
        //time=2000不能改变函数里面的时间，只能执行写在time的时间数
    </script>

---

如果先定义 1000 毫秒，在后面改成 2000 毫秒，程序仍按 1000 毫秒执行，
因为他只识别一次，不能通过改变 time 改变 setInterval 的快慢

<script>
        var time = 1000;
        setInterval(function() {
            console.log("a");
        }, time);
        time = 2000;
    </script>

---

查数

<script>
        var i = 0;
        setInterval(function() {
            i++;
            console.log(i);
        }, 1000);
    </script>

---

定时器到底准不准？见下方：

<script>
        var firstTime = new Date().getTime();
        setInterval(function() {
            var lastTime = new Date().getTime();
            console.log(lastTime - firstTime);
            firstTime = lastTime;
        }, 1000);
    </script>

setInterval 计算时间非常不准

---

注意：
setInterval();是 window 的方法，在全局上就算不写 window. setInterval();他也会上全局的 GO 里面查找，所以不写window.也行。
每一个 setInterval();都会返回一个一个数字，作为唯一的标识，有唯一标识就可以把他清除掉（利用 clearInerval 清除）

用 timer2 接收返回值。timer 是逐一罗列放下排序

---

二、clearInterval();

能让setInterval停止

例：一般写了setInterval（）就要写clearInterval

<script>
        var i = 0;
        var timer = setInterval(function() {
            console.log(i++);
            if (i > 10) {
                clearInterval(timer);
            }
        }, 10);
    </script>

三、setTimeout()；

真正的定时器，隔了一段时间后再执行（起推迟作用），并且只执行一次

隔了 1000 毫秒才执行，并且只执行一次

常应用于一个电影试看期是 5 分钟

---

四、clearTimeout();

清除 setTimeout();让他停止执行

这种写法，setTimeout();还没执行就被清除了，就执行不了

---

这个 timer = setTimeout();返回的唯一标识和 setInterval 返回的唯一标识是不会重叠的，他们两个是依次的

setInterval();setTimeout();clearInterval();clearTimeout();
这四个都是全局对象，都是window 上的方法，内部函数 this 指向 window

---

setInterval(“func()”,1000);和 setTimeout();
都有另一种形式展现，里面可以写成字符串，例如"console.log(a);"。但是一般用 function( ){}

五、习题

计时器，到三分钟停止

定时器要计数，计完数以后要填到结构里面，下面的起的两个变量 minutes 和 seconds用于计数，计完数以后要填到 dom 结构里面（元素标签最正确的说法是 dom 结构，因为他可以被 dom 操作）