js基础学习之--DOM总结

来源：互联网发布：flash播放器mac版编辑：程序博客网时间：2024/04/28 20:08

DOM总结

JavaScript组成部分以及关系图

DOM概念 : DOM是文档对象模型（Document Object Model）的简称，它的基本思想是把结构化文档（比如HTML和XML）解析成一系列的节点（对象），再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口，以达到使用编程语言操作文档的目的（比如增删内容）。

DOM可以理解成文档（HTML文档、XML文档和SVG文档）的编程接口。

节点概念:DOM的最小组成单位叫做节点（node），一个文档的树形结构（DOM树），就是由各种不同类型的节点组成。

节点的主要类型：

对于HTML文档，节点主要有以下六种类型：

①Document节点文档节点整个文档（window.document）

②DocumentType节点文档类型节点文档的类型（比如<!DOCTYPE html>）

③Element节点元素节点 HTML元素（比如<body>、<a>等）

④Attribute节点属性节点 HTML元素的属性（比如class=”right”）

⑤Text节点文本节点 HTML文档中出现的文本

⑥DocumentFragment节点文档碎片节点文档的片段（临时仓库）

浏览器原生提供一个Node对象，上表所有类型的节点都是Node对象派生出来的。也就是说，它们都继承了Node的属性和方法。

DOM节点：

浏览器在解析我们的HTML文档的时候，浏览中的js引擎除了检测我们js程序之外，还会把我们当前的HTML文档中所有标签或文本、属性解析成一个节点，这个节点有叫做对象。每个节点对象都继承了一个原生节点对象Node象.

获取节点

getElementById(id) 获取特定 ID 元素的节点

getElementsByTagName(tagName) 获取相同元素的节点列表返回数组，使用[0]来获取

getElementsByName(name)获取相同名称的节点列表(低版本浏览器会有兼容性问题;不是所有标签都有name属性)

getElementsByClassName() 获取相同class属性的节点列表(ie8及以下浏览器会有兼容性问题)

获取、设置、删除节点属性

tagName 获取元素节点的标签名

innerHTML 获取元素节点里的内容 W3C标准

outerHTML 获取包括外部容器标签的内容及标签非 W3C标准

innerText 获取仅仅是容器里的内容非 W3C标准

例:<div id="news">就是一个div<a href="#" >a标签</a></div>

var a = document.getElementById("news");//获取节点

var c = a.innerHTML;

alert(c); //返回就是一个div<a href="#">a标签</a>

var d = a.outerHTML;

alert(d); 返回 <div id="news">就是一个div<a href="#">a标签</a></div>

var e = a.innerText;

alert(e); 返回就是一个diva标签

id获取元素节点的 id 名称

title获取元素节点的 title 属性值（鼠标悬停时的提示）

className 获取class属性值

style CSS【内部样式】属性值

var w = window.getComputedStyle(box,null).width; //标准

var h = box.currentStyle["height"]; //IE8及以下的处理方式

获取【内联样式】属性值

例:<div id="news" style="color:yellow;height:180">就是一个div</div>

var a = document.getElementById("news"); 获取节点

var s = a.style.color; //获得style属性是一个组

alert(s); 弹出的就是color键的键名（属性值）

var s = a.style; 获得style属性是一个组

alert(s[0]); 弹出就是a节点style属性中一个属性color

获取【内部样式】属性值

例:

var w = window.getComputedStyle(a,null).width; W3C标准

alert(w); 弹出【内部样式】id为news的div的width属性的值300px

var h = a.currentStyle.height; ie8及以下游览器

alert(h); 弹出【内部样式】id为news的div的height属性的值200px

获得内部样式属性值的兼容写法

