天天看點

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

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>

轉載于:https://www.cnblogs.com/xiqoqu/p/9058277.html

繼續閱讀