09、JavaScript-DOM操作

每天一句:成长的速度取决于在过程中发现和解决问题的速度,最终这是一个量变引发质变的过程;

DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口)。DOM描绘了一个层次化的节点树,用于添加、删除和修改页面的某一部分。

一、DOM介绍

DOM中的三个字母,D(文档)可以理解为整个WEB加载的页面文档;O(对象)可以理解为类似window对象子类的东西,可以调用属性和方法,也就是document对象;M(模型)可以理解为网页文档的树形结构。
DOM提供了访问结构化文档的一种方式,但DOM并不是一种技术,它只是访问结构化文档(主要是XML文档和HTML文档)的一种思想。
DOM有三个等级,分别是DOM1、DOM2、DOM3,并且DOM1在1998年10月成为W3C标准。DOM1所支持的浏览器包括IE6+、Firefox、Safari、Chrome和Opera1.7+。

注: IE中的所有DOM对象都是以COM对象的形式实现的,即是IE中的DOM会与其他浏览器有一定的差异。

  • 节点
    加载HTML页面时,web浏览器生成一个树形结构,用来表示页面内部结构。DOM将这种树形结构理解为由节点组成:


    节点树

    上图树形结构,html标签,没有父辈,没有兄弟,所以html标签为根标签。head标签是html的子标签,meta和title标签是兄弟关系。如果把每个标签当作一个节点,那么这些节点组合成的就是节点树。

  • 节点种类
    元素节点、文本节点、属性节点;

  <div id="box">测试Div</div>
  元素节点: div
  属性节点: id="box"
  文本节点: 测试Div

二、查找元素

  • getElementById() 获取特定ID的节点
  • getElementsByName() 通过name书信获取到节点列表
  • getElementsByTagName() 获取相同元素的节点列表
  • getElementsByClassName() 获取特定类名元素的节点列表

案例: getElementsByClassName的封装(低版本中没有该方法)
案例: 导航下拉菜单效果

三、DOM节点

  • node节点属性
    节点可以分为元素节点、属性节点和文本节点,而这些节点又有三个非常有用的属性: nodeName、nodeType和nodeValue;
节点属性
  var oBox = document.getElementById("box");
  alert(oBox.nodeName); // DIV
  alert(oBox.nodeType); // 1
  alert(oBox.nodeValue); // null
        
  var att = oBox.attributes;    // 获取所有属性节点集合
  alert(att[0].nodeValue);  // box
  • 层次节点属性
    节点的层次可以划分为: 父节点与子节点、兄弟节点两种。当需要获取其中一个元素节点时,就可以使用层次节点属性俩获取它相关层次的节点;
    • childNodes: 获取当前元素节点的所有子节点(非IE下包含了文本和元素类型节点,也会包含非法嵌套的子节点;IE下只包含元素类型节点)
    for(var i=0; i<oBox.childNodes.length; i++){
        // 判断元素节点
        if(box.childNodes[i].nodeType === 1){
          // 注意输出的是大写的元素名
          alert('元素节点:' + box.childNodes[i].nodeName);    
        } else if(box.childNodes[i].nodeType === 3){
          // 判断文本节点(有空的文本节点,来源于换行操作)
          alert('文本节点:' + box.childNodes[i].nodeValue);
        }
    

}

> 
注1: 使用childNodes返回子节点对象时,可能是元素子节点,也有可能是文本子节点。元素子节点,可以通过nodeName或tagName获取标签名称,来进一步判断处理;而文本节点可以使用nodeValue获取;
注2: 在获取到文本节点时,是无法使用innerHTML属性输出文本内容的(nodeValue和innerHTML第一个区别即是取值);
注3: nodeValue和innerHTML第二个区别就是赋值时,nodeValue会在文本里的HTML转义成特殊字符,从而达到形成单纯文本的效果;
 // 结果: <span>我是span喔</span>
box.childNodes[0].nodeValue = '<span>我是span喔</span>' 
// 结果: 我是span喔
box.innerHTML = '<span>我是span喔</span>'    
注4: 在非IE中,标准的DOM具有识别空白文本节点的功能;而IE自动忽略了,如果要保持一致的元素节点,可以直接使用getElmentsByTagName方式,或者手动删除/忽略(需要写封装操作); 
  
  - firstChild: 获取当前元素节点的第一个子节点
    ```
     alert(oBox.firstChild.nodeName);
    ```

  - lastChild: 获取当前元素节点的最后一个子节点
alert(oBox.lastChild.nodeName);

- parentNode: 获取当前节点的父节点
alert( oBox.parentNode.nodeName);

- previousSibling: 获取当前节点的前一个同级节点
alert(oBox.lastChild.previousSibling.nodeName);

- nextSibling: 获取当前节点的后一个同级节点
alert(oBox.firstChild.nextSibling.nodeName);

- attributes: 获取当前元素节点的所有属性节点集合
oBox.attributes.length  // 返回属性节点个数
oBox.attributes[0].nodeType // 节点类型
oBox.attributes[0].nodeValue // 属性值
oBox.attributes[0].nodeName // 属性名
oBox.attributes['title']    // 返回属性名为title的属性节点

- 节点操作
DOM不单单可以查找节点,也可以创建节点、复制节点、插入节点、删除节点、替换节点;
- write(): 可以把任意字符串插入到文档中

document.write('haha')


  - createElement(): 创建一个元素节点

document.createElement('p'); // 创建一个新元素节点p


  - appendChild(): 将新节点追加到子节点列表的末尾

var oUl = document.getElementById("box1"); // 获取某个元素节点
var oP = document.createElement('p'); // 创建一个新元素节点
oUl.appendChild(oP); // 将新元素节点p,添加到子节点末尾


  - createTextNode(): 创建一个文本节点

var oText = document.createTextNode(‘哈哈’); // 创建一个文本节点


  - insertBefore(): 将新节点插入到前面

语法:
// obj父元素,将子元素A插入到子元素B的前面
obj.insertBefore(要插入的元素A, 子元素B);
var oBox = document.getElementById("box"); // 获取到元素
var oP = document.createElement('p'); // 创建一个p节点
oBox.parentNode.insertBefore(oP, oBox); // 将p节点插入到oBox前面

  - cloneNode():    复制节点(创建一个节点的系统开销相对会较大)

var oBox = document.getElementById("box"); // 获取到元素
var newBox = oBox.cloneNode(true); // true即表示复制内容
document.body.appendChild(newBox); // 添加到页面


  - removeChild(): 移除节点

document.body.removeChild(newBox); // 将newBox从body从删除


> 案例: 简易日历

推荐阅读更多精彩内容