JavaScript 基础知识总结(二)

作者: 工具速递 | 来源:发表于2018-02-24 10:58 被阅读57次

欢迎关注个人微信公众账号：byodian
个人博客：Byodian's Blog

JavaScript 基础知识总结(二)包括 DOM、事件、window 对象、document 对象

一、DOM 基础知识

1. DOM 简介

DOM 对象

DOM ，全称 “Document Object Model” (文档对象模型)，它是由 W3C 定义的一个标准。简单来说，DOM 里面有许多方法，我们可以通过它提供的方法来操作一个页面中的某个元素，例如改变这个元素的颜色、点击这个元素实现某些效果，直接把这个元素删除等。

一句话总结：DOM 操作，可以简单理解为 “元素操作。”

DOM 节点层次

DOM 可以将任何 XML 或 HTML 文档描绘成一个由多层节点构成的结构。简单来说，DOM　采用的是　树形结构 ，用树节点形式来表示页面中的每一个元素。以下面的 HTML 为例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8">
</head>
<body>
    <h1>前端技术</h1>
    <p>HTML</p>
    <p>CSS</p>
    <p>JavaScript</p>
</body>
</html>

对于上面这个 HTML 文档，DOM 会将其解析为如下图所示的树形结构。
[图片上传失败...(image-47811-1519440903938)]
每一个元素就是一个节点，而每一个节点就是一个对象。也就是说，我们在操作元素时，其实就是把元素看成一个对象，然后使用这个对象的属性和方法来进行相关的操作。(这是理解 DOM 操作的关键)

2. 节点类型

在 JavaScript 中，节点分为很多类型，共有 12 种类型。这里常见的有三种，它们分别是：

元素节点
属性节点
文本节点

这里还有一点需要注意的就是节点跟元素是不一样的概念，节点包括元素。

nodeType 属性

在 JavaScript 中，我们使用 nodeType 属性来判断一个节点的类型。不同节点的 nodeType 属性值如下所示。

元素节点.nodeType = 1
属性节点.nodeType = 2
文本节点.nodeType = 3

此外，对于节点类型，有以下三点需要注意：

一个元素就是一个节点，这个节点称之为 “元素节点”。
属性节点和文本节点看起来像是元素节点的一部分，但实际上，他们是独立的节点，并不属于元素节点。
只有元素节点才可以拥有子节点，属性节点和文本节点都无法拥有子节点。

nodeValue 属性

元素节点的 nodeValue 属性值为 null

文本节点的 nodeValue 属性值为 文本内容

3. 获取元素

获取元素，准去来说，就是获取元素节点的。对于一个页面，我们想要对谋个元素进行操作，就必须通过一定的方式来获取元素，只有获取到了才能对其进行相应的操作。

在 JavaScript 中我们可以通过以下六种方式来获取指定元素。

getElementById()
getElementsByTagName()
getElementsByClassName()
querySelector() 和 querySelectorAll()
getElementsByName()
document.title 和 document.body

getElementById()

在 JavaScript 中，如果想要通过 id 来获取元素，我们可以通过 getElementById() 来实现。

语法：document.getElementById()

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8">
    <script>
        window.onload = function (){
            var oDiv = document.getElementById("div1");
            oDIv.style.color = "red";
        }
    </script>
</head>
<body>
    <div id="div1">HTML</div>
</body>
</html>

上面代码 doument.getElementById("div1") 会获取 id 为 div1 的 div 元素并将其标签中的内容颜色变为红色。

这里关于变量的命名习惯给一个 DOM 对像的变量开头加 o ，以便于其他变量区分开来，并且可以让我们一眼就看出来这是一个 DOM 对象。

getElementsByTagName()

通过标签名选中元素

语法：document.getElementsByTagName("标签名")

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8">
    <script>
        window.onload = function (){
            // 获取 ul 元素
            var oUl = document.getElementById("list");
            // 获取 id 为 list 的 ul 元素下的 所有 li 元素
            var oLi = oUl.getElementsByTagName("li");
            // 将第三个列表元素下的内容 JavaScript 变为红色
            oLi[2].style.color = "red";
        }
    </script>
