# 6.4.1 节点关系-子节点
HTML文档可以看作一棵树，我们可以利用节点之间的关系来获取节点，从而操作HTML中的元素。
子节点是父节点的下一层节点，可以通过以下几个属性获取子节点。

（1）childNodes和children

childNodes和children都返回当前节点的子节点。

childNodes返回的是节点的子节点集合，包括元素节点、文本节点和属性节点；

children返回的只是节点的元素节点集合。具体使用方法如下：


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/8ec9d9367fa35f0ff1a917e27b0bde89.image.webp)

 我们发现childNodes得到NodeList的5个元素，其中有3个text、2个span，这是因为childNodes获取元素节点、文本节点和属性节点，得到的文本节点信息如右图所示。
 
 左图和右图所示的“text”文本节点是代码换行时产生的节点，也就是说childNodes得到了标签和标签之间的换行文本信息。而children得到了HTMLCollection的2个元素，也就是2个<span>元素。
       

 HTMLCollection和NodeList的区别在于，前者用于元素操作，后者用于节点操作。
所以在判断某节点是否有子节点的时候，应尽量使用children。


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/d6d855ba5e5ee5ff22c8d37635845e35.image.webp)
    

   （2）firstChild和firstElementChild
    
firstChild和firstElementChild这两个属性都返回当前节点的第一个子节点。前者返回文本节点或者元素节点，后者只返回元素节点。具体用法如下：


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/40ca74d38abccffef75eebf8f2fc397d.image.webp)

 我们发现firstChild得到的文本节点表示换行，也就是说firstChild得到了标签和标签之间的换行文本信息，而firstElementChild得到了第一个<span>元素，只获取元素节点，不会获取文本节点等其他类型的节点。所以在获取第一个子节点的时候，应尽量使用firstElementChild。


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/11df710dcea734ccf8964795dd46d64a.image.webp)
    
（3）lastChild和lastElementChild
    
lastChild和lastElementChild的用法与firstChild和firstElementChild的用法类似。lastChild获取最后一个子节点，包括文本节点或者元素节点；lastElementChild获取最后一个子节点，只包含元素节点。所以在获取最后一个子节点的时候，应尽量使用lastElementChild。

    
父节点的节点树的根节点，通过以下两种方式获取父节点。
    
（1）parentNode
parentNode用来获取指定节点的父节点，具体用法如下：


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/89c2d3bcc7613551adc102f7cf5d7e7c.image.webp)

获取第一个<span>元素的父节点，即<div>元素，结果如图所示。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/658a2e5f94cca35456397167a051f20f.image.webp)

父节点的节点树的根节点，通过以下两种方式获取父节点。
（2）offsetParent
    
offsetParent用来获取距离该子元素最近的有定位的父元素具体用法如下：


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/bca311cc4d289eadd1c525b5657dacb1.image.webp)


   获取有定位的最近的父节点，那么获取的是id为“outerbox”的元素，结果如图所示。


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/dba5458afd3a59abd61979defcde11e0.image.webp)

父节点的节点树的根节点，通过以下两种方式获取父节点。
    
（3）closest
    
closest用来获取满足筛选条件的最近的父节点，具体用法如下所示：


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/770e3a0f7fd0008fa05f2f1f1745cd5a.image.webp)

获取满足条件类选择器是“.innerbox”的父节点，结果如图所示。

    
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/8a6a3721bcb74dcbbf8a0ad045ddb881.image.webp)
    
## 兄弟节点
    
（1）nextSibling和nextElementSibling
    
nextSibling和nextElementSibling都获取当前节点后面的第一个同级节点。
    
前者返回文本节点、元素节点等，后者只返回元素节点。
    
具体用法如下所示：nextSibling获得的是文本节点，也就是标签和标签之间的换行文本信息；nextElementSibling获得的<span>元素。
    
 代码及结果如图所示：

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/89dab4ce26f741db6ad8a72575cf8421.image.webp)

    
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/5c88ee803b759d93510a5db3bc3cc1fc.image.webp)
    
（2）previousSibling和previousElementSibling
    
previousSibling和previousElementSibling的用法与nextSibling和nextElementSibling的用法类似。
    