function getStyle(dom,propertyName){

if(dom.currentStyle){

return dom.currentStyle[propertyName];

}

else{

return getComputedStyle(dom,null)[propertyName];

}

获取样式属性值 dom.style.属性=属性值；

a.style.backgroundColor="yellow"; 背景颜色变色

a.style.width = "400px"; 宽度颜色变为400px

getAttribute()获取特定元素节点属性的值

获取自定义属性时，oDiv.xxx,IE最新版本不支持,其他浏览器不支持,因此要采用这个方法来访问

setAttribute() 设置特定元素节点属性的值(IE低版本浏览器不支持这个方法)

removeAttribute() 移除特定元素节点属性(某些低版本浏览器不支持)

例:<div id="news" go="自定义属性go">就是一个div</div>

var a = document.getElementById("news"); 获取节点

var g =a. getAttribute("go");

alert(g); 弹出自定义属性go

a.setAttribute("go","改变一下，看看变不变");

var g =a. getAttribute("go");

alert(g); 弹出改变一下，看看变不变

var g =a. removeAttribute("go");

var g =a. getAttribute("go");

alert(g); null

几个常用的事件

onload 页面加载完后

例:window.onload = function () { } 预加载 html 后执行

onclick 鼠标点击

onmousemove 鼠标移动到某个元素产生事件（就是在某个元素上移动）

onmouseout 鼠标离开某个元素产生事件（就是离开某个元素）

onmouseover 鼠标在某个元素上浮动产生事件（就是进入某个元素）

Node节点

常用属性

nodeType:表示节点类型

（Document返回9；Element返回1; Text返回3;Attribute返回2）

常量：值不会发生改变的量叫做常量。

nodeName：表示节点的标签名

nodeValue：表示文本节点类型的值？？？

childNodes：获取当前元素节点的所有子节点

（这里面包含空白节点，在IE9之前，IE浏览器会自动忽略空白节点）

children：获取只包含Element类型的节点和 childNodes类似

firstChild：获取当前元素节点的第一个子节点

firstElementChild：返回元素类型为Element的第一个子节点

lastChild：获取当前元素节点的最后一个子节点

lastElementChild：获取当前元素节点的最后一个子节点（Element）

ownerDocument：获取该节点的文档根节点，相当与 document

parentNode：获取当前节点的父节点

previousSibling：获取当前节点的前一个同级节点

previousElementSibling：获取当前节点的前一个同级节点(Element)

nextSibling：获取当前节点的后一个同级节点

nextElementSibling：获取当前节点的后一个同级节点（Element）

attributes：获取当前元素节点的所有属性节点集合

childrenElementCount：子元素的数量和length值相等

创建、删除、插入、替换节点

1. 创建：

document.createElement(“标签”) 创建一个元素节点

document.createTextNode(“文本内容”); 创建一个文本节点

2.插入：

appendChild(node)

box.appendChild(node); 把node节点插入到box的内部最后的位置。

insertBefore(newNode, existNode)

box.insertBefore(newNode, existNode); 把newNode节点插入到exsitNode的前面。

3.删除：

removeChild(node) 删除某个节点

box.removeChild(node);

4.替换：

replaceChild(a,b);

box.replaceChild(a,b); 把b替换成a

offsetParent（参照物父元素）

①当某个元素的父元素或以上元素都未进行CSS定位时，则返回body元素，也就是说元素的偏移量（offsetTop、offsetLeft）等属性是以body为参照物的

②当某个元素的父元素进行了CSS定位时（absolute或者relative），则返回父元素，也就是说元素的偏移量是以父元素为参照物的

③当某个元素及其父元素都未进行CSS定位时，则返回距离最近的使用了CSS定位的元素。

事件

概念：事件是可以被JavaScript侦测到的行为。网页中的每个元素都可以产生某些可以触发JavaScript函数的事件

事件的绑定方式

格式：节点对象.on+事件名 = 事件处理程序; div.onclick = function(){}

（事件目标：节点对象事件类型：事件名事件处理程序：函数）

事件分类

1.鼠标事件

onclick 当用户点击某个对象时调用的事件句柄。

ondblclick 当用户双击某个对象时调用的事件句柄。

onmouseover 鼠标移到某元素之上。冒泡

onmouseenter 在鼠标光标从元素外部移动到元素范围之内时触发。 不冒泡

onmouseout 鼠标从某元素移开。冒泡

onmouseleave 在位于元素上方的鼠标光标移动到元素范围之外时触发。 不冒泡

onmousemove 鼠标被移动时触发。

onmousedown 鼠标按钮被按下。

onmouseup 鼠标按键被松开。

oncontextmenu 鼠标右键菜单展开时。

onmousewheel 鼠标滚轮事件 DOMMouseScroll（火狐，后面讲）

事件传播：事件冒泡

2.键盘事件

onkeydown 某个键盘按键被按下。

onkeyup 某个键盘按键被松开。

onkeypress 键盘<字符键>被按下,而且如果按住不放的话，会重复触发此事件。

3.UI事件

onload 页面元素（包括图片多媒体等）加载完成后

onbeforeunload 用户退出页面。（有兼容性问题）

onresize 窗口或框架被重新调整大小。（有兼容性问题）

onselect 文本被选中。（有兼容性问题）

4.表单事件

<form >input系列的标签</form>

onblur 元素失去焦点时触发

onfocus 元素获得焦点时触发

onchange 元素内容被改变

onreset 重置按钮被点击

onsubmit 确认按钮被点击

oninput 输入字符时触发

事件对象（Event对象）

概念：事件执行过程中的状态，用来保存当前事件的信息对象

获取事件对象

标准：事件处理函数的第一个参数

div.onclick = function(e){}

IE8 window.event

获取event对象的兼容写法

var ev=e||window.event;

获取事件目标的兼容写法

var t=ev.target||ev.srcElement;

Event对象公共属性和方法

Target 返回触发此事件的元素（事件的目标元素）。

Type 被触发的事件的类型(一般用于判断)。

preventDefault()通知浏览器不要执行与事件关联的默认动作。

stopPropagation() 取消事件的进一步冒泡。

鼠标/键盘事件Event属性

altKey 返回当事件被触发时，"ALT" 是否被按下。返回true 或 false

ctrlKey 返回当事件被触发时，"CTRL" 键是否被按下。返回true 或 false

shiftKey 返回当事件被触发时，“Shift" 键是否被按下。返回true 或 false

button 返回当事件被触发时，哪个鼠标按钮被点击。不同游览器返回的值不同

which 该属性声明了被敲击的键生成的 Unicode 字符码(ascii码) ie不兼容

keyCode 该属性声明了被敲击的键生成的 Unicode 字符码(ascii码)

clientX 返回当事件被触发时，鼠标指针相对于浏览器可视区域的水平坐标。

clientY 返回当事件被触发时，鼠标指针相对于浏览器可视区域的垂直坐标。

screenX 返回当某个事件被触发时，鼠标指针相对于电脑屏幕的水平坐标。

screenY 返回当某个事件被触发时，鼠标指针相对于电脑屏幕的垂直坐标。

IE事件Event属性

cancelBubble：如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true （同 stopPropagation()）。

returnValue: 如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle，可以取消发生事件的源元素的默认动作（同preventDefault()）。

offsetX,offsetY: 发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。

srcElement: 对于生成事件的 Window 对象、Document 对象或 Element 对象的引用（同 target）。

取消事件默认动作的兼容写法

if(event.preventDefault){

event.preventDefault();

}

else{

event.returnValue=false;

}

检测鼠标按键e.button

W3C标准

0: 代表鼠标按下了左键 1: 代表按下了滚轮 2: 代表按下了右键

ie8及以下版本

1鼠标左键,2鼠标右键,3左右同时按,4滚轮,5左键加滚轮,6右键加滚轮,7三个同时

对比

offsetX, offsetY //鼠标相对于事件源对象的偏移量, 也就是元素坐标，相对坐标

clientX, clientY //鼠标相对于浏览器可视区域的位置，也就是浏览器坐标

screenX, screenY //鼠标相对与电脑屏幕的位置

pageX,pageY //鼠标相对与文档的位置（包括滚动条滚动的距离，即：clientX+document.body.scrollLeft，IE不支持）

获取body节点对象

标准： document.body

IE : document.documentElement

滚动条距顶部的距离的兼容写法

document.body.scrollTop||document.documentElement.scrollTop 滚动条距离顶部的距离

事件监听

事件监听与捕获(反冒泡)

事件监听器

格式：元素.addEventListener(事件名,事件处理函数,是否捕获)

target.addEventListener("click", fn, false);

①可以绑定多个函数在一个对象上, 执行顺序按照绑定的顺序来

②第三个参数是否使用捕获(反向冒泡)，默认false，为冒泡

③其中插入一个绑定的事件【不管放哪里按顺序】

移除：removeEventListener('click',fn)传入的参数fn要跟添加时一样(同一个函数)，否则不能移除事件

IE的事件监听器

格式：元素.attachEvent(事件名,事件处理函数) ==> 事件名带on

target.attachEvent("onclick",fun);

①可以绑定多个函数在一个对象上, 执行顺序按照绑定的反序

②其中插入一个绑定的事件【不管放哪里，先执行，事件监听再倒序执行】

移除：detachEvent('onclick',fun)，传入的参数fn要跟添加时一样，否则不能移除事件

事件监听器格式的兼容写法

function on(dom,type,fn){

If(dom.attachEvent){

dom.attachEvent("on"+type,fn);

}else{

dom.addEventListener(type,fn);

}

};

on(btn,"click",function(){alert("兼容写法")}); 【用】的时候要用on

Onmousewheel鼠标滚轮事件

DOMMouseSroll(事件监听格式在火狐)

例：on(document,"DOMMouseScroll",function(){alert("12")});

事件监听鼠标滚动的兼容写法

function add(){alert("hi")};

on(document,"DOMMouseScroll",add);

on(document,"mousewheel",add);

事件event属性

例：

function on(dom,type,fn){

if(dom.attachEvent){

dom.attachEvent("on"+type,fn);

}else{

dom.addEventListener(type,fn);

}

};

function fn(e){

var event=window.event||e;

alert(event.wheelDelta); ie google 向上滑动返回120 向下滑动返回-120

alert(event.detail);火狐向上滑动返回-3 向下滑动返回3

};

on(document,"DOMMouseScroll",fn);

on(document,"mousewheel",fn);

1 0