当前位置：首页 > 资讯 > 技术文档

整理JavaScript对DOM中各种类型的元素的常用操作

时间：2021-03-17 01:38 编辑：来源：阅读：
扫一扫，手机访问

摘要：整理JavaScript对DOM中各种类型的元素的常用操作

[b]节点类型 [/b][b]nodeType [/b]以下是一些重要的nodeType的取值： 1：元素element 2：属性attr 3：文本text 8：注释comments 9：文档document nodeName,nodeValue [b]节点关系 [/b]childNodes: 每个节点都有一个childNodes属性，其中保存着一个NodeList对象 firstChild: 等同于childNodes[0] lastChild: 等同于childNodes.length-1 同时通过使用列表中每个节点的previousSibling和nextSibling属性，可以访问同一列表中的其他节点。 [b]操作节点 [/b][b]appendChild()[/b] appendChild()方法用于向childNodes列表的末尾添加一个节点。添加节点后，childNodes的新增节点、父节点及以前的最后一个子节点的关系指针都会相应地得到更新。 [b]insertBefore() [/b]insertBefore()这个方法接受两个参数：要插入的节点和作为参照的节点。

// 插入后成为最后一个子节点
returnedNode = someNode.insertBefore(newNode,null);

// 插入后成为第一个节点
returnedNode = someNode.insertBefore(newNode,someNode.firstChild);

// 插入到最后一个子节点前面
returnedNode = someNode.insertBefore(newNode,someNode.lastChild);

[b]repaceChild() [/b]repaceChild()接受两个参数，要插入的节点和要替换的节点

var returnedNode = someNode.replaceChild(newNode,someNode.firstChild);

[b]removeChild() [/b]只移除而非替换节点。

var formerFirstChild = someNode.removeChild(someNode.firstChild);

[b]cloneNode()[/b] 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

[b]Document类型 [/b] [b]Document节点具有下列特征： [/b] [list] [*]nodeType的值为9；[/*] [*]nodeName的值为#document;[/*] [*]nodeValue的值为null;[/*] [*]parentNode的值为null;[/*] [*]ownerDocument的值为null;[/*] [/list] [b]文档的子节点 [/b]

var html = document.documentElement; // 取得对<html>的引用
console.log(html === document.childNodes[0]); // true
console.log(html === document.firstChild); // true

[b]文档信息 [/b]

// 取得文档的标题
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>

[b]特殊集合 [/b] [list] [*]document.anchors,包含文档中所有带name特性的a元素;[/*] [*]document.forms, 包含文档中所有form元素，与document.getElementsByTagName("form")得到的结果相同;[/*] [*]document.images,包含文档中所有的img元素，与document.getElementsByTagName("img")得到的结果相同;[/*] [*]document.links，包含文档中所有带href特性的a元素;[/*] [/list] [b]文档写入 [/b]

<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标签的关闭标签，因而页面中也就不会出现多余的内容了。 [b]Element类型 [/b]Element节点具有以下特征： [list] [*]nodeType的值为1;[/*] [*]nodeName的值为元素的标签名;[/*] [*]nodeValue的值为null;[/*] [*]parentNode可能是Document或Element;[/*] [/list] 要访问元素的标签名，可以使用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") { // 这样最好（适用于任何文档）
}

[b]取得特性 [/b]操作特性的DOM方法主要有三个，分别是getAttribute()、setAttribute()、removeAttribute()；注意，传递给getAttribute()的特性名与实际的特性名相同。印象要想得到class的特性值，应该传入"class"而不是"className"。

var div = document.getElementById("myDiv");
console.log(div.getAttribute("class")); // bd

[b]创建元素 [/b]使用document.createElement()方法可以创建新元素。 [b]元素的子节点 [/b]在执行某项操作以前，通常都要先检查一下nodeType属性，如下面的例子所示:

for (var i=0; len = element.childNodes.length; i<len; i++){
  if (element.childNodes[i].nodeType ==1) {
    // 执行某些操作
  }
}

[b]Text类型 [/b]Text节点具有以下特征： [list] [*]nodeType的值为3；[/*] [*]nodeName的值为"#text";[/*] [*]nodeValue的值为节点所包含的文本；[/*] [*]parentNode是一个Element；[/*] [/list] [b]创建文本节点 [/b]可以使用document.createTextNode()创建新文本节点。 [b]规范化文本节点 [/b]normalize() [b]分割文本节点 [/b]splitText() [b]Comment类型 [/b]comment节点具有下列特征： [list] [*]nodeType的值为8;[/*] [*]nodeName的值为"#comment";[/*] [*]nodeValue的值是注释的内容；[/*] [*]parentNode可能是Document或Element；[/*] [*]不支持（没有）子几点；[/*] [/list] [b]DOM操作技术 [/b][b]操作表格 [/b]

 // 创建 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);

[b]选择符API [/b][b]querySelector()方法 [/b]

// 取得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");

[b]querySelectorAll()方法 [/b]

// 取得某<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");

[b]HTML5 [/b][b]与类相关的扩充 [/b]getElementsByClassName()方法：该方法可以通过document对象及所有HTML元素调用该方法。

// 取得所有类中包含"username"和"current"的元素。类名的先后顺序无所谓
var allCurrentUsernames = document.getElementsByClassName("username current");

// 取得ID为"myDiv"的元素中带有类名"selected"的所有元素
var selected = document.getElementById("myDiv").getElementsByClassName("selected");

[b]焦点管理[/b] 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

全部评论(0)

上一篇：Javascript中常见的校验如域名、手机、邮箱等等
下一篇：JavaScript中的prototype和constructor简明总结

资讯排行榜
更多>>