BOM,DOM

时间 2019-11-16

标签 bom dom 栏目 HTML 繁體版

原文原文链接

BOM

BOM的介绍

JavaScript基础分为三个部分：javascript

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

什么是BOM

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

BOM的结构图:linux

从上图也能够看出：ios

window对象是BOM的顶层(核心)对象，全部对象都是经过它延伸出来的，也能够称为window的子对象。数组
DOM是BOM的一部分。浏览器

window对象：数据结构

window对象是JavaScript中的顶级对象。
全局变量、自定义函数也是window对象的属性和方法。
window对象下的属性和方法调用时，能够省略window。

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

弹出系统对话框

好比说，alert(1)是window.alert(1)的简写，由于它是window的子方法。

系统对话框有三种：

    alert();    //不一样浏览器中的外观是不同的
    confirm();  //兼容很差
    prompt();   //不推荐使用

打开窗口、关闭窗口

一、打开窗口：

window.open(url,target)

参数解释：

url：要打开的地址。
target：新窗口的位置。能够是：_blank 、_self、 _parent 父框架。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        
        <!--行间的js中的open() window不能省略-->
        <button onclick="window.open('https://www.luffycity.com/')">路飞学城</button>
        
        <button>打开百度</button>
        <button onclick="window.close()">关闭</button>
        <button>关闭</button>
        
    </body>
    <script type="text/javascript">
        
        var oBtn = document.getElementsByTagName('button')[1];
        var closeBtn = document.getElementsByTagName('button')[3];
        
        oBtn.onclick = function(){
                      //open('https://www.baidu.com')
            
            //打开空白页面
            open('about:blank',"_self")
        }
        closeBtn.onclick = function(){
            if(confirm("是否关闭？")){
                close();
            }
        }
        
    </script>
</html>

location对象

window.location能够简写成location。location至关于浏览器地址栏，能够将url解析成独立的片断。

location对象的属性

href：跳转
hash 返回url中#后面的内容，包含#
host 主机名，包括端口
hostname 主机名
pathname url中的路径部分
protocol 协议通常是http、https
search 查询字符串

location.href属性举例：

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

<body>
<div>smyhvae</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：5秒后自动跳转到百度。

有时候，当咱们访问一个不存在的网页时，会提示5秒后自动跳转到指定页面，此时就能够用到location。举例：

<script>

    setTimeout(function () {
        location.href = "http://www.baidu.com";
    }, 5000);
</script>

location对象的方法

location.reload()：从新加载

setTimeout(function(){
         //3秒以后让网页整个刷新
    window.location.reload();
            
            
},3000)

navigator对象

window.navigator 的一些属性能够获取客户端的一些信息。

userAgent：系统，浏览器)
platform：浏览器支持的系统，win/mac/linux

例子：

    console.log(navigator.userAgent);
    console.log(navigator.platform);

history对象

一、后退：

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

二、前进：

history.forward()
history.go(1)

用的很少。由于浏览器中已经自带了这些功能的按钮：

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

计时相关:定时器

1.setTimeOut()

只在指定时间后执行一次

/定时器 异步运行  
function hello(){  
alert("hello");  
}  
//使用方法名字执行方法  
var t1 = window.setTimeout(hello,1000);  
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法  
window.clearTimeout(t1);//去掉定时器

2.setInterval()

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

/实时刷新  时间单位为毫秒  
setInterval('refreshQuery()',8000);   
/* 刷新查询 */  
function refreshQuery(){  
  console.log('每8秒调一次') 
}

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

对于这两个方法，须要注意的是若是要求在每隔一个固定的时间间隔后就精确地执行某动做，那么最好使用setInterval，而若是不想因为连续调用产生互相干扰的问题，尤为是每次函数的调用须要繁重的计算以及很长的处理时间，那么最好使用setTimeout

DOM介绍

什么是DOM:

DOM：文档对象模型。DOM 为文档提供告终构化表示，并定义了如何经过脚原本访问文档结构。目的其实就是为了能让js操做html元素而制定的一个规范。

DOM就是由节点组成的。

　　解析过程:

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

　　DOM树（一切都是节点）:

DOM的数据结构以下：

