前端-函数-伪数组-DOM-排他思想

函数

函数：就是将一些语句进行封装，然后通过调用的形式，执行这些语句。

函数的作用：

  • 将大量重复的语句写在函数里，以后需要这些语句的时候，可以直接调用函数，避免重复劳动。
  • 简化编程，让编程模块化

第一步：函数的定义

函数定义的语法：

function 函数名字(){

    }

解释如下：

  • function：是一个关键字。中文是“函数”、“功能”。
  • 函数名字：命名规定和变量的命名规定一样。只能是字母、数字、下划线、美元符号，不能以数字开头。
  • 参数：后面有一对小括号，里面是放参数用的。
  • 大括号里面，是这个函数的语句。
<script>
    function add(x,y){
        sum=x+y
        console.log(sum)
    }
    add(23,32)
</script>

第二步：函数的调用

函数调用的语法：

函数名字();

函数的参数：形参和实参

函数的参数包括形参和实参

注意：实际参数和形式参数的个数，要相同。

例子：

Function和Consumer高级用法 function的用法及短语_数组

sum(3,4);
        sum("3",4);
        sum("Hello","World");

        //函数：求和
        function sum(a, b) {
            console.log(a + b);
        }

注意:函数名,可以放到函数调用的上面先进行声明,因为进行了变量提升.所以运行不会报错.

变量提升的问题

console.log(a);
var a=2;
console.log(a);
输出:
undefined
2

这时输出的结果,实际浏览器会进行解析,进行一个隐式的变量提升,

先将变量a提到windows(全局),但是没有进行赋值
var a;
浏览器解释到此处时,会输出a没有定义,但是不报错,
console.log(a);
此处进行正常的赋值
a=2;
console.log(a)

for循环的那里就是进行了变量提升,实际上,js(es5里)里面没有局部变量,

函数的返回值

例子：

Function和Consumer高级用法 function的用法及短语_数组

console.log(sum(3, 4));


        //函数：求和
        function sum(a, b) {
            return a + b;
        }

 

匿名函数;

var add=function(x,y){
        return x+y;
        }
console.log(add(34,43))

但是匿名函数,却需要函数调用放到函数声明的下边.

 

伪数组 arguments

arguments代表的是实参。需要注意的是：arguments只在函数中使用。

function add(){
    console.log(arguments);
}
add(1,2)

arguments可以显示函数的实参,

Function和Consumer高级用法 function的用法及短语_事件源_03

 

之所以说是伪数组,是因为arguments可以修改元素,但不能改变数组的长短,

 

获取形参跟实参的个数.

fn(2,4,6,8);
function fn(a,b,c) {
　　console.log(arguments);
　　console.log(fn.length); //获取形参的个数
　　console.log(arguments.length); //获取实参的个数
}

对比看输出结果.

 

清空数组的几种方式.

var array = [1,2,3,4,5,6];

    array.splice(0);      //方式1：删除数组中所有项目
    array.length = 0;     //方式1：length属性可以赋值，在其它语言中length是只读
    array = [];           //方式3：推荐

 

关于DOM的事件操作

说DOM就意味着操作某个标签.

一、JavaScript的组成

JavaScript基础分为三个部分：

  • ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
  • DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。
  • BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。

二、事件

JS是以事件驱动为核心的一门语言。

事件的三要素

事件的三要素：事件源、事件、事件驱动程序。

比如，我用手去按开关，灯亮了。这件事情里，事件源是：手。事件是：按开关。事件驱动程序是：灯的开和关。

再比如，网页上弹出一个广告，我点击右上角的X，广告就关闭了。这件事情里，事件源是：X。事件是：onclick。事件驱动程序是：广告关闭了。

于是我们可以总结出：谁引发的后续事件，谁就是事件源。

总结如下：

  • 事件源：引发后续事件的html标签。
  • 事件：js已经定义好了。
  • 事件驱动程序：对样式和html的操作。也就是DOM。

