【javascript】dom学习笔记

 

 

Dom是文档对象模型

DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。

DOM 被分为不同的部分（核心、XML及HTML）和级别（DOM Level 1/2/3）：

Core DOM 定义了一套标准的针对任何结构化文档的对象

XML DOM定义了一套标准的针对 XML 文档的对象

HTML DOM定义了一套标准的针对 HTML 文档的对象。

 

 DOM 是这样规定的：

    整个文档是一个文档节点 　　

    每个 HTML 标签是一个元素节点 　　

    包含在 HTML 元素中的文本是文本节点 　　

    每一个 HTML 属性是一个属性节点 　　

    注释属于注释节点

 

 

 

在DOM中，HTML文档的层次结构被表示为一个树形结构。树的根节点是一个表示当前HTML文档的document对象，树的每个子节点表示HTML文档中的不同内容。

当浏览器解析完某文档文件后，每个节点并非就是一个简单的Element对象的实例，而是继承了很多东西的Element对象的扩展。

 

每个Element对象都扩展自Node对象。即使是document对象和documentElement对象也是如此，只不过他们有自己独特的属性和方法。Node对象的属性中包括一些用于识别的特征，例如nodeName、nodeValue、nodeType、parentNode、childNodes、firstChild、lastChild、previousSibling、nextSibling、attributes和ownerDocument。这些属性对于扩展自Node对象的所有DOM对象都是有效的。

===============================================

常用：

Node对象

名称 nodeName值 nodeValue 类型 nodeType

parentNode    childNodes      previousSibling   nextSibling   firstChild   lastChild

attributes属性    hasChildNodes()     hasAttributes()

appendChild()    insertBefore()     

 

Element对象

getAttribute()   setAttribute()   removeAttribute()

getElementsByTagName()

 

Document对象

Document.documentElement

createAttribute()    createElement()   createTextNode() 

====================================================

节点的类型和组成

接口	nodeType值	说明
Element	1	元素
Attr	2	属性
Text	3	文本
Comment	8	注释
Document	9	文档
DocumentFragment	11	文档片段

 

 

节点的引用

document.getElementById( 元素的id值 )  获取对元素节点的引用

document.getElementsByName(元素的name属性)  根据name属性引用节点获取一个元素的集合

document.getElementsByTagName( 元素的标签名)  根据标签引用节点获取一个元素的集合

 

        引用父节点

 

var son=document.getElementById("son");   //获取id为son的元素节点

alert(son.parentNode.id);      //弹出id为son节点的父节点的id值

        引用其直属子节点

var father=document.getElementById("father");

alert(father.firstChild.id);   //弹出id为father节点的第一个子节点的id值

alert(father.lastChild.id);    //弹出id为father节点的最后一个子节点的id值

alert(father.childNodes.length); //通过father.childNodes，可以获得所有节点的集合 .length获取长度

 

        引用相邻的节点

var son=document.getElementById("son");

alert(son.previousSibling.id);    //上一个兄弟节点

alert(son.nextSibling.id);    //下一个兄弟节点

 

节点的操作

        创建元素节点

 document.createElement("div");

 

        创建文本节点

 document.createTextNode("文本内容");

 

        添加节点

       

var newDiv=document.createElement("div");  //创建一个div元素节点

newDiv.innerHTML="新的div";                          //其包含的值为 “新的div”

document.body.appendChild(newDiv);      //  把它添加到body最后一个节点上

　　　　Node对象提供了insertBefore将新节点插入到指定元素的前面

　　　　　　parentNode. insertBefore(newNode,childNode);

　　　　　　parentNode   父节点  newNode      新节点　　childNode     插入到该节点的前面

　　　　Node对象提供了replaceChild方法来使用一个新的节点替换一个子节点

　　　　　　parentNode. replaceChild(newNode,childNode);

　　　　　　parentNode   父节点　　newNode      新节点　　childNode     要替换的节点

　　　　Node对象提供了cloneNode方法来得到Node对象的一个副本。

　　　　　　cloneNode方法接受一个布尔值参数，来标识返回的节点副本中是否包含原节点的子节点。

 

var son=document.getElementById("son");

var cloneDiv=son.cloneNode(false);  //当参数为false，表示不复制子节点，否则复制子节点。

cloneDiv.innerHTML="克隆son节点";

father.appendChild(cloneDiv);
 

 

　　　　Node对象提供了removeChild方法来删除一个子节点。

　　　　　　cloneNode方法接受一个对象参数，该参数指示所要删除的子节点。

 

 

        添加和修改节点属性

var a=document.getElementById("a");

a.setAttribute("href","www.baidu.com");   //设置属性

alert( a.getAttribute("id") )   ;    //弹出获取的属性

a.removeAttribute("href");  //删除属性

 

 

 

控制元素的样式

　　获取和设置元素的CSS类

/*CSS代码：*/
 .color{
    color:red;
}

 

       

var a=document.getElementById("a");

a.className="color";

//修改了a的属性class,使得a元素应用了color这个样式，结果该元素颜色变成红色。

 

　　获取和设置元素的CSS类样式

var a=document.getElementById("a");

a.style.color="color";

//设置了a的属性style中的color, 结果该元素颜色变成红色。

//同理，我们可以设置元素style中的任何属性。

 

