當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
[JS-DOM]核心DOM模型(Document，Element，Node)
生活随笔
收集整理的這篇文章主要介紹了
[JS-DOM]核心DOM模型(Document，Element，Node)
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
核心DOM模型：
* Document：文檔對象1. 創(chuàng)建(獲取)：在html dom模型中可以使用window對象來獲取1. window.document2. document2. 方法：1. 獲取Element對象：1. getElementById() ： 根據(jù)id屬性值獲取元素對象。id屬性值一般唯一2. getElementsByTagName()：根據(jù)元素名稱獲取元素對象們。返回值是一個數(shù)組3. getElementsByClassName():根據(jù)Class屬性值獲取元素對象們。返回值是一個數(shù)組4. getElementsByName(): 根據(jù)name屬性值獲取元素對象們。返回值是一個數(shù)組2. 創(chuàng)建其他DOM對象：createAttribute(name)createComment()createElement()createTextNode()3. 屬性* Element：元素對象1. 獲取/創(chuàng)建：通過document來獲取和創(chuàng)建2. 方法：1. removeAttribute()：刪除屬性2. setAttribute()：設(shè)置屬性* Node：節(jié)點對象，其他5個的父對象* 特點：所有dom對象都可以被認(rèn)為是一個節(jié)點* 方法：* CRUD dom樹：* appendChild()：向節(jié)點的子節(jié)點列表的結(jié)尾添加新的子節(jié)點。* removeChild() ：刪除（并返回）當(dāng)前節(jié)點的指定子節(jié)點。* replaceChild()：用新節(jié)點替換一個子節(jié)點。* 屬性：* parentNode 返回節(jié)點的父節(jié)點。示例代碼如下:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document對象</title></head> <body><div id="div1">div1</div><div id="div2">div2</div><div id="div3">div3</div><div class="cls1">div4</div><div class="cls1">div5</div><input type="text" name="username"><script>/*Document：文檔對象1. 創(chuàng)建(獲取)：在html dom模型中可以使用window對象來獲取1. window.document2. document2. 方法：1. 獲取Element對象：1. getElementById() ： 根據(jù)id屬性值獲取元素對象。id屬性值一般唯一2. getElementsByTagName()：根據(jù)元素名稱獲取元素對象們。返回值是一個數(shù)組3. getElementsByClassName():根據(jù)Class屬性值獲取元素對象們。返回值是一個數(shù)組4. getElementsByName(): 根據(jù)name屬性值獲取元素對象們。返回值是一個數(shù)組2. 創(chuàng)建其他DOM對象：createAttribute(name)createComment()createElement()createTextNode()3. 屬性*///2.根據(jù)元素名稱獲取元素對象們。返回值是一個數(shù)組var divs = document.getElementsByTagName("div");//alert(divs.length);//3.根據(jù)Class屬性值獲取元素對象們。返回值是一個數(shù)組var div_cls = document.getElementsByClassName("cls1");// alert(div_cls.length);//4.根據(jù)name屬性值獲取元素對象們。返回值是一個數(shù)組var ele_username = document.getElementsByName("username");//alert(ele_username.length);var table = document.createElement("table");alert(table);</script> </body> </html> <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Element對象</title> </head> <body><a>點我試一試</a><input type="button" id="btn_set" value="設(shè)置屬性"><input type="button" id="btn_remove" value="刪除屬性"><script>//獲取btnvar btn_set =document.getElementById("btn_set");btn_set.onclick = function(){//1.獲取a標(biāo)簽var element_a = document.getElementsByTagName("a")[0];element_a.setAttribute("href","https://www.baidu.com");}//獲取btnvar btn_remove =document.getElementById("btn_remove");btn_remove.onclick = function(){//1.獲取a標(biāo)簽var element_a = document.getElementsByTagName("a")[0];element_a.removeAttribute("href");}</script> </body> </html> <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Node對象</title><style>div{border: 1px solid red;}#div1{width: 200px;height: 200px;}#div2{width: 100px;height: 100px;}#div3{width: 100px;height: 100px;}</style></head> <body><div id="div1"><div id="div2">div2</div>div1</div><a href="javascript:void(0);" id="del">刪除子節(jié)點</a><a href="javascript:void(0);" id="add">添加子節(jié)點</a><!--<input type="button" id="del" value="刪除子節(jié)點">--> <script>//1.獲取超鏈接var element_a = document.getElementById("del");//2.綁定單擊事件element_a.onclick = function(){var div1 = document.getElementById("div1");var div2 = document.getElementById("div2");div1.removeChild(div2);}//1.獲取超鏈接var element_add = document.getElementById("add");//2.綁定單擊事件element_add.onclick = function(){var div1 = document.getElementById("div1");//給div1添加子節(jié)點//創(chuàng)建div節(jié)點var div3 = document.createElement("div");div3.setAttribute("id","div3");div1.appendChild(div3);}/*超鏈接功能：1.可以被點擊：樣式2.點擊后跳轉(zhuǎn)到href指定的url需求：保留1功能，去掉2功能實現(xiàn)：href="javascript:void(0);"*/var div2 = document.getElementById("div2");var div1 = div2.parentNode;alert(div1);</script> </body> </html>總結(jié)
以上是生活随笔為你收集整理的[JS-DOM]核心DOM模型(Document，Element，Node)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 童工管理规定（童工备案要）
- 下一篇： [JavaWeb-Bootstrap]B