代码书写步骤如下：（重要）

  • （1）获取事件源：document.getElementById(“box”); //类似与ios语言的 UIButton *adBtn = [UIButton buttonWithType:UIButtonTypeCustom];
  • （2）绑定事件： 事件源box.事件onclick = function(){ 事件驱动程序 };
  • （3）书写事件驱动程序：关于DOM的操作

 

 

在浏览器里打开,检查-console-查看,

Function和Consumer高级用法 function的用法及短语_事件源_04

Function和Consumer高级用法 function的用法及短语_html_05

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lianxi</title>
</head>
<body>
    <script>

        
        // 整个全局(最外层),浏览器窗口,其他的都在windows下面
        console.log(window)
        // 获取文档
        console.log(document)
        // 获取html
        console.log(document.documentElement)
        // 上面的内容,逐次显示,可以看到不同的内容
        
        // 获取body,body下面就是各种标签
        console.log(document.body)

    </script>
</body>
</html>

DOM的初步创建

 

初步介绍

<body>
<div id="box1"></div>

<script type="text/javascript">
    // 1、获取事件源
    var div = document.getElementById("box1");
    // 2、绑定事件
    div.onclick = function () {
        // 3、书写事件驱动程序
        alert("我是弹出的内容");
    }
</script>

</body>

 

 

点击事件的实现(点击换颜色)

Function和Consumer高级用法 function的用法及短语_事件源_04

到此可以实现,点一下改变颜色

现在可以实现点击颜色的切换了.

Function和Consumer高级用法 function的用法及短语_事件源_04

Function和Consumer高级用法 function的用法及短语_html_05

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lianxi</title>
    <style>
        #active{
            background-color: red;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id='active'></div>
    <script>
        // 整个全局(最外层),浏览器窗口,其他的都在windows下面
        console.log(window)
        // 获取文档,文档这里也可以dir一下.
        console.log(document)
        // 获取html
        console.log(document.documentElement)
        // 上面的内容,逐次显示,可以看到不同的内容
        
        // 获取body,body下面就是各种标签
        console.log(document.body)


        // 获取DOM的三种方式
        // 先接收这个对象,第一步获取事件对象
        var oDiv=document.getElementById('active');
        // console.log(oDiv);
        // 还可以通过dir,显示对象的属性及方法.
        // console.dir(oDiv)

        var isRed=true;

        // 第二步,事件名,所有原生js事件名都是带on的.等号前面是事件名后面是要执行的操作
        // 调用这个点击方法,onclick 返回值是个null,可以在控制台里面看.将一个匿名函数赋值给了前面,当进行点击事件的时候,执行了这个函数.
        oDiv.onclick=function(){
            if(isRed){
                oDiv.style.backgroundColor = 'green';
                isRed=false;
            }else{
                oDiv.style.backgroundColor = 'red';    
                isRed=true;
            }

            
        };
    </script>
</body>
</html>

颜色的切换

Function和Consumer高级用法 function的用法及短语_事件源_04

Function和Consumer高级用法 function的用法及短语_html_05

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lianxi</title>
    <style>
        #active{
            background-color: red;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id='active'></div>
    <script>
        console.log(window);
        console.log(document);
        console.log(document.documentElement);
        console.log(document.body);
        var oDiv=document.getElementById('active');
        // 这里的isRed类似于之前装饰器那里的立flag
        var isRed=true;
        oDiv.onclick=function(){
            if(isRed){
                // 这里是.style,获取到样式,
                oDiv.style.backgroundColor='green';
                isRed=false;
            }else{
                oDiv.style.backgroundColor = 'red';
                isRed=true;
            }
        }

    </script>
</body>
</html>

取消部分注释的版本

 

在上面例子的基础上,点击实现尺寸的变化(大小,消失等等)

Function和Consumer高级用法 function的用法及短语_事件源_04