</head>
<body>
    <ul id = "list">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
</body>
</html>

代码中，首先使用 getElementById() 方法获取 id 为 list 的 ul 元素，然后在 ul 元素上调用 getElementsByTagName() 方法获取该 ul 元素下的所有 li 元素。

上面获取 li 元素如果使用 document.getElementsByTagName("li") 方法获取的是整个 HTMl 页面的所有 li 元素，而使用 oUl.getElementsByTagName("li") 获取的仅仅是 id 为 list 的 ul 元素下的所有 li 元素。

这里需要注意的是 getElementsByTagName() 方法获取的是一个 “类数组”（也叫伪数组）。

伪数组与数组的区别在于：

只能使用 length 属性、方括号 方法或者 item() 方法的形式。
不能使用 push() 等方法。

getElementsByClassName()

通过 class 来选中元素。

语法： document.getElementsByClassName()

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8">
    <script>
        window.onload = function (){
            var oLi = document.getElementsByClassName("selected");
            // 将列表元素中的内容 JavaScript 变为红色。
            oLi[1].style.color = "red";
        }
    </script>
</head>
<body>
    <ul id="list">
        <li>HTML</li>
        <li class="selected">CSS</li>
        <li class="selected">JavaScript</li>
</body>
</html>

代码 document.getElementsByClassName("selected") 会获取 class 属性为 selected 的列表元素，并将获取的列表元素中的内容 JavaScript 变为红色。

querySelector() 和 querySelectorAll()

这两个方法是我们可以通过 CSS 选择器的语法来获取所需要的元素

语法： document.querySelector("选择器") document.querySelectorAll("选择器")

querySelector() 表示选取满足条件的第一个元素，querySelectorAll() 表示选取满足条件的所有元素。其中这两个方法的选择条件的写法跟 CSS 选择器的写法完全一样。

举例：

document.querySelector("#main"); // 选取 id 为 main 的元素
document.querySelector(".main"); // 选取 class 为 main 的第一个元素
document.querySelectorAll("#list li") // 选取 id 为 list 的 ul 元素下所有的 li 元素
document.querySelectorAll("input:checkbox") // 选取所有的复选框

对于 id 选择器来说，由于页面只有一个元素，建议使用 getElementById() 方法，因为这个方法效率更高，性能更好。

getElementsByName()

该方法用于表单元素，因为它有一个其他普通元素没有的 name 属性。

语法：document.getElementsByName

getElementsByName() 跟 getElementsByTagName() 类似，获取的也是一个类数组，可以使用 方括号法 或者 item()方法 获取其中的元素。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8">
    <script>
        window.onload = function(){
          // 获取 name 属性值为 fruit 的所有表单元素
          var oInput = document.getElementsByName("fruit"); 
          oInput[2].checked = true;
        };
    </script>
</head>
<body>
    <label><input type="radio" name="fruit" value="苹果">苹果</label>
    <label><input type="radio" name="fruit" value="香蕉">香蕉</label>
    <label><input type="radio" name="fruit" value="橘子">橘子</label>
</body>
</html>

oInput[2].checked = true 表示将类数组中的第三个元素的 checked 属性设置为 true ，也就是第三个单选按钮被选中。

document.title 和 document.body

由于一个页面只有一个 title 元素和 body 元素，因此对于这两个元素的选取使用这些方法将会非常的方便。

