JavaScript 之DOM(二)

五. DOM节点操作（重要）

前面的内容：节点的访问关系都是属性。

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

1. 创建节点

格式如下：

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

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

例：

<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>

 

相应的效果图为：

 

2. 插入节点

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

方式1：

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

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

方式2：

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

解释：

在参考节点前插入一个新的节点。

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

3. 删除节点

格式如下：

父节点.removeChild(子节点);

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

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

node1.parentNode.removeChild(node1);

4. 复制节点（克隆节点）

格式如下：

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

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

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

不带参数/带参数false：只复制节点本身，不复制子节点。

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

六．设置节点的属性

我们可以获取节点的属性值、设置节点的属性值、删除节点的属性。

我们就统一拿下面这个标签来举例：

<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2121206715,2955288754&fm=26&gp=0.jpg"

 class="image_box" title="美女图片" alt="美女走丢了" id="a1">

下面分别介绍。

1. 获取节点的属性值

方式1：

元素节点.属性;

元素节点[属性];

举例：（获取节点的属性值）

<script>

    var myNode = document.getElementsByTagName("img")[0];

    console.log(myNode.src);

    console.log(myNode.className);    //注意，是className，不是class

    console.log(myNode.title);

    console.log("------------");

    console.log(myNode["src"]);

    console.log(myNode["className"]); //注意，是className，不是class

    console.log(myNode["title"]);

</script>

方式2：（推荐）

素节点.getAttribute("属性名称");

例子：

console.log(myNode.getAttribute("src"));

console.log(myNode.getAttribute("class"));   //注意是class，不是className

console.log(myNode.getAttribute("title"));

方式1和方式2的区别在于：前者是直接操作标签，后者是把标签作为DOM节点。推荐方式2

2. 设置节点的属性值

方式1：

举例：（设置节点的属性值）

 

myNode.src = "images/2.jpg"   //修改src的属性值

myNode.className = "image2-box";  //修改class的name

myNode['title'] = "漂亮吗";  // 修改title的属性值

方式2：（推荐）

元素节点.setAttribute(属性名, 新的属性值);

举例：（设置节点的属性值）

myNode.setAttribute("src","images/3.jpg");

myNode.setAttribute("class","image3-box");

myNode.setAttribute("id","aaa");

3. 删除节点属性

格式：

元素节点.removeAttribute(属性名);

举例：（删除节点的属性）

myNode.removeAttribute("class");

myNode.removeAttribute("id");

七. 定时器

在js中的定时器分两种：1、setTimeout() 2、setInterval()

1. setTimeOut()

只在指定时间后执行一次

<button id="btn1">开始</button>

<button id="btn2">清除</button>

 

<script>

    var oBtn1 = document.getElementById("btn1");

    var timer = null;

    oBtn1.onclick = function () {

        timer = setTimeout(function () {

            console.log(1111);

console.log("我睡了三秒");

        },3000)

    };

    var oBtn2 = document.getElementById("btn2");

    oBtn2.onclick = function () {

        clearTimeout(timer);

    }

</script>

 

开始按完以后，只有按清除才能再按开始才能生效，反之同理。也就是上图需要按完清除才能再打印出我睡了三秒

2.setInterval()

在指定时间为周期循环执行

css样式为：：

<style>

    #box{

        width: 100px;

        height: 100px;

        background: green;

    }

</style>

 

html和js代码为：

<button id="start">开启定时器</button>

<button id="stop">关闭定时器</button>

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

<script>

    var strat = document.getElementById("start");

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

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

    var margin_left = 0;

    var timer = null;

 

    strat.onclick = function () {

        clearInterval(timer);

        timer = setInterval(function () {

            margin_left += 10;

            box.style.marginLeft = margin_left + 'px';

        }, 500)

    };

stop.onclick = function () {

//清除定时器

        clearInterval(timer);

    }   

</script>

两种方法根据不同的场景和业务需求择而取之，

对于这两个方法，需要注意的是如果要求在每隔一个固定的时间间隔后就精确地执行某动作，那么最好使用setInterval。

八. BOM介绍

1. 什么是BOM

BOM：Browser Object Model，浏览器对象模型。

BOM的结构图:

 

从上图也可以看出：

window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象。

DOM是BOM的一部分。

window对象：

window对象是JavaScript中的顶级对象。

全局变量、自定义函数也是window对象的属性和方法。

window对象下的属性和方法调用时，可以省略window。

下面讲一下 BOM 的常见内置方法和内置对象。

2. 弹出系统对话框

比如说，alert(1)是window.alert(1)的简写，因为它是window的子方法。

系统对话框有三种：

alert();    //不同浏览器中的外观是不一样的

confirm();  //兼容不好

prompt();   //不推荐使用

3. 打开窗口和关闭窗口

(1)打开窗口：

window.open(url,target)

参数解释：

url：要打开的地址。

target：新窗口的位置。可以是：_blank、_self、_parent 父框架。

例：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <button>打开百度</button>

        <button>关闭百度</button>

    </body>

    <script>

        var oBtn = document.getElementsByTagName('button')[0];

        var closeBtn = document.getElementsByTagName('button')[1];

        var myWindow = null;

        oBtn.onclick = function(){

            myWindow = open('https://www.baidu.com');

            //打开空白页面

            // open('about:blank',"_self")        };

        closeBtn.onclick = function(){

            if(confirm("是否关闭？")){

                myWindow.close();

            }

        }

    </script>

</html>

4. location对象

 

window.location可以简写成location。location相当于浏览器地址栏，可以将url解析成独立的片段。

(1) location对象的属性

href：跳转

hash 返回url中#后面的内容，包含#

host 主机名，包括端口

hostname 主机名

pathname url中的路径部分

protocol 协议 一般是http、https

search 查询字符串

location.href属性举例：

举例：点击盒子时，进行跳转

例：

html和js代码为：

<body>

<div>点我</div>

<script>

 

    var div = document.getElementsByTagName("div")[0];

    div.onclick = function () {

        location.href = "http://www.baidu.com";   //点击div时，跳转到指定链接

 //     window.open("http://www.baidu.com","_blank");  //方式二

    }

</script>

</body>

(2)location对象的方法

location.reload()：重新加载

setTimeout(function(){

    //3秒之后让网页整个刷新

    window.location.reload();            

},3000)

5. history对象

(1)后退：

history.back()

history.go(-1)：0是刷新

(2) 前进：

history.forward()

history.go(1)

用的不多。因为浏览器中已经自带了这些功能的按钮

九．js中的面向对象

 

创建对象的几种常用方式:

1.使用Object或对象字面量创建对象

2.工厂模式创建对象

3.构造函数模式创建对象

4.原型模式创建对象

1.使用Object或对象字面量创建对象

JS中最基本创建对象的方式：

var student = new Object();

student.name = "easy";

student.age = "20";

 

这样，一个student对象就创建完毕，拥有2个属性name以及age，分别赋值为"easy"和20。

如果你嫌这种方法有一种封装性不良的感觉。来一个对象字面量方式创建对象。