previousSibling获取当前节点前面的第一个同级节点，包括文本节点或者元素节点；
previousElementSibling获取当前节点前面的第一个同级节点，只包含元素节点。所以获取当前节点前面的第一个同级节点的时候，应尽量使用previousElementSibling。
除了获取节点，还可以对节点进行操作，比如创建、添加、删除等，后文将详细介绍节点的操作。

# 6.4.2 创建和添加节点
在JavaScript中，我们可以自己来创建节点，创建节点主要是指创建元素节点对象、创建文本节点对象和创建属性节点对象，一般创建节点的方法是使用Document对象的createElement()、createTextNode()等方法创建节点对象，常用的方法如表所示。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/7c22afa19bbda4975cbd454d15493534.image.webp)


用法如下：

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/97636b79aeaa77ee216cfc25df1bb3fd.image.webp)

    
 在JavaScript中，我们可以自己来创建节点，创建节点主要是指创建元素节点对象、创建文本节点对象和创建属性节点对象，一般创建节点的方法是使用Document对象的createElement()、createTextNode()等方法创建节点对象，常用的方法如表所示。


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/7c22afa19bbda4975cbd454d15493534.image.webp)

用法如下：


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/97636b79aeaa77ee216cfc25df1bb3fd.image.webp)
    

创建了元素节点、文本节点、属性节点，接下来我们需要把它们组合起来，然后放到HTML文档中在这里使用appendChild()、insertBefore(node,[refnode])等方法将创建好的节点对象添加到HTML文档中的指定位置。前者将节点添加到子节点列表的末尾，后者在子节点列表中的refnode节点之前插入node。具体用法及结果如下所示：


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/d22c3f6f731b9545616a8894e7030699.image.webp)


    
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/c30189f421c6c5f51e24443da3866c58.image.webp)
    
    
使用appendChild()方法将新创建的节点添加到当前节点列表的末尾，如果采用insertBefore()，具体使用方法如下所示：

```
    document.body.insertBefore(newp, box);

   ```
在这里要注意，需要使用父节点添加节点，也就是说要使用box.parentnode.insertBefore (newp, box)将新的节点添加
到了box的最前面，结果如图所示。


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/444e1c754014739164ee0ebd29a3e582.image.webp)


  
    
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/2dc824a59fec15d74452348d92dfb97e.image.webp)
    
    
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/17c60d1e8f9380f590a29169e0405432.image.webp)
    
 ```
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <form action="" method="get">
        <input type="button" value="移动列表" onclick="moveNode()">
    </form>
    <script>
        function moveNode(){
            var parNode = document.getElementById("list");
            var firstNode = parNode.firstElementChild;
            parNode.appendChild(firstNode);
        }
    </script>
</body>
</html>
 ```
    
 移动后的效果
    
    
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/75c90a19760a91f345879be4db849b09.image.webp)
    
    
# 6.4.3 复制和替换节点
 复制元素节点，可以使用cloneChild(deep)来实现，其语法如下。

```
    parentNode.cloneChild(deep)
```
其中parentNode是父元素对象，deep参数是一个布尔值，表示是否为深度复制。当deep的值为true时表示深度复制，就是将当前节点的所有子节点都复制；当为false时表示普通复制，只简单地复制当前节点，不复制其子节点。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/70986287a51efd7273ba12faf96dccc3.image.webp)
    

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/54d4e1a1abdd123d269faa3d3c9613f1.image.webp)
    
    
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/e9fba6e6cf5092eb5dba92a89de5218e.image.webp)

 ```
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form name="form1" action="" method="post">
        <hr>
        <select name="genderSelect" id="genderId">
            <option value="%">请选择性别</option>
            <option value="0">男</option>
            <option value="1">女</option>
        </select>
        <hr>
        <div id="div1"></div>
        <input type="button" value="普通复制" onclick="addClone(false)">
        <input type="button" value="深度复制" onclick="addClone(true)">
    </form>
    <script>
        function addClone(deep){
            var selNode = document.getElementById("genderId");
            var newSelect = selNode.cloneNode(deep);
            var newNode = document.createElement("br");
            var divNode = document.getElementById("div1");
            divNode.appendChild(newSelect);
            divNode.appendChild(newNode);
        }
    </script>
</body>
</html>
 ```  
    
