前言
学习JavaScript,就必会学到DOM(文档对象模型),因为这时JavaScript的基础,这篇博客继续总结JavaScript的DOM。
内容
DOM:文档对象模型(Document Object Model)
以面向对象方式描述的文档模型
以一种独立于平台和语言的方式访问和修改一个文档的内容和结构
可以动态的显示或隐藏一个元素,改变他们的属性
DOM技术是的页面的交互性大大的增强
优缺点:
- DOM的优势主要表现在:易用性强,使用DOM时,将把所有的XML文档信息都存于内存中,并且遍历简单,支持XPath,增强了易用性。
- DOM的缺点主要表现在:效率低,解析速度慢,内存占用量过高,对于大文件来说几乎不可能使用。另外效率低还表现在大量的消耗时间,因为使用DOM进行解析时,将为文档的每个element、attribute、processing-instruction和comment都创建一个对象,这样在DOM机制中所运用的大量对象的创建和销毁无疑会影响其效率。
BOM:浏览器对象
用于描述对象与对象之间层次关系的模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构
主要功能:
- 弹出新浏览器窗口的能力;
- 移动、关闭和更改浏览器窗口大小的能力;
- 可提供WEB浏览器详细信息的导航对象;
- 可提供浏览器载入页面详细信息的本地对象;
- 可提供用户屏幕分辨率详细信息的屏幕对象;
- 支持Cookies;
- 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];
数组排序
冒泡排序:
var mySort = function (arr, f){
for(var i=0;i<arr.length - 1;i++){
for(var j = 0; j<arr.length - 1 - I;j++){
if(f(arr [ j ] ,arr[j+1])>0){
var t = arr[j];
arr[j] = arr[j+1];
arr[j+1] = t;
}
}
}
}
mySort(arr,function(a,b){return a-b});//a-b为升序,b-a为降序
操作样式:
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
谢谢您的阅读!