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

資訊專欄INFORMATION COLUMN

高程3總結(jié)#第10章DOM

ARGUS / 1549人閱讀

摘要：類型對象是的一個實例，表示整個頁面，而且，對象是對象的一個屬性，因此可以將其作為全局對象來訪問。刪除指定位置的行。創(chuàng)建創(chuàng)建創(chuàng)建第一行創(chuàng)建第二行將表格添加到文檔主體中

DOM 節(jié)點層次 Node類型

DOM1級定義了一個Node接口，該接口將由DOM中的所有節(jié)點類型實現(xiàn)

節(jié)點類型由在Node類型中定義的12個數(shù)值常量來表示，任何節(jié)點類型必居其一

Node.ELEMENT_NODE();

Node.ATTRIBUTE_NODE();

Node.TEXT_NODE();

Node.CDATA_SECTION_NODE();

Node.ENTITY_REFERENCE_NODE();

Node.ENTITY_NODE();

Node.PROCESSING_INSTRUCTION_NODE();

Node.COMMENT_NODE();

Node.DOCUMENT_NODE();

Node.DOCUMENT_TYPE_NODE();

Node.DOCUMENT_FRAGMENT_NODE();

Node.NOTATION_NODE();

使用nodeName和nodeValue檢測節(jié)點類型

節(jié)點關(guān)系，保存NodeList對象，是一種數(shù)組對象，用于保存一組有序的節(jié)點，可以通過位置來訪問這些節(jié)點。

childNodes

var firstChild=someNode.childNodes();
var secondChild=someNode.childNodes.item();
var count=someNode.childNodes.length();

parentNode，每個節(jié)點都有parentNode屬性，屬性指向文檔樹的節(jié)點，包含在childNodes列表中的所有節(jié)點都具有相同的父節(jié)點，因此它們的parentNode屬性都指向同一個節(jié)點。此外包含在childNodes列表中的每個節(jié)點相互之間都是同胞節(jié)點。

通過使用列表中每個節(jié)點的previousSibling和nextSibling屬性可以訪問同一列表中的其他節(jié)點。列表中第一個節(jié)點的previousSibling屬性值為null，而列表中最后一個節(jié)點nextSibling屬性的值同樣也為null

父節(jié)點的firstChild和lastChild屬性分別指向childNodes列表中的第一個和最后一個節(jié)點。

操作節(jié)點

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

//someNode 有多個子節(jié)點
var returnedNode = someNode.appendChild(someNode.firstChild);
alert(returnedNode == someNode.firstChild); //false
alert(returnedNode == someNode.lastChild); //true

insertBefore()，把節(jié)點放在childNodes列表中某個特定的位置上。接收兩個參數(shù)，要插入的點和作為參照的節(jié)點

//插入后成為最后一個子節(jié)點
returnedNode = someNode.insertBefore(newNode, null);
alert(newNode == someNode.lastChild); //true
//插入后成為第一個子節(jié)點
var returnedNode = someNode.insertBefore(newNode, someNode.firstChild);
alert(returnedNode == newNode); //true
alert(newNode == someNode.firstChild); //true
//插入到最后一個子節(jié)點前面
returnedNode = someNode.insertBefore(newNode, someNode.lastChild);
alert(newNode == someNode.childNodes[someNode.childNodes.length-2]); //true

replaceChild()，替換節(jié)點。接收兩個參數(shù)，要插入的節(jié)點和要替換的節(jié)點，要替換的節(jié)點將由這個方法返回并從文檔樹中移除，同時由要插入的節(jié)點占據(jù)其位置

//替換第一個子節(jié)點
var returnedNode = someNode.replaceChild(newNode, someNode.firstChild);
//替換最后一個子節(jié)點
returnedNode = someNode.replaceChild(newNode, someNode.lastChild);

removeChild()，移除節(jié)點，接收一個參數(shù)，即要移除的節(jié)點。

//移除第一個子節(jié)點
var formerFirstChild = someNode.removeChild(someNode.firstChild);
//移除最后一個子節(jié)點
var formerLastChild = someNode.removeChild(someNode.lastChild);

cloneNode()，接收一個布爾值參數(shù)，表示是否執(zhí)行深復(fù)制，在參數(shù)為true的情況下，執(zhí)行深復(fù)制，也就是復(fù)制節(jié)點及其整個子節(jié)點樹，在參數(shù)為false的情況下，執(zhí)行淺復(fù)制，即只復(fù)制節(jié)點本身。

Document類型

document對象是HTMLDocument的一個實例，表示整個HTML頁面，而且，document對象是window對象的一個屬性，因此可以將其作為全局對象來訪問。

nodeType值為9

nodeName值為"#document"

nodeValue值為null

parentNode值為null

ownerDocument值為null

document對象有一些標準的Document對象所沒有的屬性，這些屬性提供了document對象所表現(xiàn)的網(wǎng)頁的一些信息

//取得文檔標題
var originalTitle = document.title;
//設(shè)置文檔標題
document.title = "New page title";
//取得完整的 URL
var url = document.URL;
//取得域名
var domain = document.domain;
//取得來源頁面的 URL
var referrer = document.referrer;

查找元素，getElementById()、getElementByTagName()和getElementByName()

特殊集合

document.anchors，包含文檔中所有帶name特性的元素