Function和Consumer高级用法 function的用法及短语_html_05

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lianxi</title>
    <style>
        #active{
            background-color: red;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id='active'></div>
    <script>
        console.log(window);
        console.log(document);
        console.log(document.documentElement);
        console.log(document.body);
        var oDiv=document.getElementById('active');    
        // 这里的isRed类似于之前装饰器那里的立flag
        var isRed=true;
        oDiv.onclick=function(){
            if(isRed){
                // 这里是.style,获取到样式,
                oDiv.style.backgroundColor='green';
                oDiv.style.width='150px';
                // 上面一行代码是改变宽度,下面代码是点击消失
                // oDiv.style.display='none';
                isRed=false;
                
            }else{
                oDiv.style.backgroundColor = 'red';
                oDiv.style.height = '50px';
                isRed=true;                
            }
        }

    </script>
</body>
</html>

点击实现尺寸的变化

点击隐藏的代码

display:'none'

 

实现点击隐藏div块的功能,

Function和Consumer高级用法 function的用法及短语_事件源_04

Function和Consumer高级用法 function的用法及短语_html_05

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>DOM</title>
     <style>
         .box{
             background-color: red;
             width: 100px;
             height: 100px;
         }
     </style>
 </head>
 <body>
     <div class='box'></div>
     <button>隐藏</button>
     <button>隐藏2</button>
     <script>
         // 此处为什么要有[0],是因为查看oDivs的时候,发现他没有onclick的方法,但是,他是伪数组,他的元素有此方法(文档里的标签有此方法),通过索引取值,
         var oDiv=document.getElementsByClassName('box')[0];
         // 上面的代码是通过类来获取事件源,下面一行代码是通过标签来获取事件源
         var oBtn=document.getElementsByTagName('button')[0];
         // console.log(oDiv)
         // console.log(oBtn)
         isShow=true;
         oBtn.onclick=function(){
             if(isShow){
                 oDiv.style.display='none';
                 isShow=false;
                 // 修改按钮显示的文字
                 oBtn.innerText='显示'
             }else{
                 oDiv.style.display='block';
                 isShow=true;
                 oBtn.innerText='隐藏'
             }
         }
     </script>
 </body>
 </html>

点击实现隐藏/实现的功能.

 

区分功能,innerText与innerHTML的区别,在控制台看一下,

Function和Consumer高级用法 function的用法及短语_事件源_04

Function和Consumer高级用法 function的用法及短语_html_05

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>lianxi</title>
     <style>
         #box{
             width: 100px;
             height: 100px;
             background-color: red;
         }
     </style>
 </head>
 <body>
     <div id='box'>
         现在是几点了;
         <ul>
             <li>哈哈哈</li>
         </ul>
     </div>
     <script>
         var oDiv=document.getElementById('box');
         console.log(oDiv.innerText)
         console.log(oDiv.innerHTML)
     </script>
 </body>
 </html>

innerText与innerHTML的区别

 

 添加标题,变量(使用$符号),使用反引号,$还可以做名字的.

Function和Consumer高级用法 function的用法及短语_事件源_04

Function和Consumer高级用法 function的用法及短语_html_05

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>DOM</title>
     <style>
         .box{
             background-color: red;
             width: 100px;
             height: 100px;
         }
     </style>
 </head>
 <body>
     <div class='box'>
         
     </div>
     <button>隐藏</button>
     <button>隐藏2</button>
     <script>
         // 此处为什么要有[0],是因为查看oDivs的时候,发现他没有onclick的方法,但是,他是伪数组,他的元素有此方法(文档里的标签有此方法),通过索引取值,
         var oDiv=document.getElementsByClassName('box')[0];
         // 上面的代码是通过类来获取事件源,下面一行代码是通过标签来获取事件源
         var oBtn=document.getElementsByTagName('button')[0];
         // console.log(oDiv)
         // console.log(oBtn)
         console.log(oDiv.innerHTML);
         isShow=true;
         oBtn.onclick=function(){
             if(isShow){
                 oDiv.style.display='none';
                 isShow=false;
                 // 修改按钮显示的文字
                 oBtn.innerText='显示';
             }else{
                 oDiv.style.display='block';
                 isShow=true;
                 oBtn.innerText='隐藏';
                 var name='abcd';
                 // oDiv.innerHTML='<h1>我的博客<h1>';
                 // 模版字符串的使用,tab键上面的符号(反引号),插入变量名就是${变量名}
                 oDiv.innerHTML=`<ul>
                         <li>
                            ${name}
                             哈哈哈
                         </li>

                     </ul>
                     `
             }
         }
     </script>
 </body>
 </html>