本任务实践在页面中实现了一个表单，表单的内容为一个下拉列表框和两个按钮。单击“普通复制”按钮出现图6-29所示的效果，只复制select元素节点；单击“深度复制”按钮会出现图6-30所示的效果，不只复制select元素节点，连同select元素节点下的option元素节点也一同复制。
    
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/f08daaf5616bc048eadab50721e3dd08.image.webp)
复制前的效果、普通复制的效果和深度复制的效果如图6-28、图6-29和图6-30所示。
    

复制完节点以后，我们可以采用replaceChild(new,old) 方法实现节点的替换，其语法如下。
    

```
    parentNode.replaceChild(new,old)
```

其中parentNode是父元素对象，new是要替换的节点，old是原来的节点。通过这个方法可以将子节点列表中的old节点用new节点替换。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/b76555c2855c306d779f78c222f4b354.image.webp)
    
  
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/3135d37535e585f11cfaf25aaaf5fa71.image.webp)
    
 
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/2ec42c75dd4bd1384acf51b44e6e02c7.image.webp)
 ```
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>替换列表</title>
</head>
<body>
    <ul id="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <form action="" method="get">
        <input type="button" value="替换列表" onclick="replaceNode()">
    </form>
    <script>
        function replaceNode(){
            var parNode = document.getElementById("list");
            var firstP = parNode.firstElementChild;
            var newLi = document.createElement("li");
            var newText = document.createTextNode("JavaScript实训课");
            newLi.appendChild(newText);
            parNode.replaceChild(newLi,firstP);
        }
    </script>
</body>
</html>
 ```
    
# 6.4.4 删除节点
删除元素节点可使用removeChild(node)来实现，其语法如下。
parentNode.removeChild(node)
parentNode是要删除节点的父元素，node是要删除的子元素节点名称。


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/899f8caf7000bb1138b8049901cb07c2.image.webp)

 
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/844df337d710904f93ad3decb55283ad.image.webp)
    
 ```
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>删除节点</title>
</head>
<body>
    <h1>JavaScript程序设计</h1>
    <hr>
    <h2>什么是JavaScript</h2>
    <p>JavaScript是一种脚本语言</p>
    <hr>
    <h2>第一部分 JavaScript概述</h2>
    <p>JavaScript发展历史</p>
    <input type="button" value="删除水平线" onclick="delHr()">
    <script>
        function delHr(){
            var hrs = document.querySelectorAll("hr");
            for (let i = 0; i < hrs.length; i++) {
                var hr = hrs[i];
                hr.parentNode.removeChild(hr);                
            }
            // 怎么改foreach语句 
        }
    </script>
</body>
</html>
 ```
 
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/b5277e1415860773f722688c1feacecd.image.webp)
    

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/fb6ec6bff944db37892a422f4571ea88.image.webp)
    


    


    
    

6.4 操作节点

效果如下：


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/03c017581fde7c8611e935be4dc68b10.image.webp)



html


```
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <script src="calculate.js"></script>
        <title>简易计算器</title>
        <style >@import url(calculate.css);</style>
    </head>
    <body>
        <div><h2>简易计算器</h2></div>
        <div>数1：<input type="number" name="" id="num1"></div>
        <div>数2：<input type="number" name="" id="num2"></div>
        <div>
            <input type="button" value="+" id="add" onclick　="add()">
            <input type="button" value="-" id="sub" onclick　="sub()">
            <input type="button" value="x" id="mul" onclick　="mul()">
            <input type="button" value="/" id="div" onclick　="div()">
        </div>
        <div>结果<input type="text" name="" id="res" value=""></div>
    </body>
</html>
```


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/99c43d9a8daf54b3356680986ed4e1b6.image.webp)

js


