前端学习笔记——JavaScript基础

参考学习路线：https://zhuanlan.zhihu.com/p/324351537

对前端初恋的感觉——绿叶学习网：http://www.lvyestudy.com/

常见内置对象

字符串对象

获取字符串长度：

在JavaScript中，使用length属性来获取字符串的长度。

语法：

字符串名.length

如： str=“ahujdhiahfiuahgiuha”
str.length即可获取长度

大小写转换：

JavaScript中，toLowerCase()方法将大写字符串转化为小写字符串，toUpperCase()方法将小写字符串转化为大写字符串。

语法：

字符串名.toLowerCase()
字符串名.toUpperCase()

获取某个字符：

在JavaScript中，harAt()方法来获取字符串中的某一个字符。

语法：

字符串名.charAt(x)

获取字符串中第x+1个字符。

截取字符串：

在JavaScript中，substring()方法来截取字符串的某一部分。

语法：

字符串名.substring(start, end)

start,end为数字，下标都是从0开始，如（n,x）就是截取第n+1到x+1的字符串。

同时 可以去掉end，，则会截取从start后的所有字符串。

替换字符串：

在JavaScript中，replace()方法来用一个字符串替换另外一个字符串的某一部分。

语法：

字符串名.replace(原字符串, 替换字符串)
字符串名.replace(正则表达式, 替换字符串)

分割字符串：

在JavaScript中，split()方法把一个字符串分割成一个数组，这个数组存放的是原来字符串的所有字符片段。有多少个片段，数组元素个数就是多少。

语法：

字符串名.split("分割符")

如：
 var str = "HTML,CSS,JavaScript";
        var arr = str.split(",");
        document.write("数组第1个元素是：" + arr[0] + "<br/>");
        document.write("数组第2个元素是：" + arr[1] + "<br/>");
        document.write("数组第3个元素是：" + arr[2]);

​ split(" ")和split("")是不一样的！前者两个引号之间是有空格，所以表示用空格作为分割符来分割。后者两个引号之间是没有空格，可以用来分割字符串每一个字符。

​ split()方法有两个参数：第1个参数表示分割符；第2个参数表示获取分割之后截取的前n个元素。（不常用）

如：var arr = str.split(“~”, 3);

bili~nico~ytb~youku~aqiyi 得到结果 bili，nico，ytb。

检索字符串位置：

在JavaScript中，indexOf()方法来找出“某个指定字符串”在字符串中首次出现的下标位置，也可以使用lastIndexOf()来找出“某个指定字符串”在字符串中最后出现的下标位置。

语法：

字符串名.indexOf(指定字符串)
字符串名.lastIndexOf(指定字符串)

如果字符串中包含“指定字符串”，indexOf()就会返回指定字符串首次出现的下标，而lastIndexOf()就会返回指定字符串最后出现的下标；如果字符串中不包含“指定字符串”，indexOf()或lastIndexOf()就会返回-1。

数组对象

数组的创建：

在JavaScript中，new关键字来创建一个数组。创建数组，常见的有两种形式：一种是“完整形式”；另外一种是“简写形式”。

语法：

var 数组名 = new Array(元素1, 元素2, ……, 元素n);    //完整形式
var 数组名 = [元素1, 元素2, ……, 元素n];             //简写形式

调用  arr[2] 同c语言。

获取数组长度：

在JavaScript中，length属性来获取数组的长度。

语法：

数组名.length     arr.length

数组有几个元素，长度就为多少。

截取数组部分：

在JavaScript中，slice()方法来获取数组的某一部分。slice，就是“切片”的意思。

语法：

数组名.slice(start, end);