添加标题,使用反引号,添加变量

 

 input的value赋值

Function和Consumer高级用法 function的用法及短语_事件源_04

Function和Consumer高级用法 function的用法及短语_html_05

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>lianxi</title>
 </head>
 <body>
     <div class='box'></div>
     <input type="text">
     <script>
         var oInput=document.getElementsByTagName('input')[0];
         oInput.value='使用input';
     </script>
 </body>
 </html>

input的使用

 

a标签以及img标签的示例.

Function和Consumer高级用法 function的用法及短语_事件源_04

Function和Consumer高级用法 function的用法及短语_html_05

<div>
         用户名<input type="text" name="username" placeholder='提示输入'>
         <img src="" alt="">
         <a href="">百度一下</a>
     </div>
     <script>
         function $(tag){
             return document.getElementsByTagName(tag)[0];
         }
         // $('各种标签')
         $('img').src='./广告栏.png'
         $('a').href='http://www.baidu.com'
     </script>

a,img标签的使用

 

对原来的类名处点击添加其他类名

Function和Consumer高级用法 function的用法及短语_事件源_04

Function和Consumer高级用法 function的用法及短语_html_05

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <style>
        #box1{
            width: 200px;
            height: 100px;
            background-color: red;

        }
    </style>
</head>
<body>
    <div id='box1' class='box2'>
        
    </div>
    <script>
        document.getElementById('box1').onclick=function() {
            this.className+=' avtive';
        }
    </script>
</body>
</html>

点击添加类名

 

 

 

 使用函数进行封装

<script>
     function $(tag){
         return document.getElementsByTagName(tag)[0];
     }
     $('各种标签')  //$是可以做名字的.
 </script>

 

 

 

常见事件如下：

Function和Consumer高级用法 function的用法及短语_html_25

 

 

1,获取事件源的方式(DOM节点的获取)

获取事件源的常见方式如下：

var div1=document.getElementById('box1');//方法一:通过id获取单个标签
var arr1=document.getElementsByTagName('div1');//方法二:通过标签名获得标签数组,所以有s
var arr2=document.getElementsByClassName('box2');//通过类名获得标签数组,有s,

 

 2,绑定事件的方式

 方式1:

Function和Consumer高级用法 function的用法及短语_事件源_04

Function和Consumer高级用法 function的用法及短语_html_05

<div id="box1" ></div>

<script type="text/javascript">
    var div1 = document.getElementById("box1");
    //绑定事件的第一种方式
    div1.onclick = function () {
        alert("我是弹出的内容");
    }
</script>

直接绑定匿名函数

方式2:

Function和Consumer高级用法 function的用法及短语_事件源_04

Function和Consumer高级用法 function的用法及短语_html_05

<div id="box1" ></div>

<script type="text/javascript">
    var div1 = document.getElementById("box1");
    //绑定事件的第二种方式
    div1.onclick = fn;   //注意，这里是fn，不是fn()。fn()指的是返回值。
    //单独定义函数
    function fn() {
        alert("我是弹出的内容");
    }
</script>

先单独定义函数,再绑定

注意:方式2里面写的是fn,而不是写的fn(),fn代表的是整个函数,而fn()代表的是返回值.

方式3:

Function和Consumer高级用法 function的用法及短语_事件源_04

Function和Consumer高级用法 function的用法及短语_html_05

<!--行内绑定-->
<div id="box1" onclick="fn()"></div>

<script type="text/javascript">

    function fn() {
        alert("我是弹出的内容");
    }

