摘要:添加節點后,的新增節點父節點及以前的最后一個子節點的關系指針都會相應地得到更新。插入后成為最后一個子節點插入后成為第一個節點插入到最后一個子節點前面接受兩個參數,要插入的節點和要替換的節點只移除而非替換節點。
Node類型
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()
var deepList = myList.cloneNode(true); console.log(deepList.length); // 3 var shallowList = myList.cloneNode(false); console.log(shallowList.childNodes.length); //0Document類型
Document節點具有下列特征:
nodeType的值為9;
nodeName的值為#document;
nodeValue的值為null;
parentNode的值為null;
ownerDocument的值為null;
var html = document.documentElement; // 取得對的引用 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相同。
特殊集合a div
document.anchors,包含文檔中所有帶name特性的a元素;
document.forms, 包含文檔中所有form元素,與document.getElementsByTagName("form")得到的結果相同;
document.images,包含文檔中所有的img元素,與document.getElementsByTagName("img")得到的結果相同;
document.links,包含文檔中所有帶href特性的a元素;
document.write() Example 3 ");
字符串不會被當作外部script標簽的關閉標簽,因而頁面中也就不會出現多余的內容了。
Element類型Element節點具有以下特征:
nodeType的值為1;
nodeName的值為元素的標簽名;
nodeValue的值為null;
parentNode可能是Document或Element;
要訪問元素的標簽名,可以使用nodeName屬性,也可以使用tagName屬性;
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; iText類型 Text節點具有以下特征:
創建文本節點
nodeType的值為3;
nodeName的值為"#text";
nodeValue的值為節點所包含的文本;
parentNode是一個Element;可以使用document.createTextNode()創建新文本節點。
規范化文本節點normalize()
分割文本節點splitText()
Comment類型comment節點具有下列特征:
DOM操作技術 操作表格
nodeType的值為8;
nodeName的值為"#comment";
nodeValue的值是注釋的內容;
parentNode可能是Document或Element;
不支持(沒有)子幾點;// 創建 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);
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/85402.html
摘要:網上有很多前端的學習路徑文章,大多是知識點羅列為主或是資料的匯總,數據量讓新人望而卻步。天了解一個前端框架。也可以關注微信公眾號曉舟報告,發送獲取資料,就能收到下載密碼,網盤地址在最下方,獲取教程和案例的資料。 前言 好的學習方法可以事半功倍,好的學習路徑可以指明前進方向。這篇文章不僅要寫學習路徑,還要寫學習方法,還要發資料,干貨滿滿,準備接招。 網上有很多前端的學習路徑文章,大多是知...
摘要:由于計算機的國際化,組織的標準牽涉到很多其他國家,因此組織決定改名表明其國際性。規范由萬維網聯盟制定。級標準級標準是不存在的,級一般指的是最初支持的。 這篇筆記的內容對應的是《JavaScript高級程序設計(第三版)》中的第一章。 1.ECMA 和 ECMA-262 ECMA 是歐洲計算機制造商協會的縮寫,全程是 European Computer Manufacturers Ass...
摘要:實現一個完整的實現應該由下列三個不同的部分組成核心文檔對象模型瀏覽器對象模型文檔對象模型是針對但經過擴展用于的應用程序編程接口。級別級由兩個模塊組成核心和。其中,核心規定是如何映射基于的文檔結構,以便簡化對文檔中任意部分的訪問和操作。 javascript從一個簡單的輸入驗證器發展成為一門強大的編程語言,完全出乎人們的意料。 javascript實現一個完整的javascript實現應...
摘要:在上百種語言中算是命好的一個,還有就是最近納入高考體系的。由以下三個部分構成。就是對實現該標準規定的各個方面內容的語言的描述。是針對但經過擴展的用于的應用程序編程接口。將頁面映射為由節點構成的樹狀結構。 JavaScript的歷史這里就不再贅述了,當然JavaScript的歷史還是比較有意思的。在上百種語言中JavaScript算是‘命’好的一個,還有就是最近納入高考體系的python...
摘要:可以使用偵聽器或處理程序來預訂事件,以便事件發生時執行相應的代碼。響應某個事件的函數稱為事件處理程序或事件偵聽器。可以刪除通過級方法指定的事件處理程序。 JavaScript和HTML之間的交互是通過事件實現的。 事件:文檔或瀏覽器窗口中發生的一些特定的交互瞬間。 可以使用偵聽器(或處理程序來預訂事件),以便事件發生時執行相應的代碼。 1. 事件流 事件流:從頁面中接收事件的順序。 ...
閱讀 1873·2021-11-15 11:39
閱讀 1081·2020-12-03 17:06
閱讀 737·2019-12-27 11:42
閱讀 3274·2019-08-30 13:59
閱讀 1464·2019-08-26 13:22
閱讀 3288·2019-08-26 12:15
閱讀 2475·2019-08-26 10:22
閱讀 1564·2019-08-23 18:40