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

資訊專欄INFORMATION COLUMN

高程3總結#第10章DOM

ARGUS / 1473人閱讀

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

DOM 節點層次 Node類型

DOM1級定義了一個Node接口,該接口將由DOM中的所有節點類型實現

節點類型由在Node類型中定義的12個數值常量來表示,任何節點類型必居其一

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檢測節點類型

節點關系,保存NodeList對象,是一種數組對象,用于保存一組有序的節點,可以通過位置來訪問這些節點。

childNodes

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

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

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

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

操作節點

appendChild(),向childNodes列表的末尾添加一個節點。添加節點之后,childNodes的新曾節點、父節點以及以前的最后一個子節點的關系都會相應地得到更新

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

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

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

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

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

removeChild(),移除節點,接收一個參數,即要移除的節點。

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

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

Document類型

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

nodeType值為9

nodeName值為"#document"

nodeValue值為null

parentNode值為null

ownerDocument值為null

document對象有一些標準的Document對象所沒有的屬性,這些屬性提供了document對象所表現的網頁的一些信息

//取得文檔標題
var originalTitle = document.title;
//設置文檔標題
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類型

用于表現XML或HTML元素,提供了對元素標簽名、子節點及特性的訪問

nodeType值為1

nodeName值為元素的標簽名

nodeValue值為null

parentNode可能是Document或Element

HTML元素存在一些標準特性

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

title,有關元素的附加說明信息,一般通過工具提示條顯示出來

lang,元素內容的語言代碼,很少使用

dir,語言的方向

className,與元素的class特性對應

取得特性,設置屬性,移除屬性。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);

創建元素,createElement(),標簽名在HTML文檔中不區分大小寫,在XML文檔中,區分大小寫。

Text類型

包含的是照字面解釋的純文本的內容

nodeType值為3

nodeName值為"#text"

nodeValue值為節點所包含的文本

parentNode是一個Element

不支持子節點

操作方法

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

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

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

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

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

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

創建文本節點document.createTextNode()

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

規范化文本節點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!"

分割文本節點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值是注釋的內容

parentNode可能是Document或Element

不支持子節點

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

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

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

CDATASection類型

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

nodeType值為4

nodeName值為"#cdata-section"

nodeValue值為CDATA區域中的內容

parentNode可能是Document或Element

DocumentType類型

包含著與文檔的doctype有關的所有信息

nodeType值為10

nodeName值為doctype的名稱

nodeValue值為null

parentNode是Document

不支持子節點

DocumentFragment類型

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

nodeType值為11

nodeName值為"#document-fragement"

nodeValue值為null

parentNode值為null

Attr類型

特性是存在于元素的attribute屬性中的節點

nodeType值為2

nodeName值是特性的名稱

nodeValue值為特性的值

parentNode值為null

在HTML中不支持子節點

在XML中子節點可以是Text或EntityReference

DOM操作技術 動態腳本

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

動態樣式

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

      <