</script>

行内绑定

注意:方式3里,第一行代码写的是fn(),不是写的fn,因为绑定的这段代码不是在js代码里的,而是被识别成了字符串.

 3,事件驱动程序

 

Function和Consumer高级用法 function的用法及短语_事件源_04

Function和Consumer高级用法 function的用法及短语_html_05

<style>
        #box {
            width: 100px;
            height: 100px;
            background-color: pink;
            cursor: pointer;
        }
    </style>
</head>

<body>

<div id="box" ></div>

<script type="text/javascript">
    var oDiv = document.getElementById("box");
    //点击鼠标时，原本粉色的div变大了，背景变红了
    oDiv.onclick = function () {
        oDiv.style.width = "200px";   //属性值要写引号
        oDiv.style.height = "200px";
        oDiv.style.backgroundColor = "red";   //属性名是backgroundColor，不是background-Color
    }
</script>

事件驱动程序

注意事项:

在js里写属性值时,要用引号;

在js里写属性名时,是backgroundColor,而不是CSS里面的background-Color,要写成驼峰的形式.

 

onload事件

 引入回调函数的概念,先加载window,然后,回来再调用函数,要写一个window onload,不然会出现覆盖现象.并且一般用documet.onload,防止出现网络延迟来带来的等待加载问题,

提到程序的入口.

<script>
        window.onload=function(){
            console.log("这就是要的彩蛋???")
            alert('没错')
        }
</script>

注意一点：js的加载是和html同步加载的。因此，如果使用元素在定义元素之前，容易报错。这个时候，onload事件就能派上用场了，我们可以把使用元素的代码放在onload里，就能保证这段代码是最后执行。

建议是：整个页面上所有元素加载完毕之后再执行js内容。所以，window.onload可以预防使用标签在定义标签之前。

 

 

点击取消广告栏的示例

Function和Consumer高级用法 function的用法及短语_事件源_04

Function和Consumer高级用法 function的用法及短语_html_05

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东广告栏</title>
    <style>
        .box{
            width: 1000px;
            height: 1000px;

            background-image: url(./风景.jpg);
        }
        .box1{
            width: 1000px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            font-size: 50px;
            background-color: blue;
            position: fixed;
            position: relative;

        }
        .box2{
            width: 20px;
            height: 20px;

            font-size: 16px;
            text-align: center;
            line-height: 20px;
            position: absolute;
            background-color: red;
            
            top: 10px;
            right: 10px;
        }
    </style>
</head>
<body>
    <div class='box'>
      
        <div class='box1'>
              没错,这就是广告栏
            <div class='box2' >
                X
            </div>
        </div>
    </div>
    <script>
        var oDiv=document.getElementsByClassName('box2')[0];
        var oDiv1=document.getElementsByClassName('box1')[0];

        oDiv.onclick=function(){
            oDiv1.style.display = 'none';
        }        
    </script>
</body>
</html>

点击取消广告栏1

 

a标签的阻止事件发生

Function和Consumer高级用法 function的用法及短语_事件源_04

Function和Consumer高级用法 function的用法及短语_html_05

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lianxi</title>
</head>
<body>
    <a href="http://www.baidu.com" target='_blank'>点击跳转</a>
    <script>
        document.getElementsByTagName('a');
        this.onclick=function(enevt) {
            event.preventDefault();
        }
    </script>
</body>
</html>

阻止a标签的跳转

 

要求实现效果：当鼠标悬停在img上时，更换为另外一张图片；鼠标离开时，还原为本来的图片。

Function和Consumer高级用法 function的用法及短语_事件源_04

