DOM基础.docx

1、DOM基础1.DOM基础DOM(Document Object Model)即文档对象模型，针对HTML和XML文档的API(应用程序接口)，DOM描绘了一个层次化的节点树。通过DOM，可以访问所有的HTML元素，连同它们所包含的文本和属性，可以对其的内容进行修改和删除，同时也可以创建新的元素。 节点的种类：测试DIV :元素节点 title=”属性节点：属性节点 测试DIV：文本节点元素节点的方法：getElementById() 获取特定ID元素的节点 getElementsByTagName() 获取相同元素的节点列表 getElementsByName() 获取相同名称的节点列表 ge

2、tAttribute() 获取特定元素节点属性的值 setAttribute() 设置特定元素节点属性的值 removeAttribute() 移除热定元素节点属性1.getElementById()方法：接受一个参数获取元素ID，如果找到相应的元素则返回该元素的HTMLDivElement对象，如果不存在，返回null。 /获取id为box的元素节点：document.getElementById(box); 如果返回null，则是执行顺序问题。 解决方法：把script调用的标签移到html末尾。 使用onload事件来处理，onload事件会在html加载完毕后再调用。 /加载html后

3、执行 window.onload = function() alert(document.getElementById(box); /object HTMLDivElement /每个节点被看成一个对象 节点属性：通过调用getElementById()发放返回的元素节点对象，拥有以下的节点属性 tagName：元素节点对象所指向的标签名称 innerHtml：元素节点中的内容 Id：元素节点的id名称 title：元素节点的title属性值 style：CSS内联样式属性值 className：CSS元素的类 IE9以下支持2.getElementsByTagName()方法：将返回一个数组

4、HTMLCollection(NodeList),这个数组保存着所有相同元素名的节点列表。 /数组包含了索引名称是li的元素节点对象Document.getElementsByTagNmae(li).item(0).innerHTML /获得第一个li元素的内容 /得到所有元素节点 document.getElementByName(*); /ie9以下的版本显示数组长度! 源于3.getElementsByName()方法：获取相同名称(name)的元素，表单元素都含有name属性，返回一个数组HTMLCollection(NodeList)。 /本身不含有name属性的元素，添加name也

5、可以获取到该元素，但ie10以下不支持4.getAttribute()方法：获取元素中某个属性的值。它和直接使用 语法(.属性)获取属性值的方法有一定区别。IE7以下不支持IE9以下支持 document.getElementById(box).getAttribute(style); /获取style值，ie7以下不支持 document.getElementById(box).onclick; /无法获取值，获取点击事件的函数 document.getElementById(box).getAttribute(onclick); /获取onclick值，ie7以下不支持5.setAttri

6、bute()方法：设置元素中某个属性和值。它需要接受两个参数：属性和值。如果属性本身已存在，那么就会被覆盖。 /设置属性和值 ie7及版本以下不支持document.getElementById(box).setAttribute(style,color:bule);/设置自定义的属性和值 ie7及版本以下不支持document.getElementById(box).setAttribute(bbb,ccc);6.removeAttribute()方法：可以移除HTML属性。/移除属性 ie6及版本以下不支持document.getElementById(box).removeAttribu

7、te(style);7.获取子元素节点：我们获取元素节点不一定必须使用document.来调用，还可以通过定义变量来获取。 var ul = document.getElementById(“ul”);var arr = ul.document.getElementsByTagName(“li”);8.DOM节点属性：DOM节点可以分为元素节点、属性节点、和文本节点，这些节点又有三个非常有用的属性，分别为：nodeName、nodeType、nodeValue。 document.getElmentById(box).nodeType; /1，元素节点/注释的nodeType = 8 node

8、Name = #comment 文档 nodeType = 99.innerHTML和nodeValue的区别： 取值，nodeValue可以获取文本节点的内容和属性节点的值。 innerHTML只能获取元素节点中的内容。 赋值，nodeValue会把包含在文本里的HTML标签按原样输出。 innerHTML可以解析内部的HTML标签。 box.childNodes0.nodeValue=abc /abc box.innerHTML=abc /abc 加粗10.innerHTML,innerText,outHTML test1test2 innerHTML: 从对象的起始位置到终止位置的全部内

9、容，包括Html标签。 /”test1test2” innerText：从起始位置到终止位置的内容，但去除Html标签。 /”test1 test2” outHTML：除了包含全部内容外，还包含对象标签本身。 /test1test2 11.DOM节点的层次关系 childNodes属性：某一个元素节点的所有子节点，其中包含元素子节点 和 文本子节点。var box = document.getElementById(box); /获取一个元素节点alert(box.childNodes.length); /获取这个元素节点的所有子节点alert(box.childNodes0); /获取第一个

10、子节点对象alert(box.childNodes0.nodeValue); /获取第一个子节点对象的值alert(box.childNodesbox.childNodes.length-1.nodeValue); /最后一个子节点对象的值 /使用childNodesn返回子节点对象，可能返回的是元素子节点和文本子节点。元素子节 点可以使用nodeName或tagName获取标签名称，而文本子节点可以使用nodeValue获取值。for(var i=0; ibox.childNodes.length; i+) If(box.childNodesi.nodeType = 1) /输出元素节点内容

11、 console.log(“元素节点内容” +box.childNodesi.innerHTML); Else if(box.childNodesi.nodeType = 3) /输出文本节点内容 console.log(“文本节点内容” +box.childNodesi.nodeValue); children属性：某一个元素节点的所有子节点，只包含元素子节点。attributes属性：当前元素节点的所有属性节点的集合数组(NamedNodeMap)。 DOM节点的层次关系存在的问题：/把空白、换行看成了文本子节点对象，解决方式： 1.把空白文本节点忽略掉 /参数接收的是所有的子节点对象，得

12、到删除空白部分后的数组 function getNodes(nodes) var arr = ; for(var i=0;inodes.length;i+) If(nodesi.nodeType=3 & /s+$/.test(nodesi.nodeValue) continue; else arr.push(nodesi); /push向数组末尾添加数据，并返回数组的长度 return arr; var arr = getNodes(obj.childNodes) alert(arr.length); 2.把空白文本删除 function getNodes(nodes) for(var i=0

13、;inodes.length;i+) If(nodesi.nodeType=3 & /s+$/.test(nodesi.nodeValue) /删除该空白文本节点，根据父节点来删除 nodesi.parentNode.removeChild(nodesi); getNodes(obj.childNodes) alert(obj.childNodes.length); /firstChild、lastChild等也会为空白，解决方式： 1.把元素节点的所有子节点中空白文本节点删除 /参数接收的是某一个元素节点对象 function getNodes(nodes) for(var i=0;inod

14、es.childNodes.length;i+) If(nodes.childNodesi.nodeType=3 & /s+$/.test(nodes.childNodesi.nodeValue) /删除该空白文本节点，根据父节点来删除 nodes.childNodesi.parentNode.removeChild(nodes.childNodesi); return nodes; alert(getNodes(obj).firstChild.nodeName);12.节点操作方式insertBefore() 方法可在已有的子节点前插入一个新的子节点语法：insertBefore(newno

15、de,node);参数：newnode 要插入的新节点。 node 指定此节点前插入节点。removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。 注意:把删除的子节点赋值给 x，这个子节点不在DOM树中，但是还存在内存中。 如果要完全删除对象，给 x 赋 null值。replaceChild() 实现子节点(对象)的替换。返回被替换对象的引用。语法：node.replaceChild(newnode,oldnew)cloneNode(true/flase) flase:不复制标签之间的内容，只复制标签 true：即复制标签又

16、复制内容/删除空白文本之后再复制第一个子节点/删除空白节点之后再删除第一个子节点/新元素插入到指定元素之后。/编写get_nextSibling函数，获得指定节点的下一个节点。 function get_nextSibling(n) var x=n.nextSibling; while (x & x.nodeType!=1) x=x.nextSibling; return x; var x=document.getElementsByTagName(li)0; document.write(x.nodeName); document.write( = ); document.write(x.i

17、nnerHTML); var y=get_nextSibling(x); if(y!=null) document.write(nextsibling: ); document.write(y.nodeName); document.write( = ); document.write(y.innerHTML); else document.write(已经是最后一个节点); /编写get_previousSibling函数，获得指定节点的上一个节点。 function get_previousSibling(n) var x=n.previousSibling; while (x & x.n

18、odeType!=1) x=x.previousSibling; return x; var x=document.getElementsByTagName(li)1; document.write(x.nodeName); document.write( = ); document.write(x.innerHTML); var y=get_previousSibling(x); if(y!=null) document.write(previousSibling: ); document.write(y.nodeName); document.write( = ); document.wr

19、ite(y.innerHTML); else document.write(已经是最后一个节点); 13.浏览器窗口可视区域大小获得浏览器窗口的尺寸(浏览器的视口，不包括工具栏和滚动条)的方法：对于IE9+、Chrome、Firefox、Opera、Safari： window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度对于Internet Explorer8765： document.documentElement.clientHeight 表示HTML文档所在窗口的当前高度 document.documentElement

20、.clientWidth 表示HTML文档所在窗口的当前宽度 或者 document.body.clientHeight document.body.clientWidth解决兼容问题： Var w= document.documentElement.clientWidth | document.body.clientWidth; var h= document.documentElement.clientHeight | document.body.clientHeight;14.网页尺寸：scrollHeight、scrollWidth 获取网页内容高度和宽度 针对IE、Opera：scr

21、ollHeight是网页内容实际高度，可以小于clientHeight。 针对NS、FF：scrollHeight 是网页内容高度，不过最小值是 clientHeight。也就是说网 页内容实际高度小于 clientHeight 时，scrollHeight 返回 clientHeight 。 浏览器兼容性：var w=document.documentElement.scrollWidth | document.body.scrollWidth; var h=document.documentElement.scrollHeight | document.body.scrollHeight;

22、15.事件触发：用户在页面上操作时(如点击按钮，鼠标滑过，鼠标点击，鼠标松开，文本框 获得焦点，失去焦点等)，就是事件触发。 事件模式：内联模式，脚本模式。 内联模式：直接在HTML标签中添加事件。内联模式调用函数，则函数不能放 到window.onload里面，否则会找不到该函数。 内联模式违反了HTML与Javascript代码层次分离的原则。 脚本模式：需要先获取到元素节点对象，再针对该节点对象添加事件。可以采用三种方式来获取节点对象：getElementById()，getElementsByTagName()，getElementsByName()。 添加事件方式一：用过匿名函数，可

23、以直接触发对应的代码 box.onclick = function() alert(nihao); ; 添加事件方式二：通过制定的函数名赋值的方式 来执行函数 box.onclick = func; funcotion func() alert(nihao); 事件处理函数：所有的事件处理函数都会有两个部分组成，on+事件名称； Javascript 可以处理的事件种类有三种：鼠标事件，键盘事件，HTML事件。 鼠标事件，页面所有元素都可以触发鼠标事件； onclick 单机鼠标按钮并在松开时触发 ondblclick 双击鼠标按钮时触发 onmousedown 鼠标还未松开时触发 onmou

24、seup 释放鼠标按钮时触发 onmouseover 鼠标移入某元素那一刻触发 onmouseout 鼠标移出某元素那一刻触发 onmousemove 鼠标指针在某个元素上移动时触发 键盘事件，在键盘上按下键时触发的事件(一般由window对象或者document对象调用)； onkeydown 按下键盘上某个键触发，如果按住不放，会重复触发。 onkeypress 按下键盘上的字符键触发，如果按住不放，会重复触发。 onkeyup 释放键盘上的某个键触发 HTML事件，跟HTML页面相关的事件； onload 当页面完全加载完后触发 onunload 当页面完全卸载完后触发 onselect

25、 当用户选择文本框(input或textarea)中的内容触发 onchange 当文本框(input或textarea)内容改变且失去焦点后触发 onfocus 当页面或元素获得焦点时触发 onblur 当页面或元素失去焦点时触发 onsubmit 当用户点击提交按钮在元素节点上触发 onrest 当用户点击重置按钮在元素节点上触发 scroll 当用户滚动带滚动条的元素时触发 事件处理的三个组成部分：触发事件的节点对象 事件处理函数 事件执行函数 document.onclick =null; 对事件的清除处理 return false; 跳出if语句 document.onclick =

26、 function() document：是触发事件的对象，表示触发事件的元素所在区域 onclick：表示一个事件处理函数 function()：匿名函数被执行的函数，用于触发事件后执行 this关键字：this表示触发事件的元素节点对象； 16.1、event对象的获取：event对象(事件对象)是在触发事件时，浏览器会通过函数把事件对象作为参数传递过来，在事件触发执行函数时一般会得到一个隐藏的参数，该参数也是放在arguments数组中。 /事件绑定的执行函数 box.onclick = function() alert(arguments.length);/得到一个隐藏参数 注意：浏览

27、器会自动分配一个参数，这个隐藏参数就是event对象(事件对象)。 /我们可以通过给函数添加一个参数获取事件对象： box.onclick = function(evt) alert(evt); /得到event事件对象的兼容方法 box.onclick = function(evt) if(evt) alert(evt: +evt); else alert(window.event: +window.event); box.onclick = function(evt) var oEvent = evt | window.event; /window可以省略 alert(oEvent); 2

28、、event对象的属性：鼠标事件时Web上面最常用的一类事件，因为鼠标是web页面最主要的外部设备，通过事件对象可以获取到鼠标按钮信息和屏幕坐标获取等。 button属性： document.onclick = function(evt) var oEvent = evt | window.event; alert(oEvent.button); /右键点击事件 window.oncontextmenu = function () console.log(右键点击); 可视区坐标及屏幕坐标：事件对象提供了两组来获取浏览器坐标的属性，一组是页面可视区坐标，另一组是屏幕区坐标。 document.onclick = function(evt) var oEvent = evt | window.event; alert(oEvent.clientX + “,”+oEvent.clientY); alert(oEvent.screenX + “,”+oEvent.screenY); 3、event对象的属性/鼠标事件(修改键) 有时，我们需要通过键盘上的某些键来配合鼠标来触发一些特殊的事件。 这些键为：Shfi