| 标题 | 整理JavaScript对DOM中各种类型的元素的常用操作 |
| 范文 | 这篇文章主要介绍了JavaScript对DOM中各种类型的元素的常用操作整理,DOM操作是JavaScript程序的一大根本任务,需要的朋友可以参考下 节点类型 nodeType 以下是一些重要的nodeType的取值： 1： 元素element 2： 属性attr 3： 文本text 8： 注释comments 9： 文档document nodeName,nodeValue 节点关系 childNodes: 每个节点都有一个childNodes属性，其中保存着一个NodeList对象 firstChild: 等同于childNodes[0] lastChild: 等同于childNodes.length-1 同时通过使用列表中每个节点的previousSibling和nextSibling属性，可以访问同一列表中的其他节点。 操作节点 appendChild() appendChild()方法用于向childNodes列表的末尾添加一个节点。添加节点后，childNodes的新增节点、父节点及以前的最后一个子节点的关系指针都会相应地得到更新。 insertBefore() insertBefore()这个方法接受两个参数：要插入的节点和作为参照的节点。 // 插入后成为最后一个子节点 returnedNode = someNode.insertBefore(newNode,null); // 插入后成为第一个节点 returnedNode = someNode.insertBefore(newNode,someNode.firstChild); // 插入到最后一个子节点前面 returnedNode = someNode.insertBefore(newNode,someNode.lastChild); repaceChild() repaceChild()接受两个参数，要插入的节点和要替换的节点 var returnedNode = someNode.replaceChild(newNode,someNode.firstChild); removeChild() 只移除而非替换节点。 var formerFirstChild = someNode.removeChild(someNode.firstChild); cloneNode() item 1 item 2 item 3 var deepList = myList.cloneNode(true); console.log(deepList.length); // 3 var shallowList = myList.cloneNode(false); console.log(shallowList.childNodes.length); //0 Document类型 Document节点具有下列特征： nodeType的值为9； nodeName的值为#document; nodeValue的值为null; parentNode的值为null; ownerDocument的值为null; 文档的子节点 var html = document.documentElement; // 取得对<html>的引用 console.log(html === document.childNodes[0]); // true console.log(html === document.firstChild); // true 文档信息 // 取得文档的标题 var originalTitle = document.title; // 设置文档标题 document.title = "New page title"; // 取得完整的url var url = document.URL; // 取得域名 var domain = document.domain; // 取得来源页面的url var referrer = document.referrer; //假设页面来自p2p.wrox.com域 document.domain = "wrox.com"; // 成功 document.domain = "nczonline.net"; // 失败 在IE7中调用document.getElementById("myElement");结果会返回<input>元素，如下所示； 最好的办法是不让表单字段的name特性与其他元素的ID相同。 <input type="text" name="myElement" value="text field"> <div id="myElement">a div</div> 特殊集合 document.anchors,包含文档中所有带name特性的a元素; document.forms, 包含文档中所有form元素，与document.getElementsByTagName("form")得到的结果相同; document.images,包含文档中所有的img元素，与document.getElementsByTagName("img")得到的结果相同; document.links，包含文档中所有带href特性的a元素; 文档写入 <html> <head> <title>document.write() Example 3</title> </head> <body> <script type="text/javascript"> document.write("<script type=\"text/javascript\" src=\"file.js\">") + "<\/script>"); </script> </body> </html> 字符串<\/script>不会被当作外部script标签的关闭标签，因而页面中也就不会出现多余的内容了。 Element类型 Element节点具有以下特征： nodeType的值为1; nodeName的值为元素的标签名; nodeValue的值为null; parentNode可能是Document或Element; 要访问元素的标签名，可以使用nodeName属性，也可以使用tagName属性； <div id="myDiv"></div> var div = document.getElementById("myDiv"); console.log(div.tagName); // DIV console.log(div.nodeName); // DIV if (element.tagName=="div") { // 不能这样比较，很容易出错 } if (element.tagName.toLowerCase =="div") { // 这样最好（适用于任何文档） } 取得特性 操作特性的DOM方法主要有三个，分别是getAttribute()、setAttribute()、removeAttribute()； 注意，传递给getAttribute()的特性名与实际的特性名相同。印象要想得到class的特性值，应该传入"class"而不是"className"。 var div = document.getElementById("myDiv"); console.log(div.getAttribute("class")); // bd 创建元素 使用document.createElement()方法可以创建新元素。 元素的子节点 在执行某项操作以前，通常都要先检查一下nodeType属性，如下面的例子所示: for (var i=0; len = element.childNodes.length; i<len; i++){ if (element.childNodes[i].nodeType ==1) { // 执行某些操作 } } Text类型 Text节点具有以下特征： nodeType的值为3； nodeName的值为"#text"; nodeValue的值为节点所包含的文本； parentNode是一个Element； 创建文本节点 可以使用document.createTextNode()创建新文本节点。 规范化文本节点 normalize() 分割文本节点 splitText() Comment类型 comment节点具有下列特征： nodeType的值为8; nodeName的值为"#comment"; nodeValue的值是注释的内容； parentNode可能是Document或Element； 不支持（没有）子几点； DOM操作技术 操作表格 // 创建 table var table = document.createElement("table"); table.border = 1; table.width = "100%"; // 创建tbody var tbody = document.createElement("tbody"); table.appendChild(tbody); // 创建第一行 tbody.insertRow(0); tbody.rows[0].insertCell(0); tbody.rows[0].cells[0].appendChild(document.createTextNode("cell 1,1")); tbody.rows[0].insertCell(1); tbody.rows[0].cells[1].appendChild(document.createTextNode("cell 2,1")); // 创建第二行 tbody.insertRow(01); tbody.rows[1].insertCell(0); tbody.rows[1].cells[0].appendChild(document.createTextNode("cell 1,2")); tbody.rows[1].insertCell(1); tbody.rows[1].cells[1].appendChild(document.createTextNode("cell 2,2")); document.body.appendChild(table); 选择符API querySelector()方法 // 取得body元素 var tbody = document.querySelector('body'); // 取得ID为"myDIV"的元素 var myDIV = document.querySelector("#myDiv"); // 取得类为"selected"的第一个元素 var selected = document.querySelector(".selected"); // 取得类为"button"的第一个图像元素 var img = document.body.querySelector("img.button"); querySelectorAll()方法 // 取得某<div>中的所有<em>元素(类似于getElementsByTagName("em")) var ems = document.getElementById("myDiv").querySelectorAll("em"); // 取得类为"selected"的所有元素 var selecteds = document.querySelectorAll(".selected"); // 取得所有<p>元素中的所有<strong>元素 var strongs = document.querySelectorAll("p strong"); HTML5 与类相关的扩充 getElementsByClassName()方法： 该方法可以通过document对象及所有HTML元素调用该方法。 // 取得所有类中包含"username"和"current"的元素。类名的先后顺序无所谓 var allCurrentUsernames = document.getElementsByClassName("username current"); // 取得ID为"myDiv"的元素中带有类名"selected"的所有元素 var selected = document.getElementById("myDiv").getElementsByClassName("selected"); 焦点管理 HTML5也添加了辅助管理DOM焦点的功能。首先就是document.activeElement属性，这个属性始终会引用DOM中当前获得了焦点的元素。 var button = document.getElementById("myButton"); button.focus(); alert(document.activeElement === button); // true 默认情况下，文档刚刚加载完成时，document.activeElement中保存的是document.body元素的引用。文档加载期间，docuemnt.activeElement的值为null。 另外就是新增了document.hasFocus()方法，这个方法用于确定文档是否获得了焦点。 var button = document.getElementById("myButton"); botton.focus(); alert(document.hasFocus()); // true |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。