start，end为下标， 且[start,end）

添加数组元素：

在数组开头添加元素：unshift()

在JavaScript中，使用unshift()方法在数组开头添加新元素，并且可以得到一个新的数组（也就是原数组变了）。

语法：

数组名.unshift(新元素1, 新元素2, ……, 新元素n)

在数组结尾添加元素：push()

在JavaScript中，使用push()方法在数组结尾添加新元素，并且可以得到一个新的数组（也就是原数组变了）。

语法：

数组名.push(新元素1, 新元素2, ……, 新元素n)

删除数组元素：

删除数组中第一个元素：shift()

在JavaScript中，使用shift()方法来删除数组中的第一个元素，并且可以得到一个新的数组（也就是原数组变了）。

语法：

数组名.shift()

删除数组最后一个元素：pop()

在JavaScript中，使用pop()方法来删除数组的最后一个元素，并且可以得到一个新数组（也就是原数组变了）。

语法：

数组名.pop()

数组大小比较：

在JavaScript中，我们可以使用sort()方法来对数组中所有元素进行大小比较，然后按从大到小或者从小到大进行排序。

语法：

数组名.sort(函数名)

“函数名”是定义数组元素排序的函数的名字。

  //定义一个升序函数
        function up(a, b) 
        {
            return a - b;
        }
        //定义一个降序函数
        function down(a, b) 
        {
            return b - a;
        }
        //定义数组
        var arr = [3, 9, 1, 12, 50, 21];
        arr.sort(up);
        document.write("升序：" + arr.join("、") + "<br/>");
        arr.sort(down);
        document.write("降序：" + arr.join("、"));

数组颠倒顺序

在JavaScript中，使用reverse()方法来实现数组中所有元素的反向排列，也就是颠倒数组元素的顺序。reverse，就是“反向”的意思。

语法：

数组名.reverse();

将数组连接成字符串：

在JavaScript中，使用join()方法来将数组中的所有元素连接成一个字符串。

语法：

数组名.join("连接符");

不写连接符的话，默认为英文的逗号：,。

时间对象

语法：

var 日期对象名 = new Date();

创建一个日期对象，必须使用new关键字。其中Date对象的方法有很多，主要分为两大类：getXxx()和setXxx()。getXxx()用于获取时间，setXxx()用于设置时间。

用于获取时间的getXxx()

方法	说明
getFullYear()	获取年份，取值为4位数字
getMonth()	获取月份，取值为0（一月）到11（十二月）之间的整数
getDate()	获取日数，取值为1~31之间的整数
getHours()	获取小时数，取值为0~23之间的整数
getMinutes()	获取分钟数，取值为0~59之间的整数
getSeconds()	获取秒数，取值为0~59之间的整数

用于设置时间的setXxx()

方法	说明
setFullYear()	可以设置年、月、日
setMonth()	可以设置月、日
setDate()	可以设置日
setHours()	可以设置时、分、秒、毫秒
setMinutes()	可以设置分、秒、毫秒
setSeconds()	可以设置秒、毫秒

数学对象

Math对象跟其他对象不一样，我们不需要使用new关键字来创造，而是直接使用它的属性和方法就行。

语法：

Math.属性
Math.方法

Math对象的属性

常见

属性	说明	对应的数学形式
PI	圆周率	π
LN2	2的自然对数	ln(2)
LN10	10的自然对数	ln(10)
LOG2E	以2为底的e的对数	log2e
LOG10E	以10为底的e的对数	log10e
SQRT2	2的平方根	√2
SQRT1_2	2的平方根的倒数	1/√2

在实际开发中，所有角度都是以“弧度”为单位的，例如180°就应该写成Math.PI，而360°就应该写成Math.PI2，以此类推。对于角度，在实际开发中推荐这种写法：“**度数 \ Math.PI/180**”，因为这种写法可以让我们一眼就能看出角度是多少，例如：

120*Math.PI/180   //120°
150*Math.PI/180   //150°

 document.write("圆周率为：" + Math.PI);

Math对象的方法

常见

方法	说明
max(a,b,…,n)	返回一组数中的最大值
min(a,b,…,n)	返回一组数中的最小值
sin(x)	正弦
cos(x)	余弦
tan(x)	正切
asin(x)	反正弦
acos(x)	反余弦
atan(x)	反正切
atan2(y, x)	反正切（注意y、x顺序）
floor(x)	向下取整
ceil(x)	向上取整
random()	生成随机数

不常用

方法	说明
abs(x)	返回x的绝对值
sqrt(x)	返回x的平方根
log(x)	返回x的自然对数（底为e）
pow(x,y)	返回x的y次幂
exp(x)	返回e的指数

生成随机数 random（）

（1）Math.random()*m

表示生成0~m之间的随机数，例如“Math.random()*10”表示生成0-10之间的随机数。

（2）Math.random()*m+n

表示生成n~m+n之间的随机数，例如“Math.random()*10+8”表示生成8-18之间的随机数。

（3）Math.random()*m-n

表示生成-n~m-n之间的随机数，例如“Math.random()*10-8”表示生成-8-2之间的随机数。

（4）Math.random()*m-m

表示生成-m~0之间的随机数，例如“Math.random()*10-10”表示生成-10-0之间的随机数。

特别注意一下，这里的0~1是只包含0不包含1的，也就是[0, 1)。

tips：下面也是。

随机数生成某个范围内的“整数”

对于Math.random()5来说，由于floor()是向下取整，因此Math.floor(Math.random()5)生成的是0~4之间的随机整数。如果你想生成0~5之间的随机整数，应该写成：

Math.floor(Math.random()*(5+1))

也就是说，如果你想生成0到m之间的随机整数，应该这样写：

Math.floor(Math.random()*(m+1))

如果你想生成1到m之间的随机整数（包括1和m），应该这样写：

Math.floor(Math.random()*m)+1

如果你想生成n到m之间的随机整数（包括n和m），应该这样写：

Math.floor(Math.random()*(m-n+1))+n

上面是用floor()来生成我们想要的随机整数，当然我们也可以使用ceil()来实现。只不过呢，我们只需要掌握2个方法中的任意一个就可以了。

DOM

JavaScriptの三种常见节点类型

（1）元素节点

（2）属性节点

（3）文本节点

不同结点的nodeType的值：

节点类型	nodeType值
元素节点	1
属性节点	2
文本节点	3

获取元素——元素节点

• （1）getElementById()
• （2）getElementsByTagName()
• （3）getElementsByClassName()
• （4）querySelector()和querySelectorAll()
• （5）getElementsByName()
• （6）document.title和document.body

getElementById（）

get element by id 类css的id选择器 不加# 下面同理

语法：

document.getElementById("id名")

  示例： window.onload = function () 
        {
            var oDiv = document.getElementById("div1");
            oDiv.style.color = "red";
        }

此外，getElementById()获取的是一个DOM对象，在给变量命名的时候，习惯性地以英文“o”开头，以便跟其他变量区分开来，一眼就看出来这是一个DOM对象。

getElementsByTagName()

get elements by tag name 注意 element这次加了s 复数，类似css元素选择器

语法：

document. getElementsByTagName("标签名")

 window.onload = function () 
        {
            var oUl = document.getElementById("list");
            var oLi = oUl.getElementsByTagName("li");
            oLi[2].style.color = "red";
        }
        获取id为list的ul中的第li，并使第三个li元素文字变红色。（伪数组，只能使用下标形式和length属性。不能使用push（）等，即添加一个末尾，并返回长度。）

          <script>
        window.onload = function () 
        {
            var arr = ["HTML", "CSS", "JavaScript", "jQuery", "Vue.js"];
            var oUl = document.getElementById("list");
            var oLi = document.getElementsByTagName("li");
            for (var i = 0; i < oLi.length; i++) 
            {
                oLi[i].innerHTML = arr[i];
                oLi[i].style.color = "red";
            }
        }
    </script>
</head>
<body>
    <ul id="list">
        <li></li>
        <li></li>
        <li></li>
        <li></li>

这样，获取了一个伪数组，调用的时候需要加上下标。

var oLi = oUl.getElementsByTagName(“li”);
oLi[2].style.color = “red”;

但如果在获取元素的时候就指定好下标，就能直接使用指定的dom对象。

var occ = oUl.getElementsByTagName(“li”)[1];

oUl.removeChild(occ);

getElementsByClassName()

get element by classname 同理，注意s复数 类css的类选择器

语法：

document. getElementsByClassName("类名")

  window.onload = function () 
        {
            var oLi = document.getElementsByClassName("select");
            oLi[0].style.color = "red";
        }
    </script>
</head>
<body>
    <ul id="list">
        <li>HTML</li>
        <li>CSS</li>
        <li class="select">JavaScript</li>
        <li class="select">jQuery</li>
        <li class="select">Vue.js</li>

getElementsByClassName()获取的也是一个“类数组”。如果我们想得到某一个元素，也是使用数组下标的形式获取的，这一点跟getElementsByTagName()很相似。

querySelector()和querySelectorAll()

JavaScript新增了querySelector()和querySelectorAll()两个方法，使得我们可以使用CSS选择器的语法来获取所需要的元素。

语法：

document.querySelector("选择器");
document.querySelectorAll("选择器");

说明：

querySelector()表示选取满足选择条件的第1个元素，querySelectorAll()表示选取满足条件的所有元素。这两个方法都是非常简单的，它们的写法跟CSS选择器的写法是完全一样的。

document.querySelector("#main")
document.querySelector("#list li:nth-child(1)")
document.querySelectorAll(".list li")
document.querySelectorAll("input:checkbox")

对于id选择器来说，由于页面只有一个元素，建议大家用getElementById()，而不是用querySelector()或querySelectorAll()这两个。因为getElementById()方法效率更高，性能也更快。

document.querySelector(“#list li:nth-child(3)”)表示选取id为list的元素下的第3个元素，nth-child(n)属于CSS3的选择器。

也可以使用document.querySelectorAll(“#list li:nth-child(3)”)[0]来实现，两者效果是一样的。特别注意一点，querySelectorAll()方法得到的是一个类数组，即使你获取的只有一个元素，也必须使用下标[0]才可以正确获取。

getElementsByName()

对于表单元素来说，它有一个一般元素都没有的name属性。如果想要通过name属性来获取表单元素，我们可以使用getElementsByName()方法来实现。

语法：

document.getElementsByName("name名")

说明：

getElementsByName()获取的也是一个类数组，如果想要准确得到某一个元素，可以使用数组下标形式来获取。

getElementsByName()只用于表单元素，一般只用于单选按钮和复选框。

​

document.title和document.body

由于一个页面只有一个title元素和一个body元素，因此对于这两个元素的选取，JavaScript专门为我们提供了两个非常方便的方法：document.title和document.body。

  <script>
        window.onload = function () 
        {
            document.title = "梦想是什么？";
            document.body.innerHTML = "<strong style='color:red'>梦想就是一种让你感到坚持就是幸福的东西。</strong>";
        }
    </script>

创建元素

语法：

var e1 = document.createElement("元素名");      //创建元素节点
var txt = document.createTextNode("文本内容");   //创建文本节点
e1.appendChild(txt);                          //把文本节点插入元素节点中
e2.appendChild(e1);                          //把组装好的元素插入已存在的元素中

示例 创建无属性的元素

  window.onload = function ()
        {
            var oDiv = document.getElementById("xibao");
            var oEm = document.createElement("em");
            var oTxt = document.createTextNode("灵魂潮汐");


            oEm.appendChild(oTxt);
            oDiv.appendChild(oEm);

        }

           <div id="xibao"></div>

示例 创建带属性的元素

window.onload = function ()
        {

            var oPic = document.createElement("img");
            oPic.src = "xxxxxxx.xxx.webp";
            oPic.style.border = "10px solid pink";
            oPic.className = "pic";
            document.body.appendChild(oPic);
        }

在操作动态DOM时，设置元素class用的是className而不是class，JavaScript有很多关键字和保留字，其中class已经作为保留字。

示例 创建动态表格：

<script>
        window.onload = function () 
        {        
            //动态创建表格
            var oTable = document.createElement("table");
            for (var i = 0; i < 3; i++)
            {
                var oTr = document.createElement("tr");
                for (var j = 0; j < 3; j++)
                {
                   var oTd = document.createElement("td");
                   var oTxt = document.createTextNode(i+","+j);
                   oTd.appendChild(oTxt);
                   oTr.appendChild(oTd);
                }
                oTable.appendChild(oTr);
            }
            //添加到body中去
            document.body.appendChild(oTable);
        }
    </script>

插入元素

appendChild()

把一个新元素插入到父元素的内部子元素的 末尾 。

语法：

A.appendChild(B);

A表示父元素，B表示动态创建好的新元素。

insertBefore()

使用insertBefore()方法将一个新元素插入到父元素中的某一个子元素“之前”。

语法：

A.insertBefore(B,ref);

说明：

A表示父元素，B表示新子元素。ref表示指定子元素，在这个元素之前插入新子元素。

删除元素

removeChild()方法来删除父元素下的某个子元素。

语法：

A.removeChild(B);

oUl.removeChild(oUl.lastElementChild);表示删除ul中最后一个li元素，其中oUl.lastElementChild表示ul中的最后一个子元素。如果想要删除第一个子元素，可以使用以下代码来实现：

oUl.removeChild(oUl.firstElementChild);

复制元素

cloneNode()方法来实现复制元素。

语法：

obj.cloneNode(bool)

如：document.body.appendChild(oUl.cloneNode(1));   将oUl复制到body中；

说明：

参数obj表示被复制的元素，而参数bool是一个布尔值。

替换元素

使用replaceChild()方法来实现替换元素。

语法：

A.replaceChild(new,old);

说明：

A表示父元素，new表示新子元素，old表示旧子元素。

DOM进阶

HTML属性操作（对象属性）

获取HTML属性值

获取HTML元素的属性值，一般都是通过属性名，来找到该属性对应的值。

语法：

obj.attr

说明：

obj是元素名，它一个DOM对象。所谓的DOM对象，指的是getElementById()、getElementsByTagName()等方法获取到的元素节点。

attr是属性名，对于一个对象来说，当然是通过点运算符（.）来获取它的属性值。

tips：常用表单获取内容：单行文字框，复选框，下拉选项，单选的值 都是通过属性value来获取：

sks.value diuren.id qq.style.border yyds.name 等等类似的写法。

设置HTML属性值

设置HTML元素的属性值，同样也是通过属性名来设置的，非常简单。

语法：

obj.attr = "值";

说明：

obj是元素名，它一个DOM对象，attr是属性名。

直接赋值就完事。

HTML属性操作（对象方法）

getAttribute()

使用getAttribute()方法来获取元素的某个属性的值。

语法：

obj.getAttribute("attr")

说明：

obj元素名，attr属性名。下面两种获取属性值的形式是等价的。

obj.getAttribute("attr")
obj.attr

这两种方式都可以用来获取静态HTML的属性值以及动态DOM的属性值。

差别在于前者能够获取用户的自定义属性（css3内容，非元素自带属性）；

setAttribute()

使用setAttribute()方法来设置元素的某个属性的值。

语法：

obj.setAttribute("attr","值")

说明：

obj是元素名，attr是属性名。setAttribute()方法有两个参数：第1个参数是属性名；第2个参数是你要设置的属性值。下面两种设置属性值的形式是等价的：

obj.setAttribute("attr","值")
obj.attr = "值";

两者差别同上，对于自定义元素的支持不同。

removeAttribute()

使用removeAttribute()方法来删除元素的某个属性。

语法：

obj.removeAttribute("attr")

说明：

想要删除元素的某个属性，我们只有removeAttribute()这一个方法。此时，使用之前“对象属性”操作那种方式就无法实现了，因为那种方式没有提供这样的方法，只能删除标签。

hasAttribute()

使用hasAttribute()方法来判断元素是否含有某个属性。

语法：

obj.hasAttribute("attr")

说明：

hasAttribute()方法返回一个布尔值，如果包含该属性，则返回true。如果不包含该属性，则返回false。

直接使用removeAttribute()删除元素的属性是不太正确的，比较严谨的做法是先用hasAttribute()判断这个属性是否存在，如果存在，才去删除。

CSS属性操作

获取CSS属性值

使用getComputedStyle()方法来获取一个CSS属性的取值。（获取最终样式）

语法：

getComputedStyle(obj).attr

obj表示DOM对象，也就是通过getElementById()、getElementsByTagName()等方法获取的元素节点。

attr表示CSS属性名。

tips：这里的属性名使用的是“骆驼峰型”的CSS属性名。举个例子，font-size应该写成fontSize，border-bottom-width应该写成borderBottomWidth（有没有感觉像骆驼峰），以此类推。

getComputedStyle()方法其实有两种写法，以下两种是等价的。也就是说： getComputedStyle(obj).attr等价于

getComputedStyle(obj)["attr"]。
getComputedStyle(oBox).backgroundColor
getComputedStyle(oBox)["backgroundColor"]

事实上，凡是对象的属性都有这两种写法，例如oBtn.id可以写成oBtn["id"]，document.getElementById("btn")可以写成document["getElementById"]("btn")，以此类推。

我们获取的文本框value值其实是字符串，也就是说变量attr和val都是字符串来的。因此是不能使用obj.style.attr这种方式来设置CSS属性的，而必须使用obj.style[“attr”]这种方式。

设置CSS属性

style对象

使用style对象来设置一个CSS属性的值，其实就是在元素的style属性来添加样式，这个设置的是“行内样式”。

语法：

obj.style.attr = "值";

说明：

obj表示DOM对象，attr表示CSS属性名，采用的同样是“骆驼峰”型。

obj.style.attr等价于obj.style[“attr”]，例如oDiv.style.width等价于oDiv.style[“width”];

cssText属性

使用cssText属性来同时设置多个CSS属性，这是在元素的style属性来添加的。

语法：

obj.style.cssText = "值";

说明：

obj表示DOM对象，cssText的值是一个字符串，例如：

oDiv.style.cssText = "width:100px;height:100px;border:1px solid gray;";

这个字符串中的属性名不再使用骆驼峰型写法，而是使用平常的CSS写法，例如background-color应该写成background-color，而不是backgroundColor。

使用cssText来设置CSS属性，最终也是在元素的style属性中添加的。

tips：实际开发的时候，如果想要为一个元素同时设置多个CSS属性，少使用cssText来实现，更倾向于使用操作HTML属性的方式给元素加上一个class属性值，从而把样式整体给元素添加上。

DOM遍历

查找父元素

在JavaScript中，我们可以使用parentNode属性来获得某个元素的父元素。

语法：

obj.parentNode

说明：

obj是一个DOM对象，指的是使用getElementById()、getElementsByTagName()等方法获取的元素。

查找子元素

在JavaScript中，可以使用以下两组方式来获得父元素中的所有子元素或某个子元素。

• （1）childNodes、firstChild、lastChild
• （2）children、firstElementChild、lastElementChild

其中，childNodes获取的是所有的子节点。注意，这个子节点是包括元素节点以及文本节点的（如：换行也算一个）。而children获取的是所有的元素节点，不包括文本节点。

使用oUl.removeChild(oUl.lastElementChild);一句代码就可以轻松搞定。此外，firstElementChild获取的是第一个子元素节点，lastElementChild获取的是最后一个子元素节点。如果我们想要获取任意一个子元素节点，可以使用children[i]的方式来实现。

查找兄弟元素

在JavaScript中，我们可以使用以下2组方式来获得兄弟元素。

• （1）previousSibling、nextSibling
• （2）previousElementSibling、nextElementSibling

previousSibling查找前一个兄弟节点，nextSibling查找后一个兄弟节点。previousElementSibling查找前一个兄弟元素节点，nextElementSibling查找后一个兄弟元素节点。

同上 第一组可能会查到文字节点（一般是空白节点，如换行等），只希望操作元素，使用第二组。

innerHTML和innerText

使用innerHTML属性很方便地获取和设置一个元素的“内部元素”，也可以使用innerText属性获取和设置一个元素的“内部文本”。

 var oImg = document.createElement("img");
            oImg.className = "pic";
            oImg.src = "images/haizei.png";
            oImg.style.border = "1px solid silver";
            document.body.appendChild(oImg);
使用inner方法：
document.body.innerHTML = '<img class="pic" src="images/haizei.png" style="border:1px solid silver"/>';

inner的获取：

 window.onload = function ()
        {
            var oP = document.getElementById("content");
            document.getElementById("txt1").value = oP.innerHTML;
            document.getElementById("txt2").value = oP.innerText;
        }
    </script>
</head>
<body>
    <p id="content"><strong style="color:hotpink;">绿叶学习网</strong></p>
    innerHTML是：<input id="txt1" type="text"><br />      是<strong style="color:hotpink;">绿叶学习网</strong>
    innerText是：<input id="txt2" type="text">    是绿叶学习网

innerHTML获取的是元素内部所有的内容，而innerText获取的仅仅是文本内容。

事件

事件调用方式

①在script标签中调用

在script标签中调用事件，指的是在< script >< /script >标签内部调用事件。

语法：

obj.事件名 = function()
{
    ……
};

说明：

obj是一个DOM对象，指的是使用getElementById()、getElementsByTagName()等方法获取到的元素节点。

②在元素中调用事件

在元素中调用事件，指的是直接在HTML属性中来调用事件，这个属性又叫做“事件属性”。

如：

 <script>
        function alertMes()
        {
            alert("！");
        }
    </script>

    <input type="button" onclick="alertMes()" value="弹出" />

等价于：

 <input type="button" onclick="alert('！')" value="弹出" />

事件调用

鼠标事件

常见鼠标事件

事件	说明
onclick	鼠标单击事件
onmouseover	鼠标移入事件
onmouseout	鼠标移出事件
onmousedown	鼠标按下事件
onmouseup	鼠标松开事件
onmousemove	鼠标移动事件

键盘事件

常见键盘事件

• （1）键盘按下：onkeydown
• （2）键盘松开：onkeyup

表单事件

常用的表单事件

• （1）onfocus和onblur
• （2）onselect
• （3）onchange

还有一个onsubmit事件。一般都是结合后端技术来使用。

onfocus和onblur：

onfocus和onblur这两个事件往往都是配合一起使用的。例如用户准备在文本框中输入内容时，此时它会获得光标，就会触发onfocus事件。当文本框失去光标时，就会触发onblur事件。

并不是所有的HTML元素都有焦点事件，具有“获取焦点”和“失去焦点”特点的元素只有2种。

• （1）表单元素（单选框、复选框、单行文本框、多行文本框、下拉列表）
• （2）超链接

判断一个元素是否具有焦点很简单，我们打开一个页面后按Tab键，能够选中的就是具有焦点特性的元素。在实际开发中，焦点事件（onfocus和onblur）一般用于单行文本框和多行文本框这两个，其他地方比较少用。

补充：focus()方法，可以让dom对象获得焦点，blur（）取消焦点，如：

<input type="button" onclick="getfocus()" value="获取焦点">
<input type="button" onclick="losefocus()" value="移除焦点">

<script>
function getfocus() {
    document.getElementById("myAnchor").focus();
}

function losefocus() {
    document.getElementById("myAnchor").blur();
}

######

onselect

在JavaScript中，当选中“单行文本框”或“多行文本框”中的内容时，就会触发onselect事件。

选中：指长按鼠标的时候，文字被选中，被蓝色围住。

补充：select（）方法，如下，当搜索框的文字被选择，会选取所有的文字。

  var oSearch = document.getElementById("search");
            oSearch.onclick = function () 
            {
                this.select();
            };

onchange

onchange事件常用于“具有多个选项的表单元素”。

• （1）单选框选择某一项时触发。

• （2）复选框选择某一项时触发。

• （3）下拉列表选择某一项时触发。

  如果被勾选，则显示你的选择是xxx。同时，采用for循环给每个对象添加onchange事件。

  var oFruit = document.getElementsByName("fruit");
            var oP = document.getElementById("content");
            for (var i = 0; i < oFruit.length; i++) 
            {
                oFruit[i].onchange = function () 
                {
                    if (this.checked) 
                    {
                        oP.innerHTML = "你选择的是：" + this.value;
                    }
                };
            }

示例：复选框：全选/全不选

 oSelectAll.onchange = function () 
            {
                //如果选中，即this.checked返回true
                if (this.checked) {
                    for (var i = 0; i < oFruit.length; i++) 
                    {
                        oFruit[i].checked = true;
                    }
                } else {
                    for (var i = 0; i < oFruit.length; i++) 
                    {
                        oFruit[i].checked = false;
                    }
                }

示例：下拉菜单跳转网站：选择下拉列表的某一项时，就会触发onchange事件，然后就会在新的窗口打开对应的页面。

    window.onload = function () 
        {
            var oList = document.getElementById("list");
            oList.onchange = function () 
            {
                var link = this.options[this.selectedIndex].value;
                window.open(link);
            };
        }

        <select id="list">
        <option value="http://wwww.baidu.com">百度</option>
        <option value="http://www.sina.com.cn">新浪</option>
        <option value="http://www.qq.com">腾讯</option>
        <option value="http://www.sohu.com">搜狐</option>
    </select>

注：对于select元素来说，我们可以使用obj.options[n]的方式来得到某一个列表项，这个列表项也是一个DOM对象。并且还可以使用obj.selectedIndex来获取你所选择的这个列表项的下标。这两个都是下拉列表所独有的也是经常用的方法。

编辑事件

在JavaScript中，常用的编辑事件有3种。

oncopy
onselectstart
oncontextmenu

oncopy

在JavaScript中，我们可以使用oncopy事件来防止页面内容被复制。

语法：

document.body.oncopy = function () 
{
    return false;
}

onselectstart

在JavaScript中，我们可以使用onselectstart事件来防止页面内容被选取。

语法：

document.body.onselectstart=function()
{
    return false;
}

oncontextmenu

在JavaScript中，我们可以使用oncontextmenu事件来禁止鼠标右键。

语法：

document.oncontextmenu = function () 
{
    return false;
}

页面事件

onload

在JavaScript中，onload表示文档加载完成后再执行的一个事件。

语法：

window.onload = function(){
    ……
}

说明：

并不是所有情况都需要用到window.onload的，一般来说，只有在想要“获取页面中某一个元素”的时候才会用到。很重要。

浏览器从上到下解析到window.onload时，就会先不解析window.onload里面的代码，而是继续往下解析，直到把整个HTML文档解析完了之后才会回去执行window.onload里面的代码。

onunload

当用户未载入文档时执行的Javascript代码，极其少用。

onbeforeunload

在JavaScript中，onbeforeunload表示离开页面之前触发的一个事件。

语法：

window.onbeforeunload = function(){
    ……
}

说明：

与window.onload相对的应该是window.onunload，不过一般情况下我们极少用到window.onunload，而更倾向于使用window.onbeforeunload。

onbeforeunload与onunload

Onunload，onbeforeunload都是在刷新或关闭时调用，

可以在<script>脚本中通过window.onunload来指定或者在<body>里指定。
区别在于onbeforeunload在onunload之前执行，它还可以阻止onunload的执行。

　　Onbeforeunload也是在页面刷新或关闭时调用，Onbeforeunload是正要去服务器读取新的页面时调用，此时还没开始读取；而onunload则已经从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调用。Onunload是无法阻止页面的更新和关闭的。而 Onbeforeunload 可以做到。

1、onbeforeunload事件：

　　说明：目前三大主流浏览器中firefox和IE都支持onbeforeunload事件,opera尚未支持。

　　用法：

　　　·object.onbeforeunload = handler

　　　·<element onbeforeunload = “handler” … ></element>

　　描述：

　　　事件触发的时候弹出一个有确定和取消的对话框，确定则离开页面，取消则继续待在本页。handler可以设一个返回值作为该对话框的显示文本。

　　触发于：

　　　·关闭浏览器窗口

　　　·通过地址栏或收藏夹前往其他页面的时候

　　　·点击返回，前进，刷新，主页其中一个的时候

　　　·点击 一个前往其他页面的url连接的时候

　　　·调用以下任意一个事件的时候：click，document write，document open，document close，window close ，window navigate ，window NavigateAndFind,location replace,location reload,form submit.

　　　·当用window open打开一个页面，并把本页的window的名字传给要打开的页面的时候。

　　　·重新赋予location.href的值的时候。

　　　·通过input type=”submit”按钮提交一个具有指定action的表单的时候。

　　可以用在以下元素：

　　　·BODY, FRAMESET, window

　　平台支持：

　　　IE4+/Win, Mozilla 1.7a+, Netscape 7.2+, Firefox0.9+

　　示例：

　　　<html xmlns=”http://www.w3.org/1999/xhtml“>

　　　<head>

　　　<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />

　　　<title>onbeforeunload测试</title>

　　　<script>

　　　function checkLeave(){

　　　　event.returnValue=”确定离开当前页面吗？”;

　　　}

　　　</script>

　　　</head>

　　　<body onbeforeunload=”checkLeave()”>

　　　</body>

　　　</html>

2、onunload事件

　　用法：

　　　·object.onunload = handler

　　　·<element onunload = “handler”></element>

　　描述：

　　　当用户关闭一个页面时触发 onunload 事件。

　　触发于：

　　　·关闭浏览器窗口

　　　·通过地址栏或收藏夹前往其他页面的时候

　　　·点击返回，前进，刷新，主页其中一个的时候

　　　·点击 一个前往其他页面的url连接的时候

　　　·调用以下任意一个事件的时候：click，document write，document open，document close，window close ，window navigate ，window NavigateAndFind,location replace,location reload,form submit.

　　　·当用window open打开一个页面，并把本页的window的名字传给要打开的页面的时候。

　　　·重新赋予location.href的值的时候。

　　　·通过input type=”submit”按钮提交一个具有指定action的表单的时候。

　　示例：

　　　<html xmlns=http://www.w3.org/1999/xhtml>

　　　<head>

　　　<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />

　　　<title>onunload测试</title>

　　　<script>

　　　function checkLeave(){

　　　　alert(”欢迎下次再来！”);

　　　}

　　　</script>

　　　</head>

　　　<body onunload=”checkLeave()”>

　　　</body>

　　　</html>

分享：

事件监听

想要给元素添加一个事件，其实我们有以下2种方式。

• （1）事件处理器
• （2）事件监听器

事件处理器

在前面的学习中，如果想要给元素添加一个事件，我们都是通过操作HTML属性的方式来实现，这种方式其实也叫“事件处理器”，例如：

oBtn.onclick = function(){……};

事件监听器

绑定事件

所谓的“事件监听器”，指的是使用addEventListener()方法来为一个元素添加事件，又称之为“绑定事件”。

语法：

obj.addEventListener(type , fn , false)

说明：

obj是一个DOM对象，指的是使用getElementById()、getElementsByTagName()等方法获取到的元素节点。

type是一个字符串，指的是事件类型。例如单击事件用click，鼠标移入用mouseover等。注意，这个事件类型是不需要加上“on”前缀的。

fn是一个函数名，或者一个匿名函数。

false表示事件冒泡阶段调用。

例如：

//fn是一个函数名
oBtn.addEventListener("click", alertMes, false);
function alertMes() 
{
    alert("JavaScript");
}

//fn是一个匿名函数
oBtn.addEventListener("click", function () {
    alert("JavaScript");
}, false);

上面这两段代码效果相同。

    <script>
        window.onload = function () 
        {
            var oBtn = document.getElementById("btn");
            oBtn.addEventListener("click", function () {
                alert("第1次");
            }, false);
            oBtn.addEventListener("click", function () {
                alert("第2次");
            }, false);
            oBtn.addEventListener("click", function () {
                alert("第3次");
            }, false);
        }
    </script>

上面：使用事件监听器这种方式来为同一个元素添加多个相同的事件，而这一点是事件处理器做不到的。

一般情况下，如果想要为元素仅仅添加一个事件的话，下面两种方式其实是等价的。

obj.addEventListener("click", function () {……}, false);
obj.onclick = function () {……};

解绑事件

在JavaScript中，可以使用removeEventListener()方法为元素解绑（或解除）某个事件。解绑事件与绑定事件是相反的操作。

语法：

obj.removeEventListener(type , fn , false);

说明：

obj是一个DOM对象，指的是使用getElementById()、getElementsByTagName()等方法获取到的元素节点。

type是一个字符串，指的是事件类型。例如，单击事件用click，鼠标移入用mouseover等。一定要注意，这里我们是不需要加上on前缀的。

对于removeEventListener()方法来说，fn必须是一个函数名，而不能是一个函数。

 window.onload = function () 
        {
            var oP = document.getElementById("content");
            var oBtn = document.getElementById("btn");
            //为p添加事件
            oP.addEventListener("click", changeColor, false);
            //点击按钮后，为p解除事件
            oBtn.addEventListener("click", function () {
                oP.removeEventListener("click", changeColor, false);
            }, false);
            function changeColor() 
            {
                this.style.color = "hotpink";
            }
        }

如果你想要使用removeEventListener()方法来解除一个事件，那么当初使用addEventListener()添加事件的时候，就一定要用定义函数的形式。

实际上，removeEventListener()只可以解除“事件监听器”添加的事件，它是不可以解除“事件处理器”添加的事件。如果想要解除“事件处理器”添加的事件，我们可以使用“obj.事件名 = null;”来实现，如：

   oP.onclick = changeColor;
            //点击按钮后，为p元素解除事件
            oBtn.addEventListener("click", function () {
                oP.onclick = null;
            }, false);

解绑事件妙用法：

限制按钮只可以执行一次点击事件。实现思路很简单，在点击事件函数的最后解除事件就可以了。

   oP.onclick = changeColor;
            //点击按钮后，为p元素解除事件
            oBtn.addEventListener("click", function () {
                oP.onclick = null;
            }, false);

DLC：onload多次使用的解决方案

在实际开发中，有可能会使用多次window.onload，但是会发现JavaScript只执行最后一次window.onload。为了解决这个问题，就可以使用addEventListener()来实现。在这个例子中，只需要将每一个window.onload改为以下代码即可：

window.addEventListener("load",function(){……},false);

事实上，还有一种解决方法，那就是使用网上流传甚广的addLoadEvent()函数。addLoadEvent不是JavaScript内置函数，而是需要自己定义的。其中，addLoadEvent()函数代码如下：

//装饰者模式
function addLoadEvent(func)
{
    var oldonload = window.onload;
    if (typeof window.onload != "function") 
    {
        window.onload = func;
    }else {
        window.onload = function()
        {
            oldonload();
            func();
        }
    }
}

然后我们只需要调用addLoadEvent()函数，就等于调用window.onload了。调用方法如下：

addLoadEvent(function(){
    ……
});

event对象

当一个事件发生的时候，这个事件有关的详细信息都会临时保存到一个指定的地方，这个地方就是event对象。

event对象常用属性如表所示

属性	说明
type	事件类型
keyCode	键码值
shiftKey	是否按下shift键
ctrlKey	是否按下Ctrl键
altKey	是否按下Alt键

type

在JavaScript中，我们可以使用event对象的type属性来获取事件的类型。

oBtn.onclick = function (e) 
            {
                alert(e.type);
            };

实际上，每次调用一个事件的时候，JavaScript都会默认给这个事件函数加上一个隐藏的参数，这个参数就是event对象。一般来说，event对象是作为事件函数的第1个参数传入的

e仅仅是一个变量名，它存储的是一个event对象。也就是说，e可以换成其他名字，如ev、event、a等都可以，

keyCode

在JavaScript中，如果我们想要获取按下了键盘中的哪个键，可以使用event对象的keyCode属性来获取。

语法：

event.keyCode

说明：

event.keyCode返回的是一个数值，常用的按键及对应的键码如表所示。

按键	键码
W（上）	87
S（下）	83
A（左）	65
D（右）	68
↑	38
↓	40
←	37
→	39

如果是shift、ctrl和alt键，我们不需要通过keyCode属性来获取，而是可以通过shiftKey、ctrlKey和altKey属性获取。

禁止按键：

 window.onload = function () {
            document.onkeydown = function (e) {
                if (e.shiftKey || e.altKey || e.ctrlKey) {
                    alert("禁止使用shift、alt、ctrl键！")
                }
            }
        }

e.keyCode返回的是一个数字，而e.shiftKey、e.ctrlKey、e.altKey返回的都是布尔值（true或false），注意一下两者的区别。

this

在JavaScript中，this是非常复杂的。这里只记录this在事件操作中的使用情况进行介绍，而对于this在其他场合（如面向对象开发等）的使用，在JavaScript进阶部分再详细讲解。

在事件操作中，可以这样理解：哪个DOM对象（元素节点）调用了this所在的函数，那么this指向的就是哪个DOM对象。

window.onload = function () 
        {
            var oDiv = document.getElementsByTagName("div")[0];
            oDiv.onclick = function () 
            {
                this.style.color = "hotpink";
            }
        }


var oDiv = document.getElementsByTagName("div")[0];
            oDiv.onclick = changeColor;
            function changeColor()
            {
                this.style.color = "hotpink";
            }

上面两个例子等效，

又如：

 var oDiv = document.getElementsByTagName("div")[0];
            var oP = document.getElementsByTagName("p")[0];
            oDiv.onclick = changeColor;
            oP.onclick = changeColor;
            function changeColor()
            {
                this.style.color = "hotpink";
            }

Window对象

在JavaScript中，一个浏览器窗口就是一个window对象（这句话很重要）。

window下的子对象

子对象	说明
document	文档对象，用于操作页面元素
location	地址对象，用于操作URL地址
navigator	浏览器对象，用于获取浏览器版本信息
history	历史对象，用于操作浏览历史
screen	屏幕对象，用于操作屏幕宽度高度

window对象常用方法

方法	说明
alert()	提示对话框
confirm()	判断对话框
prompt()	输入对话框
open()	打开窗口
close()	关闭窗口
setTimeout()	开启“一次性”定时器
clearTimeout()	关闭“一次性”定时器
setInterval()	开启“重复性”定时器
clearInterval()	关闭“重复性”定时器

对于window对象来说，无论是它的属性，还是方法，都可以省略window前缀。例如window.alert()可以简写为alert()，window.open()可以简写为open()，甚至window.document.getElementById()可以简写为document.getElementById()，以此类推。

常用window对象：

窗口操作

打开窗口

在JavaScript中，可以使用window对象的open()方法来打开一个新窗口。

语法：

window.open(url, target)

说明：

window.open()可以直接简写为open()，不过我们一般都习惯加上window前缀。window.open()参数有很多，但是只有url和target这两个用得上。

url指的是新窗口的地址，如果url为空，则表示打开一个空白窗口。空白窗口很有用，我们可以使用document.write()往空白窗口输出文本，甚至输出一个HTML页面。

target表示打开方式，它的取值跟a标签中target属性的取值是一样的，常用取值有两个：_blank和_self。当target为“_blank（默认值）”，表示在新窗口打开；当target为“_self”时，表示在当前窗口打开。

 oBtn.onclick = function () 
            {
                window.open("nanivy.space");
            };
往新打开的空白网页加入魔法：
 var oBtn = document.getElementById("btn");
            oBtn.onclick = function () 
            {
                var opener = window.open();
                opener.document.write("这是一个新窗口");
                opener.document.body.style.backgroundColor = "lightskyblue";
            };
示例2：
 oBtn.onclick = function () 
            {
                opener = window.open();
                var strHtml = '<!DOCTYPE html>\
                            <html>\
                            <head>\
                                <title></title>\
                            </head>\
                            <body>\
                                <strong>小心偷影子的人，他会带走你的心。</strong>\
                            </body>\
                            </html>';        
                opener.document.write(strHtml);
            };

opener是一个空白页面窗口，就可以使用document.write()方法来输出一个HTML文档了

window.open()就像函数调用一样，会返回（也就是return）一个值，这个值就是新窗口对应的window对象。也就是说，此时opener就是这个新窗口的window对象。只要我们获取到opener（也就是新窗口的window对象），就可以像平常那样随意操作页面的元素.

如果你打开的是同一个域名下的页面或空白窗口，就可以像上面那样操作新窗口的元素或样式。但是如果你打开的是另外一个域名下面的页面，是不允许操作新窗口的内容的，因为这个涉及跨越权限的问题。

关闭窗口

在JavaScript中，我们可以使用window.close()来关闭一个新窗口。

语法：

window.close()

说明：

window.close()方法是没有参数的。

  oBtn.onclick = function () 
            {
                window.close();
            };
打开又关闭一个窗口
btnOpen.onclick = function ()
            {
                opener = window.open("nanivy.space");
            };
            btnClose.onclick = function () {
                opener.close();
            }

此外还有其他窗口操作，待拓展

待补充：窗口最大化、最小化、控制窗口大小、移动窗口等

对话框

alert()

在JavaScript中，alert()对话框一般仅仅用于提示文字。对于alert()，只需记住一点就行：在alert()中实现文本换行，用的是\n。

语法：

alert("提示文字")

confirm()

在JavaScript中，confirm()对话框不仅提示文字，还提供确认。

语法：

confirm("提示文字")

说明：

如果用户点击【确定】按钮，则confirm()返回true。如果用户点击【取消】按钮，则confirm()返回false。

 oBtn.onclick = function () 
            {
                if (confirm("确定要跳转到绿叶首页吗？")) {
                    window.location.href = "http://www.lvyestudy.com";
                }else{
                    document.write("你取消了跳转");
                }
            };

prompt()

在JavaScript中，prompt()对话框不仅提示文字，还返回一个字符串。

语法：

prompt("提示文字")

总结

方法	说明
alert()	仅提示文字，没有返回值
confirm()	具有提示文字，返回“布尔值”（true或false）
prompt()	具有提示文字，返回“字符串”

定时器

setTimeout()和clearTimeout()

在JavaScript中，我们可以使用setTimeout()方法来“一次性”地调用函数，并且可以使用clearTimeout()来取消执行setTimeout()。

语法：

setTimeout(code, time);

说明：

参数code可以是一段代码，可以是一个函数，也可以是一个函数名。

参数time是时间，单位为毫秒，表示要过多长时间才执行code中的代码。

code是一段代码，2s；
  window.onload = function ()
        {
            setTimeout('alert("欢迎来到xxx");', 2000);
        }
code是一段函数
 window.onload = function () 
        {
            setTimeout(function () {
                alert("欢迎！");
            }, 2000);
        }
code是函数名
  window.onload = function () 
        {
            setTimeout(alertMes, 2000);
        }
        function alertMes(){
            alert("欢迎来到绿叶学习网");
        }

这里setTimeout()第一个参数是一个函数名，这个函数名是不需要加括号()的！下面两种写法是等价的：

setTimeout(alertMes, 2000)
setTimeout("alertMes()", 2000)

clearTimeout的用法：

 window.onload = function () 
        {
            //获取元素
            var oBtn = document.getElementsByTagName("input");
            //timer存放定时器
            var timer = null;
            oBtn[0].onclick = function () 
            {
                timer = setTimeout(function () {
                    alert("欢迎来到绿叶学习网");
                }, 2000);
            };
            oBtn[1].onclick = function () 
            {
                clearTimeout(timer);
            };
        }

setInterval()和clearInterval()

在JavaScript中，可以使用setInterval()方法来“重复性”地调用函数，并且可以使用clearInterval()来取消执行setInterval()。

语法：

setInterval(code, time);

说明：

参数code可以是一段代码，可以是一个函数，也可以是一个函数名。

参数time是时间，单位为毫秒，表示要过多长时间才执行code中的代码。

此外，setInterval()跟setTimeout()语法是一样的，唯一不同的是：setTimeout()只执行一次；而setInterval()可以重复执行无数次。对于setInterval()来说，下面3种方式都是正确的，这个跟setTimeout()一样：

//方式1
setInterval(function(){…}, 2000)
//方式2
setInterval(alertMes, 2000)
//方式3
setInterval("alertMes()", 2000)

示例：倒计时器
  var timer = null;
            //i用于计数
            var i = 0;
            //“开始”按钮
            oBtn[0].onclick = function () 
            {
                //每次点击“开始”按钮，一开始就清除一次定时器，避免多次点击开始会产生bug。
                clearInterval(timer);
                //每隔1秒切换一次背景颜色
                timer = setInterval(function () {
                    oDiv.style.backgroundColor = colors[i];
                    i++;
                    i = i % colors.length;
                }, 1000);
            };
            //“暂停”按钮
            oBtn[1].onclick = function () 
            {
                clearInterval(timer);
            };

clearInterval()用法同clearTimeout()

用变量来保存计时器，然后直接清除；

 clearInterval(timer);

location对象

在JavaScript中，可以使用window对象下的location子对象来操作当前窗口的URL。所谓URL，指的就是页面地址。对于location对象，只需要掌握以下3个属性（其他不用管），如表所示。

属性	说明
href	当前页面地址
search	当前页面地址“？”后面的内容
hash	当前页面地址“#”后面的内容

window.location.href

在JavaScript中，我们可以使用location对象的href属性来获取或设置当前页面的地址。

语法：

window.location.href

说明：

window.location.href可以直接简写为location.href，不过我们一般都习惯加上window前缀。

   var url = window.location.href;
        document.write("当前页面地址是：" + url);

  2s跳转
    setTimeout(function () {
            window.location.href = "http://www.lvyestudy.com";
        }, 2000);

window.location.search

在JavaScript中，我们可以使用location对象的search属性来获取和设置当前页面地址“?”后面的内容。

语法：

window.location.search
例：
  document.write(window.location.search);

window.location.hash

在JavaScript中，可以使用location对象的hash属性来获取和设置当前页面地址井号（#）后面的内容。井号（#）一般用于锚点链接。

window.location.hash

navigator对象

在JavaScript中，可以使用window对象下的子对象navigator来获取浏览器的类型。

语法：

window.navigator.userAgent

if (window.navigator.userAgent.indexOf("MSIE") != -1) {
            alert("这是IE");
        }else if (window.navigator.userAgent.indexOf("Chrome") != -1) {
            alert("这是Chrome");
        }else if (window.navigator.userAgent.indexOf("Firefox") != -1) {
            alert("这是Firefox");
        }

document对象

常用

属性	说明
document.title	获取文档的title
document.body	获取文档的body
document.forms	获取所有form元素
document.images	获取所有img元素
document.links	获取所有a元素
document.cookie	文档的cookie
document.URL	当前文档的URL
document.referrer	返回使浏览者到达当前文档的URL

（1）document.title和document.body之前获取元素已经了解。

（2）document.forms、document.images、document.links这3个分别等价于下面3个，所以一般用document.getElementsByTagName来获取就行了，不需要去记忆。

document.getElementsByTagName("form")
document.getElementsByTagName("img")
document.getElementsByTagName("a")

（3）cookie一般结合后端技术操作中用得比较多，document.cookie单纯在前端中用得也不是非常多，我们简单看一下就行。

document.URL

在JavaScript中，我们可以使用document对象的URL属性来获取当前页面的地址。

语法：

document.URL

 <script>
        var url = document.URL;
        document.write("当前页面地址是：" + url);
    </script>

document.URL和window.location.href都可以获取当前页面的URL，不过它们也有区别：document.URL只能获取不能设置；window.location.href既可以获取也可以设置。

document.referrer

在JavaScript中，我们可以使用document对象的referrer属性来获取用户在访问当前页面之前所在页面的地址。例如我从页面A的某个链接进入页面B，如果在页面B中使用document.referrer，就可以获取到页面A的地址。

以建立两个页面，然后在第1个页面设置一个超链接指向第2个页面。当我们从第1个页面超链接进入第2个页面时，在第2个页面使用document.referrer就可以获取第1个页面的地址了。

document对象方法

常用

方法	说明
document.getElementById()	通过id获取元素
document.getElementsByTagName()	通过标签名获取元素
document.getElementsByClassName()	通过class获取元素
document.getElementsByName()	通过name获取元素
document.querySelector()	通过选择器获取元素，只获取第1个
document.querySelectorAll()	通过选择器获取元素，获取所有
document.createElement()	创建元素节点
document.createTextNode()	创建文本节点
document.write()	输出内容
document.writeln()	输出内容并换行

document.write()

在JavaScript中，可以使用document.write()输出内容。这个方法我们已经接触得够多了，这里不再赘述。

语法：

document.write("内容");
 document.write('<div style="color:hotpink;">绿叶学习网</div>');

document.write()不仅可以输出文本，还可以输出标签。此外，document.write()都是往body标签内输出内容的。

document.writeln()

不常用

writeln()方法跟write()方法相似，唯一区别是：writeln()方法会在输出内容后面多加上一个换行符\n。

一般情况下，这两种方法在输出效果上是没有区别的，仅当在查看源码才看得出来区别，除非把内容输出到pre标签内。

语法：

document.writeln("内容")