1. 程式人生 > >JS--dom對象:document object model文檔對象模型

JS--dom對象:document object model文檔對象模型

ntb ole 樹形結構 得到 操作 rem ast 通過 --

dom對象:document object model文檔對象模型
文檔:超文本標記文檔 html xml
對象:提供了屬性和方法
模型:使用屬性和方法操作超文本標記性文檔
可以使用js裏面的DOM提供的對象,使用這些對象的屬性和方法,對標記性文檔進行操作
想要對標記性文檔進行操作,首先需要對標記性文檔裏面的所有內容封裝成對象
對HTML 標簽 屬性 文本內容都封裝為對象
要想對標記性文檔進行操作,解析標記性文檔
--使用DOM解析HTML過程
根據HTML的層級結構,在內存中分配一個樹形結構,需要把HTML中的每部分封裝成對象
document對象,整個文檔
write():向頁面輸出變量(值/html代碼)
getElementById("標簽裏邊的id的值");通過id得到標簽(元素)
獲得屬性值,標簽對象.屬性名稱;
設置屬性值,標簽對象=值;
getElementsByName("標簽裏邊的name的值");返回值是數組
getElementsByTagName("標簽名稱")返回值是數組
element對象:元素(標簽)對象
getAttribute("屬性名稱"):獲得屬性裏面的值 input1.getAttribute("value");
setAttribute("屬性名稱","屬性值")設置屬性裏面的值
removeAttribute("name");刪除屬性得值,但是不能刪除value裏面的值

屬性對象
getAttributeNode("屬性名稱");

文本對象
--Node節點對象,這個對象使這些對象的父對象
如果在對象裏面找不到想要的方法,這個時候到Node對象裏面去找
nodeName string 節點的名字,根據節點的類型而定義
nodeValue string 節點的值,根據節點的類型而定義
nodeType number 節點的類型常量值之一
ownerDocument Document 指向這個節點所屬的文檔
//獲取文本節點
firstChild Node 指向在childNodes列表中的第一個節點
lastChild Node 指向在childNodes列表中的最後一個節點

-childNodes NodeList 所有子節點的列表,但是瀏覽器兼容性很差
-parentNode Node 返回一個給定節點的父節點
previousSibling Node 指向前一個兄弟節點,如果這個節點就是第一個兄弟節點,那麽該值為null
nextSibling Node 指向後一個兄弟節點,如果這個節點就是最後一個兄弟節點那麽該值為null

hasChildNodes Boolean 當childNodes包含一個或多個節點時,返回true
attributes NameNodeMap 包含了代表一個元素的特性的Attr對象,僅用於Element節點
appendChild(node) Node 將node添加到childNodes的末尾
removeChild(node) Node 從ChildNodes中刪除node
replaceChild(newnode,oldnode) Node 將ChildNodes中的oldnodes替換成newnodes
insertBefore(newnode,refnode) Node 在childNodes中 的refnode之前插入newnode

Node對象屬性
nodeName
nodeType
nodeValue

<script type="text/javascript">
//獲取標簽對象
var span1 = document.getElementById("spanid");
alert(span1.nodeType);//1
alert(span1.nodeName);//SPAN
alert(span1.nodeValue);//null

//屬性
var id1 = span1.getAttributeNode("id");
alert(id1.nodeType);//2
alert(id1.nodeName);//id
alert(id1.nodeValue);//spanid

//文本
var text1 = span1.firstChild;
alert(text1.nodeType);//3
alert(text1.nodeName);//#text
alert(text1.nodeValue);//文本內容
</script>
<span id="spanid">哈哈呵呵</span>

JS--dom對象:document object model文檔對象模型