Function和Consumer高级用法 function的用法及短语_html_05

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        //window.onload页面加载完毕以后再执行此代码
        window.onload = function () {
            //需求：鼠标放到img上，更换为另一张图片，也就是修改路径（src的值）。
            //步骤：
            //1.获取事件源
            //2.绑定事件
            //3.书写事件驱动程序

            //1.获取事件源
            var img = document.getElementById("box");
            //2.绑定事件(悬停事件：鼠标进入到事件源中立即出发事件)
            img.onmouseover = function () {
                //3.书写事件驱动程序(修改src)
                img.src = "./广告栏.png";
//                this.src = "image/jd2.png";
            }

            //1.获取事件源
            var img = document.getElementById("box");
            //2.绑定事件(悬停事件：鼠标进入到事件源中立即出发事件)
            img.onmouseout = function () {
                //3.书写事件驱动程序(修改src)
                img.src = "./图片/7.png";
            }
        }
    </script>
</head>
<body>

    <img id="box" src="./图片/7.png" style="cursor: pointer;border: 1px solid #ccc;"/>
</body>
</html>

鼠标悬停换图片

 

 DOM的介绍

 

DOM：(document object model)文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。

DOM就是由节点组成的。

 

解析过程

HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。

 

DOM树（一切都是节点）

DOM的数据结构如下：

 

Function和Consumer高级用法 function的用法及短语_数组_40

上图可知，在HTML当中，一切都是节点：（非常重要）

  • 元素节点：HMTL标签。
  • 文本节点：标签中的文字（比如标签之间的空格、换行）
  • 属性节点：：标签的属性。

整个html文档就是一个文档节点。所有的节点都是Object。

DOM可以做什么

  • 找对象（元素节点）
  • 设置元素的属性值
  • 设置元素的样式
  • 动态创建和删除元素
  • 事件的触发响应：事件源、事件、事件的驱动程序

DOM节点的获取

DOM节点的获取方式其实就是获取事件源的方式

操作元素节点，必须首先找到该节点。有三种方式可以获取DOM节点：

var div1 = document.getElementById("box1");      //方式一：通过id获取单个标签

    var arr1 = document.getElementsByTagName("div1");     //方式二：通过 标签名 获得 标签数组，所以有s

    var arr2 = document.getElementsByClassName("hehe");  //方式三：通过 类名 获得 标签数组，所以有s

既然方式二、方式三获取的是标签数组，那么习惯性是先遍历之后再使用。

特殊情况：数组中的值只有1个。即便如此，这一个值也是包在数组里的。这个值的获取方式如下：

document.getElementsByTagName("div1")[0];    //取数组中的第一个元素

    document.getElementsByClassName("hehe")[0];  //取数组中的第一个元素

 

 

 

 

 

 

 

DOM的增删改查

Function和Consumer高级用法 function的用法及短语_事件源_04

Function和Consumer高级用法 function的用法及短语_html_05

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lianxi</title>
</head>
<body>
    <div id='box'></div>
    <button id='btn'>追加</button>

    <script>
        window.onload=function(){
            var oDiv=document.getElementById('box');
            var oBtn=document.getElementById('btn');
            // 创建DOM
            // 动态的创建一个标签,此处也可以创建别的标签(比如abcd,只不过没有语义,浏览器解析不了)
            var oP=document.createElement('p');
            oBtn.onclick=function(){
                // 追加
                oDiv.appendChild(oP);

                // 跟添加的p标签设置一些属性,修改属性
                oP.id='p1';
                oP.className='p1';
                oP.style.color='red';
                oP.innerText='这就是p标签的值';

        };
            

        };
    </script>
</body>
</html>

DOM的创建,修改

加入了删除后的代码

Function和Consumer高级用法 function的用法及短语_事件源_04

Function和Consumer高级用法 function的用法及短语_html_05

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lianxi</title>
</head>
<body>
    <div id='box'></div>
    <button id='btn'>追加</button>
    <button id='del'>删除</button>

    <script>
        window.onload=function(){
            var oDiv=document.getElementById('box');
            var oBtn=document.getElementById('btn');
            var oDel=document.getElementById('del');
            // 创建DOM
            // 动态的创建一个标签,此处也可以创建别的标签(比如abcd,只不过没有语义,浏览器解析不了)
            var oP=document.createElement('p');
            oBtn.onclick=function(){
                // 追加
                oDiv.appendChild(oP);

                // 跟添加的p标签设置一些属性,修改属性
                oP.id='p1';
                oP.className='p1';
                oP.style.color='red';
                oP.innerText='这就是p标签的值';

        };
                oDel.onclick=function(){
                    oDiv.removeChild(oP);
                }

        };
    </script>
