js基础学习之--DOM总结

DOM总结

JavaScript组成部分以及关系图

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

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

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

     节点的主要类型：

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

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

②DocumentType节点     文档类型节点    文档的类型（比如）

③Element节点          元素节点       HTML元素（比如、等）

④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标准

例:

就是一个diva标签

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

var c = a.innerHTML;

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

var d = a.outerHTML;

alert(d); 返回  

就是一个diva标签

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

 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

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.表单事件

input系列的标签

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);