===========================================

 

事件

　　事件

　　　　JavaScript脚本中的事件是指从用户载入目标页面直到该页面被关闭期间浏览器的动作，以及用户对页面的操作。

　　　　不仅包括用户的页面动作，也包括浏览器状态的改变。

　　事件处理程序

　　　　当事件发生时执行的程序，也叫事件处理器。

 

　　事件处理程序的调用方法：

       

//一：直接将事件处理程序作为节点的属性值

<input type="button" onclick="test() ">   //为input添加一个事件句柄 onclick代表点击 绑定了一个test方法   当点击input按钮的时候执行test方法

//二：设置对象属性的方法调用事件处理程序（实现结构和行为的分离）

//1、命名函数

document.getElementById(“test”).onclick=pp; //为test节点绑定调用pp方法的点击事件

//2、匿名函数

document. getElementById(“test”).onclick=function(){

}

//三：注册事件的方法（后面）

 

　　主流浏览器所使用的事件模型：

　　　　IE事件模型：由IE浏览器使用

　　　　标准事件模型：由W3C制订，由Netscape等浏览器实现

　　　　　　二者的差异：事件的传播机制

　　　　　　IE——只支持起泡形式的事件传播

　　　　　　NN——分三阶段，第一阶段是捕捉阶段，第二阶段发生在目标节点上，第三阶段为起泡阶段。

　　

　　注册事件：

　　　　标准事件模型addEventListener调用事件处理函数

　　　　　　obj.addEventListener(eventName,eventHandler,useCapture);

　　　　　　obj为目标节点对象，eventName为事件名称，如“click”“mouseover”“keydown”等，eventHandler是事件处理函数，在指定的事件发生时调用该函　　　　　　数，useCapture是一个布尔值，为true或false

　　　　　　例如：

document.getElementById("btn").addEventListener("click",pp,false);

 

　　　　IE事件模型attachEvent调用事件处理函数

　　　　　　obj. attachEvent(“on”+eventName,eventHandler);

　　　　　　obj为目标节点对象，eventName为事件名称，如“click”“mouseover”“keydown”等，eventHandler是事件处理函数.

　　　　　　例如：

document.getElementById("btn"). attachEvent ("onclick",pp);

 

 

　　注销事件：

　　　　标准 　　removeEventListener

　　　　Ie　　　　detachEvent

　　　 参数说明同上

 

 

 

　　Event对象

　　　　event对象是事件和事件处理程序的桥梁，它能将事件发生的快照内容，如事件发生的位置、触发的按键等保存到window对象的event属性中，传递给事件　　　　处理程序。

document.getElementById(" btn ").onclick= function(e){

                     var e=e||window.event;    //兼容浏览器

          }
//当btn点击的时候调用方法传进的参数就是一个event对象（e）。可以直接获取或者通过window.event获取 

 

 

　　event对象的常见属性

属性/方法名 （IE事件模型）	属性/方法名 (标准事件模型)	简要说明
altkey、ctrlkey、shiftkey	altkey、ctrlkey、shiftkey	设置为true或者false，表示事件发生时是否按下Alt、Ctrl、Shift键
button	button	发生事件事鼠标所按下的键（0表示无，1表示左键，2表示右键，4表示中键）
keyCode	keyCode	表示所按键的Unicode键盘内码
srcElement	target	表示发生事件的对象
preventDefault()	returnValue	阻止浏览器执行与事件相关的默认动作
type	type	指明发生事件的类型
x，y	x，y	光标相对于事件所在文档的水平和垂直距离（像素）
screenX，screenY	screenX，screenY	相对于屏幕的水平和垂直距离（像素）

 

 

 

 

封装的一个兼容浏览器的事件对象

var eventUtil = {　　
　　 getEvent: function(e) {　　　　
        return e || window.event;
    },
    getTarget: function(e) {　　
        return e.srcElement || e.target;
    },
    stopEvent: function(e) {　　
　　 　　e.returnValue && (e.returnValue = false, e.cancelBubble = false);
        e.preventDefault && (e.preventDefault(), e.stopPropagation());
    },
    addEvent: function(elem, evType, fn, capture) {
        var indicator = arguments.callee;
        elem.attachEvent && (indicator = function(elem, evType, fn) {
            elem.attachEvent('on' + evType, fn)
        }).apply(this, arguments);
        elem.addEventListener && (indicator = function(elem, evType, fn, capture) {
            elem.addEventListener(evType, fn, capture || false);
        }).apply(this, arguments);
        elem['on' + evType] && (indicator = function(elem, evType, fn) {
            elem['on' + evType] = function() {
                fn();
            };
        }).apply(this, arguments);
    },
    removeEvent: function(elem, evType, fn, capture) {
        var indicator = arguments.callee;
        elem.detachEvent && (indicator = function(elem, evType, fn) {
            elem.detachEvent('on' + evType, fn)
        }).apply(this, arguments)
         elem.removeEventListener && (indicator = function(elem, evType, fn, capture) {
            elem.removeEventListener(evType, fn, capture || false);
        }).apply(this, arguments);
        elem['on' + evType] && (indicator = function(elem, evType, fn) {
            elem['on' + evType] = null;
        }).apply(this, arguments);
    }
}