语法：document.title document.body

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8">
    <script>
        window.onload = function(){
          // 将页面的 titlt 设置为 "JavaScript 基础学习"
          document.title = "JavaScript 基础学习"；
          
          // 将页面的内容设置为 "加油哦"
          document.body.innerHTML = "<p>加油哦</p>"
    </script>
</head>
<body>
</body>
</html>

document 对象的属性还非常多，这里只是其中两个属性，后面在 document 对像一节中还会说到。

小结

getElementById() 和 getElementsByTagName() 的区别

getElementById() 获取的是一个元素，而 getElementsByTagName() 获取的是多个元素(类数组)。
getElementById() 只能由 document 对象调用，也就是前面只可以接 document，而 getElementsByTagName() 前面不仅可以接 document，还可以接其他 DOM 对象。
getElementById() 不可以操作动态创建的 DOM 元素，而 getElementsByTagName() 可以操作动态创建的 DOM 元素。

4. 创建元素

createElement() 创建元素节点

createTextNode() 创建文本节点

语法：
var el = document.createElement("元素名")； // 创建元素节点

var txt = document.createTextNode("文本内容") // 创建文本节点

在前面介绍过：在 DOM 中，每一个元素节点都被看成是一个对象。因此我们可以像操作对象一样，来操作元素的特性，为它添加更多的子节点，以及其他操作。比如：

var div = document.createElement("div"); //创建 div 标签元素
div.id = "myNewDiv";                    //设置 div 的 id 属性值
div.className = "box";                  //设置 div 的 class 属性值

要把新元素添加到文档树中，可以使用 appendChild()、insertBefore()或 replaceChild() 方法。

5. 插入元素

前面介绍了创建元素，但创建的元素如果不添加到文档树，它只会游离于文档树中不会影响浏览器的显示。

怎么把新创建的元素插入到文档树中这里有两种方法：

appendChild()
insertBefore()

这两个方法都需要获取父元素才可以进行操作。

appendChild()

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

语法：A.appendChild(B);

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

举例：

// 部分代码
var div = document.createElement("div"); // 创建 div 元素
document.body.appendChild(div)           // 将新创建的 div 元素插入到页面中 body 元素的内部子元素的末尾

代码 document.body.appendChild("div") 会将新创建的 div 元素插入到 body 元素内部子元素的末尾。

insertBefore()

把一个新创建的元素插入到父元素中某一个子元素之前。

语法：A.insertBefore(B,ref)

其中 A 表示父元素，B表示新创建的元素，ref表示指定的子元素。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8">
    <script>
        window.onload = function (){
            // 获取元素
            var oBtn = document.getElementById("btn");
            
            // 为按钮添加点击事件
            oBtn.onclick = function(){
                // 获取 ul 元素
                var oUl = document.getElementById("list"); 
                
                // 创建 li 元素节点
                var oLi = document.createElement("li");
                // 创建文本节点
                var textNode = document.createTextNode("jQuery");
                // 将文本节点插入到新创建的 li 元素中
                oLi.appendChild(textNode);
                // 将新创建的 li 元素插入到 已经存在 ul 的第一个元素前面
                oUl.insertBefore(oLi,oUl.firstElementChild);
            }
        }
    </script>
</head>
<body>
    <ul id="list">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
    <input id="btn" type="button" value="插入">
</body>
</html>

oUl.firstElementChild 表示获取 ul元素下的第一个元素。上面的代码表示在点击插入按钮后，会将文本内容插入到列表的第一项。浏览器预览效果如下图所示。

[图片上传失败...(image-437b8a-1519440903938)]

小结

如果想要创建一个元素，需要以下几步：

创建元素节点：createElement()
创建文本节点：createTextNode()
把文本节点插入到元素节点：appendChild()
把组装好的元素插入到已有的元素中：appendChild()

6. 替换元素

replaceChild() 可以替换元素。

语法：A.replaceChild(newELement,oldElement)

其中 A 表示父元素，newElement 表示新子元素，oldElement 表示旧子元素。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8">
    <script>
        window.onload = function (){
            // 获取元素
            var oBtn = document.getElementById("btn");
            
            // 为按钮添加点击事件
            oBtn.onclick = function(){
                // 获取 ul 元素
                var oUl = document.getElementById("list"); 
                
                // 创建 li 元素节点
                var oLi = document.createElement("li");
                // 创建文本节点
                var textNode = document.createTextNode("jQuery");
                // 将文本节点插入到新的 li 元素中
                oLi.appendChild(textNode);
                // 替换 ul 元素的第一个元素
                oUl.replaceChild(oLi,oUl.firstElementChild);
            }
        }
    </script>
</head>
<body>
    <ul id="list">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
    <input id="btn" type="button" value="替换">
</body>
</html>

oUl.replaceChild(oLi,oUl.firstElementChild) 表示将 ul 元素的第一个元素替换为新创建的 li 元素。浏览器预览效果如下图所示。

enter image description here

7. 删除元素

removeChild() 删除父元素下的某一个子元素。

语法：A.removeChild(B)

举例：

<head>
    <title></title>
    <meta charset="UTF-8">
    <script>
        window.onload = function (){
            // 获取元素
            var oBtn = document.getElementById("btn");
            
            // 为按钮添加点击事件
            oBtn.onclick = function(){
                // 获取 ul 元素
                var oUl = document.getElementById("list"); 
                oUl.removeChild(oUl.lastElementChild);
            }
        }
    </script>
</head>
<body>
    <ul id="list">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
    <input id="btn" type="button" value="删除">
</body>
</html>

oUl.removeChild(oUl.lastElementChild) 表示删除 ul 中最后一个 li 元素。其中 oUl.lastElementChild 表示最后一个子元素。浏览器预览效果如下图所示。

enter image description here

8. 复制元素

我们可以使用 cloneNode() 方法来复制元素。

语法：obj.clone(Boolean)

说明：参数 obj 表示被复制的元素，而参数 Boolean 表示一个布尔值，取值如下：

1 或 true ：表示复制元素本身以及复制该元素下的所有子元素。
0 或 false ：表示只复制元素本身。

二、DOM 进阶

DOM 进阶包括 HTML 属性操作、HTML 方法操作、CSS属性操作和 DOM 操作，当然这里介绍的只是基础的内容，更深入的以后会慢慢介绍。

不管是用 对象属性还是对象方法方式，都会涉及以下两种操作。

获取 HTML 属性值
设置 HTML 属性值

1. HTML 属性操作(对象属性)

HTML 属性操作，指的是使用 JavaScript 来操作一个元素的 HTML 属性。比如一个元素的 id 、class 等属性。

获取 HTML 属性值

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

语法：obj.attr

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

attr 是属性名，通过 "." 运算符获取。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8">
    <script>
        window.onload = function(){
            // 获取元素
            var oDiv = document.getElementById("div");
            // 在浏览器控制台打印 div 元素的 id 属性值
            console.log(oDiv.id);
        }
    </script>
</head>
<body>
     <div id="div">JavaScript</div>
</body>
</html>

oDIv.id 表示获取 div 元素的 id 属性值。其中 console.log() 方法表示在浏览器控制台打印内容。

要获取文本框、单选按钮、多选按钮和下拉菜单中的值，可以使用 obj.vlalue 来获取。其中 obj 表示表单元素。

设置 HTML 属性值

设置 HTML 元素的属性值，同样是使用属性名来设置。

语法：obj.attr = "值"

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8">
    <script>
        window.onload = function (){
             // 动态创建一个按钮
            var oInput = document.createElement("input");
            // 设置按钮的属性
            oInput.id = "btn";
            oInput.type = "button";
            oInput.value = "提交"
            document.body.appendChild(oInput); 
            
            // 为按钮添加点击事件
            oInput.onclick = function(){
                console.log(oInput.value);
            }
        }
    </script>
</head>
<body>
</body>
</html>

上面的代码表示创建一个按钮元素，在浏览器中，点击提交按钮会在控制台打印按钮元素的 value 值

2. HTML 方法操作(对象方法)

这里有四种 对象方法 来操作 HTML 属性。

getAttribute()
setAtribute()
removeAttribute()
hasAttribute()

getAttribute()

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

语法：obj.getAttribute("attr")

obj 是元素名，attr 是属性名。该方法只接受一个参数，下面两种获取属性值的形式是等价的。

obj.getAttirbute("attr")
obj.attr

举例：getAttribute()

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8">
    <script>
        window.onload = function(){
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function (){
                console.log(oBtn.getAttribute("id"));
            }
        }
    </script>
</head>
<body>
    <input id="btn" class="myBtn" type="button" value="获取">
</body>
</html>

通过 console.log(oBtn.getAttribute("id")) 在浏览器中点击获取按钮后，可以在控制台打印按钮的 id 属性值。

setAtribute()

通过使用 setAttribute() 方法可以设置元素的某个属性值。

语法：obj.setAttribute("attr","值")

obj 是元素名，attr 是属性名。setAttribute() 方法有两个参数，第一个参数表示属性名，第二个参数表示属性值。同样以下两种设置属性值的形式是等价的

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

举例：setAttribute()

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8">
    <script>
        window.onload = function(){
            var oBtn = document.getElementById("btn1");
            oBtn.onclick = function (){
                oBtn.setAttribute("id","btn2");
                console.log(oBtn.id);
            }
        }        
    </script>
</head>
<body>
    <input id="btn1" type="button" value="修改">
</body>
</html>

代码 oBtn.setAttribute("id","btn2") 修改 input 元素的 id 属性值，在浏览器中通过点击修改按钮可以在控制台打印修改后的 id 属性值。 id 属性值即为 btn2。

removeAttribute()

使用 removeAttribute() 删除某一个元素的属性值

语法：obj.removeAttribute("attr")

obj 是元素名，attr 是属性名。

hasAttribute()

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

语法：obj.hasAttribute("attr")

obj 是元素名，attr 是属性名。

该方法返回一个布尔值，如果含有该属性，则返回 true ，如果不含有，则返回 false 。实际上，使用 removeChild() 方法删除一个元素的某属性前应该先使用 hasAttribute() 方法判断属性是否存在，若存在再删除。

3. CSS 属性操作

在 JavaScript 中，CSS 属性操作同样有两种：

获取 CSS 属性值
设置 CSS 属性值

获取 CSS 属性值

使用 getComputedStyle() 方法来获取一个 CSS 属性的取值。

语法：getComputedStyle(obj).attr

obj 是元素名，它是一个 DOM 对象。这里的 DOM 对象，指的是使用 getElementById()、getElementsByTagName() 等方法获取的元素节点。attr 表示 CSS 属性名。这里的属性名使用的是 骆驼峰型 的CSS 属性名。

在 JavaScript 中，CSS 属性名之所以要使用 骆驼峰法 命名，是因为 CSS 属性名中的 "-" 在 JavaScript 中表示运算符减号，不能将其作为变量、函数或者属性的名字。

举个例子，font-size 应该写成 fontSize，border-bottom-width 应该写成 borderBottomWidth 。

举例：getComputedStyle(obj).attr

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8">
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: #ccc;
        }
    </style>
    <script>
        window.onload = function (){
            // 获取元素
            var oBtn = document.getElementById("btn");
            var oBox = document.getElementById("box");
            
            // 为按钮添加点击事件
            oBtn.onclick = function () {
                var oBoxBgC = getComputedStyle(oBox).backgroundColor;
                console.log(oBoxBgC);
            }
        }
    </script>