上图可知，在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

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

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

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

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

　　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

　　三、补充：得到任意一个兄弟节点：

节点本身.parentNode.children[index];  //随意获得兄弟节点

　　获取单个的子节点:

一、第一个子节点 | 第一个子元素节点：

（1）firstChild：

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

（2）firstElementChild：

火狐、谷歌、IE9+版本：都指的是第一个子元素节点（标签）。

总结：为了获取第一个子元素节点，咱们能够这样作：在IE678中用firstChild，在火狐谷歌IE9+之后用firstElementChild，因而，综合这两个属性，能够这样写：

 第一个子元素节点 = 节点.firstElementChild || 节点.firstChild

二、最后一个子节点 | 最后一个子元素节点：

（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节点操做（重要）:

　　建立节点:

格式以下：

新的标签(元素节点) = 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>

结果：

　　插入节点:

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

方式1：

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

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

方式2：

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

解释：

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

　　删除节点:

格式以下：

  父节点.removeChild(子节点);

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

若是我想删除本身这个节点，能够这么作：

node1.parentNode.removeChild(node1);

　　复制节点（克隆节点）:

格式以下：

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

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

括号里带不带参数，效果是不一样的。解释以下：

- 不带参数/带参数false：只复制节点自己，不复制子节点。
- 带参数true：既复制节点自己，也复制其全部的子节点。

　　设置节点的属性:

　　　　一、获取节点的属性值:　　　　　　

方式1：

    元素节点.属性;
    元素节点[属性];

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

<body>
<img src="images/1.jpg" class="image-box" title="美女图片" alt="地铁一瞥" id="a1">

<script type="text/javascript">
    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>
</body>

方式2：（推荐）

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

例子：

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

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

　　　　二、设置节点的属性值:

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

    myNode.src = "images/2.jpg"   //修改src的属性值
    myNode.className = "image2-box";  //修改class的name

方式2：（推荐）

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

方式2举例：（设置节点的属性值)

    myNode.setAttribute("src","images/3.jpg");
    myNode.setAttribute("class","image3-box");
    myNode.setAttribute("id","你好");

补充：

innerHTML、innerText 、value

　　　　三、删除节点的属性:

格式：

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

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

    myNode.removeAttribute("class");
    myNode.removeAttribute("id");

DOM事件操做

1、JavaScript的组成:

JavaScript基础分为三个部分：

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

2、事件:

ps: JS 就是以事件驱动为核心的一门语言.

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

　　　　事件源：引起后续事件的html标签。

　　　　事件：js已经定义好了（见下图）。

事件名	说明
onclick	鼠标单击
ondblclick	鼠标双击
onkeyup	按下并释放键盘上的一个键时触发
onchange	文本内容或下拉菜单中的选项发生改变
onfocus	得到焦点, 表示文本框等得到鼠标光标
onblur	失去焦点, 表示文本框等失去鼠标光标
onmouseover	鼠标悬停, 即鼠标停留在图片等的上方
onmouseout	鼠标移出, 即离开图片等所在的区域
onload	网页文档加载事件
onunload	关闭网页时
onsubmit	表单提交事件
onreset	重置表单时.

　　　　事件驱动程序：对样式和html的操做。也就是DOM。

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

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

　　　　一、获取事件源的方式（DOM节点的获取）:

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

var div1 = document.getElementById("box1");      //方式一：经过id获取单个标签
 
var arr1 = document.getElementsByTagName("div1");     //方式二：经过 标签名 得到 标签数组，因此有s
 
var arr2 = document.getElementsByClassName("hehe");  //方式三：经过 类名 得到 标签数组，因此有s

　　　　二、绑定事件的方式:

方式一：直接绑定匿名函数

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

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

方式二：先单独定义函数，再绑定

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

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

注意上方代码的注释。绑定的时候，是写fn，不是写fn()。fn表明的是整个函数，而fn()表明的是返回值。

方式三：行内绑定

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

<script type="text/javascript">

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

</script>

注意第一行代码，绑定时，是写的"fn()"，不是写的"fn"。由于绑定的这段代码不是写在js代码里的，而是被识别成了字符串。

　　　　三、事件驱动程序:

