国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

《JavaScript高級程序設計》筆記:DOM(十)

Pluser / 2703人閱讀

摘要:添加節點后,的新增節點父節點及以前的最后一個子節點的關系指針都會相應地得到更新。插入后成為最后一個子節點插入后成為第一個節點插入到最后一個子節點前面接受兩個參數,要插入的節點和要替換的節點只移除而非替換節點。

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()

  • 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節點具有下列特征:
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; i
Text類型

Text節點具有以下特征:
nodeType的值為3;
nodeName的值為"#text";
nodeValue的值為節點所包含的文本;
parentNode是一個Element;

創建文本節點

可以使用document.createTextNode()創建新文本節點。

規范化文本節點

normalize()

分割文本節點

splitText()

Comment類型

comment節點具有下列特征:
nodeType的值為8;
nodeName的值為"#comment";
nodeValue的值是注釋的內容;
parentNode可能是Document或Element;
不支持(沒有)子幾點;

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);

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/85402.html

相關文章

  • 26天學通前端開發(配資料)

    摘要:網上有很多前端的學習路徑文章,大多是知識點羅列為主或是資料的匯總,數據量讓新人望而卻步。天了解一個前端框架。也可以關注微信公眾號曉舟報告,發送獲取資料,就能收到下載密碼,網盤地址在最下方,獲取教程和案例的資料。 前言 好的學習方法可以事半功倍,好的學習路徑可以指明前進方向。這篇文章不僅要寫學習路徑,還要寫學習方法,還要發資料,干貨滿滿,準備接招。 網上有很多前端的學習路徑文章,大多是知...

    blair 評論0 收藏0
  • 001-讀書筆記-JavaScript高級程序設計 JavaScript簡介

    摘要:由于計算機的國際化,組織的標準牽涉到很多其他國家,因此組織決定改名表明其國際性。規范由萬維網聯盟制定。級標準級標準是不存在的,級一般指的是最初支持的。 這篇筆記的內容對應的是《JavaScript高級程序設計(第三版)》中的第一章。 1.ECMA 和 ECMA-262 ECMA 是歐洲計算機制造商協會的縮寫,全程是 European Computer Manufacturers Ass...

    masturbator 評論0 收藏0
  • JavaScript高級程序設計筆記JavaScript簡介(一)

    摘要:實現一個完整的實現應該由下列三個不同的部分組成核心文檔對象模型瀏覽器對象模型文檔對象模型是針對但經過擴展用于的應用程序編程接口。級別級由兩個模塊組成核心和。其中,核心規定是如何映射基于的文檔結構,以便簡化對文檔中任意部分的訪問和操作。 javascript從一個簡單的輸入驗證器發展成為一門強大的編程語言,完全出乎人們的意料。 javascript實現一個完整的javascript實現應...

    Edison 評論0 收藏0
  • JavaScript高級程序設計學習筆記一(JavaScript簡介)

    摘要:在上百種語言中算是命好的一個,還有就是最近納入高考體系的。由以下三個部分構成。就是對實現該標準規定的各個方面內容的語言的描述。是針對但經過擴展的用于的應用程序編程接口。將頁面映射為由節點構成的樹狀結構。 JavaScript的歷史這里就不再贅述了,當然JavaScript的歷史還是比較有意思的。在上百種語言中JavaScript算是‘命’好的一個,還有就是最近納入高考體系的python...

    supernavy 評論0 收藏0
  • JavaScript高級程序設計》學習筆記JavaScript中的事件流和事件處理程序

    摘要:可以使用偵聽器或處理程序來預訂事件,以便事件發生時執行相應的代碼。響應某個事件的函數稱為事件處理程序或事件偵聽器。可以刪除通過級方法指定的事件處理程序。 JavaScript和HTML之間的交互是通過事件實現的。 事件:文檔或瀏覽器窗口中發生的一些特定的交互瞬間。 可以使用偵聽器(或處理程序來預訂事件),以便事件發生時執行相應的代碼。 1. 事件流 事件流:從頁面中接收事件的順序。 ...

    Rocko 評論0 收藏0

發表評論

0條評論

Pluser

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<