</head>
<body>
    <input id="btn" type="button" value="获取颜色">
    <div id="box"></div>
</body>
</html>

在浏览器中通过点击 获取颜色 按钮，就可以在控制台打印 div 标签的背景颜色值。

设置 CSS 属性值

设置 CSS 属性值有两种方式实现：

style 属性
cssText 属性

style 属性

使用 style 对象来设置一个 CSS 属性值，其实就是在元素的 style 属性上添加样式，这个设置的是区别于外部样式和内部样式的行内样式。一定要区分开。

语法：obj.style.attr = "值";

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

obj.style.attr = "值" 等价于 obj.style["attr"] 。例如 oDiv.style.width 等价于 oDiv.style["width"] 。

cssText 属性

在 JavaScript 中，可以使用 cssText 属性同时设置多个 CSS 属性值，这个也是在元素的 style 属性上添加的。

语法：obj.style.cssText = "值";

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

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

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8">
    <script>
        window.onload = function (){
            // 获取元素
            var oBtn = document.getElementById("btn");
            var oBox = document.getElementById("box");
            
            // 为按钮添加点击事件
            oBtn.onclick = function () {
                var txt = " width: 100px; height: 100px; border: 1px solid gray; ";
                // 设置 box 的 style 样式
                oBox.style.cssText = txt;
            }
        }
    </script>