咱们在上面是拿alert举例，不只如此，咱们还能够操做标签的属性和样式。举例以下：

  <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。记得全部的像css属性的text-*，line-*、backgroun-*等在js中都写成驼峰

　　onload事件:

当页面加载（文本和图片）完毕的时候，触发onload事件。

举例：

<script type="text/javascript">
    window.onload = function () {
        console.log("小马哥");  //等页面加载完毕时，打印字符串
    }
</script>

有一点咱们要知道：js的加载是和html同步加载的。所以，若是使用元素在定义元素以前，容易报错。这个时候，onload事件就能派上用场了，咱们能够把使用元素的代码放在onload里，就能保证这段代码是最后执行。

建议是：整个页面上全部元素加载完毕在执行js内容。因此，window.onload能够预防使用标签在定义标签以前。

DOM介绍

什么是DOM:

DOM：文档对象模型。DOM 为文档提供告终构化表示，并定义了如何经过脚原本访问文档结构。目的其实就是为了能让js操做html元素而制定的一个规范。

DOM就是由节点组成的。

　　解析过程:

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

　　DOM树（一切都是节点）:

DOM的数据结构以下：

上图可知，在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

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

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

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

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

　　DOM访问关系的获取:

DOM的节点并非孤立的，所以能够经过DOM节点之间的相对关系对它们进行访问。以下：

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

JS中的父子兄访问关系：

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

　　获取父节点:

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

    节点.parentNode

（1）nextSibling：

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

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

（2）nextElementSibling：

- - 火狐、谷歌、IE9+版本：都指的是下一个元素节点（标签）。

下一个兄弟节点 = 节点.nextElementSibling || 节点.nextSibling

previous的中文是: 前一个

（1）previousSibling：

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

　　（2）previousElementSibling：

- - 火狐、谷歌、IE9+版本：都指的是前一个元素节点（标签）。

 前一个兄弟节点 = 节点.previousElementSibling || 节点.previousSibling

　　三、补充：得到任意一个兄弟节点：

节点本身.parentNode.children[index];  //随意获得兄弟节点

　　获取单个的子节点:

一、第一个子节点 | 第一个子元素节点：

（1）firstChild：

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

（2）firstElementChild：

火狐、谷歌、IE9+版本：都指的是第一个子元素节点（标签）。

 第一个子元素节点 = 节点.firstElementChild || 节点.firstChild

二、最后一个子节点 | 最后一个子元素节点：

（1）lastChild：

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

（2）lastElementChild：

火狐、谷歌、IE9+版本：都指的是最后一个子元素节点（标签）。

 最后一个子元素节点 = 节点.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节点操做（重要）:

　　建立节点:

格式以下：

新的标签(元素节点) = 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>

结果：

　　插入节点:

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

方式1：

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

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

方式2：

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

解释：

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

　　删除节点:

格式以下：

  父节点.removeChild(子节点);

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

若是我想删除本身这个节点，能够这么作：

node1.parentNode.removeChild(node1);

　　复制节点（克隆节点）:

格式以下：

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

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

括号里带不带参数，效果是不一样的。解释以下：

- 不带参数/带参数false：只复制节点自己，不复制子节点。
- 带参数true：既复制节点自己，也复制其全部的子节点。

　　设置节点的属性:

　　　　一、获取节点的属性值:　　　　　　

方式1：

    元素节点.属性;
    元素节点[属性];

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

<body>
<img src="images/1.jpg" class="image-box" title="美女图片" alt="地铁一瞥" id="a1">

<script type="text/javascript">
    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>
</body>

方式2：（推荐）

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

例子：

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

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

　　　　二、设置节点的属性值:

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

    myNode.src = "images/2.jpg"   //修改src的属性值
    myNode.className = "image2-box";  //修改class的name

方式2：（推荐）

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

方式2举例：（设置节点的属性值)

    myNode.setAttribute("src","images/3.jpg");
    myNode.setAttribute("class","image3-box");
    myNode.setAttribute("id","你好");

补充：

innerHTML、innerText 、value

　　　　三、删除节点的属性:

格式：

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

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

    myNode.removeAttribute("class");
    myNode.removeAttribute("id");