```
function add(){
    var num1 = parseFloat(document.getElementById("num1").value);
    var num2 = parseFloat(document.getElementById("num2").value);
    document.getElementById("res").value = num1+num2;
}

function sub(){
    var num1 = parseFloat(document.getElementById("num1").value);
    var num2 = parseFloat(document.getElementById("num2").value);
    document.getElementById("res").value = num1-num2;
}

function mul(){
    var num1 = parseFloat(document.getElementById("num1").value);
    var num2 = parseFloat(document.getElementById("num2").value);
    document.getElementById("res").value = num1*num2;
}

function div(){
    var num1 = parseFloat(document.getElementById("num1").value);
    var num2 = parseFloat(document.getElementById("num2").value);
    document.getElementById("res").value = num1/num2;
}
```

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/c57f59fd1d3a40fb2fa3a237acd7a5c7.image.webp)





项目实训  简易计算器

4.4.1 函数表达式

 函数表达式是指将声明的函数赋值给一个变量，通过变量完成函数的调用。

```
var fn =  function getSum(num1,num2){
            return num1+num2 ;
  };
fn(2,4);
```



比较一下前面学习过的自定义的有名函数和函数表达式

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/6ac77d324a39e95fd87753ce4c709a35.image.webp)


函数表达式就是在自定义函数的基础上，将自定义函数赋值给一个变量，不同的是函数表达式必须在调用的时候采用“变量名()”的形式，而不是采用“函数名()”的形式调用。



4.4.2 匿名函数

顾名思义，匿名函数就是没有名称的函数，它是函数表达式的另一种形式


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/040ac8eb05fc0cfca1d0a9ef3d873132.image.webp)


匿名函数就是在函数表达式的基础上去掉函数名。观察匿名函数的调用，通过“变量名( )”的形式，可以将整个function部分替换成“变量名”,于是就有了如下自调用的方式，这种方式书写起来更加简单。      

//匿名函数的自调用方式
```
       function(num1,num2){
            return num1+num2 ;
       }(4,5);
```

 当一个函数需要多次调用时，可以定义为有名函数或者匿名函数；如果只使用一次，就可以使用匿名函数的自调用方式。



4.4.3 箭头函数

  ES6中新引入了一种匿名函数，称为箭头函数。使用ES6箭头函数语法定义函数，需将原函数的function关键字删掉，并使用“=>”连接参数列表和函数体。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/9a4b13963837db55766fd3b81581b3e3.image.webp)


箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种只包含一个表达式，省略花括号和return；另一种可以包含多条语句，这时候就不能省略花括号和return。

      //无参箭头函数
       ()=>{函数体};
     //有一个参数的箭头函数
       num1=>{函数体};
     //有多个函数的箭头函数
       (num1,num2,num3)=>{函数体};
     //有返回值的箭头函数
       (num1,num2,num3)=>{return返回值};
       (num1,num2,num3)=>exp;



![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/a1157921a0c46251bb01f358731aabd8.image.webp)


![](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/a1157921a0c46251bb01f358731aabd8.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/fdd79aacc9499436bd732077a8831022.image.webp)


课堂作业：类似给出九九乘法表的代码
```
var draw = (n) =>{
    var i,j;
    for(i=1;i<=n;i++){
        // for(j=1;j<=n-i;j++){
        //     document.write("&nbsp;&nbsp;");
        //     }
        for(j=1;j<=i;j++){
            document.write(j+"*"+i+"="+j*i);
            document.write("&nbsp;&nbsp;");
        }
        document.write("<br>");
    }
}

var num=prompt("请输入三角形图案的导数","0");
draw(num);

//  写出九九乘法表
```

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/a918d23322b83bd9b5d54607544486dc.image.webp)
如上所示，仅需要修改一行代码，就是打印输出那一行；为了美观，把上面的空格再去除

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/e0a9bad6d4045ec6c454fee16af88152.image.webp)

4.4 运用函数进阶

# 4.3.1 函数声明

在编写代码时，可能会出现非常多相同的代码，或者功能类似的代码，这些代码需要重复使用。例如，下面3段代码实现了相似的功能

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/30c8185db4e3675eb188acb3fb12624d.image.webp)


这3段代码的共同点在于，i的结束值不一样，其他代码都是相同的，如果重复书写，会造成代码冗余。为了解决这个问题，我们引入自定义函数，将一段代码封装起来，实现代码的重复使用。那么该如何创建和调用自定义函数呢？在接下来的任务中进行探索。

自定义函数是根据需要自己定义的一段程序代码

