欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

整理JavaScript對(duì)DOM中各種類型的元素的常用操作

 更新時(shí)間：2016年05月05日 16:02:33   作者：小渝人兒  
這篇文章主要介紹了JavaScript對(duì)DOM中各種類型的元素的常用操作整理,DOM操作是JavaScript程序的一大根本任務(wù),需要的朋友可以參考下

節(jié)點(diǎn)類型
nodeType
以下是一些重要的nodeType的取值：
1： 元素element
2： 屬性attr
3： 文本text
8： 注釋comments
9： 文檔document

nodeName,nodeValue

節(jié)點(diǎn)關(guān)系
childNodes: 每個(gè)節(jié)點(diǎn)都有一個(gè)childNodes屬性，其中保存著一個(gè)NodeList對(duì)象

firstChild: 等同于childNodes[0]

lastChild: 等同于childNodes.length-1

同時(shí)通過(guò)使用列表中每個(gè)節(jié)點(diǎn)的previousSibling和nextSibling屬性，可以訪問(wèn)同一列表中的其他節(jié)點(diǎn)。

操作節(jié)點(diǎn)
appendChild()

appendChild()方法用于向childNodes列表的末尾添加一個(gè)節(jié)點(diǎn)。添加節(jié)點(diǎn)后，childNodes的新增節(jié)點(diǎn)、父節(jié)點(diǎn)及以前的最后一個(gè)子節(jié)點(diǎn)的關(guān)系指針都會(huì)相應(yīng)地得到更新。

insertBefore()
insertBefore()這個(gè)方法接受兩個(gè)參數(shù)：要插入的節(jié)點(diǎn)和作為參照的節(jié)點(diǎn)。

// 插入后成為最后一個(gè)子節(jié)點(diǎn)
returnedNode = someNode.insertBefore(newNode,null);

// 插入后成為第一個(gè)節(jié)點(diǎn)
returnedNode = someNode.insertBefore(newNode,someNode.firstChild);

// 插入到最后一個(gè)子節(jié)點(diǎn)前面
returnedNode = someNode.insertBefore(newNode,someNode.lastChild);

repaceChild()
repaceChild()接受兩個(gè)參數(shù)，要插入的節(jié)點(diǎn)和要替換的節(jié)點(diǎn)

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

removeChild()
只移除而非替換節(jié)點(diǎn)。

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節(jié)點(diǎn)具有下列特征：

  • nodeType的值為9；
  • nodeName的值為#document;
  • nodeValue的值為null;
  • parentNode的值為null;
  • ownerDocument的值為null;

文檔的子節(jié)點(diǎn)

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

文檔信息

// 取得文檔的標(biāo)題
var originalTitle = document.title; 

// 設(shè)置文檔標(biāo)題
document.title = "New page title";

// 取得完整的url
var url = document.URL;
// 取得域名
var domain = document.domain;
// 取得來(lái)源頁(yè)面的url
var referrer = document.referrer;

//假設(shè)頁(yè)面來(lái)自p2p.wrox.com域
document.domain = "wrox.com"; // 成功
document.domain = "nczonline.net"; // 失敗

在IE7中調(diào)用document.getElementById("myElement");結(jié)果會(huì)返回<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")得到的結(jié)果相同;
  • document.images,包含文檔中所有的img元素，與document.getElementsByTagName("img")得到的結(jié)果相同;
  • document.links，包含文檔中所有帶href特性的a元素;

文檔寫(xiě)入

<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>不會(huì)被當(dāng)作外部script標(biāo)簽的關(guān)閉標(biāo)簽，因而頁(yè)面中也就不會(huì)出現(xiàn)多余的內(nèi)容了。

Element類型
Element節(jié)點(diǎn)具有以下特征：

  • nodeType的值為1;
  • nodeName的值為元素的標(biāo)簽名;
  • nodeValue的值為null;
  • parentNode可能是Document或Element;

要訪問(wèn)元素的標(biāo)簽名，可以使用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") { // 不能這樣比較，很容易出錯(cuò)
}

if (element.tagName.toLowerCase =="div") { // 這樣最好（適用于任何文檔）
}

取得特性
操作特性的DOM方法主要有三個(gè)，分別是getAttribute()、setAttribute()、removeAttribute()；
注意，傳遞給getAttribute()的特性名與實(shí)際的特性名相同。印象要想得到class的特性值，應(yīng)該傳入"class"而不是"className"。

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

創(chuàng)建元素
使用document.createElement()方法可以創(chuàng)建新元素。

元素的子節(jié)點(diǎn)
在執(zhí)行某項(xiàng)操作以前，通常都要先檢查一下nodeType屬性，如下面的例子所示:

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

Text類型
Text節(jié)點(diǎn)具有以下特征：

  • nodeType的值為3；
  • nodeName的值為"#text";
  • nodeValue的值為節(jié)點(diǎn)所包含的文本；
  • parentNode是一個(gè)Element；

創(chuàng)建文本節(jié)點(diǎn)
可以使用document.createTextNode()創(chuàng)建新文本節(jié)點(diǎn)。

規(guī)范化文本節(jié)點(diǎn)
normalize()

分割文本節(jié)點(diǎn)
splitText()

Comment類型
comment節(jié)點(diǎn)具有下列特征：

  • nodeType的值為8;
  • nodeName的值為"#comment";
  • nodeValue的值是注釋的內(nèi)容；
  • parentNode可能是Document或Element；
  • 不支持（沒(méi)有）子幾點(diǎn)；

DOM操作技術(shù)
操作表格

 // 創(chuàng)建 table
var table = document.createElement("table");
table.border = 1;
table.width = "100%";

// 創(chuàng)建tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);

// 創(chuàng)建第一行
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"));


// 創(chuàng)建第二行
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"的第一個(gè)元素
var selected = document.querySelector(".selected");

// 取得類為"button"的第一個(gè)圖像元素
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
與類相關(guān)的擴(kuò)充
getElementsByClassName()方法：
該方法可以通過(guò)document對(duì)象及所有HTML元素調(diào)用該方法。

// 取得所有類中包含"username"和"current"的元素。類名的先后順序無(wú)所謂
var allCurrentUsernames = document.getElementsByClassName("username current");

// 取得ID為"myDiv"的元素中帶有類名"selected"的所有元素
var selected = document.getElementById("myDiv").getElementsByClassName("selected");

焦點(diǎn)管理

HTML5也添加了輔助管理DOM焦點(diǎn)的功能。首先就是document.activeElement屬性，這個(gè)屬性始終會(huì)引用DOM中當(dāng)前獲得了焦點(diǎn)的元素。

var button = document.getElementById("myButton");
button.focus();
alert(document.activeElement === button); // true

默認(rèn)情況下，文檔剛剛加載完成時(shí)，document.activeElement中保存的是document.body元素的引用。文檔加載期間，docuemnt.activeElement的值為null。
另外就是新增了document.hasFocus()方法，這個(gè)方法用于確定文檔是否獲得了焦點(diǎn)。

var button = document.getElementById("myButton");
botton.focus();
alert(document.hasFocus()); // true

相關(guān)文章

最新評(píng)論