</head>
<body>
    <input id="btn" type="button" value="设置样式">
    <div id="box"></div>
</body>
</html>

通过 oBox.style.cssText = txt 将 div 元素的 style 属性值设置为 txt 字符串中的内容。在浏览器中通过点击 设置样式 即可为 div 元素设置 CSS 样式。

4. DOM 遍历

DOM 遍历，可以理解为 “查找元素” 的意思。举个例子，如果你使用 getElementById() 等方法获取一个元素，然后又想得到该元素的父元素、子元素，或者是兄弟元素，这就是 DOM 遍历。

DOM 遍历，这里分为三种情况：

查找父元素
查找子元素
查找兄弟元素

查找父元素

使用 parentNode 属性来获取某个元素的父元素。

语法：obj.parentNode

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

查找子元素

使用下列来两组方式来获得父元素中的所有子元素或某个子元素。

childNodes 、 firstChild 、 lastChild
children 、firstElementChild 、lastElementChild

其中，childNodes 获取的是所有的子节点，并且也是一个 类数组。包括元素节点和文本节点。而 children 获取的是所有元素节点，不包括文本节点。

firstElement 和 lastElement 分别获取第一个子节点和最后一个节点，这个子节点有可能是元素节点，也有可能是文本节点。而 firstElementChild 和 lastElementChild 分别获取的是第一个元素节点和最后一个元素节点。