具体分为两类：有名函数和匿名函数

自定义有名函数，必须先声明函数



声明自定义函数
声明自定义函数使用下面的语法格式
```
function 函数名([参数1],[参数2]…){
    函数体；
     [return表达式;]
}
```



- function是定义函数的关键字，后面是函数名，必选项，且唯一
- 参数是可选项，多个参数之间要用逗号分隔
- 函数体是必选项，用于实现函数的功能
- return语句是可选的，用于返回函数值
- 表达式可以为任意的表达式、变量或者常量


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/0f7df2b0a8f526b5677bfbcc9295b15b.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/d22d13865c190f2b7ac1f3a1038ce770.image.webp)

# 4.3.2 调用自定义函数

4.3.2 调用自定义函数



自定义函数定义好之后，就可以同内置函数一样，在程序中进行调用。一般来说，在程序中调用函数有如下3种方式。





1.使用函数名调用函数

  在JavaScript程序中，可以直接使用函数名来调用函数。无论是内置函数还是自定义函数，调用的方法是一样的。用函数名来调用函数的形式是“函数名()”，在调用函数时后面必须加括号。

printStr();



![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/14bb682624a0eccc6f12f0bdab56e6b5.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/dd3f749e272069da6bd129fb1fd4b324.image.webp)









2.在HTML中用超链接的方式来调用函数

   在HTML中，可以使用超链接（在<a>标签的href属性中使用“javascript：”）的方式来调用JavaScript函数。调用方法如下

<a href="javascript:函数名(参数)">…</a>









![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/f47de12b1dcd4d565a3e0d2ec787df18.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/6131627988ef965d07ac25b017b488f9.image.webp)



3.在事件处理中用与事件结合的方式调用函数

   在事件处理中，可以将JavaScript函数作为事件处理函数来调用。当触发事件时会自动调用指定的JavaScript函数。

  例如,通过按钮点击来调用 


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/9665632a5ddaf43a09b59dafda4eb8cc.image.webp)


# 4.3.3函数的参数和返回值

JavaScript函数在定义和调用时是可以有参数和返回值的，本小节将针对函数的参数和返回值进行讲解。


函数的参数
    
  按照函数定义的语法格式，在创建自定义函数时，在函数名后面可以有1个或多个参数，如下所示


```
function 函数名([参数1],[参数2]…){
    函数体；
     [return表达式;]
}
```

 我们把定义函数时指定的参数称为形式参数，简称形参；而把调用函数时为形参实际传递值的参数称为实际参数，简称实参。

 如果定义的函数中有参数，那么调用这种函数的方式如下所示

函数名(实参1,实参2,…);


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/c95711d3aafb54986b83d832e85af36a.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/560ac0a1be18a85739d06d97bcd6cb46.image.webp)












2.函数的返回值
    
函数的返回值是指函数在调用后获得的数据。在定义函数时，可以为函数指定一个返回值，函数的返回值可以是任何类型的数据。在JavaScript中使用return语句得到返回值并退出函数。return语句的语法格式如下所示。

return 表达式;




这条语句的作用是结束函数体的执行，并把表达式的值作为函数的返回值。


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/66cd3a36d056bfbd878b175fb875a46c.image.webp)

# 课堂作业
    已经给出如下图所示的html文件，请写出对应的js文件内容，以实现2数加法运算。
 
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/06cb289f5b9866443db53f5c21f73ac6.image.webp)
```
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <script src="task4-1.js"></script>
        <title>实现简单的数字计算</title>
    </head>
    <body>
        <p>请输入第一个数：
            <input type="number" name="" id="num1">
        </p>
        <p>请输入第二个数：
            <input type="number" name="" id="num2">
        </p>
        <p><input type="button" value="两数相加" onclick="add()"></p>
        <p id="res">计算结果：</p>
    </body>
</html>
```
js提示代码 
 ```
var num1 = parseFloat(document.getElementById("num1").value);

document.getElementById("res").innerText = “替换信息”;
 ```
完成效果
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/0895c6dfd68fd40ad5393aabfb49cdf4.image.webp)

 ```
    function add(){
                var num1 = parseFloat(document.getElementById("num1").value);
                var num2 = parseFloat(document.getElementById("num2").value);
                // alert(num1+num2);
                document.getElementById("res").innerText = num1+num2;
            }
```
   