document.applets，包含文檔中所有的元素，因為不再推薦使用元素，所以這個集合不再使用

document.forms，包含文檔中所有的

元素

document.images，包含文檔中所有的元素

document.links，包含文檔中所有帶href特性的元素

文檔寫入功能，write()、writeln()、open()和close()


  
    document.write() Example
  
  
    
The current date and time is:

Element類型

用于表現(xiàn)XML或HTML元素，提供了對元素標簽名、子節(jié)點及特性的訪問

nodeType值為1

nodeName值為元素的標簽名

nodeValue值為null

parentNode可能是Document或Element

HTML元素存在一些標準特性

id，元素在文檔中唯一的標識符

title，有關(guān)元素的附加說明信息，一般通過工具提示條顯示出來

lang，元素內(nèi)容的語言代碼，很少使用

dir，語言的方向

className，與元素的class特性對應(yīng)

取得特性，設(shè)置屬性，移除屬性。getAttribute()、setAttribute()和removeAttribute()

var div = document.getElementById("myDiv");
alert(div.getAttribute("id")); //"myDiv"
alert(div.getAttribute("class")); //"bd"
alert(div.getAttribute("title")); //"Body text"
alert(div.getAttribute("lang")); //"en"
alert(div.getAttribute("dir")); //"ltr"

div.setAttribute("id", "someOtherId");
div.setAttribute("class", "ft");
div.setAttribute("title", "Some other text");
div.setAttribute("lang","fr");
div.setAttribute("dir", "rtl");

div.removeAttribute("class");

attribute屬性

var id = element.attributes.getNamedItem("id").nodeValue;
var id = element.attributes["id"].nodeValue;
element.attributes["id"].nodeValue = "someOtherId";
var oldAttr = element.attributes.removeNamedItem("id");
element.attributes.setNamedItem(newAttr);

創(chuàng)建元素，createElement()，標簽名在HTML文檔中不區(qū)分大小寫，在XML文檔中，區(qū)分大小寫。

Text類型

包含的是照字面解釋的純文本的內(nèi)容

nodeType值為3

nodeName值為"#text"

nodeValue值為節(jié)點所包含的文本

parentNode是一個Element

不支持子節(jié)點

操作方法

appendData(text)將text添加到節(jié)點的末尾

deleteData(offset,count)從offset指定的位置開始刪除count個字符

insertData(offset,text)從offset指定的位置插入text

replaceData(offset,count,text)用text替換從offset指定的位置開始到offset+count為止處的文本

splitText(offset)從offset指定的位置將當前文本節(jié)點分成兩個文本節(jié)點

substringData(offset,count)提取從offset指定的位置開始到offset+count為止處的字符串

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

var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("Hello world!");
element.appendChild(textNode);
document.body.appendChild(element);

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

var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("Hello world!");
element.appendChild(textNode);
var anotherTextNode = document.createTextNode("Yippee!");
element.appendChild(anotherTextNode);
document.body.appendChild(element);
alert(element.childNodes.length); //2
element.normalize();
alert(element.childNodes.length); //1
alert(element.firstChild.nodeValue); // "Hello world!Yippee!"

分割文本節(jié)點splitText()

var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("Hello world!");
element.appendChild(textNode);
document.body.appendChild(element);
var newNode = element.firstChild.splitText(5);
alert(element.firstChild.nodeValue); //"Hello"
alert(newNode.nodeValue); //" world!"
alert(element.childNodes.length); //2

Comment類型

注釋在DOM中通過Comment類型來表示

nodeType值為8

nodeName值為"#comment"

nodeValue值是注釋的內(nèi)容

parentNode可能是Document或Element

不支持子節(jié)點

COmment類型與Text類型繼承自相同的基類，因此它擁有splitText()之外的所有字符串操作方法。與Text類型相似，也可以通過nodeValue或data屬性類取得注釋的內(nèi)容。

使用document.createCommet()并為其傳遞注釋文本也可以創(chuàng)建注釋節(jié)點

var comment=document.createComment("A comment")

CDATASection類型

與Comment類似，繼承自Text類型，擁有除splitText()之外的所有字符串操作方法

nodeType值為4

nodeName值為"#cdata-section"

nodeValue值為CDATA區(qū)域中的內(nèi)容

parentNode可能是Document或Element

DocumentType類型

包含著與文檔的doctype有關(guān)的所有信息

nodeType值為10

nodeName值為doctype的名稱

nodeValue值為null

parentNode是Document

不支持子節(jié)點

DocumentFragment類型

輕量級文檔，可以包含和控制節(jié)點，不會像完整的文檔那樣占用額外的資源

nodeType值為11

nodeName值為"#document-fragement"

nodeValue值為null

parentNode值為null

Attr類型

特性是存在于元素的attribute屬性中的節(jié)點

nodeType值為2

nodeName值是特性的名稱

nodeValue值為特性的值

parentNode值為null

在HTML中不支持子節(jié)點

在XML中子節(jié)點可以是Text或EntityReference

DOM操作技術(shù) 動態(tài)腳本

頁面加載時不存在，但將來的某一時刻通過修改DOM動態(tài)添加的腳本。兩種方式創(chuàng)建：插入外部文件和直接插入JavaScript代碼

動態(tài)樣式

能夠把CSS樣式包含到HTML頁面中的元素有兩個，其中元素用于包含來自外部的文件，而



<