查找兄弟元素

使用以下两组方式来获得兄弟元素：

previousSibling 、nextSiling
previousElementSibling 、nextElementSibling

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

5. innerHTML 和 innerText

在前面的学习中，如果想要创建一个动态的 DOM 元素，我们都是将元素节点、属性节点、文本节点一个个使用 appendChild() 等方法拼凑起来。

上边介绍的方法适合插入简单的元素，要是插入复杂的元素，就可以使用 innerHTML 属性来获取和设置一个元素的 “内部元素”，也可以使用 innerText 属性获取和设置一个元素的 “内部文本”。

举例：使用 appendChild() 方法动态添加元素

<!DOCTYPE html>
<html lang="en">
<head>
    <title>img</title>
    <meta charset="UTF-8">
    <script>
        window.onload = function () {
           var oImg = document.createElement("img");
           oImg.className = "pic";
           oImg.src = "images/haizei.png";
           oImg.style.border = "1px solid silver";
           
           document.body.appendChild(oImg);
    </script>
</head>
<body>
</body>
</html>

这是使用 appendChild() 方法动态的创建元素的例子，接下来采用 innerHTML 来实现这个例子。

使用 innerHTML 动态创建元素

<!DOCTYPE html>
<html lang="en">
<head>
    <title>img</title>
    <meta charset="UTF-8">
    <script>
        document.body.innerHTML = '<img class="pic" src="images/haizei.png" style="border:1px solid silver">';
    </script>
</head>
<body>
</body>
</html>

像这个例子，使用 innerHTML 来实现，就非常简单了。

使用 innerHTML 和 innerText 获取元素

innerHTML 获取元素内部所有的内容
innerText 获取元素内部的文本内容

举例：innerHTML 和 innerText 的区别

<!DOCTYPE html>
<html lang="en">
    <title></title>
    <meta charset="UTF-8">
    <script>
        window.onload = function (){
            var oP = document.getElementById("content");
            var oInput1 = document.getElementById("txt1");
            var oInput2 = document.getElementById("txt2");
            oInput1.value = oP.innerHTMl;
            oInput2.value = oP.innerText;
        }
    </script>
<head>
</head>
<body>
    <p id="content"><strong style="color:hotpink">JavaScript 基础知识</strong></p>
    innerHTMl 是：<input type="text" id="txt1"><br>
    innerText 是：<input type=""text id="txt2">
</body>
</html>

浏览器效果预览如下图所示:

enter image description here

从这个例子可以看出 innerHTML 获取的是元素内部的所有内容，innerText 获取的是元素内部的文本内容。

事件基础

事件简介

在 JavaScrit 中，一个事件应该有三个部分：

事件主角：是按钮还是 div 或者其他
事件类型：是点击还是移动或者其他
事件过程：这个事件都发生了些什么

JavaScript 中常见的事件：

鼠标事件
键盘事件
表单事件
编辑事件
页面事件

事件调用方式

在 script 标签中调用
在元素中调用事件

在 Script 标签中调用

语法：obj.事件名 = function() {
·····
};

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8">
    <script>
        window.onload = function(){
            // 获取元素
            var oBtn = document.getElementById("btn");
            // 为元素添加点击事件
            oBtn.onclick = function () {
                alert("JavaScript 基础知识")
            };
        }
    </script>
</head>
<body>
    <input id="btn" type="button" value="弹出">
</body>
</html>

这种事件调用方式从本质上来说就是操作元素的属性。只不过这个属性不是一般的属性，而是 "事件属性"。所以我们应该 从操作元素的 HTML 属性 这个角度来看待事件操作，这能让你对事件操作理解得更深。

在元素中调用事件

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

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8">
</head>
<body>
    <input id="btn" type="button" value="弹出" onclick = "alert('JavaScript 基础知识')">
</body>
</html>

在 script 标签中调用事件，需要使用 getElementById()、getElementsByTagName() 等方法来获取想要的元素，然后才能对其进行事件操作。

而在元素属性中调用事件，我们不需要获取元素，因为系统已经知道事件的主角是哪个元素了。

在实际的开发中，我们更倾向于在 script 标签中调用事件，因为这种方式可以使结构（HTML）和行为（JavaScripet）很好的分离，代码更具有可读性和维护性。

鼠标事件

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

单击事件 onclick 在任何元素上都可以添加。

onmouseover 和 onmouseout 分别用于控制鼠标 "移入" 和 "移出" 这两种状态。例如在下拉菜单中，鼠标移入会显示二级导航，鼠标移出则会收起二级导航。

onmousedown 表示鼠标按下的一瞬间所触发的事件，而 onmouseup 表示鼠标松开的一瞬间所触发的事件。在实际开发中，onmousedown 、onmouseup 和 onmousemove 这三个经常配合来实现拖拽、投掷等效果。

键盘事件

onkeydown
onkeyup

onkeydown 表示键盘按下一瞬间所触发的事件，而 onkeyup 表示键盘松开一瞬间所触发的事件

举例：统计输入字符的长度

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8">
    <script>
        window.onload = function () {
            // 获取元素
            var oTxt = document.getElementById("txt");
            var oNum = document.getElementById("num");
            
            // 为文本框绑定键盘事件
            oTxt.onkeyup = function (){
                var str = oTxt.value;
                oNum.innerHTML = str.length;
            }
        }
    </script>
</head>
<body>
    <input id="txt" type="text" >
    <div>字符串长度为：<span id="num">0</span></div>
</body>
</html>

在浏览器中的效果图如下：

enter image description here

在这个例子中，我们实现的效果是，当用户输入字符串后，程序会自动计算字符串的长度。

键盘事件一般有两个用途：表单操作和动画控制。表单验证离不开正则表达式，动画控制，常见于游戏开发中。

表单事件

焦点事件 onfocus 和 onblur
选中事件 onselect
选择事件 onchange

onfocus 表示获取焦点时触发的事件，而 onblur 表示失去焦点时触发的事件。

并不是所有的 HTML 元素都有焦点事件，具有 "获取焦点" 和 "失去焦点" 特点的元素只有两种：

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

默认情况下，文本是不会自动获取焦点的，而必须点击文本才会获取。文本框想要在页面打开时就自动获取焦点，可以使用 focus() 方法来实现。

举例：focus() 方法

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8">
    <script>
        window.onload = function () {
            var oTxt = document.getElementById("txt");
            oTxt.focus();
        }
    </script>
</head>
<body>
    <input id="txt" type="text" >
</body>
</html>

focus() 跟 onfocus 的区别：focus() 是一个方法，仅仅用于让元素获取焦点。而 onfocus() 是一个属性，它是用于事件操作的。

编辑事件

防止页面内容被复制 oncopy
防止页面内容被选取 onselectstart
禁止鼠标右键 oncontextmenu

防止页面内容被选取，有两种方法实现：

oncopy 事件
onselectstart 事件

语法：

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

总的来说，oncopy、onselectstart、oncontextmenu 大多数情况下都是用来保护版权的。不过为了更好的用户体验，出特殊情况外，我们很少使用。

页面事件

文档加载完成后再执行的事件 onload
离开页面之前触发的一个事件 onbeforeunload

事件进阶

事件监听器

event 对象

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

event 对象常见的属性

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

举例：使用 event 对象的 type 属性来获取事件的类型

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8">
    <script>
        window.onload = function () {
            var oBtn = document.getElementById("btn");
           // 为按钮添加点击事件
           oBtn.onclick = function(e) {
               alert(e.type);
           };
        }
    </script>
</head>
<body>
    <input id="btn" type="button" value="按钮">
</body>
</html>

在浏览器中点击按钮，将显示事件的类型为 click。

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

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

this 对象

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

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8">
    <script>
        window.onload = function () {
          var oDiv = document.getElementsByTagName("div")[0];
          oDiv.onclick = function () {
              this.style.color = "hotpink";
          }
        }
    </script>
</head>
<body>
    <div>JavaScript 基础知识学习</div>
</body>
</html>

分析：this 所在的函数是一个匿名函数，这个匿名函数被 oDiv 调用了，因此 this 指向的就是 oDiv。这里的 this.style.color = "hotpink"; 等价于 oDiv.style.color = "hotpink;"

window 对象

一个窗口就是一个 window 对象，这个窗口里面的 HTML 文档就是一个 document 对象，document 对象是 window 对象的子对象。

window 对象的属性（子对象）

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

window 对象的方法

窗口操作

open()
语法：window.open(url,target)
url 指的是新窗口的地址，如果 url 为空，则表示一个空白窗口。target 表示打开方式，常用的值有两个：_blank 和 _self 。当 target 为 _blank (默认值)时，表示在新窗口打开；当 target 为 _self 时，表示在当前窗口打开。
close()
语法：window.close()

对话框

alert()
在 alert() 中实现文本换行，用的是 \n;
confirm()
confirm() 对话框不仅提示文字，还提供确认。
prompt()
prompt() 对话框不仅提示文字，还能返回一个字符串。

定时器

setTimeout()
clearTimeout()
setInterval()
clearInterval()

location 对象

window.location.href 获取或设置当前页面的地址
window.location.search 获取或设置当前页面地址 ? 后面的内容
window.location.hash 获取或设置当前页面地址 # 后面的内容。# 一般用于锚点链接

navigator 对象

使用 window 对象下的字对象 navigator 来获取浏览器的类型。

语法： window.navigator.userAgent

document 对象

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

document 对象的方法

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

这期的 JavaScript 基础知识总结包括 DOM 、事件、window 对象和 document 对象。

如果大家感兴趣
欢迎关注我的微信公众账号：byodian
个人博客：byodian.site

JavaScript 基础知识总结(二)

一、DOM 基础知识

1. DOM 简介

DOM 对象

DOM 节点层次

2. 节点类型

nodeType 属性

nodeValue 属性

3. 获取元素

getElementById()

getElementsByTagName()

getElementsByClassName()

querySelector() 和 querySelectorAll()

getElementsByName()

document.title 和 document.body

小结

4. 创建元素

5. 插入元素

appendChild()

insertBefore()

小结

6. 替换元素

7. 删除元素

8. 复制元素

二、DOM 进阶

1. HTML 属性操作(对象属性)

获取 HTML 属性值

设置 HTML 属性值

2. HTML 方法操作(对象方法)

getAttribute()

setAtribute()

removeAttribute()

hasAttribute()

3. CSS 属性操作

获取 CSS 属性值

设置 CSS 属性值

style 属性

cssText 属性

4. DOM 遍历

查找父元素

查找子元素

查找兄弟元素

5. innerHTML 和 innerText

事件基础

事件简介

事件调用方式

在 Script 标签中调用

在元素中调用事件

鼠标事件

键盘事件

表单事件

编辑事件

页面事件

事件进阶

事件监听器

event 对象

this 对象

window 对象

window 对象的属性（子对象）

window 对象的方法

窗口操作

对话框

定时器

location 对象

navigator 对象

document 对象

document 对象属性

document 对象的方法

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

新人培训课程·重点知识

让前端飞

前端攻城狮