节点类型
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\");结果会返回<input>元素,如下所示;
最好的办法是不让表单字段的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
本文地址:https://www.stayed.cn/item/23795
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我