亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

Pluser / 2754人閱讀

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

Node類型

nodeType
以下是一些重要的nodeType的取值:
1: 元素element
2: 屬性attr
3: 文本text
8: 注釋comments
9: 文檔document

nodeName,nodeValue

節(jié)點關(guān)系

childNodes: 每個節(jié)點都有一個childNodes屬性,其中保存著一個NodeList對象

firstChild: 等同于childNodes[0]

lastChild: 等同于childNodes.length-1

同時通過使用列表中每個節(jié)點的previousSibling和nextSibling屬性,可以訪問同一列表中的其他節(jié)點。

操作節(jié)點

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

insertBefore()
insertBefore()這個方法接受兩個參數(shù):要插入的節(jié)點和作為參照的節(jié)點。

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

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

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

repaceChild()
repaceChild()接受兩個參數(shù),要插入的節(jié)點和要替換的節(jié)點

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

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

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é)點具有下列特征:
nodeType的值為9;
nodeName的值為#document;
nodeValue的值為null;
parentNode的值為null;
ownerDocument的值為null;

文檔的子節(jié)點
var html = document.documentElement; // 取得對的引用
console.log(html === document.childNodes[0]); // true
console.log(html === document.firstChild); // true
文檔信息
// 取得文檔的標題
var originalTitle = document.title; 

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

// 取得完整的url
var url = document.URL;
// 取得域名
var domain = document.domain;
// 取得來源頁面的url
var referrer = document.referrer;

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

在IE7中調(diào)用document.getElementById("myElement");結(jié)果會返回元素,如下所示;
最好的辦法是不讓表單字段的name特性與其他元素的ID相同。


a div
特殊集合

document.anchors,包含文檔中所有帶name特性的a元素;
document.forms, 包含文檔中所有form元素,與document.getElementsByTagName("form")得到的結(jié)果相同;
document.images,包含文檔中所有的img元素,與document.getElementsByTagName("img")得到的結(jié)果相同;
document.links,包含文檔中所有帶href特性的a元素;

文檔寫入


      document.write() Example 3


     ");
     

字符串不會被當作外部script標簽的關(guān)閉標簽,因而頁面中也就不會出現(xiàn)多余的內(nèi)容了。

Element類型

Element節(jié)點具有以下特征:
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的特性值,應(yīng)該傳入"class"而不是"className"。

var div = document.getElementById("myDiv");
console.log(div.getAttribute("class")); // bd
創(chuàng)建元素

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

元素的子節(jié)點

在執(zhí)行某項操作以前,通常都要先檢查一下nodeType屬性,如下面的例子所示:

for (var i=0; len = element.childNodes.length; i
Text類型

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

創(chuàng)建文本節(jié)點

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

規(guī)范化文本節(jié)點

normalize()

分割文本節(jié)點

splitText()

Comment類型

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

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

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://www.ezyhdfw.cn/yun/85402.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

    Rocko 評論0 收藏0

發(fā)表評論

0條評論

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