js--DOM

小灰灰 2021-09-27 04:22 284阅读 0赞

*  前言
 *  内容
    
     *  DOM:文档对象模型（Document Object Model）
        
         *  优缺点：
     *  BOM：浏览器对象
        
         *  主要功能：
     *  数组
        
         *  concat/concatenation 连接/
         *  join
         *  pop
         *  push
         *  reverse
         *  shift
         *  sort
         *  splice
     *  数组排序
        
         *  冒泡排序：
         *  操作样式：
     *  添加节点
        
         *  节点的增删改查
            
             *  查：
             *  改：
             *  增：
             *  删：
     *  事件对象
 *  总结
 *  end

# 前言 #

学习JavaScript，就必会学到DOM（文档对象模型），因为这时JavaScript的基础，这篇博客继续总结JavaScript的DOM。

# 内容 #

## DOM:文档对象模型（Document Object Model） ##

> 以面向对象方式描述的文档模型  
> 以一种独立于平台和语言的方式访问和修改一个文档的内容和结构  
> 可以动态的显示或隐藏一个元素，改变他们的属性  
> DOM技术是的页面的交互性大大的增强

### 优缺点： ###

*  DOM的优势主要表现在：易用性强，使用DOM时，将把所有的XML文档信息都存于内存中，并且遍历简单，支持XPath，增强了易用性。
 *  DOM的缺点主要表现在：效率低，解析速度慢，内存占用量过高，对于大文件来说几乎不可能使用。另外效率低还表现在大量的消耗时间，因为使用DOM进行解析时，将为文档的每个element、attribute、processing-instruction和comment都创建一个对象，这样在DOM机制中所运用的大量对象的创建和销毁无疑会影响其效率。

## BOM：浏览器对象 ##

用于描述对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构

### 主要功能： ###

> 1.  弹出新浏览器窗口的能力；
> 2.  移动、关闭和更改浏览器窗口大小的能力；
> 3.  可提供WEB浏览器详细信息的导航对象；
> 4.  可提供浏览器载入页面详细信息的本地对象；
> 5.  可提供用户屏幕分辨率详细信息的屏幕对象；
> 6.  支持Cookies；
> 7.  Internet Explorer对BOM进行扩展以包括ActiveX对象类，可以通过JavaScript来实现ActiveX对象。

## 数组 ##

### concat/concatenation 连接/ ###

语法：  
`Array <array>.concat(item1, item2, ..., itemN);`  
功能：

> 将数组与给定参数连接起来，参数也可以是数组  
> 如果参数是数组，那么会将参数展开，但是不会展开数组中的数组

案例：

var arr = [1,2,3];
    var arr2 = arr.concat("a","b",["d", "e"], [[4, 5], 6]);
    // arr2: [1,2,3,a,b,d,e,[4,5],6];
    for(var i in arr2) {
    alert("key = " + i + ", value = " + arr2[i]);
    }

### join ###

语法：  
`string <array>.join(separator);`  
功能：

> 将数组用指定字符进行连接，得到一个string

案例：

var arr = [1,2,"a","b"];
    var res = arr.join("--");
    alert(res);

### pop ###

语法：  
`元素 <array>.pop();`  
功能：

> 移除数组的最后一个元素，并返回该元素  
> 如果数组为空，返回undefined

案例：

var arr = [1,2,3];
    var ele = arr.pop();
    alert(ele); // ele: 3
    alert(arr); // arr: [1,2]

### push ###

语法：  
`number <array>.push(item1, item2, ..., itemN);`  
功能：

> 将元素追加到数组中，并返回数组的长度  
> 如果元素是数组，不会像concat那样展开元素

案例：

var arr = [1,2,3];
    var length = arr.push("a","b",["d", "e"], [[4, 5], 6]);
    // arr: [1,2,3,a,b,[d,e],[[4,5],6]]
    alert(typeof length);
    alert(length);

### reverse ###

语法：  
`Array <array>.reverse();`  
功能：

> 将数组翻转，并返回数组引用. 注意，这里没有创建新数组

案例：

var arr1 = [1,2,3];
    var arr2 = arr1.reverse();
    // 此时arr1与arr2是同一个实例的两个引用

### shift ###

语法：  
`元素 <array>.shift();`  
功能：

> 移除数组的第一个元素，并返回

案例：

