这篇文章主要介绍了 JavaScript 对 DOM 中各种类型的元素的常用操作整理, DOM 操作是 JavaScript 程序的一大根本任务, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
节点类型
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 节点具有下列特征:
文档的子节点
- 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"); 结果会返回元素,如下所示;
最好的办法是不让表单字段的 name 特性与其他元素的 ID 相同。
- <input type="text" name="myElement" value="text field">
- <div id="myElement">
- a div
- </div>
特殊集合
文档写入
- <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 节点具有以下特征:
要访问元素的标签名,可以使用 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 节点具有以下特征:
创建文本节点
可以使用 document.createTextNode() 创建新文本节点。
规范化文本节点
normalize()
分割文本节点
splitText()
Comment 类型
comment 节点具有下列特征:
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
来源: http://www.phperz.com/article/17/0227/265988.html