</body>
</html>

DOM的创建,修改, 删除

示例的衍生

Function和Consumer高级用法 function的用法及短语_事件源_04

Function和Consumer高级用法 function的用法及短语_html_05

<div id='box'></div>
    <ul id='box2'>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
    <button id='btn'>追加</button>
    <button id='del'>删除</button>

    <script>
        window.onload=function(){
            var oDiv=document.getElementById('box');
            var oBtn=document.getElementById('btn');
            var oDel=document.getElementById('del');
            var oUl=document.getElementById('box2');
            console.log(oUl.children);
            var lis=oUl.children;
            // 遍历每一个ul里的li,绑定一个事件
            for (var i=0;i<lis.length;i++){
                lis[i].onclick=function(){
                    alert(2);
                }
            }
}

加入for循环,遍历列表

 

排他思想的示例

未进行排他思想的加入之前

Function和Consumer高级用法 function的用法及短语_事件源_04

Function和Consumer高级用法 function的用法及短语_html_05

<div id='box'></div>
    <ul id='box2'>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
    <button id='btn'>追加</button>
    <button id='del'>删除</button>

    <script>
        window.onload=function(){
            var oDiv=document.getElementById('box');
            var oBtn=document.getElementById('btn');
            var oDel=document.getElementById('del');
            var oUl=document.getElementById('box2');
            console.log(oUl.children);
            var lis=oUl.children;
            // 遍历每一个ul里的li,绑定一个事件
            for (var i=0;i<lis.length;i++){
                lis[i].onclick=function(){
                    console.log(this);
                    this.style.color='red';
                }
            }
}

点一个亮一个系列

 

 

Function和Consumer高级用法 function的用法及短语_事件源_04

Function和Consumer高级用法 function的用法及短语_html_05

DOM访问关系的获取
DOM的节点并不是孤立的，因此可以通过DOM节点之间的相对关系对它们进行访问。如下：



节点的访问关系，是以属性的方式存在的。

JS中的父子兄访问关系：



这里我们要重点知道parentNode和children这两个属性的用法。下面分别介绍。

 

获取父节点
调用者就是节点。一个节点只有一个父节点，调用方式就是

    节点.parentNode
（1）nextSibling：

     指的是下一个节点（包括标签、空文档和换行节点）

火狐、谷歌、IE9+版本：都指的是下一个节点（包括标签、空文档和换行节点）。

IE678版本：指下一个元素节点（标签）。

（2）nextElementSibling：

火狐、谷歌、IE9+版本：都指的是下一个元素节点（标签）。
总结：为了获取下一个元素节点，我们可以这样做：在IE678中用nextSibling，在火狐谷歌IE9+以后用nextElementSibling，于是，综合这两个属性，可以这样写：

下一个兄弟节点 = 节点.nextElementSibling || 节点.nextSibling
previous的中文是: 前一个

（1）previousSibling：

火狐、谷歌、IE9+版本：都指的是前一个节点（包括标签、空文档和换行节点）。

IE678版本：指前一个元素节点（标签）。

（2）previousElementSibling：

火狐、谷歌、IE9+版本：都指的是前一个元素节点（标签）。
总结：为了获取前一个元素节点，我们可以这样做：在IE678中用previousSibling，在火狐谷歌IE9+以后用previousElementSibling，于是，综合这两个属性，可以这样写：

 前一个兄弟节点 = 节点.previousElementSibling || 节点.previousSibling
3、补充：获得任意一个兄弟节点：

节点自己.parentNode.children[index];  //随意得到兄弟节点
获取单个的子节点
1、第一个子节点 | 第一个子元素节点：