# 4.3.4 函数变量的作用域


全局变量：在函数体外声明的变量或者在函数内省略var关键字声明的变量称为全局变量，它在同一页面文件中的所有脚本内部都可以使用。

局部变量：在函数体内利用var关键字定义的变量称为局部变量，仅在该函数内部有效。在函数体外，即使使用同一个名字的变量，也被看作另一个变量。注意，如果局部变量和全局变量同名，在函数体内，只有局部变量是有效的。

块级变量：用ES6标准中新增的let关键字声明的变量称为块级变量，它仅在包含它的最小代码块中有效。


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/ff22dd41c4b3d6e317445e301190012c.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/8e58ee5413556ce89f7011003ed2da3d.image.webp)
    
# 4.3.5 函数的嵌套

函数的嵌套是指在一个函数内包含另外一个函数。
    
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/44a4b7fdb453d2ebe2b832a3aeae5612.image.webp)

在JavaScript中，一个函数体内的语句可以调用另外一个函数，这就是函数的嵌套调用。在函数嵌套调用时，被调用的函数应该先写好，否则不能完成函数的嵌套调用。


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/20939cbc0c6606269d6d6fbf892b3973.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/bec335de4d799aee03ab52d7d53f8c54.image.webp)







常用bug:

在本例中,Sum() 函数名,首字母必须大写,因为sum()有重名 

函数名必须与调用位置处是完全一致的,大小写一致,参数格式和数量一致

return返回值必须在函数内部





 



4.3 使用自定义函数

# 6.3.1 获取HTML文档元素

要实现HTML页面的特效设计，需要先获取HTML元素。JavaScript中，利用Document对象、Element对象提供的方法可以完成对元素的获取操作。
获取HTML文档元素可以通过元素的ID、属性名和元素名来获取，获取的方法就是由Document对象提供的元素获取方法来获得，可以通过ID获得单个元素对象，通过属性名和元素名获取元素数组，用法如下:


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/1c20012b3c459874ee4d1f9143e626ac.image.webp)

- document.getElementById()方法的参数是元素的id属性
- documnet.getElements ByName()的参数是name属性值
- document.getElemetByTagName()的参数是元素名

使用以上这些方法可以获得单个元素或者多个元素。

除以上方法，还可以通过CSS 选择器来获取唯一元素对象，如id选择器、  类名选择器、 元素选择器等，其语法如下：
```
document.querySelector("选择器名称")
```


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/4a7d209de411a0ead32a7551b27c97da.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/7b3cd09cc9f1505f9bba9842954b5370.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/fa95799957b9fe1d870a61cf853b3cf3.image.webp)

# 6.3.2 获取元素的集合对象

   获取HTML页面元素，不仅可以获取一个元素，也可以获取特征相同的一组元素，这一组元素组成一个集合对象，大多是数组的形式。
   
 获取元素集合对象，可以通过Document对象的属性来获取，它提供了一些获取集合对象的属性，如all、anchors、forms、images和links等，通过获取集合对象的属性可以访问这些集合对象。在访问集合对象时，以数组对象的方式来访问，如all[i]。
    
 获取集合的属性如表6-3所示。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/47e7f55de31d1c2881df015661d97158.image.webp)

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/8777f21143d88e408517d4c8b979c454.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/0ef22fdeab863e10b85246be700ce137.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/4346c06455d539fbb85ab734b9feb4cd.image.webp)


  除了可以使用集合对象的方式获取元素，还可以采用Document对象的方法获取元素，常见的方法如表所示。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/01ad3e1bfd4094a2c204db0ad58624c8.image.webp)

 通过页面元素的class属性、name属性以及标签名可分别访问指定类名、指定名称和指定标签名的元素。querySelectorAll()是HTML5新增的获取元素集合的方法。它们的具体使用方法如下所示：
 
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/c32f952c8b9855daf07824c2bbe47470.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/c0127a16db5438d6e41cff1096507914.image.webp)

