0417前端笔记——孤叹汝念之殇

一.时间函数

setTimsetTimeout(): 在指定的毫秒数后调用函数或计算表达式。

通过返回的标识也可以clearTimeout(id)来清除指定函数的执行。

eout(): 在指定的毫秒数后调用函数或计算表达式。

通过返回的标识也可以clearTimeout(id)来清除指定函数的执行。

2.方法：

重复执行定时器

            setInterval

            每隔多长时间执行一次函数,重复行

            setInterval(function(){

              },时间)

          延迟执行定时器

          setTimeout()

          延迟多长时间以后执行一次

          setTimeout(function(){

            ...要执行的代码..

          },时间)

          时间:毫秒数

二.history对象

1.初步理解

history 对象是历史对象。包含用户（在浏览器窗口中）访问过的 URL。history 对象是window 对象的一部分，可通过 window.history 属性对其进行访问。

history对象的属性：length，返回浏览器历史列表中的 URL 数量。

2.history对象的方法：

back()：加载history 列表中的前一个 URL。

forward()：加载历史列表中的下一个 URL。当页面第一次访问时，还没有下一个url。

go(number|URL): URL 参数使用的是要访问的 URL。而 number 参数使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。go(-1)，到上一个页面。

3.例子

   

   

    回到上一个界面

    回到上上一个界面

   

三.location 对象

1.初步理解：

location 对象是window对象之一，提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。也可通过window.location 属性来访问。

location 对象的属性href：设置或返回完整的 URL

2.location 对象的方法

reload()：重新加载当前文档。

replace()：用新的文档替换当前文档。

3.例子

四.DOM

1.初步了解

DOM 文档对象模型

            DOM赋予我们可以操作页面的能力

            可以创建,插入,修改,删除元素等等

          Web 浏览器生成一个树型结构，用来表示页面内部结构。DOM 将这种树型结构理解为由节点组成，组成一个节点树。

        2 节点:

节点类型HTML内容例如

文档节点文档本身整个文档 document

元素节点所有的HTML元素、

、

属性节点HTML元素内的属性id、href、name、class

文本节点元素内的文本 hello

注释节点HTML中的注释

            html页面中的所有内容的都是节点,而dom就是用来操作节点

          3. 获取节点:

                1.document.getElementById("id值")

                    根据元素的id属性值,获取到唯一一个元素节点

                2.主语.getElementsByTagName("元素名")

                    根据元素名字获取一组元素

                    主语:document|父节点

                3.主语.getEelementsByClassName("class属性值")

                    根据与class属性值获取一组元素

                4.getElementsByName()

                根据name属性值获取dom对象数组，常用于多选获取值

例子：

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

    div1.style.background="red";

    根据标签名字获取一组元素,注意要一个一个节点操作  主语是document

  var divs=document.getElementsByTagName("p");

      divs[0].style.color="blue";

      根据标签名字获取节点  主语:父节点

      var div2=div1.getElementsByTagName("div");

      div2[0].style.border="1px solid red";

      根据class属性获取一组元素

        var eles=document.getElementsByClassName("yellow");

        var eles2=div1.getElementsByClassName("yellow");

      for(var e in eles){

          eles[e].style.background="yellow";

      }

      eles2[0].style.background="pink";

4.创建节点和插入节点

1）创建节点:createElement()

          参数:元素标签名

        主语:document

          返回值:新节点

        插入节点 appendChild()

          追加元素,在父节点中的最后位置追加

          参数:要插入的节点

          主语:父节点

        返回值:追加的节点

        插入节点insertBefore(childNode1,ChildNode2)

        参数:

            childNode1 要插入的节点

              ChildNode2 父节点中的指定子节点

          主语:父节点

          返回值:返回第一个参数,要插入的节点

          注意:ChildNode2参数的值为null,undefined,实现的是追加的效果

2）插入节点：

wite（） 将任意的字符串插入到文档中

appendChild() 向元素中添加新的子节点，作为最后一个子节点

insertBefore()向指定的已有的节点之前插入新的节点

newItem：要插入的节点

exsitingItem：参考节点 

需要参考父节点

例子：

创建节点

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

        console.log(div);

添加图签

添加图片

5.间接查找节点

方法|属性              描述

childNodes        返回元素的一个子节点的数组

firstChild            返回元素的第一个子节点

lastChild              返回元素的最后一个子节点

nextSibling        返回元素的下一个兄弟节点

parentNode        返回元素的父节点

previousSibling  返回元素的上一个兄弟节点

例子：

   

       

我是大哥

       

我是二哥

           

我是p1

           

我是p2

           

我是p3

       

       

我是三哥

   

   

6.替换节点

方法：replaceChild(newNode, oldNode) 描述：用新的节点替换旧的节点

第一种：获取父节点，然后用新的节点替换旧节点

      父节点.replaceChild(newNode, oldNode);

第二种：通过旧节点定位到父节点，然后用新的节点替换旧节点

oldNode.parentNode.replaceChild(newNode, oldNode);

例子：

我是一个按钮

替换

7.克隆节点

var 复制好的节点 = 被复制的节点.cloneNode([true/false]);

true：深度克隆，可以克隆结构和内容

false(默认值)：只克隆结构

方法：cloneNode() 描述：复制节点

例子：

       

• red

       

• yellow

       

• blue

    复制

---

8.删除节点

方法：removeChild()  描述：从元素中移除子节点

第一种：获取父节点，然后删除子节点

      父节点.removeChild(childNode);

第二种：通过旧节点定位到父节点，然后删除子节点

childNode.parentNode.removeChild(childNode);

9.属性操作

方法|属性                        描述

getAttribute()            返回指定元素的属性值

getAttributeNode        ()返回指定属性节点

element.id                    设置或者返回元素的 id

setAttribute()            设置或者改变指定属性并指定值

setAttributeNode()        设置或者改变指定属性节点

element.style                设置或返回元素的样式属性

element.className            设置或返回元素的class属性

element.classList                  返回元素的类名

   

   

   

   

   

   

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

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

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

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

        function fn(){

            var str=text.value;

            判断值是否为空,如果为空提示不允许为空,如果不为空,把input置为空

            if(str==""){

                span.innerHTML="不能为空";

                return;

            }else{

                text.innerHTML=""; 表单元素要使用value

                text.value="";

            }

            //1.创建一个li节点

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

            2.把值放入li节点中

            li.innerHTML=str;

            3.把li节点插入到ul中

            ul.insertBefore(li,ul.firstElementChild);

        }

        btn.onclick=fn;

        text.onfocus=function(){

            span.innerHTML="";

        };