var arr = ["a", "b", "c", "d", "e", "d"];
    var ele = arr.shift();
    alert("arr的值为：" + arr + ", 类型为：" + (typeof arr) 
    + ((arr instanceof Array) ? "是" : "不是") + "Array类型");
    alert("ele = " + ele + ", " + typeof ele);

slice  
语法：  
`Array <array>.slice(start, end);`  
功能：

> 返回数组的片段，第二个参数如果省略表示一直到数组结束

案例：

var arr = [1,2,3,4];
    var arr1 = arr.slice(0);
    var arr2 = arr.slice(0, 2);

### sort ###

语法：  
`Array <array>.sort(sortFunction);`  
功能：

> 按照sortFunction的规则排序数组，并返回数组引用  
> 如果省略sortFunction，那么按照字符是升序排列

sortFunction使用规范：

function(a,b) { return -1|0|1;};
    -1a<b
    0a=b
    1a>b

案例：

var arr1 = ["c", "a", "d", "b"];
    arr1.sort();
    var arr2 = [3,1,4,2];
    arr2.sort(function(a,b){ return a-b});

### splice ###

语法：  
`Array <array>.splice(start, deleteCount, item1, item2, ..., itemN);`  
功能：

> 将数组中从start开始，移除deleteCount个元素，并作为数组返回  
> 如果有item等参数，将其插入到删除数据的位置处

案例：

var arr1 = [1,2,3,4,5,6];
    var arr2 = arr1.splice(1, 2);
    // arr1: [1,4,5,6]; arr2: [2,3];
    // var arr2 = arr1.splice(1,2, "a", "b", "c", "d");
    // arr1: [1,"a","b","c","d",4,5,6]; arr2: [2,3];
    // var arr2 = arr1.splice(1,2, "a");
    // arr1: [1,"a",4,5,6]; arr2: [2,3];

unshift  
语法：  
`number <array>.unshift(item1, item2, ..., itemN);`  
功能：

> 将元素加到数组的开始

案例：

var arr = [1,2,3];
    var length = arr.unshift(11,12,13);
    // arr: [11,12,13,1,2,3];

## 数组排序 ##

### 冒泡排序： ###

### 操作样式： ###

onload = function () {
        var p = document.getElementsByTagName("p")[0];
        //css:background-color
        //js:使用CamelCase命名规则，或者使用关联数组
        p.style.backgroundColor = "pink";
        //p.style.borderTopColor = "blue";
        //p.style.borderTopStyle = "dashed";
        //p.style.borderTopWidth = "1px";
        p.style["border-top-color"] = "blue";
        p.style["border-top-style"] = "dashed";
        p.style["border-top-width"] = "1px";
    }

## 添加节点 ##

### 节点的增删改查 ###

#### 查： ####

获取节点

#### 改： ####

setAttribute/getAttribute  
<节点>.属性 = …  
<节点>.style.成员 = …

#### 增： ####

创建元素节点：  
`var node = document.createElement("标签名")；`  
创建文本节点：

var textNode = document.createTextNode("文本");
    <节点>.innerHTML = "文本"；     //这里可以使用HTML
    <node>.innerHTML
    <节点>.innerText  =“文本”     //非标准
    <node>.innerText

创建属性节点：

<节点>.setAttribute(…,…);
    //标准方法，符合xml规范，可以添加任意的属性
    <a href = "…" jk ="jk">测试</a>
    aNode.jk = "jk";//部分浏览器是可以的

追加节点到尾部：  
`父结点.appendChild(子节点);`

<parentNode>.appendChild(<subNode>)

将节点插入到中间（插入到某一个元素的前面）：  
`父结点.insertBefore(新元素，旧元素);`

<parentNode>.insertBefore(<newSubNode>,<nextNode>)

#### 删： ####

`父结点.removeChild（子节点）；`

<parentNode>.removeChild(<subNode>)

eg.

onload = function(){ 
        var body = J("body");
        var p = J("p");
        //body.removeChild(p);
        p.style.display = "none";
    };

## 事件对象 ##

使用事件对象的一般语法：  
`对象 = function（e）{/*方法*/};`  
常用成员

*  鼠标坐标  
    
    
     *  screenX与screenY
     *  clientX与clientY
     *  layerX与layerY(当没有该属性的时候使用offsetX来表示div区域的坐标）
 *  鼠标按键  
    
    
     *  button
 *  功能键  
    
    
     *  altKey
     *  ctrlKey
     *  shiftKey

# 总结 #

颗粒归仓，及时回顾。

# end #

谢谢您的阅读！