# 6.3.3 改变元素样式
元素样式按照书写方式，有行内样式、内部样式、外部样式。
对于行内样式，我们可以采用“style.属性”的方式进行读写，如果这个属性是单个单词，直接使用就可以了；如果这个属性是通过“-”连接的属性，使用时则需去掉短横线并将第二个及以后的单词首字母大写，具体写法如下：

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/61ad3b484f21d21eadfa37ac663432d7.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/635fac08dd01443fdd8b4765265246c2.image.webp)

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="p1" style="font-size: 30px;color: red;">passage 1</p>
    <script>
        // var p = document.getElementById("p1");
        var p1 = document.querySelector("#p1");
        console.log(p1.style.color);
        console.log(p1.style.fontSize);
        p1.style.color = "blue";
    </script>
</body>
</html>
```
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/557610d57c08bceb8ab217a8b2af79a8.image.webp)



![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/49eedc02df5e4ad8728860f68501d4d9.image.webp)


```
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        
        <style>
            ul{
                list-style: none;
            }
            li{
                height: 30px;
                width: 700px;
                line-height: 30px;
            }
            .new{
                background:#eeeeee;
                font-size: 18px;
                font-weight: bolder;
                color:red;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>11</li>
            <li>22</li>
            <li>33</li>
            <li>44</li>
            <li>55</li>
            <li>11</li>
            <li>22</li>
            <li>33</li>
            <li>44</li>
            <li>55</li>
        </ul>
        <script>
            var li = document.querySelectorAll("li");
            for(i in li){
                if(i%2==0){
                    li[i].style.background = "#c8c8c8";
                }
                else
                    li[i].className = "new";
            }
        </script>
    </body>
</html>
```


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/e6ca7673a5c253e952b70174f6ddfffb.image.webp)

这里介绍了修改单个样式的方法，如果要修改多个样式，比如在这个任务实践中，我们希望修改隔行新闻的文字颜色、字体、字号等样式，每个样式都单独修改就比较麻烦，在这里可以采用提前定义一个样式，然后操作的时候直接定义更换后的样式的方法


# 6.3.4 改变元素内容 
在获取元素之后，如果想要修改元素的内容，常用的属性/方法如表所示：

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/e2b4d0ff3691ef793d69b199d8d4f4c9.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/a4d584a220d6c319676128f1e04191f1.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/2ce3c1df1aca86b822d719f7cec3ca0b.image.webp)

在代码中，使用document.getElementById()获得存放显示时间的元素，然后将时间保存在time中，通过3个属性innerHTM、innerText、textContent设置其显示内容。实现效果如图所示，后面两个属性不能解释HTML标签，所以将其原样显示出来。


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/44624171d3b59d678e378e37bdb53c28.image.webp)

# 6.3.5 改变元素位置和大小
在JavaScript中，我们可以通过DOM获取元素的大小、位置等，常用的属性如表所示。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/b6bf9fed91700a1a8772b0ec790ce929.image.webp)

利用offsetLeft和offsetTop两个属性获取元素到页面边框的距离，利用offsetWidth和offsetHeight获取元素自身的大小


例如：


```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #big{
            position: relative;
            width: 200px;
            height: 200px;
            background: coral;
            border: 1px solid red;
        }
        #small{
            position: absolute;
            left:50px;
            top:50px;
            width: 100px;
            height: 100px;
            background: darkgray;
            border: 1px solid black;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div id="big">大盒子
        <div id="small">小盒子</div>
    </div>
    <input type="button" value="左移" onclick="move()" >
    <script>
        var big = document.getElementById("big");
        var small = document.getElementById("small");
        console.log(small.offsetLeft);
        console.log(small.offsetWidth);
        var left = 80;
        small.style.left = left+"px";
        console.log(small.offsetLeft);
        function move(){
            left -= 5;
            small.style.left = left+"px";
        }
    </script>
</body>
</html>
```
效果图如下

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/ec109041bfc1a7f8e09e4c1d9dc002b8.image.webp)

点击“左移”按钮时，图片能够向左边移动


在这个基础上实现“上移”等其他方向的移动

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/efc84cbb9400586f5346bd311d06b4c7.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/ce322a6500e21243f803419758f464fc.image.webp)

具体代码看项目 商品放大镜