（1）firstChild：

火狐、谷歌、IE9+版本：都指的是第一个子节点（包括标签、空文档和换行节点）。

IE678版本：指第一个子元素节点（标签）。

（2）firstElementChild：

火狐、谷歌、IE9+版本：都指的是第一个子元素节点（标签）。
总结：为了获取第一个子元素节点，我们可以这样做：在IE678中用firstChild，在火狐谷歌IE9+以后用firstElementChild，于是，综合这两个属性，可以这样写：

 第一个子元素节点 = 节点.firstElementChild || 节点.firstChild
2、最后一个子节点 | 最后一个子元素节点：

（1）lastChild：

火狐、谷歌、IE9+版本：都指的是最后一个子节点（包括标签、空文档和换行节点）。

IE678版本：指最后一个子元素节点（标签）。

（2）lastElementChild：

火狐、谷歌、IE9+版本：都指的是最后一个子元素节点（标签）。
总结：为了获取最后一个子元素节点，我们可以这样做：在IE678中用lastChild，在火狐谷歌IE9+以后用lastElementChild，于是，综合这两个属性，可以这样写：

 最后一个子元素节点 = 节点.lastElementChild || 节点.lastChild
获取所有的子节点
（1）childNodes：标准属性。返回的是指定元素的子节点的集合（包括元素节点、所有属性、文本节点）。是W3C的亲儿子。

火狐 谷歌等高本版会把换行也看做是子节点。（了解）
用法：

子节点数组 = 父节点.childNodes;   //获取所有节点。
（2）children：非标准属性。返回的是指定元素的子元素节点的集合。【重要】

它只返回HTML节点，甚至不返回文本节点。
在IE6/7/8中包含注释节点（在IE678中，注释节点不要写在里面）。
虽然不是标准的DOM属性，但它和innerHTML方法一样，得到了几乎所有浏览器的支持。

用法：（用的最多）

子节点数组 = 父节点.children;   //获取所有节点。用的最多。
nodeType
这里讲一下nodeType。

nodeType == 1 表示的是元素节点（标签） 。记住：元素就是标签。

nodeType == 2 表示是属性节点 了解

nodeType == 3 是文本节点 了解

DOM访问关系的获取

 

DOM节点操作（重要）

 

此部分内容结合本篇随笔前面的DOM的增删改查一块看.

节点的访问关系都是属性。

节点的操作都是函数（方法）

创建节点

格式如下：

新的标签(元素节点) = document.createElement("标签名");

比如，如果我们想创建一个li标签，或者是创建一个不存在的adbc标签，可以这样做：

Function和Consumer高级用法 function的用法及短语_数组

<script type="text/javascript">
    var a1 = document.createElement("li");   //创建一个li标签
    var a2 = document.createElement("adbc");   //创建一个不存在的标签

    console.log(a1);
    console.log(a2);

    console.log(typeof a1);
    console.log(typeof a2);
</script>

 

插入节点

插入节点有两种方式，它们的含义是不同的。

方式1：

父节点.appendChild(新的子节点);

解释：父节点的最后插入一个新的子节点。

方式2：

父节点.insertBefore(新的子节点,作为参考的子节点);

解释：

  • 在参考节点前插入一个新的节点。
  • 如果参考节点为null，那么他将在父节点最后插入一个子节点。

删除节点

格式如下：

父节点.removeChild(子节点);

解释：用父节点删除子节点。必须要指定是删除哪个子节点。

如果我想删除自己这个节点，可以这么做：

node1.parentNode.removeChild(node1);

复制节点（克隆节点）

格式如下：

要复制的节点.cloneNode();       //括号里不带参数和带参数false，效果是一样的。

  要复制的节点.cloneNode(true);

括号里带不带参数，效果是不同的。解释如下：

  • 不带参数/带参数false：只复制节点本身，不复制子节点。
  • 带参数true：既复制节点本身，也复制其所有的子节点。

 

 

关于DOM操作的几个示例