《深入解读JavaScript中BOM和DOM.pdf》由会员分享，可在线阅读，更多相关《深入解读JavaScript中BOM和DOM.pdf（10页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、深入解读 JavaScript 中 BOM 和 DOMBOM 定义了 JavaScript 可以进行操作的浏览器的各个功能部件的接口，提供访问文档 各个功能部件(如窗口本身、屏幕功能部件、浏览历史记录等)的途径以及操作方法。遗憾的是，BOM 只是 JavaScript 脚本实现的一部分，没有任何相关的标准，每种浏览 器都有自己的 BOM 实现，这可以说是 BOM 的软肋所在通常情况下浏览器特定的扩展都被看作 BOM 的部分，主要包括：关闭、移动浏览器及调整浏览器窗口大小；弹出新的浏览器窗口；提供浏览器详细信息的定位对象；提供载入到浏览器窗口的文档详细信息的定位对象；提供用户屏幕分辨率详细信息的
2、屏幕对象；提供对 cookie 的支持；加入 ActiveXObject 类扩展 BOM 通过 JavaScript 实例化 ActiveX 对象。JavaScriptBOM 有 一些事实上的标准，如窗口对象、导航对象等，但每种浏览器都为这些对象定义或扩展了属性及方法。Docume nt Object Model，这个就是标准了，由著名的前最高的级别是 level 3，不过 3 还没有彻底完成。目前主流的浏览器都可以支持到(仅仅是支持到哦，并不是完全遵守的)level 2，对w3c 制定，目html，也就是 html4.x，目前最高的是 4.01，后来 w3c 向把 html 统一向 xml
3、靠拢，于是就 有了xhtml1.0，再后来，w3c 想搞一个 xhtml2.0，结果进度缓慢，加之各大厂商又不看好，于是就有了html5.01、创建节点1.2.createElement():var a=document.createElement(“p”);它创建的是一个元素节点，所以nodeType 等于 1,a.nodeName 将返回 p。注意；createElement()方法创建出来的新元素节点不会被自动添加到文档里，既然没 添加到文档里，说明它还是一个游离的状态。所以它也没有添加到文档里，可以使用appendChild()或者 insertBefore()法。当然我们在前面的例子
4、中，自己写了一个3.4.var a=document.createElement(“p”);document.body.appendChild(a);nodeParent 属性。如果想把它方法或者 replaceChild()方方法，比如：in sertAfter()注意：appendChild()默认是添加到文档的最后。也就是 lastChild 子节点。如果想添加到某个地方，可以使用 in sertBefore()。如果想在元素插入之前给元素添加属性。可以 这么做：5.6.7.8.9.var a=document.createElement(a.setAttribute(“p”);“tit
5、le”，”my demO);document.body.appendChild(a);createTextNode():var b=document.createTe xtNode(“my demo);它创建的是一个文本节点，所以nodeType 等于 3。b.nodeName 将返回#text;跟createElement()样，用 createTextNode()创建的节点也不会自动添加到文档里。需要使 用appendChild()或者 insertBefore()方法或者 replaceChild()方法。它经常与 createEleme nt()配合使用，知道为什么吗？(一个元素节点，
6、一个文本节点。)10.11.12.13.var mes=document.createText Node(“hellovar container=document.createElement(“p”);container.appendChild(mes);document.body.appendChild(container);world”);2、复制节点cion eNode(boolea n)14.15.16.17.18.19.var mes=document.createTextNode(hello world);var container=document.createElement(p
7、);container.appendChild(mes);document.body.appendChild(container);var newpara=container.cloneNode(true);/truedocument.body.appendChild(newpara);和 false的区另 U注意:true 的话：是 aaaa 克隆。false:只克隆，不克隆里面的文本。可以自己写个例子，然后用firebug 看看。克隆后的新节点，和 createTextNode()样 不会被自动插入到文档 appe ndChild();另外还有一个注意：如果克隆后，id 样，不要忘记用se
8、tAttribute(“id”,“another_id“)；改变新的节点的3、插入节点ID。即 pendChild():1.2.3.4.var container=document.createElement(p);var t=document.createTextNode(cssrain);container.appendChild(t);document.body.appendChild(container);它经常跟 createElement()和 createTextNode(),cloneNode()配合使用。另外appe ndChild()不仅可以用来追加新的元素，也可以你挪动文
9、档中现有的元素。看下面的例子：5.6.7.8.9.10.11.12.13.14.15.16.17.18.msg content aaaaaaaavar mes=document.getElementById(msg);var container=document.getElementById(content)container.appendChild(mes);/发现 msg 放至 U content后面去了。msg aaaaaaaav/p第二个参数是可选，如果第二个参数不写，将默认添加到文档的最后，相当于appendChild();我们看看 insertBefore()19.20.21.22
10、.23.1111 msg test v/div222 aaaaaaaa 怎么使用:24.25.26.27.28.29.30.varvarvarmsg=document.getElementById(msg);aaa=document.getElementById(aaa);test=document.getElementById(cssrian);test.insertBefore(msg,aaa);31./我们发现 ID 为 msg 的插入到了 aaa 的前面Js 内部处理方式跟 appendChild()相似。4、删除节点removeChild():32.33.34.35.36.37.38
11、.39.40.41.42.43.div id=cssraina b c var msg=document.getElementByld(cssrain);var b=document.getElementById(b);msg.removeChild(b);如果不知道要删除的节点的父节点是什么？可以使用parentNode 属性。比如：44.45.46.47.48.49.50.51.52.53.54.55.div id=cssraina b c var b=document.getElementById(b);var c=b.parentNode;c.removeChild(b);注意：你如果
12、想把某个节点从一处移动到另一个地方，不必使用removeChild()。可以使用前面的 appendChild()和 insertBefore(),他们都会自动先删除节点，然后移动到你 指定的地方。5、替换节点56.Element.repalceChild(newNode,oldNode)57.58.59.60.61.62.63.64.65.66.67.68.69.70.div id=cssraina b c var cssrain=document.getElementByld(cssrain);var msg=document.getElementById(b);var para=docu
13、ment.createElement(p);cssrain.replaceChild(para,msg);6、设置/获取属性节点1.2.2.var a=document.createElement(“p”);a.setAttribute(“title”，”my demo);setAttribute();设置3.5.4.5.var a=document.getElementByld(“cssrain”);var b=a.getAttribute(“title”);获取的时候，如果属性不存在，则返回空，注意 ie 和 ff 返回不同，可以看我以前的例子。返回虽然不同，但是可以用一个方法来判断：if
14、(a.getAttribute(“title”)7.查找节点getEleme ntByld();返回一个对象，对象拥有n odeName,no deType,pare ntNode,ChildNodes等属性。getElementsByTagName():查找标签名的所有元素。返回一个集合，可以用循环取出每个对 象，对象拥有 n odeName,no deType,pare ntNode,ChildNodes8.9.10.11.var ps=document.get ElementsByTagName(p”);for(var i=0;i ps.lengthpsi.setAttribute(;i
15、+)等属性。例子：“title”，”hello”)；/也可以使用:ps.item(i).setAttribute(title,hello);12.14.15.div16.17.18.divid=a aid=b bc19.20.21.22.23.24.25.26.var ps=document.getElementByld(cssrain)if(ps.hasChildNodes)alert(ps.childNodes.length);8、DOM 属性我们常用的 3 中类型：no deType=1:元素节点nodeType=2:属性节点no deType=3:文本节点如果想记住的话，上面的顺序我们
16、可以看做是从前到后。比如：test从前往后读：你会发现先是元素节点，然后是属性节点，nodeType 分别代表什么类型了。nodeType 属性经最后是文本节点，这样你就很容易记住了常跟 if 配合使用，以确保不会在错误的节点类型上执行错误的操作。比如：27.28.function cs_demo(mynode)if(mynode.nodeType=1)29.mynode.setAttribute(title,demo);30.31.代码解释：先检查 mynode 的 nodeType 属性，以确保它所代表的节点确实是一个元素节 点。和 no deName 属性一样，他也是只读属性，不能进行设
17、置32.33.34.35.36.aaaaaaaaaaaaaaaavar c=document.getElementByld(c);alert(c.nodeValue);/返回 nullnodeValue 是一个可以读、写的属性。37.38.39.40.41.42.43.aaaaaaaaaaaaaaaavSCRIPT LANGUAGE=JavaScript var c=document.getElementByld(c);c.nodeValue=dddddddddddd;/alert(c.firstChild.nodeValue)/c.firstChild.nodeValue但它不能设置元素节点
18、的值。看下面的例子:不能设置元素节点包括属性节点和文本节点=test/能设置当然我们为了确保能正确运行：可以加一段代码:44.45.46.47.48.49.50.51.52.aaaaaaaaaaaaaaaa var c=document.getElementByld(c);c.nodeValue=dddddddddddd;/alert(c.firstChild.nodeValue)if(c.firstChild.nodeType=3)/判断是不是 文本节点=test/能设置不能设置c.firstChild.nodeValuen odeValue 般只用来设置文本节点的值。如果要刷新属性节点的值
19、，一般使用setAttribute().childNodes属性：返回一个数组，数组由元素节点的子节点构成。由于childNodes 属性永远返回一文本节点和属性节点都不可能再包含任何子节点，所以他们的个空数组。可以使用 hasChildNodes 方法，它用来判断某个元素有没有子节点。或者(container.childNodes.length 1)if；childNodes 也是一个只读属性。如果要增加节点，删除节点可以使用removeChild();操作可以使用 appendChild()或者 insertBefore()后，childNodes 属性会自动刷新。firstChild 属
20、性由于文本节点和属性节点都不可能再包含任何子节点，所以他们的远返回一个空数组。如果没有子节点，将返回于 node.childNodes0;firstChildlastChild 属性n ull;node.firstChildfirstChild 属性永等价属性是一个只读属性。由于文本节点和属性节点都不可能再包含任何子节点，所以他们的 lastChild 属性永远 返回一个空数组。如果没有子节点，将返回 null;node.lastChild 等价 于node.childNodes node.childNodes.length-1 ;lastChildnextSibling 属性属性是一个只读属
21、性。返回目标节点的下一个兄弟节点。如果目标节点后面没有同属于一个父节点的节点，nextSibling 将返回 null；nextSibling 属性是一个只读属性。previousSibling 属性返回目标节点的前一个兄弟节点。如果目标节点前面没有同属于一个父节点的节点，previousSibling 将返回 null；previousSibling 属性是一个只读属性。parentNode 属性注：parentNode 属性返回的节点永远是一个元素节点，因为只有元素节点才有可能有 子节点。当然有个例外document 节点，他没有父节点。所以 document 节点的 parentNode 属性将返回 null；parentNode 属性是一个只读属性